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