46938019cb35a28094e7f208e232df4d20569f2b
[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / customizable-test-group-form.js
1
2 class CustomizableTestGroupForm extends TestGroupForm {
3
4     constructor()
5     {
6         super('customizable-test-group-form');
7         this._commitSetMap = null;
8         this._name = null;
9         this._isCustomized = false;
10         this._revisionEditorMap = {};
11
12         this._renderCustomRevisionTableLazily = new LazilyEvaluatedFunction(this._renderCustomRevisionTable.bind(this));
13     }
14
15     setCommitSetMap(map)
16     {
17         this._commitSetMap = map;
18         this._isCustomized = false;
19         this.enqueueToRender();
20     }
21
22     startTesting()
23     {
24         this.dispatchAction('startTesting', this._repetitionCount, this._name, this._computeCommitSetMap());
25     }
26
27     didConstructShadowTree()
28     {
29         super.didConstructShadowTree();
30
31         const nameControl = this.content('name');
32         nameControl.oninput = () => {
33             this._name = nameControl.value;
34             this.enqueueToRender();
35         }
36
37         this.content('customize-link').onclick = this.createEventHandler(() => {
38             this._isCustomized = true;
39             this.enqueueToRender();
40         });
41     }
42
43     _computeCommitSetMap()
44     {
45         console.assert(this._commitSetMap);
46         if (!this._isCustomized)
47             return this._commitSetMap;
48
49         const map = {};
50         for (const label in this._commitSetMap) {
51             const originalCommitSet = this._commitSetMap;
52             const customCommitSet = new CustomCommitSet;
53             for (let repository of this._commitSetMap[label].repositories()) {
54                 const revisionEditor = this._revisionEditorMap[label].get(repository);
55                 console.assert(revisionEditor);
56                 customCommitSet.setRevisionForRepository(repository, revisionEditor.value);
57             }
58             map[label] = customCommitSet;
59         }
60         return map;
61     }
62
63     render()
64     {
65         super.render();
66
67         this.content('start-button').disabled = !(this._commitSetMap && this._name);
68         this.content('customize-link-container').style.display = !this._commitSetMap ? 'none' : null;
69
70         this._renderCustomRevisionTableLazily.evaluate(this._commitSetMap, this._isCustomized);
71     }
72
73     _renderCustomRevisionTable(commitSetMap, isCustomized)
74     {
75         if (!commitSetMap || !isCustomized) {
76             this.renderReplace(this.content('custom-table'), []);
77             return null;
78         }
79
80         const repositorySet = new Set;
81         const commitSetLabels = [];
82         this._revisionEditorMap = {};
83         for (const label in commitSetMap) {
84             for (const repository of commitSetMap[label].repositories())
85                 repositorySet.add(repository);
86             commitSetLabels.push(label);
87             this._revisionEditorMap[label] = new Map;
88         }
89
90         const repositoryList = Repository.sortByNamePreferringOnesWithURL(Array.from(repositorySet.values()));
91         const element = ComponentBase.createElement;
92         this.renderReplace(this.content('custom-table'), [
93             element('thead',
94                 element('tr',
95                     [element('td', 'Repository'), commitSetLabels.map((label) => element('td', {colspan: commitSetLabels.length + 1}, label))])),
96             element('tbody',
97                 repositoryList.map((repository) => {
98                     const cells = [element('th', repository.label())];
99                     for (const label in commitSetMap)
100                         cells.push(this._constructRevisionRadioButtons(commitSetMap, repository, label));
101                     return element('tr', cells);
102                 }))]);
103
104         return repositoryList;
105     }
106
107     _constructRevisionRadioButtons(commitSetMap, repository, rowLabel)
108     {
109         const element = ComponentBase.createElement;
110         const revisionEditor = element('input');
111
112         this._revisionEditorMap[rowLabel].set(repository, revisionEditor);
113
114         const nodes = [];
115         for (let labelToChoose in commitSetMap) {
116             const commit = commitSetMap[labelToChoose].commitForRepository(repository);
117             const checked = labelToChoose == rowLabel;
118             const radioButton = element('input', {type: 'radio', name: `${rowLabel}-${repository.id()}-radio`, checked,
119                 onchange: () => { revisionEditor.value = commit ? commit.revision() : ''; }});
120
121             if (checked)
122                 revisionEditor.value = commit ? commit.revision() : '';
123             nodes.push(element('td', element('label', [radioButton, labelToChoose])));
124         }
125         nodes.push(element('td', revisionEditor));
126
127         return nodes;
128     }
129
130     static cssTemplate()
131     {
132         return `
133             #customize-link-container,
134             #customize-link {
135                 color: #333;
136             }
137
138             #custom-table:not(:empty) {
139                 margin: 1rem 0;
140             }
141
142             #custom-table,
143             #custom-table td,
144             #custom-table th {
145                 font-weight: inherit;
146                 border-collapse: collapse;
147                 border-top: solid 1px #ddd;
148                 border-bottom: solid 1px #ddd;
149                 padding: 0.4rem 0.2rem;
150                 font-size: 0.9rem;
151             }
152
153             #custom-table thead td,
154             #custom-table th {
155                 text-align: center;
156             }
157             `;
158     }
159
160     static formContent()
161     {
162         return `
163             <input id="name" type="text" placeholder="Test group name">
164             ${super.formContent()}
165             <span id="customize-link-container">(<a id="customize-link" href="#">Customize</a>)</span>
166             <table id="custom-table"></table>
167         `;
168     }
169 }
170
171 ComponentBase.defineElement('customizable-test-group-form', CustomizableTestGroupForm);