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

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

 <!--
   The common.js file must be included before this file.
 
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <autoroll-widget-sk>
 
   To use this file import it:
 
     <link href="/res/imp/autoroll-widget-sk.html" rel="import" />
 
   Usage:
 
     <autoroll-widget-sk></autoroll-widget-sk>
 
   Properties:
     reload: How often (in seconds) to reload autoroll data.
 -->
 <polymer-element name="autoroll-widget-sk">
   <template>
     <style>
     :host {
       width: 180px;
     }
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
     #statusIndicator /deep/ core-icon{
       color: #E6AB02;
     }
     paper-dropdown {
       top: 50px;
     }
     #rolldetails {
       color: #000000;
       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"
         on-tap="{{toggle}}"
         class="{{status.status}}"
         icon="{{status.status == 'In progress' ? 'autorenew' : (status.status == 'Stopped' ? 'error' : 'check-circle')}}">
       Roll: {{status.status}}
     </core-icon-button>
     <paper-dropdown>
       <paper-shadow z="2">
@@ skipping 28 matching lines @@
                  target="_blank">
                 <core-icon-button
                     icon="av:play-arrow"
                     disabled?="{{status.status != 'Stopped'}}"
                     on-tap="{{startRoller}}">
                 </core-icon-button>
               </a>
             </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>
   </template>
   <script>
     Polymer({
       publish: {
         reload: {
           value: 60,
           reflect: true,
         },
       },
 
       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() {
         var dropdown = this.shadowRoot.querySelector("paper-dropdown");
         if (dropdown) {
           dropdown.toggle();
         }
       },
 
       reloadChanged: function() {
-        this.resetTimeout();
+        this.resetRecentTimeout();
+        this.resetStatusTimeout();
       },
 
-      resetTimeout: function() {
-        if (this.timeout) {
-          window.clearTimeout(this.timeout);
+      resetRecentTimeout: function() {
+        if (this.recentTimeout) {
+          window.clearTimeout(this.recentTimeout);
         }
         if (this.reload > 0) {
           var that = this;
-          this.timeout = window.setTimeout(function() { that.reloadStatus(); }, this.reload * 1000);
+          this.recentTimeout = window.setTimeout(function() { that.reloadRecent(); }, this.reload * 1000);
         }
       },
 
+      resetStatusTimeout: function() {
+        if (this.statusTimeout) {
+          window.clearTimeout(this.statusTimeout);
+        }
+        if (this.reload > 0) {
+          var that = this;
+          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();
         });
       },
 
       shortCommit: function(commit) {
         if (commit) {
           return commit.substring(0, 7);
         }
         return commit;
       },
+
+      readableDate: function(d) {
+        var rv = new Date(d);
+        return rv.toLocaleDateString() + ", " + rv.toLocaleTimeString();
+      },
     });
   </script>
 </polymer-element>