added dynamic container pool graph to administrator dashboard

app/assets/javascripts/dashboard.js

@@ -1,16 +1,85 @@
 $(function() {
+  var CHART_START = window.vis ? vis.moment().add(-1, 'minute') : undefined;
   var DEFAULT_REFRESH_INTERVAL = 5000;
 
-  var refreshData = function() {
+  var dataset = undefined;
+  var graph = undefined;
+  var groups = undefined;
+
+  var buildChartGroups = function() {
+    return _.map($('tbody tr[data-id]'), function(element) {
+      return {
+        content: $('td.name', element).text(),
+        id: $(element).data('id'),
+        visible: false
+      };
+    });
+  };
+
+  var initializeChart = function() {
+    dataset = new vis.DataSet();
+    groups = new vis.DataSet(buildChartGroups());
+    graph = new vis.Graph2d(document.getElementById('graph'), dataset, groups, {
+      dataAxis: {
+        customRange: {
+          left: {
+            min: 0
+          }
+        },
+        showMinorLabels: false
+      },
+      drawPoints: {
+        style: 'circle'
+      },
+      end: vis.moment(),
+      legend: true,
+      shaded: true,
+      start: CHART_START
+    });
+  };
+
+  var refreshChart = function() {
+    var now = vis.moment();
+    var window = graph.getWindow();
+    var interval = window.end - window.start;
+    graph.setWindow(now - interval, now);
+  };
+
+  var refreshData = function(callback) {
     var jqxhr = $.ajax({
       dataType: 'json',
       method: 'GET'
     });
-    jqxhr.done(updateView);
+    jqxhr.done(function(response) {
+      (callback || _.noop)(response);
+      setGroupVisibility(response);
+      updateChartData(response);
+      updateTable(response);
+      requestAnimationFrame(refreshChart);
+    });
+  };
+
+  var setGroupVisibility = function(response) {
+    _.each(response.docker, function(data) {
+      groups.update({
+        id: data.id,
+        visible: data.pool_size > 0
+      });
+    });
+  };
+
+  var updateChartData = function(response) {
+    _.each(response.docker, function(data) {
+      dataset.add({
+        group: data.id,
+        x: vis.moment(),
+        y: data.quantity
+      });
+    });
   };
 
   var updateProgressBar = function(progress_bar, data) {
-    var percentage = Math.round(data.quantity / data.pool_size * 100);
+    var percentage = Math.min(Math.round(data.quantity / data.pool_size * 100), 100);
     progress_bar.attr({
       'aria-valuemax': data.pool_size,
       'aria-valuenow': data.quantity,
@@ -19,7 +88,7 @@ $(function() {
     progress_bar.html(data.quantity);
   };
 
-  var updateView = function(response) {
+  var updateTable = function(response) {
     _.each(response.docker, function(data) {
       var row = $('tbody tr[data-id=' + data.id + ']');
       $('.pool-size', row).html(data.pool_size);
@@ -28,7 +97,8 @@ $(function() {
     });
   };
 
-  if ($.isController('dashboard')) {
+  if ($.isController('dashboard') && $('#graph').isPresent()) {
+    initializeChart();
     refreshData();
     var refresh_interval = location.search.match(/interval=(\d+)/) ? parseInt(RegExp.$1) : DEFAULT_REFRESH_INTERVAL;
     setInterval(refreshData, refresh_interval);