| <!-- |
| This in an HTML Import-able file that contains the definition |
| of the following elements: |
| |
| <autoroll-widget-sk> |
| |
| This element occasionally polls the autoroller, displaying the status and exposing |
| it for binding through the status property. |
| |
| To use this file import it: |
| |
| <link href="/res/imp/autoroll-widget-sk.html" rel="import" /> |
| |
| Usage: |
| |
| <autoroll-widget-sk reload="60" rollers="{{rollers}}"></autoroll-widget-sk> |
| |
| Properties: |
| // input |
| reload: Number, How often (in seconds) to reload the autoroll status. |
| |
| // output |
| rollers: Array of Objects; status information about various rollers: |
| name: String, name of the roller. |
| url: String, URL of the roller. |
| class: String, custom CSS class for the roller. |
| currentRollRev: String, revision of the currently-active roll, if any. |
| lastRollRev: String, revision of the last-successful roll. |
| mode: String, current mode of the roller. |
| numBehind: Number, how far behind the roller is. |
| numFailed: Number, how many rolls in a row have failed. |
| --> |
| |
| <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="/res/common/imp/styles-sk.html"> |
| <link rel="import" href="/res/common/imp/timer-sk.html"> |
| |
| <dom-module id="autoroll-widget-sk"> |
| <template> |
| <style include="iron-flex iron-flex-alignment styles-sk"> |
| :host { |
| font-family: sans-serif; |
| } |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| a:hover { |
| text-decoration: underline; |
| } |
| .td { |
| font-size: 1.0em; |
| padding: 6px; |
| } |
| .th { |
| padding: 8px; |
| } |
| </style> |
| |
| |
| <timer-sk period="[[reload]]" on-trigger="_reload"></timer-sk> |
| <div class="table"> |
| <div class="tr"> |
| <div class="th">Roller</div> |
| <div class="th">Mode</div> |
| <div class="th">Failed</div> |
| <div class="th">Behind</div> |
| </div> |
| <template is="dom-repeat" items="[[rollers]]" as="roller"> |
| <a class$="tr [[roller.class]]" href$="[[roller.url]]" target="_blank"> |
| <div class="td">[[roller.name]]</div> |
| <div class="td">[[roller.mode]]</div> |
| <div class="td number">[[roller.numFailed]]</div> |
| <div class="td number">[[roller.numBehind]]</div> |
| </a> |
| </template> |
| </div> |
| </template> |
| <script> |
| Polymer({ |
| is:"autoroll-widget-sk", |
| |
| properties: { |
| // input |
| reload: { |
| type: Number, |
| value: 60, |
| }, |
| |
| // output |
| rollers: { |
| type: Array, |
| notify: true, |
| value: function() { |
| return []; |
| }, |
| }, |
| }, |
| |
| ready: function() { |
| this._reload(); |
| }, |
| |
| _reload: function() { |
| console.log("Loading AutoRoll data..."); |
| sk.get("/json/autorollers").then(JSON.parse).then(function(data) { |
| this.set("rollers", []); |
| for (var roller in data) { |
| var rollerData = data[roller]; |
| rollerData.name = roller; |
| |
| // Find a color class for the roller. |
| // TODO(borenet): These numbers (especially number of commits behind) |
| // are probably going to differ from roller to roller. How can we give |
| // each roller its own definition of "bad"? |
| var badness = rollerData.numFailed / 2.0; |
| var badnessBehind = rollerData.numBehind / 20.0; |
| if (rollerData.mode !== "dry run" && badnessBehind > badness) { |
| badness = badnessBehind; |
| } |
| if (rollerData.mode === "stopped") { |
| rollerData.class = "bg-unknown"; |
| } else if (badness < 0.5) { |
| rollerData.class = "bg-success"; |
| } else if (badness < 1.0) { |
| rollerData.class = "bg-lightorange"; |
| } else { |
| rollerData.class = "bg-failure"; |
| } |
| |
| this.push("rollers", rollerData); |
| } |
| }.bind(this)).catch(function(msg) { |
| sk.errorMessage("Failed to load autoroll data: " + msg); |
| this.set("rollers", []) |
| }.bind(this)); |
| }, |
| |
| }); |
| </script> |
| </dom-module> |