From 4bbf9970a9c507abaa1b73fde625a7aed562c67f Mon Sep 17 00:00:00 2001
From: scottashton <f.bartels@triagens.de>
Date: Wed, 23 Apr 2014 16:46:44 +0200
Subject: [PATCH] minor bugfixes and resizing of detailcharts

---
 .../js/routers/clusterRouter.js               |  2 +-
 .../frontend/js/views/dashboardView.js        | 16 +++--
 .../aardvark/frontend/scss/_newDashboard.scss |  3 +-
 .../aardvark/frontend/scss/_resizing.scss     |  8 +--
 .../system/aardvark/frontend/scss/cluster.css | 55 +++++++----------
 .../aardvark/frontend/scss/generated.css      | 60 ++++++++-----------
 6 files changed, 64 insertions(+), 80 deletions(-)

diff --git a/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js b/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
index 0903bc0683..b91a9ae468 100644
--- a/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
+++ b/js/apps/system/aardvark/clusterFrontend/js/routers/clusterRouter.js
@@ -167,7 +167,7 @@ arangoDatabase, btoa, _*/
 
       server.addAuth = this.addAuth.bind(this);
       this.dashboardView = new window.ServerDashboardView({
-          dygraphConfig: window.newDygraphConfig,
+          dygraphConfig: window.dygraphConfig,
           serverToShow : this.serverToShow
       });
       this.dashboardView.render();
diff --git a/js/apps/system/aardvark/frontend/js/views/dashboardView.js b/js/apps/system/aardvark/frontend/js/views/dashboardView.js
index 00d36579ef..b84297061f 100644
--- a/js/apps/system/aardvark/frontend/js/views/dashboardView.js
+++ b/js/apps/system/aardvark/frontend/js/views/dashboardView.js
@@ -113,7 +113,9 @@
         div = "#" + div;
       }
       var height, width;
+        console.log(div, $(div).height(), $(div).width());
       $(div).attr("style", "");
+        console.log(div, $(div).height(), $(div).width());
       height = $(div).height();
       width = $(div).width();
       return {
@@ -536,7 +538,6 @@
       if (self.timer) {
         return;
       }
-      self.isUpdating = true;
       self.timer = window.setInterval(function () {
         self.getStatistics();
         if (self.isUpdating === false) {
@@ -550,15 +551,20 @@
 
 
   resize: function () {
-    if (!this.intiliazed) {
+    if (!this.isUpdating) {
       return;
     }
     var self = this, dimensions;
-    Object.keys(this.graphs).forEach(function (f) {
-      var g = self.graphs[f];
+      _.each(this.graphs,function (g) {
       dimensions = self.getCurrentSize(g.maindiv_.id);
       g.resize(dimensions.width, dimensions.height);
     });
+    if (this.detailGraph) {
+      console.log(this.detailGraph);
+      dimensions = self.getCurrentSize(this.detailGraph.maindiv_.id);
+      console.log(dimensions);
+      this.detailGraph.resize(dimensions.width, dimensions.height);
+    }
     this.prepareD3Charts(true);
     this.prepareResidentSize(true);
   },
@@ -571,7 +577,9 @@
     }
     this.getStatistics();
     this.prepareDygraphs();
+    console.log("STARTING");
     if (this.isUpdating) {
+      console.log("STARTING", this.isUpdating);
       this.prepareD3Charts();
       this.prepareResidentSize();
       this.updateTendencies();
diff --git a/js/apps/system/aardvark/frontend/scss/_newDashboard.scss b/js/apps/system/aardvark/frontend/scss/_newDashboard.scss
index 8803189953..7cc60ac454 100644
--- a/js/apps/system/aardvark/frontend/scss/_newDashboard.scss
+++ b/js/apps/system/aardvark/frontend/scss/_newDashboard.scss
@@ -68,10 +68,9 @@ $dashboard-padding: 28px;
 .modal-chart-detail {
   @extend %pull-left;
   height: 85%;
-  width: 90%;
 
   .modal-body {
-    max-height: 100%;
+    max-height: 75%;
   }
 }
 
diff --git a/js/apps/system/aardvark/frontend/scss/_resizing.scss b/js/apps/system/aardvark/frontend/scss/_resizing.scss
index 19ee33a4dd..533fcf5964 100644
--- a/js/apps/system/aardvark/frontend/scss/_resizing.scss
+++ b/js/apps/system/aardvark/frontend/scss/_resizing.scss
@@ -51,10 +51,6 @@ div.resizecontainer {
       width: $content-size;
     }
 
-    .modal-inner-detail {
-      width: $content-size -30px - $legend-width;
-    }
-
     .dashboard-large-chart {
       $int-width: ($content-size * 2 / 3);
       width: $int-width;
@@ -98,6 +94,10 @@ div.resizecontainer {
       margin-left: -($inner-content-size + 90px)/2;
       width: $inner-content-size + 90px;
 
+      .modal-inner-detail {
+        width: $inner-content-size - 30px - $legend-width;
+      }
+
       .modal-body {
         width: $inner-content-size + 15px;
       }
diff --git a/js/apps/system/aardvark/frontend/scss/cluster.css b/js/apps/system/aardvark/frontend/scss/cluster.css
index 0731c61f72..95f03bdb74 100644
--- a/js/apps/system/aardvark/frontend/scss/cluster.css
+++ b/js/apps/system/aardvark/frontend/scss/cluster.css
@@ -2103,9 +2103,6 @@ div.resizecontainer {
     margin-left: -114px;
     width: 228px; }
 
-  .modal-inner-detail {
-    width: 228px -230px; }
-
   .dashboard-large-chart {
     width: 152px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2129,6 +2126,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -109px;
     width: 218px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: -102px; }
     div.modal-chart-detail .modal-body {
       width: 143px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2156,9 +2155,6 @@ div.resizecontainer {
     margin-left: -234px;
     width: 468px; }
 
-  .modal-inner-detail {
-    width: 468px -230px; }
-
   .dashboard-large-chart {
     width: 312px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2182,6 +2178,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -229px;
     width: 458px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 138px; }
     div.modal-chart-detail .modal-body {
       width: 383px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2209,9 +2207,6 @@ div.resizecontainer {
     margin-left: -354px;
     width: 708px; }
 
-  .modal-inner-detail {
-    width: 708px -230px; }
-
   .dashboard-large-chart {
     width: 472px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2235,6 +2230,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -349px;
     width: 698px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 378px; }
     div.modal-chart-detail .modal-body {
       width: 623px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2262,9 +2259,6 @@ div.resizecontainer {
     margin-left: -474px;
     width: 948px; }
 
-  .modal-inner-detail {
-    width: 948px -230px; }
-
   .dashboard-large-chart {
     width: 632px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2288,6 +2282,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -469px;
     width: 938px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 618px; }
     div.modal-chart-detail .modal-body {
       width: 863px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2315,9 +2311,6 @@ div.resizecontainer {
     margin-left: -594px;
     width: 1188px; }
 
-  .modal-inner-detail {
-    width: 1188px -230px; }
-
   .dashboard-large-chart {
     width: 792px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2341,6 +2334,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -589px;
     width: 1178px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 858px; }
     div.modal-chart-detail .modal-body {
       width: 1103px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2368,9 +2363,6 @@ div.resizecontainer {
     margin-left: -714px;
     width: 1428px; }
 
-  .modal-inner-detail {
-    width: 1428px -230px; }
-
   .dashboard-large-chart {
     width: 952px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2394,6 +2386,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -709px;
     width: 1418px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1098px; }
     div.modal-chart-detail .modal-body {
       width: 1343px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2421,9 +2415,6 @@ div.resizecontainer {
     margin-left: -834px;
     width: 1668px; }
 
-  .modal-inner-detail {
-    width: 1668px -230px; }
-
   .dashboard-large-chart {
     width: 1112px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2447,6 +2438,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -829px;
     width: 1658px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1338px; }
     div.modal-chart-detail .modal-body {
       width: 1583px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2474,9 +2467,6 @@ div.resizecontainer {
     margin-left: -954px;
     width: 1908px; }
 
-  .modal-inner-detail {
-    width: 1908px -230px; }
-
   .dashboard-large-chart {
     width: 1272px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2500,6 +2490,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -949px;
     width: 1898px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1578px; }
     div.modal-chart-detail .modal-body {
       width: 1823px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2527,9 +2519,6 @@ div.resizecontainer {
     margin-left: -1074px;
     width: 2148px; }
 
-  .modal-inner-detail {
-    width: 2148px -230px; }
-
   .dashboard-large-chart {
     width: 1432px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2553,6 +2542,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -1069px;
     width: 2138px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1818px; }
     div.modal-chart-detail .modal-body {
       width: 2063px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2580,9 +2571,6 @@ div.resizecontainer {
     margin-left: -1194px;
     width: 2388px; }
 
-  .modal-inner-detail {
-    width: 2388px -230px; }
-
   .dashboard-large-chart {
     width: 1592px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2606,6 +2594,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -1189px;
     width: 2378px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 2058px; }
     div.modal-chart-detail .modal-body {
       width: 2303px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2633,9 +2623,6 @@ div.resizecontainer {
     margin-left: -1314px;
     width: 2628px; }
 
-  .modal-inner-detail {
-    width: 2628px -230px; }
-
   .dashboard-large-chart {
     width: 1752px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2659,6 +2646,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -1309px;
     width: 2618px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 2298px; }
     div.modal-chart-detail .modal-body {
       width: 2543px; }
     div.modal-chart-detail .dashboard-large-chart {
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index 2603dcbdf6..4ce23384f7 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -2083,9 +2083,6 @@ div.resizecontainer {
     margin-left: -114px;
     width: 228px; }
 
-  .modal-inner-detail {
-    width: 228px -230px; }
-
   .dashboard-large-chart {
     width: 152px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2109,6 +2106,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -109px;
     width: 218px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: -102px; }
     div.modal-chart-detail .modal-body {
       width: 143px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2136,9 +2135,6 @@ div.resizecontainer {
     margin-left: -234px;
     width: 468px; }
 
-  .modal-inner-detail {
-    width: 468px -230px; }
-
   .dashboard-large-chart {
     width: 312px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2162,6 +2158,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -229px;
     width: 458px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 138px; }
     div.modal-chart-detail .modal-body {
       width: 383px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2189,9 +2187,6 @@ div.resizecontainer {
     margin-left: -354px;
     width: 708px; }
 
-  .modal-inner-detail {
-    width: 708px -230px; }
-
   .dashboard-large-chart {
     width: 472px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2215,6 +2210,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -349px;
     width: 698px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 378px; }
     div.modal-chart-detail .modal-body {
       width: 623px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2242,9 +2239,6 @@ div.resizecontainer {
     margin-left: -474px;
     width: 948px; }
 
-  .modal-inner-detail {
-    width: 948px -230px; }
-
   .dashboard-large-chart {
     width: 632px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2268,6 +2262,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -469px;
     width: 938px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 618px; }
     div.modal-chart-detail .modal-body {
       width: 863px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2295,9 +2291,6 @@ div.resizecontainer {
     margin-left: -594px;
     width: 1188px; }
 
-  .modal-inner-detail {
-    width: 1188px -230px; }
-
   .dashboard-large-chart {
     width: 792px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2321,6 +2314,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -589px;
     width: 1178px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 858px; }
     div.modal-chart-detail .modal-body {
       width: 1103px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2348,9 +2343,6 @@ div.resizecontainer {
     margin-left: -714px;
     width: 1428px; }
 
-  .modal-inner-detail {
-    width: 1428px -230px; }
-
   .dashboard-large-chart {
     width: 952px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2374,6 +2366,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -709px;
     width: 1418px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1098px; }
     div.modal-chart-detail .modal-body {
       width: 1343px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2401,9 +2395,6 @@ div.resizecontainer {
     margin-left: -834px;
     width: 1668px; }
 
-  .modal-inner-detail {
-    width: 1668px -230px; }
-
   .dashboard-large-chart {
     width: 1112px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2427,6 +2418,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -829px;
     width: 1658px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1338px; }
     div.modal-chart-detail .modal-body {
       width: 1583px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2454,9 +2447,6 @@ div.resizecontainer {
     margin-left: -954px;
     width: 1908px; }
 
-  .modal-inner-detail {
-    width: 1908px -230px; }
-
   .dashboard-large-chart {
     width: 1272px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2480,6 +2470,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -949px;
     width: 1898px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1578px; }
     div.modal-chart-detail .modal-body {
       width: 1823px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2507,9 +2499,6 @@ div.resizecontainer {
     margin-left: -1074px;
     width: 2148px; }
 
-  .modal-inner-detail {
-    width: 2148px -230px; }
-
   .dashboard-large-chart {
     width: 1432px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2533,6 +2522,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -1069px;
     width: 2138px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 1818px; }
     div.modal-chart-detail .modal-body {
       width: 2063px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2560,9 +2551,6 @@ div.resizecontainer {
     margin-left: -1194px;
     width: 2388px; }
 
-  .modal-inner-detail {
-    width: 2388px -230px; }
-
   .dashboard-large-chart {
     width: 1592px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2586,6 +2574,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -1189px;
     width: 2378px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 2058px; }
     div.modal-chart-detail .modal-body {
       width: 2303px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -2613,9 +2603,6 @@ div.resizecontainer {
     margin-left: -1314px;
     width: 2628px; }
 
-  .modal-inner-detail {
-    width: 2628px -230px; }
-
   .dashboard-large-chart {
     width: 1752px; }
     .dashboard-large-chart .dashboard-interior-chart {
@@ -2639,6 +2626,8 @@ div.resizecontainer {
   div.modal-chart-detail {
     margin-left: -1309px;
     width: 2618px; }
+    div.modal-chart-detail .modal-inner-detail {
+      width: 2298px; }
     div.modal-chart-detail .modal-body {
       width: 2543px; }
     div.modal-chart-detail .dashboard-large-chart {
@@ -3308,10 +3297,9 @@ pre.gv-object-view {
     padding-top: 20px; }
 
 .modal-chart-detail {
-  height: 85%;
-  width: 90%; }
+  height: 85%; }
   .modal-chart-detail .modal-body {
-    max-height: 100%; }
+    max-height: 75%; }
 
 .modal-dashboard-legend {
   height: 250px;