Get dashboard working and upgrade bootstrap. Note: the bootstrap fixes will be coming in the followup CL

static/js/app.js

@@ -6602,178 +6602,6 @@ quayApp.directive('locationView', function () {
 });
 
 
-quayApp.directive('realtimeAreaChart', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/realtime-area-chart.html',
-    replace: false,
-    transclude: false,
-    restrict: 'C',
-    scope: {
-      'data': '=data',
-      'labels': '=labels',
-      'colors': '=colors',
-      'counter': '=counter'
-    },
-    controller: function($scope, $element) {
-      var graph = null;
-      var series = [];
-      var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
-      var colors = $scope.colors || [];
-
-      var setupGraph = function() {
-        for (var i = 0; i < $scope.labels.length; ++i) {
-          series.push({
-            name: $scope.labels[i],
-            color: i >= colors.length ? palette.color(): $scope.colors[i],
-            stroke: 'rgba(0,0,0,0.15)',
-            data: []
-          });
-        }
-
-        graph = new Rickshaw.Graph( {
-          element: $element.find('.chart')[0],
-          renderer: 'area',
-          stroke: true,
-          series: series,
-          min: 0
-        });
-      };
-
-      var refresh = function(data) {
-        if (!data || $scope.counter < 0) { return; }
-        if (!graph) {
-          setupGraph();
-        }
-
-        for (var i = 0; i < $scope.data.length; ++i) {
-          series[i].data.push(
-            {'x': $scope.counter, 'y': $scope.data[i] }
-          );
-        }
-
-        hoverDetail = new Rickshaw.Graph.HoverDetail({
-          graph: graph,
-          xFormatter: function(x) {
-            return x.toString();
-          }
-        });
-
-        graph.renderer.unstack = true;
-        graph.render();
-      };
-
-      $scope.$watch('counter', function() {
-        refresh($scope.data_raw);
-      });
-
-      $scope.$watch('data', function(data) {
-        $scope.data_raw = data;
-        refresh($scope.data_raw);
-      });
-    }
-  };
-  return directiveDefinitionObject;
-});
-
-
-quayApp.directive('realtimeLineChart', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/realtime-line-chart.html',
-    replace: false,
-    transclude: false,
-    restrict: 'C',
-    scope: {
-      'data': '=data',
-      'labels': '=labels',
-      'counter': '=counter',
-      'labelTemplate': '@labelTemplate'
-    },
-    controller: function($scope, $element) {
-      var graph = null;
-      var hoverDetail = null;
-      var series = [];
-      var counter = 0;
-      var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
-
-      var setupGraph = function() {
-        graph = new Rickshaw.Graph({
-          element: $element.find('.chart')[0],
-          renderer: 'line',
-          series: series,
-          min: 'auto',
-          padding: {
-            'top': 0.1,
-            'left': 0.01,
-            'right': 0.01,
-            'bottom': 0.1
-          }
-        });
-
-        hoverDetail = new Rickshaw.Graph.HoverDetail({
-          graph: graph,
-          xFormatter: function(x) {
-            return x.toString();
-          }
-        });
-      };
-
-      var refresh = function(data) {
-        if (!data) { return; }
-        if (!graph) {
-          setupGraph();
-        }
-
-        if (typeof data == 'number') {
-          data = [data];
-        }
-
-        if ($scope.labels) {
-          data = data.slice(0, $scope.labels.length);
-        }
-
-        if (series.length == 0){
-          for (var i = 0; i < data.length; ++i) {
-            var title = $scope.labels ? $scope.labels[i] : $scope.labelTemplate.replace('{x}', i + 1);
-            series.push({
-              'color': palette.color(),
-              'data': [],
-              'name': title
-            })
-          }
-        }
-
-        counter++;
-
-        for (var i = 0; i < data.length; ++i) {
-          var arr = series[i].data;
-          arr.push({
-            'x': counter,
-            'y': data[i]
-          })
-
-          if (arr.length > 10) {
-            series[i].data = arr.slice(arr.length - 10, arr.length);
-          }
-        }
-
-        graph.render();
-      };
-
-      $scope.$watch('counter', function(counter) {
-        refresh($scope.data_raw);
-      });
-
-      $scope.$watch('data', function(data) {
-        $scope.data_raw = data;
-      });
-    }
-  };
-  return directiveDefinitionObject;
-});
-
-
 quayApp.directive('psUsageGraph', function () {
   var directiveDefinitionObject = {
     priority: 0,
@@ -6782,18 +6610,40 @@ quayApp.directive('psUsageGraph', function () {
     transclude: false,
     restrict: 'C',
     scope: {
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element) {
       $scope.counter = -1;
       $scope.data = null;
 
-      var source = new EventSource('/realtime/ps');
-      source.onmessage = function(e) {
-        $scope.$apply(function() {
-          $scope.counter++;
-          $scope.data = JSON.parse(e.data);
-        });
+      var source = null;
+
+      var connect = function() {
+        if (source) { return; }
+        source = new EventSource('/realtime/ps');
+        source.onmessage = function(e) {
+          $scope.$apply(function() {
+            $scope.counter++;
+            $scope.data = JSON.parse(e.data);
+          });
+        };
       };
+
+      var disconnect = function() {
+        if (!source) { return; }
+        source.close();
+        source = null;
+      };
+
+      $scope.$watch('isEnabled', function(value) {
+        if (value) {
+          connect();
+        } else {
+          disconnect();
+        }
+      });
+
+      $scope.$on("$destroy", disconnect);
     }
   };
   return directiveDefinitionObject;