Add v3 UI to perf dashboard
[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / commit-log-viewer.js
1
2 class CommitLogViewer extends ComponentBase {
3
4     constructor()
5     {
6         super('commit-log-viewer');
7         this._repository = null;
8         this._fetchingPromise = null;
9         this._commits = null;
10     }
11
12     currentRepository() { return this._repository; }
13
14     view(repository, from, to)
15     {
16         this._commits = null;
17
18         if (!repository) {
19             this._fetchingPromise = null;
20             this._repository = null;
21             return Promise.resolve(null);
22         }
23         
24         if (!to) {
25             this._fetchingPromise = null;
26             return Promise.resolve(null);
27         }
28
29         var promise = CommitLog.fetchBetweenRevisions(repository, from || to, to);
30
31         this._fetchingPromise = promise;
32
33         var self = this;
34         var spinnerTimer = setTimeout(function () {
35             self.render();
36         }, 300);
37
38         this._fetchingPromise.then(function (commits) {
39             clearTimeout(spinnerTimer);
40             if (self._fetchingPromise != promise)
41                 return;
42             self._repository = repository;
43             self._fetchingPromise = null;
44             self._commits = commits;
45         });
46
47         return this._fetchingPromise;
48     }
49
50     render()
51     {
52         if (this._repository)
53             this.content().querySelector('caption').textContent = this._repository.name();
54
55         var element = ComponentBase.createElement;
56         var link = ComponentBase.createLink;
57
58         this.renderReplace(this.content().querySelector('tbody'), (this._commits || []).map(function (commit) {
59             var label = commit.label();
60             var url = commit.url();
61             return element('tr', [
62                 element('th', [element('h4', {class: 'revision'}, url ? link(label, commit.title(), url) : label), commit.author() || '']),
63                 element('td', commit.message() ? commit.message().substring(0, 80) : '')]);
64         }));
65
66         this.content().querySelector('.commits-viewer-spinner').style.display = this._fetchingPromise ? null : 'none';
67     }
68
69     static htmlTemplate()
70     {
71         return `
72             <div class="commits-viewer-container">
73                 <div class="commits-viewer-spinner"><spinner-icon></spinner-icon></div>
74                 <table class="commits-viewer-table">
75                     <caption></caption>
76                     <tbody>
77                     </tbody>
78                 </table>
79             </div>
80 `;
81     }
82
83     static cssTemplate()
84     {
85         return `
86             .commits-viewer-container {
87                 width: 100%;
88                 height: calc(100% - 2px);
89                 overflow-y: scroll;
90             }
91             
92             .commits-viewer-table {
93                 width: 100%;
94             }
95
96             .commits-viewer-table caption {
97                 font-weight: inherit;
98                 font-size: 1rem;
99                 text-align: center;
100                 padding: 0.2rem;
101             }
102
103             .commits-viewer-table {
104                 border-collapse: collapse;
105                 border-bottom: solid 1px #ccc;
106             }
107
108             .commits-viewer-table .revision {
109                 white-space: nowrap;
110                 font-weight: normal;
111                 margin: 0;
112                 padding: 0;
113             }
114
115             .commits-viewer-table td,
116             .commits-viewer-table th {
117                 word-break: break-word;
118                 border-top: solid 1px #ccc;
119                 padding: 0.2rem;
120                 margin: 0;
121                 font-size: 0.8rem;
122                 font-weight: normal;
123             }
124
125             .commits-viewer-spinner {
126                 margin-top: 2rem;
127                 text-align: center;
128             }
129 `;
130     }
131
132 }
133
134 ComponentBase.defineElement('commit-log-viewer', CommitLogViewer);