WIP: Add auto-sheriff.appspot.com code to Blink

Tools/AutoSheriff/ui/nb-alert-list.html

Index: Tools/AutoSheriff/ui/nb-alert-list.html
diff --git a/Tools/AutoSheriff/ui/nb-alert-list.html b/Tools/AutoSheriff/ui/nb-alert-list.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f9dc047e213487fa4bc58cc72d8ea32a167dca0
--- /dev/null
+++ b/Tools/AutoSheriff/ui/nb-alert-list.html
@@ -0,0 +1,70 @@
+<polymer-element name="nb-alert-list" attributes='failures'>

[ojan, 2014/07/22 02:01:27]

Copyright. Here and in all the files below

[ojan, 2014/07/22 02:01:27]

Copyright

+  <template>
+    <sortable-table id='table' data='{{failures}}' rowTemplate="rowTemplate" style='width: 100%'>
+      <template id="rowTemplate">
+        <style>
+          .fail_link { background-color: #FCC;}

[ojan, 2014/07/22 02:01:27]

Nit: we've been using fail-link and pass-link style for classnames and IDs.
Although, I suppose that's not awesome since you can't put a - in a variable
name. :(

Also, inconsistent spacing.

+          .pass_link { background-color: #CFC;}
+        </style>
+        <td>{{record.row.master_url | master_name }}</td>

[ojan, 2014/07/22 02:01:27]

Inconsistent spacing. FWIW, we've been standardizing on {{ thingy }}.

+        <td style='max-width: 150px; overflow: hidden'>
+          <a href='{{ record.row | builder_url }}'>{{record.row.builder_name}}</a>
+        </td>
+        <td>{{record.row.failing_build_count}}</td>
+        <td style='max-width: 300px; overflow: hidden; word-wrap: break-word;'>
+          <a href='{{ record.row | stdio_url(record.row.failing_build) }}'>{{record.row.step_name}}</a>
+          <br>
+          <template if="{{ record.row.reason }}">
+            <a href="{{ record.row.reason | flakiness_dashboard_url(record.row.step_name, record.row.master_url) }}">
+              {{record.row.reason }}
+            </a>
+          </template>
+        </td>
+        <td>
+          <a class='fail_link' href="{{ record.row | build_url(record.row.failing_build) }}">F</a>
+          <template if='{{ record.row.passing_build }}'>
+            <a class='pass_link' href="{{ record.row | build_url(record.row.passing_build) }}">P</a>
+          </template>
+        </td>
+        <td style='max-width: 200px; overflow: hidden'>
+          <nb-changelogs passing="{{ record.row.passing_revisions }}" failing="{{record.row.failing_revisions}}"></nb-changelogs>
+        </td>
+        <td>{{ record.row.last_result_time | since_string }}</td>
+        <td>{{ record.row.would_close_tree }}</td>
+        <td>{{ record.row.tree_name }}</td>
+      </template>
+    </sortable-table>
+  </template>
+  <script>
+  Polymer('nb-alert-list', {
+    ready: function() {
+      this.$.table.columns = [
+        { title: 'master', name: 'master_url' },
+        { title: 'builder', name: 'builder_name' },
+        { title: 'times', name: 'failing_build_count' },
+        { title: 'failure', name: 'reason' },
+        { title: 'edges', name: 'failing_build' }, // bad sort criteria.
+        { title: 'changelogs', name: 'failing_revisions' }, // also bad.
+        { title: 'since', name: 'last_result_time' },
+        { title: 'closer', name: 'would_close_tree' },
+        { title: 'tree', name: 'tree_name' },
+      ];
+      this.$.table.sortColumn = this.getQueryParameter('sortColumn');
+      this.$.table.sortDescending = this.getQueryParameter('sortDescending');
+    },
+    getQueryParameter: function(name) {
+      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
+      var results = regex.exec(window.location.search);
+      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+    },
+    observe: {
+    '$.table.sortColumn': 'sortColumnChanged'

[ojan, 2014/07/22 02:01:27]

Indentation is off.

+    },
+    sortColumnChanged: function(oldValue, newValue) {

[ojan, 2014/07/22 02:01:27]

Delete this code. Can always add it later.

+      // FIXME: Save the sort column in the url.
+      console.log(newValue);
+    }
+  });
+  </script>
+</polymer-element>