fixed memory issue within ui dashboard

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -1,5 +1,5 @@
 /* jshint unused: false */
-/* global window, $, Backbone, document */
+/* global window, $, Backbone, document, d3 */
 /* global $, arangoHelper, btoa, _, frontendConfig */
 
 (function () {
@@ -52,6 +52,11 @@
         this.queryView.cleanupGraphs();
       }
 
+      if (this.lastRoute === '#dasboard' || window.location.hash.substr(0, 5) === '#node') {
+        // dom graph cleanup
+        d3.selectAll('svg > *').remove();
+      }
+
       this.lastRoute = window.location.hash;
       // this function executes before every route call
       $('#subNavigationBar .breadcrumb').html('');

js/apps/system/_admin/aardvark/APP/frontend/js/views/dashboardView.js

@@ -19,6 +19,14 @@
     interval: 10000, // in milliseconds
     defaultTimeFrame: 20 * 60 * 1000, // 20 minutes in milliseconds
     defaultDetailFrame: 2 * 24 * 60 * 60 * 1000,
+    reRender: true,
+    reRenderDistribution: true,
+    isVisible: true,
+    distributionCharts: {
+      totalTimeDistribution: null,
+      dataTransferDistribution: null
+    },
+    residentChart: null,
     history: {},
     graphs: {},
 
@@ -578,8 +586,27 @@
         });
     },
 
+    checkState: function () {
+      var self = this;
+
+      // if view is currently not active (#dashboard = standalone, #node = cluster)
+      if (window.location.hash === '#dashboard' || window.location.hash.substr(0, 5) === '#node') {
+        self.isVisible = true;
+      } else {
+        // chart data state
+        self.residentChart = null;
+
+        // render state
+        self.isVisible = false;
+        self.reRender = true;
+        self.reRenderDistribution = false;
+      }
+    },
+
     getStatistics: function (callback, modalView) {
       var self = this;
+      self.checkState();
+
       var url = arangoHelper.databaseUrl('/_admin/aardvark/statistics/short', '_system');
       var urlParams = '?start=';
 
@@ -697,8 +724,9 @@
         this.removeEmptyDataLabels();
       }
 
-      nv.addGraph(function () {
+      if (self.reRender && self.isVisible) {
-        var chart = nv.models.multiBarHorizontalChart()
+        nv.addGraph(function () {
+          self.residentChart = nv.models.multiBarHorizontalChart()
           .x(function (d) {
             return d.label;
           })
@@ -722,44 +750,71 @@
           .showControls(false)
           .stacked(true);
 
-        chart.yAxis
+          self.residentChart.yAxis
           .tickFormat(function (d) {
             return d + '%';
           })
           .showMaxMin(false);
-        chart.xAxis.showMaxMin(false);
+          self.residentChart.xAxis.showMaxMin(false);
 
-        d3.select('#residentSizeChart svg')
+          d3.select('#residentSizeChart svg')
           .datum(self.history[self.server].residentSizeChart)
-          .call(chart);
+          .call(self.residentChart);
 
-        d3.select('#residentSizeChart svg').select('.nv-zeroLine').remove();
+          d3.select('#residentSizeChart svg').select('.nv-zeroLine').remove();
 
-        if (update) {
+          if (update) {
-          d3.select('#residentSizeChart svg').select('#total').remove();
+            d3.select('#residentSizeChart svg').select('#total').remove();
-          d3.select('#residentSizeChart svg').select('#percentage').remove();
+            d3.select('#residentSizeChart svg').select('#percentage').remove();
-        }
+          }
 
-        d3.select('.dashboard-bar-chart-title .percentage')
+          d3.select('.dashboard-bar-chart-title .percentage')
           .html(currentA + ' (' + currentP + ' %)');
 
-        d3.select('.dashboard-bar-chart-title .absolut')
+          d3.select('.dashboard-bar-chart-title .absolut')
           .html(data[0]);
 
-        nv.utils.windowResize(chart.update);
+          nv.utils.windowResize(self.residentChart.update);
 
-        return chart;
+          return self.residentChart;
-      }, function () {
+        }, function () {
-        d3.selectAll('#residentSizeChart .nv-bar').on('click',
+          d3.selectAll('#residentSizeChart .nv-bar').on('click',
-          function () {
+            function () {
-            // no idea why this has to be empty, well anyways...
+              // no idea why this has to be empty, well anyways...
+            }
+           );
+        });
+        self.reRender = false;
+      } else {
+        if (self.residentChart) {
+          // TODO FIX ME: THE MAIN FUNCTION MUCH TO OFTEN CALLED
+
+          if (self.isVisible) {
+            // update widths
+            self.residentChart.width(dimensions.width);
+            self.residentChart.height(dimensions.height);
+
+            // update labels
+            d3.select('.dashboard-bar-chart-title .percentage')
+            .html(currentA + ' (' + currentP + ' %)');
+            d3.select('.dashboard-bar-chart-title .absolut')
+            .html(data[0]);
+
+            // update data
+            d3.select('#residentSizeChart svg')
+            .datum(self.history[self.server].residentSizeChart)
+            .call(self.residentChart);
+
+            // trigger resize
+            nv.utils.windowResize(self.residentChart.update);
           }
-        );
+        }
-      });
+      }
     },
 
     prepareD3Charts: function (update) {
       var self = this;
+
       var barCharts = {
         totalTimeDistribution: [
           'queueTimeDistributionPercent', 'requestTimeDistributionPercent'],
@@ -785,31 +840,40 @@
           self.removeEmptyDataLabels();
         }
 
-        nv.addGraph(function () {
+        if (self.reRenderDistribution && self.isVisible) {
-          var tickMarks = [0, 0.25, 0.5, 0.75, 1];
+          // append custom legend
-          var marginLeft = 75;
+          $('#' + k + 'Container').append(
-          var marginBottom = 23;
+            '<div class="dashboard-legend-inner">' +
-          var bottomSpacer = 6;
+              '<span style="color: rgb(238, 190, 77);"><div style="display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(238, 190, 77);"></div> Bytes sent</span>' +
+              '<span style="color: rgb(142, 209, 220);"><div style="display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(142, 209, 220);"></div> Bytes received</span>' +
+                '</div>'
+          );
 
-          if (dimensions.width < 219) {
+          nv.addGraph(function () {
-            tickMarks = [0, 0.5, 1];
+            var tickMarks = [0, 0.25, 0.5, 0.75, 1];
-            marginLeft = 72;
+            var marginLeft = 75;
-            marginBottom = 21;
+            var marginBottom = 23;
-            bottomSpacer = 5;
+            var bottomSpacer = 6;
-          } else if (dimensions.width < 299) {
-            tickMarks = [0, 0.3334, 0.6667, 1];
-            marginLeft = 77;
-          } else if (dimensions.width < 379) {
-            marginLeft = 87;
-          } else if (dimensions.width < 459) {
-            marginLeft = 95;
-          } else if (dimensions.width < 539) {
-            marginLeft = 100;
-          } else if (dimensions.width < 619) {
-            marginLeft = 105;
-          }
 
-          var chart = nv.models.multiBarHorizontalChart()
+            if (dimensions.width < 219) {
+              tickMarks = [0, 0.5, 1];
+              marginLeft = 72;
+              marginBottom = 21;
+              bottomSpacer = 5;
+            } else if (dimensions.width < 299) {
+              tickMarks = [0, 0.3334, 0.6667, 1];
+              marginLeft = 77;
+            } else if (dimensions.width < 379) {
+              marginLeft = 87;
+            } else if (dimensions.width < 459) {
+              marginLeft = 95;
+            } else if (dimensions.width < 539) {
+              marginLeft = 100;
+            } else if (dimensions.width < 619) {
+              marginLeft = 105;
+            }
+
+            self.distributionCharts[k] = nv.models.multiBarHorizontalChart()
             .x(function (d) {
               return d.label;
             })
@@ -833,34 +897,56 @@
             .showControls(false)
             .forceY([0, 1]);
 
-          chart.yAxis
+            self.distributionCharts[k].yAxis
             .showMaxMin(false);
 
-          d3.select('.nv-y.nv-axis')
+            d3.select('.nv-y.nv-axis')
             .selectAll('text')
             .attr('transform', 'translate (0, ' + bottomSpacer + ')');
 
-          chart.yAxis
+            self.distributionCharts[k].yAxis
             .tickValues(tickMarks)
             .tickFormat(function (d) {
               return fmtNumber(((d * 100 * 100) / 100), 0) + '%';
             });
 
-          d3.select(selector)
+            d3.select(selector)
             .datum(self.history[self.server][k])
-            .call(chart);
+            .call(self.distributionCharts[k]);
 
-          nv.utils.windowResize(chart.update);
+            nv.utils.windowResize(self.distributionCharts[k].update);
 
-          return chart;
+            return self.distributionCharts[k];
-        }, function () {
+          }, function () {
-          d3.selectAll(selector + ' .nv-bar').on('click',
+            d3.selectAll(selector + ' .nv-bar').on('click',
-            function () {
+              function () {
-              // no idea why this has to be empty, well anyways...
+                // no idea why this has to be empty, well anyways...
+              }
+            );
+          });
+        } else {
+          if (self.distributionCharts[k]) {
+            // TODO FIX ME: THE MAIN FUNCTION MUCH TO OFTEN CALLED
+
+            if (self.isVisible) {
+              // update widths
+              self.distributionCharts[k].width(dimensions.width);
+              self.distributionCharts[k].height(dimensions.height);
+
+              // update data
+              d3.select(selector)
+              .datum(self.history[self.server][k])
+              .call(self.distributionCharts[k]);
+
+              // trigger resize
+              nv.utils.windowResize(self.distributionCharts[k].update);
             }
-          );
+          }
-        });
+        }
       });
+      if (self.reRenderDistribution && self.isVisible) {
+        self.reRenderDistribution = false;
+      }
     },
 
     stopUpdating: function () {

js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js

@@ -93,7 +93,7 @@
         }, this.interval);
       }
     },
-    
+
     deleteNode: function (elem) {
       if ($(elem.currentTarget).hasClass('noHover')) {
         return;

js/apps/system/_admin/aardvark/APP/frontend/scss/_newDashboard.scss

@@ -203,9 +203,9 @@
     .dashboard-interior-chart {
       @extend %pull-left;
 
-      .nv-bar rect {
+     .nv-bar rect {
-        fill-opacity: .15;
+        fill-opacity: .9;
-        stroke-opacity: .8;
+        stroke-opacity: 1;
         stroke-width: .5px;
       }
     }
@@ -495,3 +495,19 @@
 #replication {
   margin-bottom: 10px;
 }
+
+#dataTransferDistributionContainer,
+#totalTimeDistributionContainer {
+  .dashboard-legend-inner {
+    float: right;
+    position: absolute;
+    right: 25px;
+    top: 15px;
+
+    span {
+      font-size: 12px;
+      font-weight: 400px;
+      margin-left: 10px;
+    }
+  }
+}