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

<!--
  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></autoroll-widget-sk>

  Properties:
    // input
    reload: Number, How often (in seconds) to reload the autoroll status.
    name: String, name of the autoroller. Eg: Chromium, Android, Catapult, etc
    url: String, URL of the autoroller.

    // output
    status: Object, contains:
        currentRollRev: String, git hash of current roll
        currentRollIssue: Number, issue number tied with current roll
        lastRollRev: String, git hash of previous roll
        lastRollIssue: Number, issue number tied with previous roll
-->

<link rel="import" href="/res/imp/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.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">
      a {
        color: var(--status-sk-text-color);
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      iron-icon{
        color: var(--status-sk-icon-color);
      }
      paper-button {
        text-transform: none;
      }
      #textContainer {
        margin-left: 8px;
        text-align: left;
      }
    </style>

    <iron-ajax
      id="status"
      auto url="[[url]]/json/status"
      handle-as="json"
      last-response="{{_roll_status}}">
    </iron-ajax>
    <timer-sk period="[[reload]]" on-trigger="_reload">

    <a href$="[[url]]" target="_blank" class="inherit">
      <div class="horizontal layout center">
        <!-- Show the icons for the last 5 rolls-->
        <template is="dom-repeat"
            items="[[_truncate(_roll_status.recent,5)]]" as="result">
          <iron-icon
              id="statusIndicator"
              icon="[[_statusIcon(result)]]">
          </iron-icon>
        </template>
        <iron-icon
            id="statusIndicator"
            icon="icons:more-horiz">
        </iron-icon>
      </div>
      <div id="textContainer">
        [[name]]
        Roll: [[_roll_status.status]]<br/>
        Last: [[_roll_status.lastRoll.result]]
        [[_humanDiff(_roll_status.lastRoll.modified)]] ago
      </div>
    </a>
  </template>
  <script>
  Polymer({
    is:"autoroll-widget-sk",

    properties: {
      // input
      reload: {
        type: Number,
        value: 60,
      },
      name: {
        type: String,
        value: "",
      },
      url: {
        type: String,
        value: "https://autoroll.skia.org",
      },

      // output
      status: {
        type: Object,
        computed: "_getStatus(_roll_status)",
        notify: true,
      },

      // private
      _roll_status: {
        type: Object,
        value: function() {
          return {};
        },
      }
    },

    _getStatus: function(roll_status) {
      // It is better to return empty string (still falsey) than undefined, as the latter makes
      // multi-field observers harder to use.
      var curr = "";
      var currIssue = 0;
      var prev = "";
      var prevIssue = 0;
      if (roll_status) {
        prev = roll_status.lastRollRev || "";
        prevIssue = (roll_status.lastRoll && roll_status.lastRoll.issue) || "0";
        if (roll_status.currentRoll) {
          curr = roll_status.currentRoll.rollingTo || ""
          currIssue = roll_status.currentRoll.issue || "0";
        }
      }

      return {
        currentRollRev: curr,
        currentRollIssue: currIssue,
        lastRollRev: prev,
        lastRollIssue: prevIssue,
      };
    },

    _humanDiff: function(timeString) {
      return sk.human.diffDate(timeString);
    },

    _reload: function() {
      this.$.status.generateRequest();
    },

    _statusIcon:function(status) {
      if (!status || !status.result) {
        return "icons:error";
      }
      if (status.result === "in progress") {
        return "icons:autorenew";
      }
      if (status.result === "succeeded" ||
          status.result === "dry run succeeded") {
        return "icons:check-circle";
      }
      return "icons:error";
    },

    _truncate(arr,len) {
      return (arr && arr.slice && arr.slice(0,len)) || [];
    }

  });
  </script>
</dom-module>