892d956a1f62e87f59e10867de8ad5b2d1d1fe68
[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                     {{#if App.Manifest.bugTrackers}}
139                         <a href="#" title="Bugs"
140                             {{bind-attr class=":bugs-button singlySelectedPoint::disabled"}}
141                             {{action "toggleBugsPane"}}>
142                             {{partial "bugs-button"}}
143                         </a>
144                     {{/if}}
145                     {{#if App.Manifest.repositoriesWithReportedCommits}}
146                         <a href="#" title="Search" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
147                     {{/if}}
148                 </header>
149
150                 <div class="body">
151                     <div class="svg-container">
152                     {{#if chartData}}
153                         {{interactive-chart
154                             chartData=chartData
155                             domain=mainPlotDomain
156                             interactive=true
157                             chartPointRadius=2
158                             currentItem=currentItem
159                             currentTime=sharedTime
160                             selectedItem=selectedItem
161                             highlightedItems=highlightedItems
162                             selection=timeRange
163                             sharedSelection=sharedSelection
164                             selectionChanged="rangeChanged"
165                             selectionIsLocked=timeRangeIsLocked
166                             markedPoints=markedPoints
167                             zoom="zoomed"}}
168                     {{else}}
169                         {{#if failure}}
170                             <div class="failure">{{failure}}</div>
171                         {{else}}
172                             <div class="progress">{{partial "spinner"}}</div>
173                         {{/if}}
174                     {{/if}}
175                     </div>
176                     <div class="details">
177                         <div class="overview">
178                         {{#if chartData}}
179                             {{interactive-chart
180                                 chartData=chartData
181                                 showYAxis=false
182                                 domain=overviewDomain
183                                 domainChanged="overviewDomainChanged"
184                                 selection=mainPlotDomain
185                                 selectionChanged="zoomed"}}
186                         {{/if}}
187                         </div>
188                         {{#if details}}
189                             {{partial "chart-details"}}
190                         {{/if}}
191                     </div>
192                 </div>
193
194                 <form {{bind-attr class=":search-pane showingSearchPane::hidden"}}>
195                     <span class="repositories">
196                         {{view Ember.Select content=App.Manifest.repositoriesWithReportedCommits
197                             optionLabelPath='content.id'
198                             selection=commitSearchRepository}}
199                     </span>
200                     {{input action="searchCommit" placeholder="Name or email" value=commitSearchKeyword}}
201                 </form>
202
203                 <div {{bind-attr class=":bugs-pane showingBugsPane::hidden"}}>
204                     <table>
205                         {{#each details.bugTrackers}}
206                             <tr>
207                                 <th>{{label}}</th>
208                                 <td>
209                                     <form {{action "associateBug" this editedBugNumber on="submit"}}>
210                                         {{input type=text value=editedBugNumber}}
211                                     </form>
212                                 </td>
213                             </tr>
214                         {{/each}}
215                     </table>
216                 </div>
217
218             </section>
219         {{/each}}
220     </script>
221
222     <script type="text/x-handlebars" data-template-name="components/interactive-chart">
223         {{#if interactive}}
224             <div class="selection-toolbar" style="display: none;">
225                 <a href="#" class="button" {{action "zoom"}}>
226                     <svg class="zoom" viewBox="0 0 100 100">
227                         <g stroke-width="0" stroke="none">
228                             <polygon points="25,25 5,50 25,75"/>
229                             <polygon points="75,25 95,50 75,75"/>
230                         </g>
231                         <line x1="20" y1="50" x2="80" y2="50" stroke-width="10"></line>
232                     </svg>
233                 </a>
234             </div>
235         {{/if}}
236     </script>
237
238     <script type="text/x-handlebars" data-template-name="chart-details">
239     <div class="details-table-container">
240         <table class="details-table">
241             <tbody class="bugs">
242             {{#each details.bugTrackers}}
243                 {{#if bugs}}
244                     <tr>
245                         <th>{{label}}</th>
246                         <td>
247                             {{#each bugs}}
248                                 <a {{bind-attr href=bugUrl}} target="_blank">{{bugNumber}}</a>
249                             {{/each}}
250                         </td>
251                     </tr>
252                 {{/if}}
253             {{/each}}
254             </tbody>
255             <tr><th>Current</th><td>{{details.currentValue}} {{chartData.unit}}
256             {{#if details.oldValue}}
257                 (from {{details.oldValue}})
258             {{/if}}</td></tr>
259             {{#if details.buildNumber}}
260                 <tr>
261                     <th>Build</th>
262                     <td>
263                         {{#if details.buildURL}}
264                             <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
265                         {{else}}
266                             {{details.buildNumber}}
267                         {{/if}}
268                         ({{details.buildTime}})
269                     </td>
270                 </tr>
271             {{/if}}
272             {{#each details.revisions}}
273                 <tr>
274                     <th>{{name}}</th>
275                     <td>
276                         {{#if url}}
277                             <a {{bind-attr href=url}} target="_blank">{{label}}</a>
278                         {{else}}
279                             {{label}}
280                         {{/if}}
281                     </td>
282                 </tr>
283                 <tr>
284                     <td colspan="2">{{commits-viewer repository=repository revisionInfo=this}}</td>
285                 </tr>
286             {{/each}}
287         </table>
288     </div>
289     </script>
290
291     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
292     {{#if commits}}
293         <table>
294             <tbody>
295                 {{#each commits}}
296                     <tr>
297                         <td>
298                             {{#if url}}
299                                 <a {{bind-attr href=url}} target="_blank">{{author}}</a>
300                             {{else}}
301                                 {{author}}
302                             {{/if}}
303                         </td>
304                         <td>{{message}}</td>
305                     </tr>
306                 {{/each}}
307             </tbody>
308         </table>
309     {{/if}}
310     </script>
311
312     <script type="text/x-handlebars" data-template-name="close-button">
313         <svg class="close-button icon-button" viewBox="0 0 100 100">
314             <g stroke="black" stroke-width="10">
315                 <circle cx="50" cy="50" r="45" fill="transparent"/>
316                 <polygon points="30,30 70,70" />
317                 <polygon points="30,70 70,30" />
318             </g>
319         </svg>
320     </script>
321
322     <script type="text/x-handlebars" data-template-name="bugs-button">
323         <svg class="bugs-button icon-button" viewBox="0 0 100 100">
324             <g stroke="black" stroke-width="15">
325                 <circle cx="50" cy="50" r="40" fill="transparent"/>
326                 <line x1="50" y1="25" x2="50" y2="55"/>
327                 <circle cx="50" cy="67.5" r="2.5" fill="transparent"/>
328             </g>
329         </svg>
330     </script>
331
332     <script type="text/x-handlebars" data-template-name="search-button">
333         <svg class="search-button icon-button" viewBox="0 0 100 100">
334             <g stroke="black" stroke-width="15">
335                 <circle cx="60" cy="40" r="30" fill="transparent"/>
336                 <line x1="10" y1="90" x2="40" y2="60"/>
337             </g>
338         </svg>
339     </script>
340
341     <script type="text/x-handlebars" data-template-name="spinner">
342         <svg class="spinner" viewBox="0 0 100 100">
343             <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
344             <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
345             <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
346             <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
347             <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
348             <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
349             <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
350             <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
351         </svg>
352     </script>
353
354     <script type="text/x-handlebars" data-template-name="navbar">
355         <nav id="navigation" role="navigation">
356             <h1><a href="#">WebKit Perf Monitor</a></h1>
357             <ul>
358                 {{#link-to 'index' tagName='li'}}
359                     {{#link-to 'index'}}Dashboard{{/link-to}}
360                 {{/link-to}}
361                 {{#link-to 'charts' tagName='li'}}
362                     {{#link-to 'charts'}}Charts{{/link-to}}
363                 {{/link-to}}
364             </ul>
365         </nav>
366     </script>
367
368     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
369         <li class="numberOfDaysIs1">
370             <a href="#" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
371         </li>
372         <li class="numberOfDaysIs7">
373             <a href="#" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
374         </li>
375         <li class="numberOfDaysIs30">
376             <a href="#" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
377         </li>
378         <li class="numberOfDaysIs90">
379             <a href="#" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
380         </li>
381         <li class="numberOfDaysIs183">
382             <a href="#" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
383         </li>
384         <li class="numberOfDaysIs365">
385             <a href="#" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
386         </li>
387     </script>
388
389     <script type="text/x-handlebars" data-template-name="start-time-slider">
390         <label><input type="range"> <span class="numberOfDays">X</span> days</label>
391     </script>
392
393     <script type="text/x-handlebars" data-template-name="popup">
394         <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
395         {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
396     </script>
397
398     <script type="text/x-handlebars" data-template-name="popup-list">
399         {{#each view.list}}
400             {{#if isSeparator}}
401                 <li><hr></li>
402             {{else }} {{#if children}}
403                 <li>{{view App.PopupView list=children label=label}}</li>
404             {{else}}
405                 <li>
406                     {{#if actionName}}
407                         <a href="#" class="label" {{action actionName actionArgument}}>{{label}}</a>
408                     {{else}}
409                         <a class="label">{{label}}</a>
410                     {{/if}}
411                 </li>
412             {{/if}} {{/if}}
413         {{/each}}
414     </script>
415
416 </head>
417 <body>
418 </body>
419 </html>