[sheriff-o-matic]: Basic trooper display for sheriff-o-matic.

Tools/GardeningServer/ui/ct-trooper-card.html

+<!--
+Copyright 2014 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+
+
+<polymer-element name="ct-trooper-card" attributes="group">
+  <template>
+    <style>
+      #failure {
+        flex: 1;
+        margin-left: 10px;
+      }
+
+      #details {
+        font-weight: bold;
+      }
+
+      #chart {
+        height: 100px;
+        width: 400px;
+      }
+    </style>
+    <div id="failure">
+      <div id="details">
+        {{ group.tree }}: {{ group.details }}
+      </div>
+      <div id='chart'></div>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      group: null,
+      fromPercent: function(v) {
+        return Number(v.substring(0, v.length - 1));
+      },
+      groupChanged: function() {

[ojan, 2014/09/04 02:58:44]

Are there any tests for this code? I'd at least like a test of each switch case
that shows we get to the end of this function. You could do that by checking
that a chart got inserted into the chart div.

[shans, 2014/09/05 00:08:20]

Done.

+        if (!this.group) {
+          return;
+        }
+        switch (this.group.type) {
+        case 'cq_latency':
+          var dataTable = google.visualization.arrayToDataTable([
+            ['Percentile', 'Limit', 'Actual', {role: 'style'}],
+            ['p50', 60, this.group.data.p50, this.group.data.p50 > 60 ? 'red' : 'green'],
+            ['p90', 180, this.group.data.p90, this.group.data.p90 > 180 ? 'red' : 'green']
+          ]);
+
+          var options = {
+            title: 'cq latency',
+            hAxis: {title: 'Percentile'},
+            series: [{color: 'grey'}, {color: 'red'}]
+          };
+          break;
+        case 'tree_status':
+          var dataTable = google.visualization.arrayToDataTable([
+            ['', 'Minimum', 'Actual'],
+            ['Open', 80, this.group.data.percent_open]
+          ]);
+
+          var options = {
+            title: 'tree status',
+            series: [{color: 'grey'}, {color: 'red'}]
+          };
+          break;
+        case 'cycle_time':
+          var dataTable = google.visualization.arrayToDataTable([
+            ['', 'Median', 'Max'],
+            ['percent of builds',
+                this.fromPercent(this.group.data.percent_over_median_slo),
+                this.fromPercent(this.group.data.percent_over_max_slo)]
+          ]);
+
+          var options = {
+            title: 'cycle times over SLO',
+            series: [{color: 'orange'}, {color: 'red'}]
+          };
+          break;
+        default:
+          return;

[ojan, 2014/09/04 02:58:44]

Should we console.error here?

[shans, 2014/09/05 00:08:20]

Done.

+        }
+        options.height = 100;
+        options.vAxis = {minValue: 0};
+        options.chartArea = {width: 200};
+        var chart = new google.visualization.ColumnChart(this.$.chart);
+        chart.draw(dataTable, options);
+      },
+    });
+  </script>
+</polymer-element>