| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <link type="text/css" rel="stylesheet" href="/dashboard/static/base.css"> |
| <link rel="import" href="/dashboard/elements/nav-bar.html"> |
| <link rel="import" href="/components/polymer/polymer.html"> |
| |
| <script src="/jquery/jquery-2.1.4.min.js"></script> |
| <script src="/flot/jquery.flot.min.js"></script> |
| <script src="/flot/jquery.flot.pie.min.js"></script> |
| <script src="/flot/jquery.flot.stack.min.js"></script> |
| |
| <style> |
| form, ul { |
| margin-left: 20px; |
| } |
| |
| .sub-form { |
| margin-bottom: 20px; |
| margin-left: 30px; |
| margin-top: 10px; |
| } |
| |
| input[type=submit] { |
| background-color: #4d90fe; |
| background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed); |
| background-image: linear-gradient(to bottom, #4d90fe, #4787ed); |
| border: 1px solid #3079ed; |
| border-radius: 2px; |
| color: #fff; |
| font-size: 11px; |
| font-weight: bold; |
| height: 27px; |
| line-height: 27px; |
| min-width: 54px; |
| padding: 0px 8px; |
| -webkit-user-select: none; |
| } |
| |
| input[type=checkbox] { |
| margin-right: 10px; |
| } |
| |
| hr { |
| border-top: solid 1px #ebebeb; |
| margin: 16px 0; |
| width: 100%; |
| } |
| |
| .piechart { |
| height: 400px; |
| width: 800px; |
| } |
| </style> |
| </head> |
| <body> |
| <nav-bar></nav-bar> |
| <h1>Chrome Performance Statistics</h1> |
| {% if waiting %} |
| Waiting ({{processed}} of {{total}})... |
| <script> |
| 'use strict'; |
| window.setTimeout(function() { |
| location.reload(); |
| }, 5000); |
| </script> |
| {% elif have_stats %} |
| <h2>{{title}}:</h2> |
| {% if type == "around_revision" %} |
| <table> |
| <tr> |
| <th>Test</th> |
| <th>Revision tested</th> |
| <th>Median % change</th> |
| <th>Median before</th> |
| <th>Median after</th> |
| <th>Mean % change</th> |
| <th>Mean before</th> |
| <th>Mean after</th> |
| <th>Standard Deviation</th> |
| </tr> |
| {% for test in stats.tests %} |
| <tr> |
| <td>{{test.test_path}}</td> |
| <td>{{test.actual_revision}}</td> |
| <td>{{test.median_percent_improved}}</td> |
| <td>{{test.median_before}}</td> |
| <td>{{test.median_after}}</td> |
| <td>{{test.mean_percent_improved}}</td> |
| <td>{{test.mean_before}}</td> |
| <td>{{test.mean_after}}</td> |
| <td>{{test.std}}</td> |
| </tr> |
| {% endfor %} |
| </table> |
| {% elif type == "alert_summary" %} |
| <div class="alert_summary_group"> |
| <h3>Overall Alert Stats</h3> |
| |
| <h4>Bots</h4> |
| <div id="bots-pie" class="piechart"></div> |
| |
| <h4>Test Suites</h4> |
| <div id="test_suites-pie" class="piechart"></div> |
| |
| <h4>Individual Traces</h4> |
| <div id="traces-pie" class="piechart"></div> |
| |
| <h4>Bug IDs</h4> |
| <div id="bug_ids-pie" class="piechart"></div> |
| |
| <h4>Percent Changed</h4> |
| <div id="percent_changed_buckets-pie" class="piechart"></div> |
| |
| </div> |
| <div class="alert_summary_group"> |
| <h3>Daily Alert Stats</h3> |
| |
| <h4>Bots</h4> |
| <div id="bots-daily" class="piechart"></div> |
| |
| <h4>Test Suites</h4> |
| <div id="test_suites-daily" class="piechart"></div> |
| |
| <h4>Individual Traces</h4> |
| <div id="traces-daily" class="piechart"></div> |
| |
| <h4>Bug IDs</h4> |
| <div id="bug_ids-daily" class="piechart"></div> |
| |
| <h4>Percent Changed</h4> |
| <div id="percent_changed_buckets-daily" class="piechart"></div> |
| <div id="chart-tooltip" style="position: absolute; display:none; |
| background-color:white; color: black;"> |
| </div> |
| </div> |
| |
| <script> |
| 'use strict'; |
| |
| function labelFormatter(label, series) { |
| return ('<div style="font-size:8pt; text-align:center; ' + |
| 'padding:2px; color:white;">' + label + '<br>' + |
| Math.round(series.percent) + '%</div>'); |
| } |
| |
| var axis_map = {{stats.axis_map | safe}}; |
| var summaries = {{stats.overall_summaries | safe}}; |
| |
| for (var key in summaries) { |
| $.plot('#' + key + '-pie', summaries[key], { |
| series: { |
| pie: { |
| show: true, |
| radius: 1, |
| label: { |
| show: true, |
| radius: 2 / 3, |
| formatter: labelFormatter, |
| threshold: 0.1 |
| } |
| } |
| }, |
| legend: { |
| show: false |
| }, |
| grid: { |
| hoverable: true |
| } |
| }); |
| |
| $('#' + key + '-pie').bind('plothover', function(event, pos, item) { |
| var tooltip = document.getElementById('chart-tooltip'); |
| if (item) { |
| tooltip.textContent = ( |
| item.series.label + ': ' + item.datapoint[0].toFixed(2)); |
| tooltip.style.left = (pos.pageX + 15) + 'px'; |
| tooltip.style.top = pos.pageY + 'px'; |
| tooltip.style.display = ''; |
| } else { |
| tooltip.style.display = 'none'; |
| } |
| }); |
| } |
| |
| var daily = {{stats.daily_summaries | safe}}; |
| for (var d in daily) { |
| $.plot('#' + d + '-daily', daily[d], { |
| series: { |
| stack: true, |
| lines: { |
| show: true, |
| fill: true, |
| steps: false |
| }, |
| bars: { |
| show: false, |
| barWidth: 0.6 |
| } |
| }, |
| legend: { |
| show: false |
| }, |
| xaxis: { |
| tickFormatter: function(num) { return axis_map[num] || ''; } |
| }, |
| grid: { |
| hoverable: true |
| } |
| }); |
| |
| $('#' + d + '-daily').bind('plothover', function(event, pos, item) { |
| var tooltip = document.getElementById('chart-tooltip'); |
| var x = Math.round(pos.x); |
| if (x < 0 || x >= this[0].length) { |
| tooltip.style.display = 'none'; |
| return; |
| } |
| var y = pos.y; |
| var label = null; |
| var sum = 0, lastSum = 0; |
| for (var i = 0; i < this.length; i++) { |
| sum += this[i].data[x][1]; |
| if (lastSum <= y && y < sum) { |
| label = this[i].label; |
| break; |
| } |
| lastSum = sum; |
| } |
| if (label) { |
| tooltip.textContent = label + ': ' + this[i].data[x][1]; |
| tooltip.style.left = (pos.pageX + 15) + 'px'; |
| tooltip.style.top = pos.pageY + 'px'; |
| tooltip.style.display = ''; |
| } else { |
| tooltip.style.display = 'none'; |
| } |
| }.bind(daily[d])); |
| } |
| </script> |
| {% endif %} |
| {% else %} |
| <script> |
| 'use strict'; |
| |
| function updateSubForm() { |
| var sel = document.getElementById('type-select'); |
| var val = sel.options[sel.selectedIndex].value; |
| var revForm = document.getElementById('around_revision_form'); |
| var alertForm = document.getElementById('alert_summary_form'); |
| if (val == 'around_revision') { |
| revForm.style.display = ''; |
| alertForm.style.display = 'none'; |
| } else { |
| revForm.style.display = 'none'; |
| alertForm.style.display = ''; |
| } |
| } |
| </script> |
| <form method="POST"> |
| {{xsrf_input|safe}} |
| <b>Select the type of stats to calculate:</b> |
| <select name="type" id="type-select" onchange="updateSubForm();"> |
| <option value="around_revision">Performance Before/After Revision</option> |
| <option value="alert_summary">Summary of alerts over time</option> |
| </select><br><br> |
| Name for this run:<br> |
| <input type="text" name="name"><br> |
| <div class="sub-form" id="around_revision_form"> |
| Bots:<br> |
| {% for bot in bots %} |
| <label> |
| <input type="checkbox" checked name="bots" value="{{bot}}"> |
| {{bot}} |
| </label><br> |
| {% endfor %} |
| <br> |
| Revision to check:<br> |
| <input type="text" placeholder="1234567" name="rev"><br><br> |
| Number of revisions before/after to check:<br> |
| <input type="text" name="num_around" value="10"><br><br> |
| </div> |
| <div class="sub-form" id="alert_summary_form" style="display:none"> |
| Sheriff: |
| <select name="sheriff"> |
| {% for sheriff in sheriffs %} |
| <option value="{{sheriff}}">{{sheriff}}</option> |
| {% endfor %} |
| </select><br><br> |
| Start date: <input type="date" name="start_date"><br><br> |
| End date: <input type="date" name="end_date"><br><br> |
| </div> |
| <input type="submit" value="Submit"> |
| </form> |
| <hr> |
| <b>Or select recent stats to view:</b> |
| <ul> |
| {% for s in recent %} |
| <li><a href="/stats?key={{s.key}}">{{s.title}}</a> |
| {% endfor %} |
| </ul> |
| {% endif %} |
| </body> |
| </html> |
