Add v2 UI for the perf dashboard
[WebKit-https.git] / Websites / perf.webkit.org / public / v2 / index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta charset="utf-8">
5     <title>WebKit Performance Monitor (Beta)</title>
6     <script src="js/jquery.min.js" defer></script>
7     <script src="js/handlebars.js" defer></script>
8     <script src="js/ember.js" defer></script>
9     <script src="js/ember-data.js" defer></script>
10     <script src="js/d3/d3.min.js" defer></script>
11     <script src="js/statistics.js" defer></script>
12     <script src="data.js" defer></script>
13     <script src="app.js" defer></script>
14     <script src="manifest.js" defer></script>
15     <script src="popup.js" defer></script>
16     <link rel="stylesheet" href="app.css">
17     <link rel="stylesheet" href="chart-pane.css">
18
19     <script type="text/x-handlebars" data-template-name="index">
20         <header id="header">
21             {{partial "navbar"}}
22             {{view App.NumberOfDaysControlView tagName="ul" numberOfDays=numberOfDays}}
23             <ul class="controls">
24                 <li>
25                     <a href="#" class="control-button" {{action toggleEditMode}}>
26                         {{#if controller.editMode}}
27                             Finish editing
28                         {{else}}
29                             Edit
30                         {{/if}}
31                     </a>
32                 </li>
33             </ul>
34         </header>
35
36         <table {{bind-attr class=":dashboard editMode:editMode:readonly"}}>
37         <thead>
38             <tr>
39                 <td></td>
40                 {{#each headerColumns}}
41                     {{#if controller.editMode}}
42                         <th>
43                             <a href="#" title="Remove column" {{action "removeColumn" index}}>
44                                 {{partial "close-button"}}
45                             </a>
46                             {{input value=label}}
47                         </th>
48                     {{else}}
49                         <th>{{label}}</th>
50                     {{/if}}
51                 {{/each}}
52                 {{#if controller.editMode}}
53                     <td>{{input value=newColumnHeader action="addColumn" placeholder="Add a column"}}</td>
54                 {{/if}}
55             </tr>
56         </thead>
57         <tbody>
58             {{#each rows}}
59                 <tr>
60                     {{#if controller.editMode}}
61                         <th>
62                             <a href="#" title="Remove row" {{action "removeRow" this}}>
63                                 {{partial "close-button"}}
64                             </a>
65                             {{input value=header}}
66                         </th>
67                     {{else}}
68                         <th><span class="label">{{header}}</span></th>
69                     {{/if}}
70                     {{#each cells}}
71                         <td>
72                             {{#if empty}}
73                                 {{#if controller.editMode}}
74                                     {{view App.PopupView list=pickerData label='Choose'}}
75                                 {{/if}}
76                             {{else}}
77                                 {{#if chartData}}
78                                     {{#link-to 'charts' (query-params paneList=paneList)}}
79                                     {{interactive-chart
80                                         chartData=chartData
81                                         domain=controller.sharedDomain
82                                         enableSelection=false}}
83                                     {{/link-to}}
84                                 {{else}}
85                                     {{#if failure}}
86                                         <div class="failure">{{failure}}</div>
87                                     {{else}}
88                                         <div class="progress">{{partial "spinner"}}</div>
89                                     {{/if}}
90                                 {{/if}}
91                                 {{#if controller.editMode}}
92                                     <a href="#" title="Reset pane" class="reset" {{action "resetPane" this}}>
93                                         {{partial "close-button"}}
94                                     </a>
95                                 {{/if}}
96                             {{/if}}
97                         </td>
98                     {{/each}}
99                     {{#if controller.editMode}}
100                         <td></td>
101                     {{/if}}
102                 </tr>
103             {{/each}}
104             {{#if controller.editMode}}
105                 <tr>
106                     <td>{{input value=newRowHeader action="addRow" placeholder="Add a row"}}</td>
107                     {{#each emptyRow}}
108                         <td></td>
109                     {{/each}}
110                     <td></td>
111                 </tr>
112             {{/if}}
113         </tbody>
114         </table>
115     </script>
116
117     <script type="text/x-handlebars" data-template-name="charts">
118         <header id="header">
119             {{partial "navbar"}}
120             <ul class="controls">
121                 <li>{{view App.PopupView list=platforms label='Add pane'}}</li>
122             </ul>
123             <ul class="controls">
124                 <li>{{view App.StartTimeSliderView startTime=startTime oldestStartTime=oldestStartTime}}</li>
125             </ul>
126         </header>
127
128         {{#each panes itemController="pane"}}
129             <section class="chart-pane" tabindex="0">
130                 <header>
131                     <h1 {{action "toggleDetails"}}>
132                     {{#each metric.path}}
133                         {{this}} &ni;
134                     {{/each}}
135                     {{metric.label}}
136                     - {{ platform.name}}</h2>
137                     <a href="#" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
138                 </header>
139
140                 <div {{bind-attr class=":body showingDetails"}}>
141                     <div class="svg-container">
142                     {{#if chartData}}
143                         {{interactive-chart
144                             chartData=chartData
145                             domain=mainPlotDomain
146                             interactive=true
147                             currentItem=currentItem
148                             currentTime=sharedTime
149                             selectedItem=selectedItem
150                             selection=timeRange
151                             sharedSelection=sharedSelection
152                             selectionChanged="rangeChanged"
153                             selectionIsLocked=timeRangeIsLocked
154                             zoom="zoomed"}}
155                     {{else}}
156                         {{#if failure}}
157                             <div class="failure">{{failure}}</div>
158                         {{else}}
159                             <div class="progress">{{partial "spinner"}}</div>
160                         {{/if}}
161                     {{/if}}
162                     </div>
163                     <div class="details">
164                         <div class="overview">
165                         {{#if chartData}}
166                             {{interactive-chart
167                                 chartData=chartData
168                                 showYAxis=false
169                                 domain=overviewDomain
170                                 domainChanged="overviewDomainChanged"
171                                 selection=mainPlotDomain
172                                 selectionChanged="zoomed"}}
173                         {{/if}}
174                         </div>
175                         {{#if details}}
176                             {{partial "chart-details"}}
177                         {{/if}}
178                     </div>
179                 </div>
180             </section>
181         {{/each}}
182     </script>
183
184     <script type="text/x-handlebars" data-template-name="components/interactive-chart">
185         {{#if interactive}}
186             <div class="selection-toolbar" style="display: none;">
187                 <a href="#" class="button" {{action "zoom"}}>
188                     <svg class="zoom" viewBox="0 0 100 100">
189                         <g stroke-width="0" stroke="none">
190                             <polygon points="25,25 5,50 25,75"/>
191                             <polygon points="75,25 95,50 75,75"/>
192                         </g>
193                         <line x1="20" y1="50" x2="80" y2="50" stroke-width="10"></line>
194                     </svg>
195                 </a>
196             </div>
197         {{/if}}
198     </script>
199
200     <script type="text/x-handlebars" data-template-name="chart-details">
201     <div class="details-table-container">
202         <table class="details-table">
203             <tr><th>Current</th><td>{{details.currentValue}} {{chartData.unit}}
204             {{#if details.oldValue}}
205                 (from {{details.oldValue}})
206             {{/if}}</td></tr>
207             {{#if details.buildNumber}}
208                 <tr>
209                     <th>Build</th>
210                     <td>
211                         {{#if details.buildURL}}
212                             <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
213                         {{else}}
214                             {{details.buildNumber}}
215                         {{/if}}
216                         ({{details.buildTime}})
217                     </td>
218                 </tr>
219             {{/if}}
220             {{#each details.revisions}}
221                 <tr>
222                     <th>{{name}}</th>
223                     <td>
224                         {{#if url}}
225                             <a {{bind-attr href=url}} target="_blank">{{label}}</a>
226                         {{else}}
227                             {{label}}
228                         {{/if}}
229                     </td>
230                 </tr>
231                 <tr>
232                     <td colspan="2">{{commits-viewer repository=repository revisionInfo=this}}</td>
233                 </tr>
234             {{/each}}
235         </table>
236     </div>
237     </script>
238
239     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
240     {{#if commits}}
241         <table>
242             <tbody>
243                 {{#each commits}}
244                     <tr>
245                         <td>
246                             {{#if url}}
247                                 <a {{bind-attr href=url}} target="_blank">{{author}}</a>
248                             {{else}}
249                                 {{author}}
250                             {{/if}}
251                         </td>
252                         <td>{{message}}</td>
253                     </tr>
254                 {{/each}}
255             </tbody>
256         </table>
257     {{/if}}
258     </script>
259
260     <script type="text/x-handlebars" data-template-name="close-button">
261         <svg class="close-button" viewBox="0 0 100 100">
262             <g stroke="black" stroke-width="10">
263                 <circle cx="50" cy="50" r="45" fill="transparent"/>
264                 <polygon points="30,30 70,70" />
265                 <polygon points="30,70 70,30" />
266             </g>
267         </svg>
268     </script>
269
270     <script type="text/x-handlebars" data-template-name="spinner">
271         <svg class="spinner" viewBox="0 0 100 100">
272             <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
273             <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
274             <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
275             <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
276             <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
277             <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
278             <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
279             <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
280         </svg>
281     </script>
282
283     <script type="text/x-handlebars" data-template-name="navbar">
284         <nav id="navigation" role="navigation">
285             <h1><a href="#">WebKit Perf Monitor</a></h1>
286             <ul>
287                 {{#link-to 'index' tagName='li'}}
288                     {{#link-to 'index'}}Dashboard{{/link-to}}
289                 {{/link-to}}
290                 {{#link-to 'charts' tagName='li'}}
291                     {{#link-to 'charts'}}Charts{{/link-to}}
292                 {{/link-to}}
293             </ul>
294         </nav>
295     </script>
296
297     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
298         <li class="numberOfDaysIs1">
299             <a href="#" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
300         </li>
301         <li class="numberOfDaysIs7">
302             <a href="#" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
303         </li>
304         <li class="numberOfDaysIs30">
305             <a href="#" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
306         </li>
307         <li class="numberOfDaysIs90">
308             <a href="#" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
309         </li>
310         <li class="numberOfDaysIs183">
311             <a href="#" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
312         </li>
313         <li class="numberOfDaysIs365">
314             <a href="#" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
315         </li>
316     </script>
317
318     <script type="text/x-handlebars" data-template-name="start-time-slider">
319         <label><input type="range"> <span class="numberOfDays">X</span> days</label>
320     </script>
321
322     <script type="text/x-handlebars" data-template-name="popup">
323         <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
324         {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
325     </script>
326
327     <script type="text/x-handlebars" data-template-name="popup-list">
328         {{#each view.list}}
329             {{#if isSeparator}}
330                 <li><hr></li>
331             {{else }} {{#if children}}
332                 <li>{{view App.PopupView list=children label=label}}</li>
333             {{else}}
334                 <li>
335                     {{#if actionName}}
336                         <a href="#" class="label" {{action actionName actionArgument}}>{{label}}</a>
337                     {{else}}
338                         <a class="label">{{label}}</a>
339                     {{/if}}
340                 </li>
341             {{/if}} {{/if}}
342         {{/each}}
343     </script>
344
345 </head>
346 <body>
347 </body>
348 </html>