From b712f906bc8f94888b660d4326ceeb7b0a424a02 Mon Sep 17 00:00:00 2001
From: Claudius Weinberger <claudius@arangodb.com>
Date: Sat, 1 Mar 2014 22:04:48 +0100
Subject: [PATCH] some UI changes

---
 .../js/templates/showCluster.ejs              | 13 +++++---
 .../js/views/showClusterView.js               |  6 ++--
 js/apps/system/aardvark/frontend/img/cpu.svg  |  1 +
 js/apps/system/aardvark/frontend/img/ram.svg  |  1 +
 .../system/aardvark/frontend/img/requests.svg |  1 +
 .../js/templates/statisticBarView.ejs         | 15 ++++-----
 .../frontend/js/views/dashboardView.js        | 31 +++++++++++++-----
 .../frontend/js/views/statisticBarView.js     | 29 +++++++++++++++++
 .../frontend/scss/_dashboardHttpGroup.scss    | 10 +++---
 .../aardvark/frontend/scss/_statMenu.scss     |  0
 .../aardvark/frontend/scss/_statisticBar.scss | 31 ++++++++++++++++++
 .../aardvark/frontend/scss/generated.css      | 32 ++++++++++++++++---
 .../system/aardvark/frontend/scss/style.scss  |  2 +-
 13 files changed, 139 insertions(+), 33 deletions(-)
 create mode 100644 js/apps/system/aardvark/frontend/img/cpu.svg
 create mode 100644 js/apps/system/aardvark/frontend/img/ram.svg
 create mode 100644 js/apps/system/aardvark/frontend/img/requests.svg
 delete mode 100644 js/apps/system/aardvark/frontend/scss/_statMenu.scss
 create mode 100644 js/apps/system/aardvark/frontend/scss/_statisticBar.scss

diff --git a/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs b/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs
index 8d5cedbd89..0a3064ef62 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs
+++ b/js/apps/system/aardvark/clusterFrontend/js/templates/showCluster.ejs
@@ -93,9 +93,14 @@
   <a class="arangoHeader">Cluster Statistics</a>
 </div>
 <div class="resizecontainer">
-	<div id="clusterGraphs" class="dashboardChart">
-		<div>Virtual Memory Size</div>
-	</div>
-	<div id="lineGraph" class="dashboardChart"></div>
+	<div class="dashboardChart">
+		<div id="clusterGraphs" class="innerDashboardChart">
+      <div>Virtual Memory Size</div>
+	  </div>
+  </div>
+	<div class="dashboardChart">
+		<div id="lineGraph" class="innerDashboardChart">
+	  </div>
+  </div>
 </div>
 </script>
diff --git a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
index 582f7d5918..01526465d2 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
+++ b/js/apps/system/aardvark/clusterFrontend/js/views/showClusterView.js
@@ -166,7 +166,7 @@
         var pieData = [];
         var self = this;
         this.data.forEach(function(m) {
-            pieData.push({key: m.get("name"), value :m.get("system").virtualSize,
+            pieData.push({key: m.get("name"), value :m.get("system").residentSize,
                     time: self.serverTime});
         });
         return pieData;
@@ -273,8 +273,8 @@
     },
 
     renderPieChart: function(dataset) {
-        var w = 500;
-        var h = 250;
+        var w = 150;
+        var h = 150;
         var radius = Math.min(w, h) / 2; //change 2 to 1.4. It's hilarious.
         var color = d3.scale.category20();
 
diff --git a/js/apps/system/aardvark/frontend/img/cpu.svg b/js/apps/system/aardvark/frontend/img/cpu.svg
new file mode 100644
index 0000000000..480871b985
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/img/cpu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg enable-background="new 0 0 512 512" x="0px" y="0px" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="stat_cpu2" d="M336,359.5c0,4.693-3.806,8.5-8.5,8.5h-143c-4.694,0-8.5-3.807-8.5-8.5v-127c0-4.694,3.806-8.5,8.5-8.5h143 c4.694,0,8.5,3.806,8.5,8.5V359.5z M448,148.672v294.656c0,20.25-16.422,36.672-36.672,36.672H100.672 C80.422,480,64,463.578,64,443.328V148.672C64,128.422,80.422,112,100.672,112h310.656C431.578,112,448,128.422,448,148.672z M93.602,160c0,10.172,8.234,18.406,18.398,18.406s18.398-8.234,18.398-18.406s-8.234-18.406-18.398-18.406 S93.602,149.828,93.602,160z M146.344,443.016l-45.367-45.375c-0.828-0.828-2.086-1.078-3.18-0.625 c-1.086,0.453-1.797,1.517-1.797,2.688v45.391c0,1.609,1.305,2.906,2.914,2.906h45.367c1.18,0,2.25-0.719,2.695-1.797 C147.43,445.109,147.18,443.859,146.344,443.016z M368,208c0-8.844-7.164-16-16-16H160c-8.836,0-16,7.156-16,16v176 c0,8.844,7.164,16,16,16h192c8.836,0,16-7.156,16-16V208z M418.398,432c0-10.172-8.234-18.406-18.398-18.406 s-18.398,8.234-18.398,18.406s8.234,18.406,18.398,18.406S418.398,442.172,418.398,432z M418.398,160 c0-10.172-8.234-18.406-18.398-18.406s-18.398,8.234-18.398,18.406s8.234,18.406,18.398,18.406S418.398,170.172,418.398,160z"/></svg>
\ No newline at end of file
diff --git a/js/apps/system/aardvark/frontend/img/ram.svg b/js/apps/system/aardvark/frontend/img/ram.svg
new file mode 100644
index 0000000000..157035646e
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/img/ram.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M472,344c0-13.266,10.75-24,24-24v-52.656c0-15.11-12.242-27.344-27.336-27.344H43.336   C28.242,240,16,252.234,16,267.344V320c13.25,0,24,10.734,24,24s-10.75,24-24,24v84.656C16,467.766,28.242,480,43.336,480H80   v-27.672c0-2.391,1.938-4.328,4.328-4.328h7.344c2.391,0,4.328,1.938,4.328,4.328V480h32v-27.672c0-2.391,1.938-4.328,4.328-4.328   h7.344c2.391,0,4.328,1.938,4.328,4.328V480h32v-27.672c0-2.391,1.938-4.328,4.328-4.328h7.344c2.391,0,4.328,1.938,4.328,4.328   V480h32v-27.672c0-2.391,1.938-4.328,4.328-4.328h7.344c2.391,0,4.328,1.938,4.328,4.328V480h32v-27.672   c0-2.391,1.938-4.328,4.328-4.328h7.344c2.391,0,4.328,1.938,4.328,4.328V480h32v-27.672c0-2.391,1.938-4.328,4.328-4.328h7.344   c2.391,0,4.328,1.938,4.328,4.328V480h32v-27.672c0-2.391,1.938-4.328,4.328-4.328h7.344c2.391,0,4.328,1.938,4.328,4.328V480h32   v-27.672c0-2.391,1.938-4.328,4.328-4.328h7.344c2.391,0,4.328,1.938,4.328,4.328V480h36.664C483.758,480,496,467.766,496,452.656   V368C482.75,368,472,357.266,472,344z M160,395.219c0,2.642-2.141,4.781-4.781,4.781h-54.438C98.14,400,96,397.859,96,395.219   v-86.438c0-2.641,2.141-4.781,4.781-4.781h54.438c2.641,0,4.781,2.141,4.781,4.781V395.219z M288,395.219   c0,2.642-2.141,4.781-4.781,4.781h-54.438c-2.641,0-4.781-2.141-4.781-4.781v-86.438c0-2.641,2.141-4.781,4.781-4.781h54.438   c2.641,0,4.781,2.141,4.781,4.781V395.219z M416,395.219c0,2.642-2.141,4.781-4.781,4.781h-54.438   c-2.642,0-4.781-2.141-4.781-4.781v-86.438c0-2.641,2.141-4.781,4.781-4.781h54.438c2.642,0,4.781,2.141,4.781,4.781V395.219z" fill="#4D4D4D"/></g></svg>
\ No newline at end of file
diff --git a/js/apps/system/aardvark/frontend/img/requests.svg b/js/apps/system/aardvark/frontend/img/requests.svg
new file mode 100644
index 0000000000..7e2ac88485
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/img/requests.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M272,296c0,4.422-3.578,8-8,8s-8-3.578-8-8s3.578-8,8-8S272,291.578,272,296z M264,320   c-4.422,0-8,3.578-8,8s3.578,8,8,8s8-3.578,8-8S268.422,320,264,320z M259.227,266.109c1.228,4.897,8.344,4.633,9.642-0.383   c4.758-18.461,18.547-34.109,38.453-42.711c9.655-4.164,24.414-10.641,34.305-32.797c-64.444,11.453-85.172-15.141-160.078-13.734   c9.188,33.477,27.742,41.609,39.164,46.539C240.734,231.688,254.57,247.484,259.227,266.109z M432,455.984c0,13.25-10.742,24-24,24   H120c-13.258,0-24-10.75-24-24s10.742-24,24-24h8c0-76.742,26.203-120.648,73.75-139.086c14.805-5.758,15.133-19.234-0.086-25.813   C152.797,246,128,204.742,128,128h-8c-13.258,0-24-10.742-24-24s10.742-24,24-24h288c13.258,0,24,10.742,24,24s-10.742,24-24,24h-8   c0,76.742-24.797,118-73.664,139.086c-15.219,6.578-14.891,20.055-0.086,25.813C373.797,311.336,400,355.242,400,431.984h8   C421.258,431.984,432,442.734,432,455.984z M156.797,431.984h15.477c22.531-45.898,68.094-86.353,91.727-77.883   c27.595,9.891,64.836,33.477,89.898,77.883h17.305c0-81.353-31.603-103.017-55.391-112.242   c-17.931-6.977-29.259-21.836-29.57-38.789c-0.32-17.078,10.664-32.523,28.688-40.313c27.82-12.008,56.273-34.781,56.273-112.641   H156.797c0,77.859,28.453,100.633,56.297,112.648c18,7.781,28.984,23.227,28.664,40.305c-0.313,16.952-11.641,31.813-29.594,38.797   C188.398,328.969,156.797,350.633,156.797,431.984z" fill="#4D4D4D"/></g></svg>
\ No newline at end of file
diff --git a/js/apps/system/aardvark/frontend/js/templates/statisticBarView.ejs b/js/apps/system/aardvark/frontend/js/templates/statisticBarView.ejs
index a68c5921e2..ba7e9f5ba7 100644
--- a/js/apps/system/aardvark/frontend/js/templates/statisticBarView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/statisticBarView.ejs
@@ -1,16 +1,15 @@
 <script id="statisticBarView.ejs" type="text/template">
-  <div class="navlogo">
+  <div class="navlogo statisticbar">
     <a href="#dashboard" style="padding-left: 15px;">
-      <img id="stat_cpu"
-        src="img/statusBar-cpu-16.png"
-        style="background-color: #ef8787;margin-top: 9px;"
+      <img class="svg stat_cpu"
+        src="img/cpu.svg"
       />
-      <img id="stat_ram"
-        src="img/statusBar-ram-16.png"
+      <img class="svg stat_ram"
+        src="img/ram.svg"
         style="background-color: #FAFF92; margin-top: 9px; margin-left: 4px; margin-right: 2px;"
       />
-      <img id="stat_req"
-        src="img/statusBar-req-16.png"
+      <img class="svg stat_req"
+        src="img/requests.svg"
         style="background-color: #8aa051; margin-top: 9px;"
       />
     </a>
diff --git a/js/apps/system/aardvark/frontend/js/views/dashboardView.js b/js/apps/system/aardvark/frontend/js/views/dashboardView.js
index 742f797037..f083f5c871 100644
--- a/js/apps/system/aardvark/frontend/js/views/dashboardView.js
+++ b/js/apps/system/aardvark/frontend/js/views/dashboardView.js
@@ -13,7 +13,7 @@
       y = y / 100000;
       return y.toPrecision(3) + "MB";
     }
-    if (y > 100) {
+    if (y > 1000) {
       y = y / 1000;
       return y.toPrecision(3) + "KB";
     }
@@ -66,14 +66,14 @@
     detailEl: '#modalPlaceholder',
 
     events: {
-      "dblclick .innerDashboardChart"      : "showDetail",
-      "mousedown .dygraph-rangesel-zoomhandle"      : "stopUpdating",
-      "mouseup .dygraph-rangesel-zoomhandle"      : "startUpdating",
-      "mouseleave .dygraph-rangesel-zoomhandle"      : "startUpdating",
-      "click #backToCluster"    : "returnToClusterView"
+      "click .innerDashboardChart" : "showDetail",
+      "mousedown .dygraph-rangesel-zoomhandle" : "stopUpdating",
+      "mouseup .dygraph-rangesel-zoomhandle" : "startUpdating",
+      "mouseleave .dygraph-rangesel-zoomhandle" : "startUpdating",
+      "click #backToCluster" : "returnToClusterView"
     },
-
-    hideGraphs : ["totalTime", "uptime", "minorPageFaults", "requestsTotal"],
+    
+    hideGraphs : ["totalTime", "uptime", "residentSize", "physicalMemory", "minorPageFaults", "requestsTotal"],
 
     chartTypeExceptions : {
       accumulated : {
@@ -110,6 +110,7 @@
       system_systemUserTime: ["systemTime","userTime"],
       client_totalRequestTime: ["requestTime","queueTime"]
     },
+    
     colors : ["#617e2b", "#296e9c", "#81ccd8", "#7ca530", "#f6fbac", "#3c3c3c",
       "#aa90bd", "#e1811d", "#c7d4b2", "#d0b2d4"],
 
@@ -203,6 +204,20 @@
       residentSize : {
         div : "#systemResources"
       },
+      residentSizePercent : {
+        div : "#systemResources",
+        axes : {
+          y: {
+            labelsKMG2: false,
+            axisLabelFormatter: function(y) {
+              return y.toPrecision(2) + "%";
+            }
+          }
+        }
+      },
+      physicalMemory : {
+        div : "#systemResources"
+      },
       virtualSize : {
         div : "#systemResources"
       },
diff --git a/js/apps/system/aardvark/frontend/js/views/statisticBarView.js b/js/apps/system/aardvark/frontend/js/views/statisticBarView.js
index 619ad207d5..aeaabf080e 100644
--- a/js/apps/system/aardvark/frontend/js/views/statisticBarView.js
+++ b/js/apps/system/aardvark/frontend/js/views/statisticBarView.js
@@ -16,6 +16,35 @@
             $(this.el).html(this.template.render({
               isSystem: window.currentDB.get("isSystem")
             }));
+            
+            $('img.svg').each(function(){
+                        var $img = $(this);
+                        var imgID = $img.attr('id');
+                        var imgClass = $img.attr('class');
+                        var imgURL = $img.attr('src');
+
+                        $.get(imgURL, function(data) {
+                            // Get the SVG tag, ignore the rest
+                            var $svg = $(data).find('svg');
+
+                            // Add replaced image's ID to the new SVG
+                            if(typeof imgID !== 'undefined') {
+                                $svg = $svg.attr('id', imgID);
+                            }
+                            // Add replaced image's classes to the new SVG
+                            if(typeof imgClass !== 'undefined') {
+                                $svg = $svg.attr('class', imgClass+' replaced-svg');
+                            }
+
+                            // Remove any invalid XML tags as per http://validator.w3.org
+                            $svg = $svg.removeAttr('xmlns:a');
+
+                            // Replace image with new SVG
+                            $img.replaceWith($svg);
+
+                        }, 'xml');
+
+                    });            
             return this;
         },
 
diff --git a/js/apps/system/aardvark/frontend/scss/_dashboardHttpGroup.scss b/js/apps/system/aardvark/frontend/scss/_dashboardHttpGroup.scss
index 217e57512d..647892424c 100644
--- a/js/apps/system/aardvark/frontend/scss/_dashboardHttpGroup.scss
+++ b/js/apps/system/aardvark/frontend/scss/_dashboardHttpGroup.scss
@@ -29,11 +29,11 @@
   background-color: $c_white;
   position: relative;
   width: 31%;
-  height: 220px;
-  border: 1px solid rgba(0, 0, 0, 0.125);
+  height: 210px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
   float: left;
-  margin : 1.04%;
- // padding : 10px;
+  margin: 1.05%;
+  // padding: 0px;
 }
 
 .dygraph-label.dygraph-title {
@@ -53,7 +53,7 @@
 }
 
 .dygraph-axis-label.dygraph-axis-label-y {
-  width: 35px;
+  // width: 35px;
   font-size: 12px;
   font-weight: 400;
   font-family: 'Open Sans', sans-serif;
diff --git a/js/apps/system/aardvark/frontend/scss/_statMenu.scss b/js/apps/system/aardvark/frontend/scss/_statMenu.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/js/apps/system/aardvark/frontend/scss/_statisticBar.scss b/js/apps/system/aardvark/frontend/scss/_statisticBar.scss
new file mode 100644
index 0000000000..b3e342558a
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/_statisticBar.scss
@@ -0,0 +1,31 @@
+.navlogo .stat_cpu {
+  margin-top: 1px;
+  width: 26px;
+  height: 26px;
+}
+
+.navlogo .stat_ram {
+  width: 26px;
+  height: 26px;
+}
+
+.navlogo .stat_req {
+  width: 22px;
+  height: 22px;
+}
+
+.navlogo .stat_cpu path {
+  fill: #770000;
+}
+
+.navlogo .stat_ram path {
+  fill: #007700;
+}
+
+.navlogo .stat_req path {
+  fill: #aaaa00;
+}
+
+.statisticbar {
+  display: none;
+}
\ No newline at end of file
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index 4b6a1070e9..9a92c43c03 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -820,6 +820,31 @@ select.filterSelect {
   margin-top: 1px;
   margin-left: 10px !important; }
 
+.navlogo .stat_cpu {
+  margin-top: 1px;
+  width: 26px;
+  height: 26px; }
+
+.navlogo .stat_ram {
+  width: 26px;
+  height: 26px; }
+
+.navlogo .stat_req {
+  width: 22px;
+  height: 22px; }
+
+.navlogo .stat_cpu path {
+  fill: #770000; }
+
+.navlogo .stat_ram path {
+  fill: #007700; }
+
+.navlogo .stat_req path {
+  fill: #aaaa00; }
+
+.statisticbar {
+  display: none; }
+
 .fixedDropdown {
   margin: 37px 0 0 0 !important;
   border-radius: 0 !important;
@@ -1004,10 +1029,10 @@ select.filterSelect {
   background-color: white;
   position: relative;
   width: 31%;
-  height: 220px;
-  border: 1px solid rgba(0, 0, 0, 0.125);
+  height: 210px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
   float: left;
-  margin: 1.04%; }
+  margin: 1.05%; }
 
 .dygraph-label.dygraph-title {
   font-size: 15px;
@@ -1023,7 +1048,6 @@ select.filterSelect {
   color: #666666; }
 
 .dygraph-axis-label.dygraph-axis-label-y {
-  width: 35px;
   font-size: 12px;
   font-weight: 400;
   font-family: 'Open Sans', sans-serif;
diff --git a/js/apps/system/aardvark/frontend/scss/style.scss b/js/apps/system/aardvark/frontend/scss/style.scss
index eb9aa99a4a..39a3e65e6d 100644
--- a/js/apps/system/aardvark/frontend/scss/style.scss
+++ b/js/apps/system/aardvark/frontend/scss/style.scss
@@ -1,7 +1,7 @@
 //shared
 @import "shared";
 // Navbar
-@import "statMenu";
+@import "statisticBar";
 // Notifications
 @import "notification";
 //contentTables