50b8740dbd1ca7a955885a05698206a57eb31cf4
[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
7     <link rel="prefetch" href="../data/manifest.json">
8     <script type="application/json" src="../data/manifest.json"></script>
9
10     <link rel="stylesheet" href="app.css">
11     <link rel="stylesheet" href="chart-pane.css">
12
13     <script src="js/jquery.min.js" defer></script>
14     <script src="js/jquery.min.js" defer></script>
15     <script src="js/handlebars.js" defer></script>
16     <script src="js/ember.js" defer></script>
17     <script src="js/ember-data.js" defer></script>
18     <script src="js/d3/d3.min.js" defer></script>
19     <script src="js/statistics.js" defer></script>
20     <script src="data.js" defer></script>
21     <script src="app.js" defer></script>
22     <script src="manifest.js" defer></script>
23     <script src="analysis.js" defer></script>
24     <script src="popup.js" defer></script>
25     <script src="interactive-chart.js" defer></script>
26     <script src="commits-viewer.js" defer></script>
27
28     <script type="text/x-handlebars" data-template-name="dashboard">
29         <header id="header">
30             {{partial "navbar"}}
31             {{view App.NumberOfDaysControlView tagName="ul" numberOfDays=numberOfDays}}
32             <ul class="controls">
33                 <li>
34                     <a href="#" class="control-button" {{action toggleEditMode}}>
35                         {{#if controller.editMode}}
36                             Finish editing
37                         {{else}}
38                             Edit
39                         {{/if}}
40                     </a>
41                 </li>
42             </ul>
43         </header>
44
45         <table {{bind-attr class=":dashboard editMode:editMode:readonly"}}>
46         <thead>
47             <tr>
48                 <td></td>
49                 {{#each headerColumns}}
50                     {{#if controller.editMode}}
51                         <th>
52                             <a href="#" title="Remove column" {{action "removeColumn" index}}>
53                                 {{partial "close-button"}}
54                             </a>
55                             {{input value=label}}
56                         </th>
57                     {{else}}
58                         <th>{{label}}</th>
59                     {{/if}}
60                 {{/each}}
61                 {{#if controller.editMode}}
62                     <td>{{input value=newColumnHeader action="addColumn" placeholder="Add a column"}}</td>
63                 {{/if}}
64             </tr>
65         </thead>
66         <tbody>
67             {{#each rows}}
68                 <tr>
69                     {{#if controller.editMode}}
70                         <th>
71                             <a href="#" title="Remove row" {{action "removeRow" this}}>
72                                 {{partial "close-button"}}
73                             </a>
74                             {{input value=header}}
75                         </th>
76                     {{else}}
77                         <th><span class="label">{{header}}</span></th>
78                     {{/if}}
79                     {{#each cells}}
80                         <td>
81                             {{#if empty}}
82                                 {{#if controller.editMode}}
83                                     {{view App.PopupView list=pickerData label='Choose'}}
84                                 {{/if}}
85                             {{else}}
86                                 {{#if chartData}}
87                                     <div class="dashboard-status">
88                                         {{#if latestStatus}}
89                                             {{latestStatus.currentValue}} {{chartData.unit}}
90                                             {{#if latestStatus.label}}
91                                                 <span {{bind-attr class=":status-label latestStatus.className"}}>{{latestStatus.label}}</span>
92                                             {{/if}}
93                                         {{/if}}
94                                     </div>
95                                     {{#link-to 'charts' (query-params paneList=paneList since=controller.since)}}
96                                         {{interactive-chart
97                                             chartData=chartData
98                                             domain=controller.sharedDomain
99                                             enableSelection=false}}
100                                     {{/link-to}}
101                                 {{else}}
102                                     {{#if failure}}
103                                         <div class="failure">{{failure}}</div>
104                                     {{else}}
105                                         <div class="progress">{{partial "spinner"}}</div>
106                                     {{/if}}
107                                 {{/if}}
108                                 {{#if controller.editMode}}
109                                     <a href="#" title="Reset pane" class="reset" {{action "resetPane" this}}>
110                                         {{partial "close-button"}}
111                                     </a>
112                                 {{/if}}
113                             {{/if}}
114                         </td>
115                     {{/each}}
116                     {{#if controller.editMode}}
117                         <td></td>
118                     {{/if}}
119                 </tr>
120             {{/each}}
121             {{#if controller.editMode}}
122                 <tr>
123                     <td>{{input value=newRowHeader action="addRow" placeholder="Add a row"}}</td>
124                     {{#each emptyRow}}
125                         <td></td>
126                     {{/each}}
127                     <td></td>
128                 </tr>
129             {{/if}}
130         </tbody>
131         </table>
132     </script>
133
134     <script type="text/x-handlebars" data-template-name="charts">
135         <header id="header">
136             {{partial "navbar"}}
137             <ul class="controls">
138                 <li>{{view App.PopupView list=platforms label='Add pane'}}</li>
139             </ul>
140             <ul class="controls">
141                 <li>{{view App.StartTimeSliderView startTime=startTime oldestStartTime=oldestStartTime}}</li>
142             </ul>
143         </header>
144
145         {{#each panes itemController="pane"}}
146             <section class="chart-pane" tabindex="0">
147                 <header>
148                     <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{ platform.name}}</h1>
149                     <a href="#" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
150                     {{#if App.Manifest.bugTrackers}}
151                         <a href="#" title="Analysis" class="bugs-button" {{action "toggleBugsPane"}}>
152                             {{partial "analysis-button"}}
153                         </a>
154                     {{/if}}
155                     {{#if App.Manifest.repositoriesWithReportedCommits}}
156                         <a href="#" title="Search" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
157                     {{/if}}
158                 </header>
159
160                 <div class="body">
161                     <div class="svg-container">
162                     {{#if chartData}}
163                         {{interactive-chart
164                             chartData=chartData
165                             ranges=analyticRanges
166                             domain=mainPlotDomain
167                             interactive=true
168                             chartPointRadius=2
169                             currentItem=currentItem
170                             currentTime=sharedTime
171                             selectedItem=selectedItem
172                             highlightedItems=highlightedItems
173                             rangeRoute="analysisTask"
174                             selection=timeRange
175                             selectedPoints=selectedPoints
176                             selectionIsLocked=timeRangeIsLocked
177                             markedPoints=markedPoints
178                             zoom="zoomed"}}
179                     {{else}}
180                         {{#if failure}}
181                             <div class="failure">{{failure}}</div>
182                         {{else}}
183                             <div class="progress">{{partial "spinner"}}</div>
184                         {{/if}}
185                     {{/if}}
186                     </div>
187                     <div class="details">
188                         <div class="overview">
189                         {{#if chartData}}
190                             {{interactive-chart
191                                 chartData=chartData
192                                 showYAxis=false
193                                 domain=overviewDomain
194                                 selection=overviewSelection}}
195                         {{/if}}
196                         </div>
197                         {{#if details}}
198                             {{partial "chart-details"}}
199                         {{/if}}
200                     </div>
201                 </div>
202
203                 <form {{bind-attr class=":search-pane showingSearchPane::hidden"}}>
204                     <span class="repositories">
205                         {{view Ember.Select
206                             content=App.Manifest.repositoriesWithReportedCommits
207                             optionValuePath='content.id'
208                             optionLabelPath='content.name'
209                             selection=commitSearchRepository}}
210                     </span>
211                     {{input action="searchCommit" placeholder="Name or email" value=commitSearchKeyword}}
212                 </form>
213
214                 <div {{bind-attr class=":analysis-pane showingAnalysisPane::hidden"}}>
215                     <table>
216                         <tbody>
217                             <tr>
218                                 <th>
219                                     <label>Name: {{input type=text value=newAnalysisTaskName}}</label>
220                                     <button {{action "createAnalysisTask"}} {{bind-attr disabled=cannotAnalyze}}>Analyze</button>
221                                 </th>
222                             </tr>
223                         </tbody>
224                     </table>
225                 </div>
226
227             </section>
228         {{/each}}
229     </script>
230
231     <script type="text/x-handlebars" data-template-name="components/interactive-chart">
232         {{#if interactive}}
233             <div class="selection-toolbar" style="display: none;">
234                 <a href="#" class="button" {{action "zoom"}}>
235                     <svg class="zoom" viewBox="0 0 100 100">
236                         <g stroke-width="0" stroke="none">
237                             <polygon points="25,25 5,50 25,75"/>
238                             <polygon points="75,25 95,50 75,75"/>
239                         </g>
240                         <line x1="20" y1="50" x2="80" y2="50" stroke-width="10"></line>
241                     </svg>
242                 </a>
243             </div>
244         {{/if}}
245         <div class="rangeBarsContainerInlineStyle">
246             {{#each rangeBars}}
247                 {{#link-to linkRoute linkId title=label}}
248                     <span class="rangeBar" {{bind-attr style=inlineStyle}}></span>
249                 {{/link-to}}
250             {{/each}}
251         </div>
252     </script>
253
254     <script type="text/x-handlebars" data-template-name="chart-details">
255     <div class="details-table-container">
256         <table class="details-table">
257             <tbody class="bugs">
258             {{#each details.bugTrackers}}
259                 {{#if bugs}}
260                     <tr>
261                         <th>{{label}}</th>
262                         <td>
263                             {{#each bugs}}
264                                 <a {{bind-attr href=bugUrl}} target="_blank">{{bugNumber}}</a>
265                             {{/each}}
266                         </td>
267                     </tr>
268                 {{/if}}
269             {{/each}}
270             </tbody>
271             <tbody class="status">
272                 <tr>
273                     <th>Current</th>
274                     <td>
275                         {{details.status.currentValue}} {{chartData.unit}}
276                         {{#if details.status.valueDelta}}
277                             ({{details.status.valueDelta}} {{chartData.unit}})
278                         {{/if}}
279                         {{#if details.status.label}}
280                             <br>
281                             <span {{bind-attr class=details.status.className}}>{{details.status.label}}</span>
282                         {{/if}}
283                     </td>
284                 </tr>
285             </tbody>
286             <tbody>
287             {{#if details.buildNumber}}
288                 <tr>
289                     <th>Build</th>
290                     <td>
291                         {{#if details.buildURL}}
292                             <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
293                         {{else}}
294                             {{details.buildNumber}}
295                         {{/if}}
296                         ({{details.buildTime}})
297                     </td>
298                 </tr>
299             {{/if}}
300             {{#each details.revisions}}
301                 <tr>
302                     <th>{{name}}</th>
303                     <td>
304                         {{#if url}}
305                             <a {{bind-attr href=url}} target="_blank">{{label}}</a>
306                         {{else}}
307                             {{label}}
308                         {{/if}}
309                     </td>
310                 </tr>
311             {{/each}}
312             </tbody>
313         </table>
314         <div class="commits">
315             {{#each details.revisions}}
316                 {{commits-viewer repository=repository revisionInfo=this caption=name}}
317             {{/each}}
318         </div>
319     </div>
320     </script>
321
322     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
323     {{#if commits}}
324         <table {{bind-attr class=":commits-viewer visible::hidden"}}>
325             {{#if caption}}
326                 <caption {{action toggleVisibility}}>{{caption}} commits</caption>
327             {{/if}}
328             {{#if visible}}
329                 <tbody>
330                     {{#each commits}}
331                         <tr>
332                             <th>
333                                 {{#if url}}
334                                     <a {{bind-attr href=url}} target="_blank">{{revision}}</a>
335                                 {{else}}
336                                     {{revision}}
337                                 {{/if}}
338                             </th>
339                             <th>{{author}}</th>
340                             <td>{{message}}</td>
341                         </tr>
342                     {{/each}}
343                 </tbody>
344             {{/if}}
345         </table>
346     {{/if}}
347     </script>
348
349     <script type="text/x-handlebars" data-template-name="close-button">
350         <svg class="close-button icon-button" viewBox="0 0 100 100">
351             <g stroke="black" stroke-width="10">
352                 <circle cx="50" cy="50" r="45" fill="transparent"/>
353                 <polygon points="30,30 70,70" />
354                 <polygon points="30,70 70,30" />
355             </g>
356         </svg>
357     </script>
358
359     <script type="text/x-handlebars" data-template-name="analysis-button">
360         <svg class="analysis-button icon-button" viewBox="0 0 100 100">
361             <g stroke="black" stroke-width="15">
362                 <circle cx="50" cy="50" r="40" fill="transparent"/>
363                 <line x1="50" y1="25" x2="50" y2="55"/>
364                 <circle cx="50" cy="67.5" r="2.5" fill="transparent"/>
365             </g>
366         </svg>
367     </script>
368
369     <script type="text/x-handlebars" data-template-name="search-button">
370         <svg class="search-button icon-button" viewBox="0 0 100 100">
371             <g stroke="black" stroke-width="15">
372                 <circle cx="60" cy="40" r="30" fill="transparent"/>
373                 <line x1="10" y1="90" x2="40" y2="60"/>
374             </g>
375         </svg>
376     </script>
377
378     <script type="text/x-handlebars" data-template-name="spinner">
379         <svg class="spinner" viewBox="0 0 100 100">
380             <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
381             <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
382             <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
383             <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
384             <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
385             <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
386             <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
387             <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
388         </svg>
389     </script>
390
391     <script type="text/x-handlebars" data-template-name="navbar">
392         <nav id="navigation" role="navigation">
393             <h1><a href="#">WebKit Perf Monitor</a></h1>
394             <ul>
395                 {{#each App.Manifest.dashboards}}
396                     {{#if name}}
397                         {{#link-to 'dashboard' name tagName='li'}}
398                             {{#link-to 'dashboard' name}}{{label}}{{/link-to}}
399                         {{/link-to}}
400                     {{/if}}
401                 {{/each}}
402                 {{#link-to 'charts' tagName='li'}}
403                     {{#link-to 'charts'}}Charts{{/link-to}}
404                 {{/link-to}}
405                 {{#link-to 'analysis' tagName='li'}}
406                     {{#link-to 'analysis'}}Analysis{{/link-to}}
407                 {{/link-to}}
408             </ul>
409         </nav>
410     </script>
411
412     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
413         <li class="numberOfDaysIs1">
414             <a href="#" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
415         </li>
416         <li class="numberOfDaysIs7">
417             <a href="#" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
418         </li>
419         <li class="numberOfDaysIs30">
420             <a href="#" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
421         </li>
422         <li class="numberOfDaysIs90">
423             <a href="#" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
424         </li>
425         <li class="numberOfDaysIs183">
426             <a href="#" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
427         </li>
428         <li class="numberOfDaysIs365">
429             <a href="#" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
430         </li>
431     </script>
432
433     <script type="text/x-handlebars" data-template-name="start-time-slider">
434         <label><input type="range"> <span class="numberOfDays">X</span> days</label>
435     </script>
436
437     <script type="text/x-handlebars" data-template-name="popup">
438         <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
439         {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
440     </script>
441
442     <script type="text/x-handlebars" data-template-name="popup-list">
443         {{#each view.list}}
444             {{#if isSeparator}}
445                 <li><hr></li>
446             {{else }} {{#if children}}
447                 <li>{{view App.PopupView list=children label=label}}</li>
448             {{else}}
449                 <li>
450                     {{#if actionName}}
451                         <a href="#" class="label" {{action actionName actionArgument}}>{{label}}</a>
452                     {{else}}
453                         <a class="label">{{label}}</a>
454                     {{/if}}
455                 </li>
456             {{/if}} {{/if}}
457         {{/each}}
458     </script>
459
460     <script type="text/x-handlebars" data-template-name="analysis">
461         <header id="header">
462             {{partial "navbar"}}
463         </header>
464
465         <table id="analysis-tasks">
466             <thead>
467                 <tr>
468                     <td>ID</td>
469                     <td>Name</td>
470                     <td>Created at</td>
471                 </tr>
472             </thead>
473             <tbody>
474                 {{#each model.tasks}}
475                     <tr>
476                         <td>{{#link-to 'analysisTask' id}}{{id}}{{/link-to}}</td>
477                         <td>{{name}}</td>
478                         <td>{{createdAt}}</td>
479                     </tr>
480                 {{/each}}
481             </tbody>
482         </table>
483     </script>
484
485     <script type="text/x-handlebars" data-template-name="analysisTask">
486         <header id="header">
487             {{partial "navbar"}}
488         </header>
489
490         <h2 id="analysis-task-title">{{label}}</h2>
491         {{#if platform.label}}
492             <h3 id="analysis-task-testname">{{metric.fullName}} - {{platform.label}}</h3>
493         {{/if}}
494
495         {{#if chartData}}
496             <section class="analysis-chart-pane chart-pane">
497                 <div class="svg-container">
498                     {{interactive-chart
499                         chartData=chartData
500                         enableSelection=false
501                         chartPointRadius=2
502                         domain=chartDomain
503                         highlightedItems=highlightedItems}}
504                 </div>
505                 <div class="details">
506                     <table class="analysis-bugs">
507                         <tbody>
508                             {{#each bugTrackers}}
509                                 <tr>
510                                     <th>{{label}}</th>
511                                     <td>
512                                         <form {{action "associateBug" this editedBugNumber on="submit"}}>
513                                             {{input type=text value=editedBugNumber}}
514                                         </form>
515                                     </td>
516                                 </tr>
517                             {{/each}}
518                         </tbody>
519                     </table>
520                     <table>
521                         <tbody>
522                             {{#each analysisPoints}}
523                                 <tr><td>{{label}}</td><td>{{value}}</td></tr>
524                             {{/each}}
525                         </tbody>
526                     </table>
527                 </div>
528             </section>
529             {{#each testGroups}}
530                 <section class="analysis-group">
531                     <table>
532                         <caption>{{name}}</caption>
533                         <thead>
534                             <tr>
535                                 <td>Order</td>
536                                 <td>Configuration</td>
537                                 <td>Status</td>
538                                 <td>Build</td>
539                                 <td>{{../metric.fullName}}</td>
540                             </tr>
541                         </thead>
542                         <tbody>
543                             {{#each buildRequests}}
544                                 <tr>
545                                     <td>{{orderLabel}}</td>
546                                     <td>{{config}}</td>
547                                     <td>{{#if url}}{{#link-to url}}{{statusLabel}}{{/link-to}}{{else}}{{statusLabel}}{{/if}}</td>
548                                     <td>{{build}}</td>
549                                     <td>{{mean}}</td>
550                                 </tr>
551                             {{/each}}
552                         </tbody>
553                     </table>
554                 </section>
555             {{/each}}
556
557             {{#if roots}}
558             <form method="POST" {{action "createTestGroup" newTestGroupName repetitionCount on="submit"}} class="analysis-group">
559                 <table>
560                     <caption>{{input name="name" value=newTestGroupName placeholder="Test group name" required=true type="text"}}</caption>
561                     <thead>
562                         <tr>
563                             <th>Root</th>
564                             {{#each testSets}}
565                                 <th>
566                                     {{name}}
567                                     {{view Ember.Select
568                                         content=options
569                                         optionValuePath="content.value"
570                                         optionLabelPath="content.label"
571                                         selection=selection}}
572                                 </th>
573                             {{/each}}
574                         </tr>
575                     </thead>
576                     <tbody>
577                         {{#each roots}}
578                             <tr>
579                                 <th>{{name}}</th>
580                                 {{#each sets}}
581                                     <td>{{view Ember.Select name=name content=revisions disabled=true
582                                         optionValuePath="content.value" optionLabelPath="content.label"
583                                         selection=selection}}</td>
584                                 {{/each}}
585                             </tr>
586                         {{/each}}
587                     </tbody>
588                     <tbody>
589                         <tr>
590                             <th>Number of runs</th>
591                             <td colspan=2>
592                                 {{view Ember.Select content=possibleRepetitionCounts value=repetitionCount}}
593                             </td>
594                         </tr>
595                     </tbody>
596                 </table>
597
598                 <button type="submit">Start A/B testing</button>
599             </form>
600             {{/if}}
601         {{/if}}
602     </script>
603
604 </head>
605 <body>
606 </body>
607 </html>