Add autoroll package, alerts for failed rolls, recent rolls on Status

status/res/imp/autoroll-widget-sk.html

Index: status/res/imp/autoroll-widget-sk.html
diff --git a/status/res/imp/autoroll-widget-sk.html b/status/res/imp/autoroll-widget-sk.html
index 79744349728f84bfc744a39c702e87c74baada6b..ce229a42848309039c62e97f543671099213b1db 100644
--- a/status/res/imp/autoroll-widget-sk.html
+++ b/status/res/imp/autoroll-widget-sk.html
@@ -23,6 +23,13 @@
     :host {
       width: 180px;
     }
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
     #statusIndicator /deep/ core-icon{
       color: #E6AB02;
     }
@@ -34,6 +41,28 @@
       text-align: left;
       padding: 10px;
     }
+    table.rollHistory {
+      border-collapse: collapse;
+    }
+    table.rollHistory /deep/ td {
+      padding: 5px;
+    }
+    table.rollHistory /deep/ th {
+      background-color: #EEEEEE;
+      font-weight: normal;
+      font-size: 1.1em;
+      padding: 8px;
+      text-align:center;
+    }
+    tr.success {
+      background-color: #D1E4BC;
+    }
+    tr.failure {
+      background-color: #D95F02;
+    }
+    tr.inprogress {
+      background-color: #FFFF00;
+    }
     </style>
     <core-icon-button
         id="statusIndicator"
@@ -82,12 +111,32 @@
             </td>
           </tr>
           <tr>
+            <td>Recent:</td>
+            <td>
+              <table class="rollHistory">
+                <tr>
+                  <th>Roll</th>
+                  <th>Status</th>
+                  <th>Last Modified</th>
+                </tr>
+                <template repeat="{{roll in recent}}">
+                  <tr class="{{roll.Closed ? (roll.Committed ? 'success' : 'failure') : 'inprogress'}}">
+                    <td><a href="https://codereview.chromium.org/{{roll.Issue}}" target="_blank">{{roll.Issue}}</a></td>
+                    <td>{{roll.Closed ? (roll.Committed ? 'Succeeded' : 'Failed') : 'In progress'}}</td>
+                    <td>{{roll.Modified|readableDate}}</td>
+                  </tr>
+                </template>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td>Full History:</td>
             <td>
               <a href="https://codereview.chromium.org/user/skia-deps-roller" target="_blank">
-                Uploaded Roll CLs on Rietveld
+                https://codereview.chromium.org/user/skia-deps-roller
               </a>
             </td>
-          <tr>
+          </tr>
         </table>
       </paper-shadow>
     </paper-dropdown>
@@ -102,12 +151,15 @@
       },
 
       created: function() {
+        this.recent = null;
+        this.recentTimeout = null;
         this.status = null;
-        this.timeout = null;
+        this.statusTimeout = null;
       },
 
       ready: function() {
         this.reloadStatus();
+        this.reloadRecent();
       },
 
       toggle: function() {
@@ -118,35 +170,65 @@
       },
 
       reloadChanged: function() {
-        this.resetTimeout();
+        this.resetRecentTimeout();
+        this.resetStatusTimeout();
+      },
+
+      resetRecentTimeout: function() {
+        if (this.recentTimeout) {
+          window.clearTimeout(this.recentTimeout);
+        }
+        if (this.reload > 0) {
+          var that = this;
+          this.recentTimeout = window.setTimeout(function() { that.reloadRecent(); }, this.reload * 1000);
+        }
       },
 
-      resetTimeout: function() {
-        if (this.timeout) {
-          window.clearTimeout(this.timeout);
+      resetStatusTimeout: function() {
+        if (this.statusTimeout) {
+          window.clearTimeout(this.statusTimeout);
         }
         if (this.reload > 0) {
           var that = this;
-          this.timeout = window.setTimeout(function() { that.reloadStatus(); }, this.reload * 1000);
+          this.statusTimeout = window.setTimeout(function() { that.reloadStatus(); }, this.reload * 1000);
         }
       },
 
+      updateRecent: function(recent) {
+        this.recent = recent;
+        this.dispatchEvent(new CustomEvent("change", {
+          detail: {
+            recent: this.recent,
+          }
+        }));
+      },
+
       updateStatus: function(status) {
         this.status = status;
         this.dispatchEvent(new CustomEvent("change", {
           detail: {
             status: this.status,
           }
-        }))
+        }));
+      },
+
+      reloadRecent: function() {
+        var that = this;
+        sk.get("/json/autoRoll").then(JSON.parse).then(function(json) {
+          that.updateRecent(json.reverse());
+          that.resetRecentTimeout();
+        }).catch(function() {
+          that.resetRecentTimeout();
+        });
       },
 
       reloadStatus: function() {
         var that = this;
         sk.get("https://skia-tree-status.appspot.com/get_arb_status").then(JSON.parse).then(function(json) {
           that.updateStatus(json);
-          that.resetTimeout();
+          that.resetStatusTimeout();
         }).catch(function() {
-          that.resetTimeout();
+          that.resetStatusTimeout();
         });
       },
 
@@ -156,6 +238,11 @@
         }
         return commit;
       },
+
+      readableDate: function(d) {
+        var rv = new Date(d);
+        return rv.toLocaleDateString() + ", " + rv.toLocaleTimeString();
+      },
     });
   </script>
 </polymer-element>