status/res/imp/gold-status-sk.html

<!--
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <gold-status-sk>

  This element occasionally polls the autoroller, displaying the number of gms that need triaging.

  To use this file import it:

    <link href="/res/imp/gold-status-sk.html" rel="import" />

  Usage:

    <gold-status-sk></gold-status-sk>

  Properties:
    reload: How often (in seconds) to reload the gold status.
-->

<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/image-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">

<dom-module id="gold-status-sk">
  <template>
    <style>
      a {
        color: var(--status-sk-text-color);
        text-decoration: none;
        text-transform: none;
      }
      a.corpus:hover {
        text-decoration: underline;
      }
      .label {
        padding: 5px;
        text-transform: none;
        text-decoration: none;
      }
      .value {
        background-color: var(--status-sk-icon-color);
        border-radius: 3px;
        padding: 5px;
      }
      iron-icon {
        color: var(--status-sk-icon-color);
      }
    </style>

    <paper-button>
      <a href$="[[_goldUrl]]" target="_blank">
        <iron-icon icon="image:collections"></iron-icon>
      </a>

      <span class="label" hidden$="[[_goldAvailable(_goldStatus)]]">gold unavailable.</span>
      <span class="label" hidden$="[[!_goldAvailable(_goldStatus)]]">gold</span>

      <template is="dom-repeat" items="[[_objToArr(_goldStatus)]]" as="c">
        <a class="corpus" href$="[[_getLink(c)]]" target="_blank">
          <span class="label">[[c.name]]</span>
          <span class="value">[[c.untriagedCount]]</span>
        </a>
      </template>
    </paper-button>

  </template>
  <script>
  Polymer({
    is:"gold-status-sk",

    properties: {
      // input
      reload: {
        type: Number,
        value: 60,
      },

      // private
      _goldStatus: {
        type: Object,
      },

      // private
      _goldUrl: {
        type: String,
        value: "https://gold.skia.org"
      }
    },

    ready: function() {
      this._reload();
    },

    _reload: function(){
      this.async(this._reload, this.reload * 1000);
      sk.get(this._goldUrl+"/json/trstatus").then(JSON.parse).then(function (json) {
        this.set('_goldStatus', json);
      }.bind(this)).catch(function(errorMessage) {
        this.set('_goldStatus', null);
        console.log("Status Error:", errorMessage);
      }.bind(this));
    },

    _getLink: function(corpus) {
      return this._goldUrl + '/?query=source_type%3D' + corpus.name;
    },

    _objToArr: function(status) {
      return (status && status.corpStatus) ? status.corpStatus : [];
    },

    _goldAvailable: function(status) {
      return (status && status.corpStatus);
    }
  });
  </script>
</dom-module>