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