perf/res/imp/commit-panel.html

<!-- The <perf-commits-panel-sk> custom element declaration.

  An element to display information on one or more commits.

  Attributes:
    progress - Boolean, if true then display the percent complete
      for the first hash.

    selection - Boolean, if true then selections are displayed, i.e. the user
      click on a commit and select it.

    selector - The iron-selector element that wraps the commits.

  Methods:
    setCommitInfo - Sets the commit info, an array of *perftracedb.CommitIDLong. See the
      description for the commits Mailbox for more details.

    selectCommitID - Forces the selection of the given id and source.

  Events:
    commit-selected - Event produced when a commit is selected. The event
      detail contains the serialized perftracedb.CommitIDLong:
        {
          description: "text describing the commit",
          commit: {
               ts: 14070203,
               id: "123abc",
               source: "master",
               author: "name@example.org",
               desc: "Adds short commits."
           },
        }

  Mailboxes:
    commits - The sk.Mailbox name to listen for the data to populate
      the element. The mailbox data needs to be a serialized slice
      of []*perftracedb.CommitIDLong. If not set then the data must be supplied
      by the setCommitInfo method.

        [
            {
               ts: 14070203,
               id: "123abc",
               source: "master",
               author: "name@example.org",
               desc: "Adds short commits."
            },
        ]

-->
<link rel="stylesheet" href="/res/common/css/md.css">
<link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">
<link rel="import" href="commit.html">

<dom-module id="perf-commits-panel-sk">
  <style type="text/css" media="screen">
      div {
        margin-bottom: 0.5em;
      }

      perf-commit-sk {
        margin: 0em;
        display: block;
        padding: 0.2em;
        padding-right: 2em;
      }

      .selection perf-commit-sk:hover {
        background: #eee;
      }

      pre {
        font-size: 14px;
        margin: 0.2em 0;
        padding: 0.3em;
      }

      .iron-selected {
        background: #ddd;
      }

      :host {
        display: block;
      }
    </style>
  <template>
    <template is="dom-if" if="{{progress}}">
      <div>
        <a target="_blank" href$="{{_statusHref(_firstHash)}}">Buildbot Percent Complete: <span>{{_commitPercent(_percent)}}</span>%</a>
      </div>
    </template>
    <iron-selector id=selector class$="{{_selectionClass(selection)}}">
      <template is="dom-repeat" items="[[_commitinfo]]" as="c" initial-count=5>
        <perf-commit-sk commit="[[c]]"></perf-commit-sk>
      </template>
    </iron-selector>
    </table>
  </template>
  <script>
    Polymer({
      is: 'perf-commits-panel-sk',

      properties: {
        progress: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
        },
        selection: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
          observer: "_selectionChanged",
        },
      },

      listeners: {
        "selector.iron-select": "_selectorTap",
      },

      ready: function () {
        this._percent = -1.0;
        this._firstHash = '';
        this.selector = this.$.selector;
        sk.Mailbox.subscribe('commits', this.setCommitInfo.bind(this));
      },

      setCommitInfo: function(commitinfo) {
        this._commitinfo = commitinfo;
        this._processCommitInfo();
      },

      selectCommitID: function(id, source) {
        $$('perf-commit-sk', this).forEach(function(ele) {
          if (ele.cid == id && ele.source == source) {
            this.selector.select(this.selector.indexOf(ele));
          }
        }.bind(this));
      },

      _selectorTap: function(e) {
        var detail = {
          description: e.detail.item.asString(),
          commit: e.detail.item.commit,
        };
        this.dispatchEvent(new CustomEvent('commit-selected', { detail: detail, bubbles: true }));
      },

      _selectionChanged: function() {
        this.$.selector.selectedClass = this.selection ? "iron-selected" : "no-matching-class";
      },

      _processCommitInfo: function () {
        if (this._commitinfo && this._commitinfo.length) {
          this._firstHash = this._commitinfo[this._commitinfo.length - 1].id;
          if (this.progress) {
            var url = 'https://status.skia.org/json/skia/buildProgress?commit=' + this._firstHash;
            // The status server returns JSON of the form:
            //
            // {
            //   "commit": "e9e3ee33f30c14c31afd5fc3fe4dda7f15783c75",
            //   "finishedTasks": 111,
            //   "finishedProportion": 0.7762237762237763,
            //   "totalTasks": 143
            // }
            sk.get(url).then(JSON.parse).then(function (json) {
              this._percent = json.finishedProportion;
            }.bind(this)).catch(sk.errorMessage);
          }
        }
      },

      // _removeSecurityHeader strips the first 4 chars from the input. Needed
      // since googlesource.com prefixes all JSON responses with )]}' as an
      // XSS defense.
      _removeSecurityHeader: function (s) {
        return s.slice(4, s.length);
      },

      _commitPercent: function (p) {
        if (p == -1.0) {
          return "[calculating]";
        }
        return Math.round(p * 100);
      },

      _statusHref: function (hash) {
        return 'https://status.skia.org/?commit=' + hash + '&commitLabel=author&filter=all';
      },

      _selectionClass: function(selection) {
        if (selection) {
          return "selection";
        } else {
          return "";
        }
      },
    });
  </script>
</dom-module>