Perf dashboard should have a way of marking outliers
[WebKit.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="javascript:false" 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="javascript:false" 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="javascript:false" 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="javascript:false" 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="javascript:false" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
150                     {{#if movingAverageStrategies}}
151                         <a href="javascript:false" title="Statistical Tools" class="stat-button" {{action "toggleStatPane"}}>{{partial "stat-button"}}</a>
152                     {{/if}}
153                     <a href="javascript:false" {{bind-attr title=showOutlierTitle class=":outlier-button showOutlier:show:hide"}}
154                         {{action "toggleShowOutlier"}}>
155                         {{partial "outlier-button"}}
156                     </a>
157                     <a href="javascript:false" title="Analyze the selected range" class="analysis-button" {{action "toggleBugsPane"}}>
158                         {{partial "analysis-button"}}
159                     </a>
160                     {{#if App.Manifest.repositoriesWithReportedCommits}}
161                         <a href="javascript:false" title="Search commits by a keyword" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
162                     {{/if}}
163                 </header>
164
165                 <div class="body">
166                     <div class="svg-container">
167                     {{#if chartData}}
168                         {{interactive-chart
169                             chartData=chartData
170                             ranges=analyticRanges
171                             domain=mainPlotDomain
172                             interactive=true
173                             chartPointRadius=2
174                             currentItem=hoveredOrSelectedItem
175                             currentTime=sharedTime
176                             selectedItem=selectedItem
177                             highlightedItems=highlightedItems
178                             rangeRoute="analysisTask"
179                             selection=timeRange
180                             selectedPoints=selectedPoints
181                             showFullYAxis=showFullYAxis
182                             zoomable=true
183                             zoom="zoomed"}}
184                     {{else}}
185                         {{#if failure}}
186                             <div class="failure">{{failure}}</div>
187                         {{else}}
188                             <div class="progress">{{partial "spinner"}}</div>
189                         {{/if}}
190                     {{/if}}
191                     </div>
192                     <div class="details">
193                         <div class="overview">
194                         {{#if chartData}}
195                             {{interactive-chart
196                                 chartData=chartData
197                                 showYAxis=false
198                                 domain=overviewDomain
199                                 selection=overviewSelection}}
200                         {{/if}}
201                         </div>
202                         <div class="details-table-container">
203                             {{partial "chart-details"}}
204                         </div>
205                     </div>
206                 </div>
207
208                 <div {{bind-attr class=":popup-pane :analysis-pane showingAnalysisPane::hidden"}}>
209                     <section class="analysis-option-option">
210                         <h1>Start A/B testing or associate bugs</h1>
211                         <label>Name: {{input type=text value=newAnalysisTaskName}} <button {{action "createAnalysisTask"}} {{bind-attr disabled=cannotAnalyze}}>Analyze</button></label>
212                     </section>
213                     <section class="analysis-option-option">
214                         <h1>Marking outliers</h1>
215                         <label>{{input type=checkbox checked=selectedItemIsMarkedOutlier disabled=cannotMarkOutlier}} Mark as an outlier and hide it.</label>
216                     </section>
217                 </div>
218
219                 <form {{bind-attr class=":popup-pane :search-pane showingSearchPane::hidden"}}>
220                     <span class="repositories">
221                         {{view Ember.Select
222                             content=App.Manifest.repositoriesWithReportedCommits
223                             optionValuePath='content.id'
224                             optionLabelPath='content.name'
225                             selection=commitSearchRepository}}
226                     </span>
227                     {{input action="searchCommit" placeholder="Name or email" value=commitSearchKeyword}}
228                 </form>
229
230                 {{partial "stat-pane"}}
231             </section>
232         {{/each}}
233     </script>
234
235     <script type="text/x-handlebars" data-template-name="components/interactive-chart">
236         {{#if interactive}}
237             <div class="selection-toolbar" style="display: none;">
238                 <a href="javascript:false" class="button" {{action "zoom"}}>
239                     <svg class="zoom" viewBox="0 0 100 100">
240                         <g stroke-width="0" stroke="none">
241                             <polygon points="25,25 5,50 25,75"/>
242                             <polygon points="75,25 95,50 75,75"/>
243                         </g>
244                         <line x1="20" y1="50" x2="80" y2="50" stroke-width="10"></line>
245                     </svg>
246                 </a>
247             </div>
248         {{/if}}
249         <div class="rangeBarsContainerInlineStyle">
250             {{#each rangeBars}}
251                 {{#link-to linkRoute linkId title=label}}
252                     <span class="rangeBar" {{bind-attr style=inlineStyle}}></span>
253                 {{/link-to}}
254             {{/each}}
255         </div>
256     </script>
257
258     <script type="text/x-handlebars" data-template-name="chart-details">
259     {{#if details}}
260         <table class="details-table">
261             <tbody class="bugs">
262             {{#each details.bugTrackers}}
263                 {{#if bugs}}
264                     <tr>
265                         <th>{{label}}</th>
266                         <td>
267                             {{#each bugs}}
268                                 <a {{bind-attr href=bugUrl}} target="_blank">{{bugNumber}}</a>
269                             {{/each}}
270                         </td>
271                     </tr>
272                 {{/if}}
273             {{/each}}
274             </tbody>
275             <tbody class="status">
276                 <tr>
277                     <th>Current</th>
278                     <td>
279                         {{details.status.currentValue}} {{chartData.unit}}
280                         {{#if details.status.valueDelta}}
281                             ({{details.status.valueDelta}} {{chartData.unit}} / {{details.status.relativeDelta}})
282                         {{/if}}
283                         {{#if details.status.label}}
284                             <br>
285                             <span {{bind-attr class=details.status.className}}>{{details.status.label}}</span>
286                         {{/if}}
287                     </td>
288                 </tr>
289             </tbody>
290             <tbody>
291             {{#if details.buildNumber}}
292                 <tr>
293                     <th>Build</th>
294                     <td>
295                         {{#if details.buildURL}}
296                             <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
297                         {{else}}
298                             {{details.buildNumber}}
299                         {{/if}}
300                         ({{details.buildTime}})
301                     </td>
302                 </tr>
303             {{/if}}
304             {{#each details.revisions}}
305                 <tr>
306                     <th>{{name}}</th>
307                     <td>
308                         {{#if url}}
309                             <a {{bind-attr href=url}} target="_blank">{{label}}</a>
310                         {{else}}
311                             {{label}}
312                         {{/if}}
313                     </td>
314                 </tr>
315             {{/each}}
316             </tbody>
317         </table>
318         <div class="commits">
319             {{#each details.revisions}}
320                 {{commits-viewer repository=repository revisionInfo=this caption=name}}
321             {{/each}}
322         </div>
323     {{/if}}
324     </script>
325
326     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
327     {{#if commits}}
328         <table {{bind-attr class=":commits-viewer visible::hidden"}}>
329             {{#if caption}}
330                 <caption {{action toggleVisibility}}>{{caption}} commits</caption>
331             {{/if}}
332             {{#if visible}}
333                 <tbody>
334                     {{#each commits}}
335                         <tr>
336                             <th>
337                                 {{#if url}}
338                                     <a {{bind-attr href=url}} target="_blank">{{revision}}</a>
339                                 {{else}}
340                                     {{revision}}
341                                 {{/if}}
342                             </th>
343                             <th>{{author}}</th>
344                             <td>{{message}}</td>
345                         </tr>
346                     {{/each}}
347                 </tbody>
348             {{/if}}
349         </table>
350     {{/if}}
351     </script>
352
353     <script type="text/x-handlebars" data-template-name="close-button">
354         <svg class="close-button icon-button" viewBox="0 0 100 100">
355             <g stroke="black" stroke-width="10">
356                 <circle cx="50" cy="50" r="45" fill="transparent"/>
357                 <polygon points="30,30 70,70" />
358                 <polygon points="30,70 70,30" />
359             </g>
360         </svg>
361     </script>
362
363     <script type="text/x-handlebars" data-template-name="stat-button">
364         <svg class="stat-button icon-button" viewBox="10 0 110 100">
365             <g stroke="none" stroke-width="0" fill="black">
366                 <path id="upper-sigma" d="M 5 5 H 95 V 40 h -10 c -5 -20 -5 -20 -25 -20 H 35 L 60 50 l -20 0" />
367                 <use xlink:href="#upper-sigma" transform="translate(0, 100) scale(1, -1)" />
368             </g>
369         </svg>
370     </script>
371
372     <script type="text/x-handlebars" data-template-name="stat-pane">
373         <section {{bind-attr class=":popup-pane :stat-pane showingStatPane::hidden"}}>
374             <section class="stat-option">
375                 <h1>Moving average</h1>
376                 <label>Type: {{view Ember.Select
377                     content=movingAverageStrategies
378                     optionValuePath='content'
379                     optionLabelPath='content.label'
380                     selection=chosenMovingAverageStrategy}}</label>
381                     {{#if chosenMovingAverageStrategy.description}}
382                         <p class="description">{{chosenMovingAverageStrategy.description}}</p>
383                     {{/if}}
384                 {{#each chosenMovingAverageStrategy.parameterList}}
385                     <label>{{label}}: {{input type="number" value=value min=min max=max step=step}}</label>
386                 {{/each}}
387             </section>
388             {{#if chosenMovingAverageStrategy.execute}}
389                 <section class="stat-option">
390                     <h1>Envelope</h1>
391                     <label>Type: {{view Ember.Select
392                         content=envelopingStrategies
393                         optionValuePath='content'
394                         optionLabelPath='content.label'
395                         selection=chosenEnvelopingStrategy}}</label>
396                     {{#if chosenEnvelopingStrategy.description}}
397                         <p class="description">{{chosenEnvelopingStrategy.description}}</p>
398                     {{/if}}
399                     {{#each chosenEnvelopingStrategy.parameterList}}
400                         <label>{{label}}: <input type="number" {{bind-attr value=value min=min max=max step=step}}></label>
401                     {{/each}}
402                 </section>
403             {{/if}}
404             {{#if chosenEnvelopingStrategy.execute}}
405                 <section class="stat-option">
406                     <h1>Anomaly Detection</h1>
407                     {{#each anomalyDetectionStrategies}}
408                         <label {{bind-attr title=description}}>{{input type="checkbox" name=id checked=enabled}}{{label}}</label>
409                     {{/each}}
410                 </section>
411             {{/if}}
412         </section>
413     </script>
414
415     <script type="text/x-handlebars" data-template-name="outlier-button">
416         <svg class="outlier-button icon-button" viewBox="0 0 100 100">
417             <g stroke="black" fill="black" stroke-width="15">
418                 <line x1="0" y1="70" x2="40" y2="70"/>
419                 <circle cx="15" cy="70" r="8"/>
420                 <circle cx="45" cy="70" r="8"/>
421                 <circle cx="85" cy="70" r="8"/>
422                 <line x1="85" y1="70" x2="100" y2="70"/>
423                 <g class="show-outlier-icon">
424                     <line x1="45" y1="70" x2="65" y2="20"/>
425                     <line x1="65" y1="20" x2="85" y2="70"/>
426                     <circle cx="65" cy="20" r="8"/>
427                 </g>
428                 <g class="hide-outlier-icon">
429                     <line x1="45" y1="70" x2="85" y2="70"/>
430                 </g>
431             </g>
432         </svg>
433     </script>
434
435     <script type="text/x-handlebars" data-template-name="analysis-button">
436         <svg class="analysis-button icon-button" viewBox="0 0 100 100">
437             <g stroke="black" fill="black" stroke-width="15">
438                 <circle cx="50" cy="50" r="40" fill="transparent"/>
439                 <line x1="50" y1="25" x2="50" y2="55"/>
440                 <circle cx="50" cy="67.5" r="10" stroke="none"/>
441             </g>
442         </svg>
443     </script>
444
445     <script type="text/x-handlebars" data-template-name="search-button">
446         <svg class="search-button icon-button" viewBox="0 0 100 100">
447             <g stroke="black" stroke-width="15">
448                 <circle cx="60" cy="40" r="30" fill="transparent"/>
449                 <line x1="10" y1="90" x2="40" y2="60"/>
450             </g>
451         </svg>
452     </script>
453
454     <script type="text/x-handlebars" data-template-name="spinner">
455         <svg class="spinner" viewBox="0 0 100 100">
456             <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
457             <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
458             <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
459             <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
460             <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
461             <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
462             <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
463             <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
464         </svg>
465     </script>
466
467     <script type="text/x-handlebars" data-template-name="navbar">
468         <nav id="navigation" role="navigation">
469             <h1><a href="#">WebKit Perf Monitor</a></h1>
470             <ul>
471                 {{#each App.Manifest.dashboards}}
472                     {{#if name}}
473                         {{#link-to 'dashboard' name tagName='li'}}
474                             {{#link-to 'dashboard' name}}{{label}}{{/link-to}}
475                         {{/link-to}}
476                     {{/if}}
477                 {{/each}}
478                 {{#link-to 'charts' tagName='li'}}
479                     {{#link-to 'charts'}}Charts{{/link-to}}
480                 {{/link-to}}
481                 {{#link-to 'analysis' tagName='li'}}
482                     {{#link-to 'analysis'}}Analysis{{/link-to}}
483                 {{/link-to}}
484             </ul>
485         </nav>
486     </script>
487
488     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
489         <li class="numberOfDaysIs1">
490             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
491         </li>
492         <li class="numberOfDaysIs7">
493             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
494         </li>
495         <li class="numberOfDaysIs30">
496             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
497         </li>
498         <li class="numberOfDaysIs90">
499             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
500         </li>
501         <li class="numberOfDaysIs183">
502             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
503         </li>
504         <li class="numberOfDaysIs365">
505             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
506         </li>
507     </script>
508
509     <script type="text/x-handlebars" data-template-name="start-time-slider">
510         <label><input type="range"> <span class="numberOfDays">X</span> days</label>
511     </script>
512
513     <script type="text/x-handlebars" data-template-name="popup">
514         <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
515         {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
516     </script>
517
518     <script type="text/x-handlebars" data-template-name="popup-list">
519         {{#each view.list}}
520             {{#if isSeparator}}
521                 <li><hr></li>
522             {{else }} {{#if children}}
523                 <li>{{view App.PopupView list=children label=label}}</li>
524             {{else}}
525                 <li>
526                     {{#if actionName}}
527                         <a href="javascript:false" class="label" {{action actionName actionArgument}}>{{label}}</a>
528                     {{else}}
529                         <a class="label">{{label}}</a>
530                     {{/if}}
531                 </li>
532             {{/if}} {{/if}}
533         {{/each}}
534     </script>
535
536     <script type="text/x-handlebars" data-template-name="analysis">
537         <header id="header">
538             {{partial "navbar"}}
539         </header>
540
541         <table id="analysis-tasks">
542             <thead>
543                 <tr>
544                     <td>ID</td>
545                     <td>Name</td>
546                     <td>Created at</td>
547                 </tr>
548             </thead>
549             <tbody>
550                 {{#each model.tasks}}
551                     <tr>
552                         <td>{{#link-to 'analysisTask' id}}{{id}}{{/link-to}}</td>
553                         <td>{{name}}</td>
554                         <td>{{createdAt}}</td>
555                     </tr>
556                 {{/each}}
557             </tbody>
558         </table>
559     </script>
560
561     <script type="text/x-handlebars" data-template-name="analysisTask">
562         <header id="header">
563             {{partial "navbar"}}
564         </header>
565
566         <h2 id="analysis-task-title">{{label}}</h2>
567         {{#if platform.label}}
568             <h3 id="analysis-task-testname">{{metric.fullName}} - {{platform.label}}</h3>
569         {{/if}}
570
571         {{#if pane}}
572             <section class="analysis-chart-pane chart-pane" tabindex="0">
573                 <div class="svg-container">
574                     {{interactive-chart
575                         chartData=pane.chartData
576                         ranges=pane.analyticRanges
577                         domain=overviewDomain
578                         interactive=true
579                         chartPointRadius=2
580                         currentItem=pane.hoveredOrSelectedItem
581                         selectedPoints=pane.selectedPoints
582                         selection=timeRange
583                         highlightedItems=highlightedItems
584                         rangeRoute="analysisTask"}}
585                 </div>
586                 <div class="details">
587                     <div class="details-table-container">
588                         <table class="analysis-bugs">
589                             <tbody>
590                                 {{#each bugTrackers}}
591                                     <tr>
592                                         <th>{{label}}</th>
593                                         <td>
594                                             <form {{action "associateBug" this editedBugNumber on="submit"}}>
595                                                 {{input type=text value=editedBugNumber}}
596                                             </form>
597                                         </td>
598                                     </tr>
599                                 {{/each}}
600                             </tbody>
601                         </table>
602                         {{partial "chart-details"}}
603                     </div>
604                 </div>
605             </section>
606         {{/if}}
607
608         {{partial "testGroupForm"}}
609
610         {{#each testGroupPanes}}
611             {{partial "testGroup"}}
612         {{/each}}
613     </script>
614
615     <script type="text/x-handlebars" data-template-name="testGroup">
616         <section class="analysis-group">
617             <h1>{{name}}</h1>
618             <table class="results">
619                 <thead>
620                     <tr>
621                         <td colspan="2">Configuration</td>
622                         {{#each repositories}}
623                             <td>{{name}}</td>
624                         {{/each}}
625                         <td>Results</td>
626                         <td>Status</td>
627                     </tr>
628                 </thead>
629                 {{#each configurations}}
630                     <tbody {{bind-attr class="showRequestList::hideRequests"}}>
631                         <tr class="summary" {{action toggleShowRequestList this}}>
632                             <td class="config-letter" colspan="2">{{summary.configLetter}}</td>
633                             {{#with summary}}
634                                 {{partial "testGroupRow"}}
635                             {{/with}}
636                         </tr>
637                         {{#each items}}
638                             <tr class="request">
639                                 {{#with ../this}}
640                                     <td class="config-letter" {{action toggleShowRequestList this}}></td>
641                                 {{/with}}
642                                 <td>Run {{orderLabel}}</td>
643                                 {{partial "testGroupRow"}}
644                             </tr>
645                         {{/each}}
646                     </tbody>
647                 {{/each}}
648             </table>
649             <div class="reference-chart">
650                 {{#if referenceChart}}
651                     {{interactive-chart
652                         chartData=referenceChart.data
653                         domain=overviewDomain
654                         chartPointRadius=2
655                         showYAxis=false
656                         enableSelection=false
657                         highlightedItems=referenceChart.highlightedItems}}
658                 {{/if}}
659             </div>
660         </section>
661     </script>
662
663     <script type="text/x-handlebars" data-template-name="testGroupRow">
664         {{#each revisionList}}
665             <td>{{this}}</td>
666         {{/each}}
667         <td>
668             {{#if value}}
669                 {{box-plot range=valueRange value=value delta=confidenceIntervalDelta}}
670             {{/if}}
671             {{formattedValue}}
672         </td>
673         <td>
674             <a {{bind-attr href=url title=buildLabel}}>{{statusLabel}}</a>
675         </td>
676     </script>
677
678     <script type="text/x-handlebars" data-template-name="testGroupForm">
679     {{#if rootConfigurations}}
680         <form method="POST" {{action "createTestGroup" newTestGroupName repetitionCount on="submit"}}>
681             <section class="analysis-group">
682                 <h1>{{input name="name" value=newTestGroupName placeholder="Test group name" required=true type="text"}}</h1>
683                 <table>
684                     <thead>
685                         <tr>
686                             <th>Configuration</th>
687                             {{#each configurations}}
688                                 <th>{{this}}</th>
689                             {{/each}}
690                         </tr>
691                     </thead>
692                     <tbody>
693                         {{#each rootConfigurations}}
694                             <tr>
695                                 <th>{{name}}</th>
696                                 {{#each sets}}
697                                     <td>{{view Ember.Select name=name content=options
698                                         optionValuePath="content.value" optionLabelPath="content.label"
699                                         selection=selection}}</td>
700                                 {{/each}}
701                             </tr>
702                         {{/each}}
703                     </tbody>
704                 </table>
705                 <label>Number of runs {{view Ember.Select content=possibleRepetitionCounts value=repetitionCount}}</label>
706                 <button type="submit">Start A/B testing</button>
707             </section>
708         </form>
709     {{/if}}
710     </script>
711
712 </head>
713 <body>
714 </body>
715 </html>