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

Tools/GardeningServer/ui/ct-cq-latency-card.html

Index: Tools/GardeningServer/ui/ct-cq-latency-card.html
diff --git a/Tools/GardeningServer/ui/ct-cq-latency-card.html b/Tools/GardeningServer/ui/ct-cq-latency-card.html
new file mode 100644
index 0000000000000000000000000000000000000000..3112707eeff275852f712318a5424c75d044d935
--- /dev/null
+++ b/Tools/GardeningServer/ui/ct-cq-latency-card.html
@@ -0,0 +1,63 @@
+<!--
+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-cq-latency-card" attributes="group">
+  <template>
+    <style>
+      #failure {
+        flex: 1;
+        margin-left: 10px;
+      }
+
+      #details {
+        color: red;

[ojan, 2014/09/02 02:35:11]

No red. I'm OK with using color on this page to denote different things, but
everything on this page is an alert of some form, so everything on the page
could be red.

[shans, 2014/09/04 01:59:43]

Done.

+        font-weight: bold;
+      }
+
+      .snoozed {
+        opacity: 0.5;
+      }
+    </style>
+    <div id="failure" class="{{ { snoozed: group.isSnoozed } | tokenList }}">
+      <div id="details">
+        {{ group.tree }}: {{ group.data.details }}
+      </div>
+        <div id='chart'></div>
+      <div><a href="{{ group.data.url }}">link</a>
+    </div>
+  </template>
+  <script>
+    Polymer('ct-cq-latency-card', {
+      group: null,
+      commits: null,
+      _commits: function() {
+        if (!this.group)
+          return undefined;
+        return this.group.commitList(this.commits);
+      },
+      ready: function() {
+        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'},
+            vAxis: {minValue: 0},
+            series: [{color: 'grey'}, {color: 'red'}]
+        };
+
+        var chart = new google.visualization.ColumnChart(this.$.chart);
+        chart.draw(dataTable, options);
+      },
+    });
+  </script>
+</polymer-element>
+
+