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=ranges
 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 {{bind-attr class=":rangeBar status" 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                         [{{bugUrl}}]
 268                         <a {{bind-attr href=bugUrl}} target="_blank">{{bugNumber}}</a>
 269                         </td>
 270                     </tr>
 271                 {{/if}}
 272             {{/each}}
 273             </tbody>
 274             <tbody class="status">
 275                 <tr>
 276                     <th>Current</th>
 277                     <td>
 278                         {{details.status.currentValue}} {{chartData.unit}}
 279                         {{#if details.status.valueDelta}}
 280                             ({{details.status.valueDelta}} {{chartData.unit}} / {{details.status.relativeDelta}})
 281                         {{/if}}
 282                         {{#if details.status.label}}
 283                             <br>
 284                             <span {{bind-attr class=details.status.className}}>{{details.status.label}}</span>
 285                         {{/if}}
 286                     </td>
 287                 </tr>
 288             </tbody>
 289             <tbody>
 290             {{#if details.buildNumber}}
 291                 <tr>
 292                     <th>Build</th>
 293                     <td>
 294                         {{#if details.buildURL}}
 295                             <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
 296                         {{else}}
 297                             {{details.buildNumber}}
 298                         {{/if}}
 299                         ({{details.buildTime}})
 300                     </td>
 301                 </tr>
 302             {{/if}}
 303             {{#each details.revisions}}
 304                 <tr>
 305                     <th>{{name}}</th>
 306                     <td>
 307                         {{#if url}}
 308                             <a {{bind-attr href=url}} target="_blank">{{label}}</a>
 309                         {{else}}
 310                             {{label}}
 311                         {{/if}}
 312                     </td>
 313                 </tr>
 314             {{/each}}
 315             </tbody>
 316         </table>
 317         <div class="commits">
 318             {{#each details.revisions}}
 319                 {{commits-viewer repository=repository revisionInfo=this caption=name}}
 320             {{/each}}
 321         </div>
 322     {{/if}}
 323     </script>
 324
 325     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
 326     {{#if commits}}
 327         <table {{bind-attr class=":commits-viewer visible::hidden"}}>
 328             {{#if caption}}
 329                 <caption {{action toggleVisibility}}>{{caption}} commits</caption>
 330             {{/if}}
 331             {{#if visible}}
 332                 <tbody>
 333                     {{#each commits}}
 334                         <tr>
 335                             <th>
 336                                 {{#if url}}
 337                                     <a {{bind-attr href=url}} target="_blank">{{revision}}</a>
 338                                 {{else}}
 339                                     {{revision}}
 340                                 {{/if}}
 341                             </th>
 342                             <th>{{author}}</th>
 343                             <td>{{message}}</td>
 344                         </tr>
 345                     {{/each}}
 346                 </tbody>
 347             {{/if}}
 348         </table>
 349     {{/if}}
 350     </script>
 351
 352     <script type="text/x-handlebars" data-template-name="close-button">
 353         <svg class="close-button icon-button" viewBox="0 0 100 100">
 354             <g stroke="black" stroke-width="10">
 355                 <circle cx="50" cy="50" r="45" fill="transparent"/>
 356                 <polygon points="30,30 70,70" />
 357                 <polygon points="30,70 70,30" />
 358             </g>
 359         </svg>
 360     </script>
 361
 362     <script type="text/x-handlebars" data-template-name="stat-button">
 363         <svg class="stat-button icon-button" viewBox="10 0 110 100">
 364             <g stroke="none" stroke-width="0" fill="black">
 365                 <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" />
 366                 <use xlink:href="#upper-sigma" transform="translate(0, 100) scale(1, -1)" />
 367             </g>
 368         </svg>
 369     </script>
 370
 371     <script type="text/x-handlebars" data-template-name="stat-pane">
 372         <section {{bind-attr class=":popup-pane :stat-pane showingStatPane::hidden"}}>
 373             <section class="stat-option">
 374                 <h1>Moving average</h1>
 375                 <label>Type: {{view Ember.Select
 376                     content=movingAverageStrategies
 377                     optionValuePath='content'
 378                     optionLabelPath='content.label'
 379                     selection=chosenMovingAverageStrategy}}</label>
 380                     {{#if chosenMovingAverageStrategy.description}}
 381                         <p class="description">{{chosenMovingAverageStrategy.description}}</p>
 382                     {{/if}}
 383                 {{#each chosenMovingAverageStrategy.parameterList}}
 384                     <label>{{label}}: {{input type="number" value=value min=min max=max step=step}}</label>
 385                 {{/each}}
 386             </section>
 387             {{#if chosenMovingAverageStrategy.execute}}
 388                 <section class="stat-option">
 389                     <h1>Envelope</h1>
 390                     <label>Type: {{view Ember.Select
 391                         content=envelopingStrategies
 392                         optionValuePath='content'
 393                         optionLabelPath='content.label'
 394                         selection=chosenEnvelopingStrategy}}</label>
 395                     {{#if chosenEnvelopingStrategy.description}}
 396                         <p class="description">{{chosenEnvelopingStrategy.description}}</p>
 397                     {{/if}}
 398                     {{#each chosenEnvelopingStrategy.parameterList}}
 399                         <label>{{label}}: <input type="number" {{bind-attr value=value min=min max=max step=step}}></label>
 400                     {{/each}}
 401                 </section>
 402             {{/if}}
 403             {{#if chosenMovingAverageStrategy.isSegmentation}}
 404                 <section class="stat-option">
 405                     <h1>A/B Test Range Selection</h1>
 406                     <label>Type: {{view Ember.Select
 407                         content=testRangeSelectionStrategies
 408                         optionValuePath='content'
 409                         optionLabelPath='content.label'
 410                         selection=chosenTestRangeSelectionStrategy}}</label>
 411                     {{#if chosenTestRangeSelectionStrategy.description}}
 412                         <p class="description">{{chosenTestRangeSelectionStrategy.description}}</p>
 413                     {{/if}}
 414                 </section>
 415             {{/if}}
 416             {{#if chosenEnvelopingStrategy.execute}}
 417                 <section class="stat-option">
 418                     <h1>Anomaly Detection</h1>
 419                     {{#each anomalyDetectionStrategies}}
 420                         <label {{bind-attr title=description}}>{{input type="checkbox" name=id checked=enabled}}{{label}}</label>
 421                     {{/each}}
 422                 </section>
 423             {{/if}}
 424         </section>
 425     </script>
 426
 427     <script type="text/x-handlebars" data-template-name="outlier-button">
 428         <svg class="outlier-button icon-button" viewBox="0 0 100 100">
 429             <g stroke="black" fill="black" stroke-width="15">
 430                 <line x1="0" y1="70" x2="40" y2="70"/>
 431                 <circle cx="15" cy="70" r="8"/>
 432                 <circle cx="45" cy="70" r="8"/>
 433                 <circle cx="85" cy="70" r="8"/>
 434                 <line x1="85" y1="70" x2="100" y2="70"/>
 435                 <g class="show-outlier-icon">
 436                     <line x1="45" y1="70" x2="65" y2="20"/>
 437                     <line x1="65" y1="20" x2="85" y2="70"/>
 438                     <circle cx="65" cy="20" r="8"/>
 439                 </g>
 440                 <g class="hide-outlier-icon">
 441                     <line x1="45" y1="70" x2="85" y2="70"/>
 442                 </g>
 443             </g>
 444         </svg>
 445     </script>
 446
 447     <script type="text/x-handlebars" data-template-name="analysis-button">
 448         <svg class="analysis-button icon-button" viewBox="0 0 100 100">
 449             <g stroke="black" fill="black" stroke-width="15">
 450                 <circle cx="50" cy="50" r="40" fill="transparent"/>
 451                 <line x1="50" y1="25" x2="50" y2="55"/>
 452                 <circle cx="50" cy="67.5" r="10" stroke="none"/>
 453             </g>
 454         </svg>
 455     </script>
 456
 457     <script type="text/x-handlebars" data-template-name="search-button">
 458         <svg class="search-button icon-button" viewBox="0 0 100 100">
 459             <g stroke="black" stroke-width="15">
 460                 <circle cx="60" cy="40" r="30" fill="transparent"/>
 461                 <line x1="10" y1="90" x2="40" y2="60"/>
 462             </g>
 463         </svg>
 464     </script>
 465
 466     <script type="text/x-handlebars" data-template-name="spinner">
 467         <svg class="spinner" viewBox="0 0 100 100">
 468             <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
 469             <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
 470             <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
 471             <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
 472             <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
 473             <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
 474             <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
 475             <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
 476         </svg>
 477     </script>
 478
 479     <script type="text/x-handlebars" data-template-name="navbar">
 480         <nav id="navigation" role="navigation">
 481             <h1><a href="#">WebKit Perf Monitor</a></h1>
 482             <ul>
 483                 {{#each App.Manifest.dashboards}}
 484                     {{#if name}}
 485                         {{#link-to 'dashboard' name tagName='li'}}
 486                             {{#link-to 'dashboard' name}}{{label}}{{/link-to}}
 487                         {{/link-to}}
 488                     {{/if}}
 489                 {{/each}}
 490                 {{#link-to 'charts' tagName='li'}}
 491                     {{#link-to 'charts'}}Charts{{/link-to}}
 492                 {{/link-to}}
 493                 {{#link-to 'analysis' tagName='li'}}
 494                     {{#link-to 'analysis'}}Analysis{{/link-to}}
 495                 {{/link-to}}
 496             </ul>
 497         </nav>
 498     </script>
 499
 500     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
 501         <li class="numberOfDaysIs1">
 502             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
 503         </li>
 504         <li class="numberOfDaysIs7">
 505             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
 506         </li>
 507         <li class="numberOfDaysIs30">
 508             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
 509         </li>
 510         <li class="numberOfDaysIs90">
 511             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
 512         </li>
 513         <li class="numberOfDaysIs183">
 514             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
 515         </li>
 516         <li class="numberOfDaysIs365">
 517             <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
 518         </li>
 519     </script>
 520
 521     <script type="text/x-handlebars" data-template-name="start-time-slider">
 522         <label><input type="range"> <span class="numberOfDays">X</span> days</label>
 523     </script>
 524
 525     <script type="text/x-handlebars" data-template-name="popup">
 526         <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
 527         {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
 528     </script>
 529
 530     <script type="text/x-handlebars" data-template-name="popup-list">
 531         {{#each view.list}}
 532             {{#if isSeparator}}
 533                 <li><hr></li>
 534             {{else }} {{#if children}}
 535                 <li>{{view App.PopupView list=children label=label}}</li>
 536             {{else}}
 537                 <li>
 538                     {{#if actionName}}
 539                         <a href="javascript:false" class="label" {{action actionName actionArgument}}>{{label}}</a>
 540                     {{else}}
 541                         <a class="label">{{label}}</a>
 542                     {{/if}}
 543                 </li>
 544             {{/if}} {{/if}}
 545         {{/each}}
 546     </script>
 547
 548     <script type="text/x-handlebars" data-template-name="analysis">
 549         <header id="header">
 550             {{partial "navbar"}}
 551         </header>
 552
 553         <table id="analysis-tasks">
 554             <thead>
 555                 <tr>
 556                     <td>Name</td>
 557                     <td>Status</td>
 558                     <td>Author</td>
 559                     <td>Created at</td>
 560                     <td>Platform</td>
 561                     <td>Test</td>
 562                 </tr>
 563             </thead>
 564             <tbody>
 565                 {{#each model.tasks}}
 566                     <tr>
 567                         <td class="task-name">{{#link-to 'analysisTask' id}}{{name}}{{/link-to}}</td>
 568                         <td class="status">{{statusLabel}}</td>
 569                         <td class="author">{{author}}</td>
 570                         <td class="created-at">{{formattedCreatedAt}}</td>
 571                         <td class="platform-name">{{platform.label}}</td>
 572                         <td class="test-name">{{metric.fullName}}</td>
 573                     </tr>
 574                 {{/each}}
 575             </tbody>
 576         </table>
 577     </script>
 578
 579     <script type="text/x-handlebars" data-template-name="analysisTask">
 580         <header id="header">
 581             {{partial "navbar"}}
 582         </header>
 583
 584         <h2 id="analysis-task-title">{{label}}</h2>
 585         {{#if platform.label}}
 586             <h3 id="analysis-task-testname">{{metric.fullName}} - {{platform.label}}</h3>
 587         {{/if}}
 588
 589         {{#if pane}}
 590             <section class="analysis-chart-pane chart-pane" tabindex="0">
 591                 <div class="svg-container">
 592                     {{interactive-chart
 593                         chartData=pane.chartData
 594                         ranges=pane.ranges
 595                         domain=overviewDomain
 596                         interactive=true
 597                         chartPointRadius=2
 598                         currentItem=pane.hoveredOrSelectedItem
 599                         selectedPoints=pane.selectedPoints
 600                         selection=timeRange
 601                         highlightedItems=highlightedItems
 602                         rangeRoute="analysisTask"}}
 603                 </div>
 604                 <div class="details">
 605                     <div class="details-table-container">
 606                         {{#if details}}
 607                             {{partial "chart-details"}}
 608                         {{else}}
 609                             {{partial "analysisStatusForm"}}
 610                         {{/if}}
 611                     </div>
 612                 </div>
 613             </section>
 614         {{/if}}
 615
 616         {{partial "testGroupForm"}}
 617
 618         {{#each testGroupPanes}}
 619             {{partial "testGroup"}}
 620         {{/each}}
 621     </script>
 622
 623     <script type="text/x-handlebars" data-template-name="testGroup">
 624         <section class="analysis-group">
 625             <h1>{{name}}</h1>
 626             <div class="table-container">
 627                 <table class="results">
 628                     <thead>
 629                         <tr>
 630                             <td colspan="2">Configuration</td>
 631                             <td>Results</td>
 632                             <td>Status</td>
 633                             {{#each repositories}}
 634                                 <td>{{name}}</td>
 635                             {{/each}}
 636                         </tr>
 637                     </thead>
 638                     {{#each configurations}}
 639                         <tbody {{bind-attr class="showRequestList::hideRequests"}}>
 640                             <tr class="summary" {{action toggleShowRequestList this}}>
 641                                 <td class="config-letter" colspan="2">{{summary.configLetter}}</td>
 642                                 {{#with summary}}
 643                                     {{partial "testGroupRow"}}
 644                                 {{/with}}
 645                             </tr>
 646                             {{#each requests}}
 647                                 <tr class="request">
 648                                     {{#with ../this}}
 649                                         <td class="config-letter" {{action toggleShowRequestList this}}></td>
 650                                     {{/with}}
 651                                     <td>Run {{orderLabel}}</td>
 652                                     {{partial "testGroupRow"}}
 653                                 </tr>
 654                             {{/each}}
 655                         </tbody>
 656                     {{/each}}
 657                     {{#each comparisons}}
 658                         <tbody>
 659                             <tr>
 660                                 <td colspan="2">{{label}}</td>
 661                                 <td>{{difference}}</td>
 662                                 <td>{{result}}</td>
 663                                 {{#with ../this}}
 664                                     {{#each repositories}}
 665                                         <td></td>
 666                                     {{/each}}
 667                                 {{/with}}
 668                             </tr>
 669                         </tbody>
 670                     {{/each}}
 671                 </table>
 672             </div>
 673             <div class="reference-chart">
 674                 {{#if referenceChart}}
 675                     {{interactive-chart
 676                         chartData=referenceChart.data
 677                         domain=overviewDomain
 678                         chartPointRadius=2
 679                         showYAxis=false
 680                         enableSelection=false
 681                         highlightedItems=referenceChart.highlightedItems}}
 682                 {{/if}}
 683             </div>
 684         </section>
 685     </script>
 686
 687     <script type="text/x-handlebars" data-template-name="testGroupRow">
 688         <td>
 689             {{#if value}}
 690                 {{box-plot range=valueRange value=value delta=delta}}
 691             {{/if}}
 692             {{formattedValue}}
 693         </td>
 694         <td>
 695             <a {{bind-attr href=url title=buildLabel}}>{{statusLabel}}</a>
 696         </td>
 697         {{#each revisionList}}
 698             <td>{{this}}</td>
 699         {{/each}}
 700     </script>
 701
 702     <script type="text/x-handlebars" data-template-name="testGroupForm">
 703     {{#if rootConfigurations}}
 704         <form method="POST" {{action "createTestGroup" newTestGroupName repetitionCount on="submit"}}>
 705             <section class="analysis-group">
 706                 <h1>{{input name="name" value=newTestGroupName placeholder="Test group name" required=true type="text"}}</h1>
 707                 <table>
 708                     <thead>
 709                         <tr>
 710                             <th>Configuration</th>
 711                             {{#each configurations}}
 712                                 <th>{{this}}</th>
 713                             {{/each}}
 714                         </tr>
 715                     </thead>
 716                     <tbody>
 717                         {{#each rootConfigurations}}
 718                             <tr>
 719                                 <th>{{name}}</th>
 720                                 {{#each sets}}
 721                                     <td>{{view Ember.Select name=name content=options
 722                                         optionValuePath="content.value" optionLabelPath="content.label"
 723                                         selection=selection}}</td>
 724                                 {{/each}}
 725                             </tr>
 726                         {{/each}}
 727                     </tbody>
 728                 </table>
 729                 <label>Number of runs {{view Ember.Select content=possibleRepetitionCounts value=repetitionCount}}</label>
 730                 <button type="submit">Start A/B testing</button>
 731             </section>
 732         </form>
 733     {{/if}}
 734     </script>
 735
 736     <script type="text/x-handlebars" data-template-name="analysisStatusForm">
 737         <table class="analysis-bugs">
 738             <tbody>
 739                 {{#each model.bugs}}
 740                     <tr>
 741                         <th>{{bugTracker.name}}</th>
 742                         <td>
 743                             <a {{bind-attr href=url}} target="_blank">{{number}}</a>
 744                             <a href="javascript:false" {{action "deleteBug" this}}>{{partial "close-button"}}</a>
 745                         </td>
 746                     </tr>
 747                 {{/each}}
 748                 {{#if bugTrackers}}
 749                     <tr>
 750                         <td>
 751                             {{view Ember.Select content=bugTrackers optionValuePath="content" optionLabelPath="content.name" value=chosenBugTracker}}
 752                         </td>
 753                         <td>
 754                             {{input id=elementId type=text value=editedBugNumber}}
 755                             <button {{action "addBug" chosenBugTracker editedBugNumber}}>Add</button>
 756                         </td>
 757                     </tr>
 758                 {{/if}}
 759             </tbody>
 760             <tbody>
 761                 <tr>
 762                     <th><label for="analysis-status">Status<label></th>
 763                     <td>
 764                         <form class="analysis-bugs" {{action "saveStatus" on="submit"}}>
 765                             {{view Ember.Select id="analysis-status" content=analysisResultOptions optionValuePath="content"
 766                                 optionLabelPath="content.label" selection=chosenAnalysisResult}}
 767                             <input type="submit" value="Save"><br>
 768                             <label {{bind-attr class="needsFeedback::hidden"}}>{{input type=checkbox checked=notNeeded}} This should not have been created</label>
 769                         </form>
 770                     </td>
 771                 </tr>
 772             </tbody>
 773         </table>
 774     </script>
 775
 776 </head>
 777 <body>
 778 </body>
 779 </html>