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

<!-- The <gold-status-sk> element displays the status of gold

  Attributes:
    status: Input attribute that defines the current status. Should be in the format:
            {
              corpStatus: [
                {name: "svg", untriagedCount: 47, negativeCount:949 },
                {name: "colorImage", untriagedCount: 17, negativeCount:449 },
                {name: "gm", untriagedCount: 27, negativeCount:649 },
                {name: "image", untriagedCount: 61, negativeCount:9 }
              ],
              lastCommit: {
                hash: "136baaa927877e0f7fcc97acb456ee0d63f7f343",
                author: "username",
              }
            }

            The keys of corpStatus are the different corpora availalbe.

    corpus: Output attribute that reflects the currently selected corpus.

  Events:
    corpus-change: Fired whenever the corpus is changed by the user.

  Methods:
    setCorpus(corpus): Sets the current corpus to the given argument. It does
                       not fire a corpus-change event.
-->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="gold-status-sk">
  <template>
    <style>
    .wrapper {
      min-height: 48px;
      display: inline-block;
      float: left;
    }

    #corpusSelector {
      display: inline-block;
    }

    .statusEntry {
      font-size: 12pt;
      display: inline-block;
      float: left;
      height: 48px;
      line-height: 48px;
      padding: 0 1em 0 1em;
      position: relative;
    }

    .statusEntry a {
      color: white;
    }

    /* iron-selected is applied to paper-tab when selected */
    paper-tab.iron-selected div.marker {
      height: 6px;
      background-color: white;
      position:absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }

    paper-tab.iron-selected {
      font-weight: bold;
    }

    :host {
      --paper-tabs-selection-bar-color: white;
    };
    </style>
    <template is="dom-if" if="{{status}}">
        <div class="wrapper">
          <paper-tabs id="corpusSelector" attr-for-selected="data-tabid" selected="{{corpus}}" on-iron-select="_handleCorpusChanged" no-slide no-bar noink>
            <template is="dom-repeat" items="{{status.corpStatus}}">
              <paper-tab class="statusEntry" data-tabid$="{{item.name}}">
                {{item.name}}:{{item.untriagedCount}} / {{item.negativeCount}}
                <div class="marker"></marker>
              </paper-tab>
            </template>
          </paper-tabs>
        </div>
        <div class="statusEntry">
          <a href$="{{_commitURL(status.lastCommit.hash)}}" target="_blank">
             Last Commit: {{_lastCommitText(status)}}
          </a>
        </div>
      </div>
    </template>
  </template>
  <script>
    Polymer({
      is: "gold-status-sk",

      properties: {
        status: {
          type: Object,
          value: null
        },
        corpus: {
          type: String,
          value: sk.app_config.defaultCorpus,
          notify: true,
          reflectToAttribute: true
        }
      },

      ready: function() {
        this.status = null;
        this._noFire = true;
        this._reload();
      },

      setCorpus: function(corpus) {
        if (this.corpus === corpus) {
          return;
        }
        this._noFire = true;
        if (this.status) {
          for(var i=0, len=this.status.corpStatus.length; i < len; i++) {
            if (this.status.corpStatus[i].name === corpus) {
              this.set("corpus", corpus);
              return;
            }
          }
          // Since this is not a valid status set to default.
          this.set("corpus", "gm");
          return;
        }
        // If we have to way to validate the status, trust the client.
        this.set("corpus", corpus);
      },

      // Called when the user selects a corpus.
      _handleCorpusChanged: function(ev) {
        if (!this._noFire) {
          this.fire('corpus-change', ev.target.selected);
        }
        this._noFire = false;
      },

      // Load or reload the listing.
      _reload: function() {
        sk.get("/json/trstatus").then(JSON.parse).then(function (json) {
          if (JSON.stringify(json) != JSON.stringify(this.status)) {
            this.status = json;
          }

          this.async(this._reload, 3000);
        }.bind(this)).catch(function(errorMessage) {
          this.status = null;
          console.log("Status Error:", errorMessage);
          this.async(this._reload, 3000);
        }.bind(this));
      },

      _lastCommitText: function(status) {
        return this._limitTo(status.lastCommit.hash, 7) + " - " +  this._limitTo(status.lastCommit.author, 0);
      },

      // _limitTo is a custom filter that returns the first len characters of
      // a string or all characters before '(' - depending on len.
      _limitTo: function(val, len) {
        if (len > 0) {
          return val.substr(0, len);
        }
        var idx = val.indexOf('(');
        return val.substring(0, (idx === -1) ? val.length : idx);
      },

      // _commitURL returns the repository url for the given hash.
      _commitURL: function(hash) {
        var url = sk.app_config.baseRepoURL;
        if (!url) {
          // should never happen, but with Polymer, one can never be too cautious.
          return;
        }
        if (url.indexOf('github.com') !== -1) {
          return url + '/commit/' + hash;
        } else {
          return url + '/+show/' + hash;
        }
      }
    });
  </script>
</dom-module>