Add UI for A/B testing on owned commits.
[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / owned-commit-viewer.js
1 class OwnedCommitViewer extends ComponentBase {
2
3     constructor(previousCommit, currentCommit)
4     {
5         super('owned-commit-viewer');
6         this._previousCommit = previousCommit;
7         this._currentCommit = currentCommit;
8         this._previousOwnedCommits = null;
9         this._currentOwnedCommits = null;
10         this._showingOwnedCommits = false;
11         this._renderOwnedCommitTableLazily = new LazilyEvaluatedFunction(this._renderOwnedCommitTable.bind(this));
12     }
13
14     didConstructShadowTree()
15     {
16         this.part('expand-collapse').listenToAction('toggle', (expanded) => this._toggleVisibility(expanded));
17     }
18
19     _toggleVisibility(expanded)
20     {
21         this._showingOwnedCommits = expanded;
22         this.enqueueToRender();
23
24         Promise.all([this._previousCommit.fetchOwnedCommits(), this._currentCommit.fetchOwnedCommits()]).then((ownedCommitsList) => {
25             this._previousOwnedCommits = ownedCommitsList[0];
26             this._currentOwnedCommits = ownedCommitsList[1];
27             this.enqueueToRender();
28         });
29     }
30
31     render()
32     {
33         const hideSpinner = (this._previousOwnedCommits && this._currentOwnedCommits) || !this._showingOwnedCommits;
34
35         this.content('difference-entries').style.display =  this._showingOwnedCommits ? null : 'none';
36         this.content('spinner-container').style.display = hideSpinner ? 'none' : null;
37         this.content('difference-table').style.display = this._showingOwnedCommits ? null : 'none';
38         this._renderOwnedCommitTableLazily.evaluate(this._previousOwnedCommits, this._currentOwnedCommits);
39     }
40
41     _renderOwnedCommitTable(previousOwnedCommits, currentOwnedCommits)
42     {
43         if (!previousOwnedCommits || !currentOwnedCommits)
44             return;
45
46         const difference = CommitLog.ownedCommitDifferenceForOwnerCommits(this._previousCommit, this._currentCommit);
47         const sortedRepositories = Repository.sortByName([...difference.keys()]);
48         const element = ComponentBase.createElement;
49
50         const tableEntries = sortedRepositories.map((repository) => {
51             const revisions = difference.get(repository);
52             return element('tr', [element('td', repository.name()),
53                 element('td', revisions[0] ? revisions[0].revision() : ''),
54                 element('td', revisions[1] ? revisions[1].revision() : '')]);
55         });
56         this.renderReplace(this.content('difference-entries'), tableEntries);
57     }
58
59     static htmlTemplate()
60     {
61         return `
62             <expand-collapse-button id="expand-collapse"></expand-collapse-button>
63             <table id="difference-table">
64                 <tbody id="difference-entries"></tbody>
65             </table>
66             <div id="spinner-container"><spinner-icon id="spinner"></spinner-icon></div>`;
67     }
68
69     static cssTemplate() {
70         return `
71             :host {
72                 display: block;
73                 font-size: 0.8rem;
74                 font-weight: normal;
75             }
76
77             expand-collapse-button {
78                 margin-left: calc(50% - 0.8rem);
79                 display: block;
80             }
81
82             td, th {
83                 padding: 0.2rem;
84                 margin: 0;
85                 border-top: solid 1px #ccc;
86             }
87
88             #difference-table {
89                 width: 100%;
90             }
91
92             #spinner-container {
93                 text-align: center;
94             }`;
95     }
96 }
97
98 ComponentBase.defineElement('owned-commit-viewer', OwnedCommitViewer);