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