<!--
  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>