Add the build worker and job count information to the charts

static/directives/ps-usage-graph.html

@@ -1,4 +1,17 @@
 <div class="ps-usage-graph-element">
+  Build Workers:
+  <div class="realtime-area-chart"
+       data="[data.build.job_total, data.build.running_total]"
+       labels="['Queued Build Jobs', 'Running Build Jobs']"
+       colors="['rgb(157, 194, 211)', 'rgb(56, 122, 163)']"
+       counter="counter"></div>
+
+  <div class="realtime-area-chart"
+       data="[data.build.job_total, data.build.workers, data.build.running_local]"
+       labels="['Queued Build Jobs', 'Build Workers (local)', 'Running Build Jobs (local)']"
+       colors="['rgb(157, 194, 211)', 'rgb(161, 208, 93)', 'rgb(210, 237, 130)']"
+       counter="counter"></div>
+
   CPU:
   <div class="realtime-line-chart" data="data.count.cpu" counter="counter"
        label-template="CPU #{x} %"></div>

static/directives/realtime-area-chart.html

@@ -0,0 +1,3 @@
+<div class="realtime-area-chart-element">
+    <div class="chart" style="width: 450px; height: 250px;"></div>
+</div>

static/js/app.js

@@ -6522,6 +6522,81 @@ 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,