Switch the Scoreboard stats into charts

This makes it more easy to 'at a glance' see what a system is up to. Its using
the same counts of success, fail, and unknown as before but now using
EZBC-js to display them as a vertical bar chart. In addition it shows how
many results are 'missing', whether that be that the system missed the
patcheset or just hasn't voted yet.

Change-Id: Ia9d57a74754d64c9faf3826e78ddfb9db574deb7

monitoring/scoreboard/static/ezbc.js

@@ -0,0 +1,88 @@
+/*
+ * Easy Bar Charts
+ *
+ * https://github.com/patrick-east/EZBC-js
+ *
+ * This only makes vertical stacked bar charts. The will be the size of
+ * whatever container you draw it in. It does not retain data, handle
+ * resize, make other types of graphs, deliver beer, or anything special.
+ */
+var EZBC = (function () {
+    var chart = {};
+    /*
+     * Expect a container element reference and data in the format of:
+     *  [
+     *      {
+     *          value: 50,
+     *          color: "#FF00FF",
+     *          label: "wins",
+     *          border: true,
+     *          borderColor: "#000000"
+     *      },
+     *      {
+     *          value: 10,
+     *          color: "yellow",
+     *          label: "loses"
+     *      },
+     *  ]
+     *
+     *  Note: The order of elements is how they will be drawn from bottom to top.
+     */
+    chart.draw = function (container, data, borderSize, borderColor) {
+        var totalValue = 0;
+        for (var i = 0; i < data.length; i++) {
+            totalValue += data[i]['value'];
+
+            // check for some 'required' fields and try some defaults...
+            if (!data[i].hasOwnProperty('color')) {
+                data[i].color = '#'+Math.floor(Math.random()*16777215).toString(16);
+            }
+
+            if (!data[i].hasOwnProperty('border')) {
+                data[i].border = false;
+            }
+            else if (!data[i].hasOwnProperty('borderColor')) {
+                data[i].borderColor = '#000000';
+            }
+        }
+
+        var chartHeight = parseFloat(container.style.height);
+        var chartWidth = parseFloat(container.style.width);
+
+        var chartSVG = '<svg ';
+        chartSVG += 'width="' + chartWidth + '" ';
+        chartSVG += 'height="' + chartHeight + '" ';
+        chartSVG += 'style="border: ' + borderSize + 'px ' + borderColor +  '">';
+
+        // adjust for the border width...
+        chartHeight -= borderSize * 2;
+        chartWidth -= borderSize * 2;
+
+        var currentY = chartHeight;
+        for (var i = 0; i < data.length; i++) {
+            if (!data[i].value) {
+                continue;  // skip empty ones
+            }
+            var rectHeight = Math.round(chartHeight * (data[i].value / totalValue));
+            chartSVG += '<rect ';
+            chartSVG += 'width="' + chartWidth + '" ';
+            chartSVG += 'height="' + currentY + '" ';
+            chartSVG += 'x=' + borderSize + ' ';
+            chartSVG += 'y=' + borderSize + ' ';
+            chartSVG += 'style="fill:' + data[i].color + ';';
+            if (data[i].border) {
+                chartSVG += 'stroke-width:' + borderSize + ';stroke:' + data[i].borderColor + ';';
+            }
+            chartSVG += '">';
+            if (data[i].hasOwnProperty('label')) {
+                chartSVG += '<title>' + data[i].label + '</title>';
+            }
+            chartSVG += '</rect>';
+            currentY -= rectHeight;
+        }
+        chartSVG += '</svg>';
+        container.innerHTML = chartSVG;
+    };
+
+    return chart;
+}());

monitoring/scoreboard/static/scoreboard.js

@@ -301,24 +301,71 @@ var Scoreboard = (function () {
         var score_row = null;
         var label = null;
 
-        var scores = Object.keys(score);
+        score_row = $(document.createElement('tr'));
 
-        for (var i = 0; i < scores.length; i++) {
+        label = create_header();
-            var result_type = scores[i];
+        label.html('Score');
-            score_row = $(document.createElement('tr'));
+        label.appendTo(score_row);
+        $(score_row).insertAfter($('table tr.table_header'));
 
-            label = create_header();
+        for (var j = 0; j < ci_accounts.length; j++) {
-            label.html(result_type);
+            var ci = ci_accounts[j]
-            label.appendTo(score_row);
 
-            for (var j = 0; j < ci_accounts.length; j++) {
+            score_header = create_header();
-                var ci = ci_accounts[j]
+            score_header.appendTo(score_row);
+            score_header.css({
+                width: '75px',
+                height: '75px',
+            })
 
-                label = create_header();
+            var data = []
-                label.html(score[result_type][ci._id] || 0);
+            var count = 0;
-                label.appendTo(score_row);
+            if (score['SUCCESS'] && score['SUCCESS'][ci._id] > 0) {
+                data.push({
+                    value: score['SUCCESS'][ci._id],
+                    color:'#00FF00',
+                    label: 'Success: ' + score['SUCCESS'][ci._id],
+                    border: true,
+                    borderColor: 'grey'
+                });
+                count += score['SUCCESS'][ci._id];
             }
-            $(score_row).insertAfter($('table tr.table_header'));
+
+            if (score['FAIL'] && score['FAIL'][ci._id] > 0) {
+                data.push({
+                    value: score['FAIL'][ci._id],
+                    color:'#FF3300',
+                    label: 'Fail: ' + score['FAIL'][ci._id],
+                    border: true,
+                    borderColor: 'grey'
+                });
+                count += score['FAIL'][ci._id];
+            }
+            if (score['UNKNOWN'] && score['UNKNOWN'][ci._id] > 0) {
+                data.push({
+                    value: score['UNKNOWN'][ci._id],
+                    color:'#FF0000',
+                    label: 'Unknown: ' + score['UNKNOWN'][ci._id],
+                    border: true,
+                    borderColor: 'grey'
+                });
+                count += score['UNKNOWN'][ci._id];
+            }
+
+            var table = $('#scoreboard > table > tbody > tr')
+            var total_count = $('#scoreboard > table > tbody > tr').length - 2; // don't count the first two rows
+            var missing = total_count - count;
+            if (missing > 0) {
+                data.push({
+                    value: missing,
+                    color:'#FFFFFF',
+                    label: 'Missing: ' + missing,
+                    border: true,
+                    borderColor: 'grey'
+                });
+            }
+
+            EZBC.draw(score_header[0], data, 3, 'grey');
         }
     };
 

monitoring/scoreboard/templates/index.html

@@ -4,6 +4,7 @@
         <script type='text/javascript' src='/static/jquery-2.1.3.min.js'></script>
         <script type='text/javascript' src='/static/scoreboard.js'></script>
         <script type='text/javascript' src='http://fgnass.github.io/spin.js/spin.js'></script>
+        <script type='text/javascript' src='/static/ezbc.js'></script>
         <link rel='stylesheet' type='text/css' href='/static/scoreboard.css'>
     </head>
     <body>