Improve test freshness page interaction experience.
[WebKit.git] / Websites / perf.webkit.org / public / index.html
index 1d32213..50c556b 100644 (file)
@@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>WebKit Perf Monitor</title>
+<title>Perf Monitor is Loading...</title>
+<script>
+
+if (location.hash.indexOf('#mode=dashboard') >= 0 || !location.hash || location.hash == '#')
+    location.href = '/v3/';
+
+</script>
 <script src="js/jquery.js" defer></script>
 <script src="js/jquery.flot.js" defer></script>
 <script src="js/jquery.flot.crosshair.js" defer></script>
 <script src="js/jquery.flot.selection.js" defer></script>
 <script src="js/jquery.flot.time.js" defer></script>
 <script src="js/helper-classes.js" defer></script>
-<script src="js/shared.js" defer></script>
-<script src="js/statistics.js" defer></script>
+<script src="shared/statistics.js" defer></script>
 <link rel="stylesheet" href="common.css">
 <style type="text/css">
 
 #numberOfDaysPicker {
-    display: inline-block;
-    margin: 5px 0px;
-    border: solid 1px #ccc;
     color: #666;
-    border-radius: 5px;
-    padding: 5px 8px;
 }
 
 #numberOfDaysPicker input {
@@ -32,6 +32,7 @@
 td, th {
     border: none;
     border-collapse: collapse;
+    padding-top: 0.5em;
 }
 
 #dashboard > tbody > tr > td {
@@ -39,21 +40,16 @@ td, th {
 }
 
 #dashboard > thead th {
-    padding-top: 1.5em;
     text-shadow: #bbb 1px 1px 2px;
     font-size: large;
     font-weight: normal;
 }
 
-#dashboard td {
-    
-}
-
 .chart {
     position: relative;
     border: solid 1px #ccc;
     border-radius: 5px;
-    margin: 10px 10px 0px 0px;
+    margin: 0px 0px 10px 0px;
 }
 
 .chart.worse {
@@ -68,7 +64,7 @@ td, th {
     position: absolute;
     left: 10px;
     top: 10px;
-    width: 200px;
+    width: 230px;
 }
 
 .chart header {
@@ -78,8 +74,7 @@ td, th {
 }
 
 #dashboard header {
-    padding: 10px;
-    width: 200px;
+    padding: 0px 10px;
 }
 
 .chart h2, .chart h3 {
@@ -87,7 +82,6 @@ td, th {
     padding: 0;
     font-size: 1em;
     font-weight: normal;
-    width: 200px;
     word-break: break-all;
 }
 
@@ -103,6 +97,10 @@ td, th {
     display: none;
 }
 
+#dashboard .chart .status {
+    margin: 0px 10px;
+}
+
 .chart .status {
     font-size: small;
     color: #666;
@@ -120,6 +118,10 @@ td, th {
     height: 15px;
 }
 
+#dashboard .chart {
+    width: 410px;
+}
+
 #dashboard .plot {
     width: 400px;
     height: 100px;
@@ -128,7 +130,7 @@ td, th {
 }
 
 #charts .plot {
-    height: 300px;
+    height: 320px;
     margin-left: 250px;
 }
 
@@ -142,17 +144,45 @@ td, th {
     height: 70px;
 }
 
-.summaryTable {
+.chart .summaryTable {
     font-size: small;
     color: #666;
     border: 0;
 }
 
-#dashboard .summaryTable {
+.chart .meta {
+    position: relative;
+}
+
+.chart .meta table,
+.chart .meta td,
+.tooltip table,
+.tooltip td {
+    margin: 0;
+    padding: 0;
+}
+
+.chart .meta th,
+.tooltip th {
+    margin: 0;
+    padding: 0 0.2em 0 0;
+    text-align: right;
+    font-weight: normal;
+}
+
+.chart .meta td:not(:first-child):before,
+.tooltip td:not(:first-child):before {
+    content: ": ";
+}
+
+#dashboard .chart .summaryTable {
     position: absolute;
     right: 10px;
-    top: 10px;
-    width: 180px;
+    top: 0px;
+}
+
+#charts .summaryTable {
+    margin-top: 0.3em;
 }
 
 #dashboard .arrow {
@@ -163,25 +193,12 @@ td, th {
     left: 5px;
 }
 
-#dashboard .unit {
-    display: none;
-}
-
-#charts .unit {
-    font-size: small;
-    width: 50px;
-    text-align: center;
-    position: absolute;
-    bottom: 10px;
-    left: 245px;
-}
-
 #charts .arrow {
     width: 20px;
     height: 40px;
     position: absolute;
     top: 10px;
-    left: 220px;
+    left: 240px;
 }
 
 .chart svg {
@@ -223,7 +240,29 @@ td, th {
     color: #eee;
     font-size: small;
     line-height: 130%;
-    width: 30ex;
+    white-space: nowrap;
+}
+
+.tooltip:before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 50%;
+    margin-left: -9px;
+    top: -19px;
+    content: "";
+    display: none;
+    border-style: solid;
+    border-width: 10px;
+    border-color: transparent transparent #333 transparent;
+}
+
+.tooltip.inverted:before {
+    display: block;
+}
+
+.tooltip.inverted:after {
+    display: none;
 }
 
 .tooltip:after {
@@ -263,20 +302,6 @@ td, th {
     padding: 5px 8px;
 }
 
-#numberOfDaysPicker {
-    display: inline-block;
-    margin: 5px 0px;
-    border: solid 1px #ccc;
-    color: #666;
-    border-radius: 5px;
-    padding: 5px 8px;
-}
-
-#numberOfDaysPicker input {
-    height: 0.9em;
-    margin-right: 1em;
-}
-
 </style>
 <script>
 
@@ -303,25 +328,58 @@ td, th {
         }
     };
 
-    function computeYAxisBoundsToFitLines(minTime, results, baseline, target) {
-        var stdevOfAllRuns = results.sampleStandardDeviation(minTime);
-        var movingAverage = results.exponentialMovingArithmeticMean(minTime, /* alpha, the degree of weighting decrease */ 0.3);
-        var min = results.min(minTime);
-        var max = results.max(minTime);
+    function adjustedIntervalForRun(results, minTime, minRatioToFitInAdjustedInterval) {
+        if (!results)
+            return {min: Number.MAX_VALUE, max: Number.MIN_VALUE};
+        var degreeOfWeightingDecrease = 0.2;
+        var movingAverage = results.exponentialMovingArithmeticMean(minTime, degreeOfWeightingDecrease);
+        var resultsCount = results.countResults(minTime);
+        var adjustmentDelta = results.sampleStandardDeviation(minTime) / 4;
+        var adjustedMin = movingAverage;
+        var adjustedMax = movingAverage;
+        var adjustmentCount;
+        for (adjustmentCount = 0; adjustmentCount < 4 * 4; adjustmentCount++) { // Don't expand beyond 4 standard deviations.
+            adjustedMin -= adjustmentDelta;
+            adjustedMax += adjustmentDelta;
+            if (results.countResultsInInterval(minTime, adjustedMin, adjustedMax) / resultsCount >= minRatioToFitInAdjustedInterval)
+                break;
+        }
+        for (var i = 0; i < adjustmentCount; i++) {
+            if (results.countResultsInInterval(minTime, adjustedMin + adjustmentDelta, adjustedMax) / resultsCount < minRatioToFitInAdjustedInterval)
+                break;
+            adjustedMin += adjustmentDelta;
+        }
+        for (var i = 0; i < adjustmentCount; i++) {
+            if (results.countResultsInInterval(minTime, adjustedMin, adjustedMax - adjustmentDelta) / resultsCount < minRatioToFitInAdjustedInterval)
+                break;
+            adjustedMax -= adjustmentDelta;
+        }
+        return {min: adjustedMin, max: adjustedMax};
+    }
 
+    function computeYAxisBoundsToFitLines(minTime, results, baseline, target) {
+        var minOfAllRuns = results.min(minTime);
+        var maxOfAllRuns = results.max(minTime);
         if (baseline) {
-            min = Math.min(min, baseline.min(minTime));
-            max = Math.max(max, baseline.max(minTime));
+            minOfAllRuns = Math.min(minOfAllRuns, baseline.min(minTime));
+            maxOfAllRuns = Math.max(maxOfAllRuns, baseline.max(minTime));
         }
         if (target) {
-            min = Math.min(min, target.min(minTime));
-            max = Math.max(max, target.max(minTime));
+            minOfAllRuns = Math.min(minOfAllRuns, target.min(minTime));
+            maxOfAllRuns = Math.max(maxOfAllRuns, target.max(minTime));
         }
-
-        var marginSize = (max - min) * 0.1;
-        return {min: min - marginSize, max: max + marginSize,
-            adjustedMin: Math.min(results.lastResult().mean() - marginSize, Math.max(movingAverage - stdevOfAllRuns * 2, min) - marginSize),
-            adjustedMax: Math.max(results.lastResult().mean() + marginSize, Math.min(movingAverage + stdevOfAllRuns * 2, max) + marginSize) };
+        var marginSize = (maxOfAllRuns - minOfAllRuns) * 0.1;
+
+        var minRatioToFitInAdjustedInterval = 0.9;
+        var intervalForResults = adjustedIntervalForRun(results, minTime, minRatioToFitInAdjustedInterval);
+        var intervalForBaseline = adjustedIntervalForRun(baseline, minTime, minRatioToFitInAdjustedInterval);
+        var intervalForTarget = adjustedIntervalForRun(target, minTime, minRatioToFitInAdjustedInterval);
+        var adjustedMin = Math.min(intervalForResults.min, intervalForBaseline.min, intervalForTarget.min);
+        var adjustedMax = Math.max(intervalForResults.max, intervalForBaseline.max, intervalForTarget.max);
+        var adjsutedMarginSize = (adjustedMax - adjustedMin) * 0.1;
+        return {min: minOfAllRuns - marginSize, max: maxOfAllRuns + marginSize,
+            adjustedMin: Math.max(minOfAllRuns - marginSize, adjustedMin - adjsutedMarginSize),
+            adjustedMax: Math.min(maxOfAllRuns + marginSize, adjustedMax + adjsutedMarginSize)};
     }
 
     function computeStatus(smallerIsBetter, lastResult, baseline, target) {
@@ -339,10 +397,6 @@ td, th {
         } else if (relativeDifferenceWithTarget)
             statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% until target';
 
-        if (statusText)
-            statusText += '<br>';
-        statusText += buildLabelWithLinks(lastResult.build());
-
         return {class: status, text: statusText};
     }
 
@@ -363,7 +417,7 @@ td, th {
     }
 
     function createSummaryRowMarkup(name, runs) {
-        return '<tr><td>' + name + '</td><td>' + runs.lastResult().label() + '</td></tr>';
+        return '<tr><th>' + name + '</th><td>' + runs.lastResult().label() + '</td></tr>';
     }
 
     function buildLabelWithLinks(build, previousBuild) {
@@ -372,11 +426,16 @@ td, th {
         }
 
         var formattedRevisions = build.formattedRevisions(previousBuild);
-        var markup = ['Committed: ' + build.formattedTime(),
-            'Build: ' + linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + ' (' + build.formattedBuildTime() + ')'];
+        var buildInfo = {
+            'Commit': build.formattedTime(),
+            'Build': linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + '(' + build.formattedBuildTime() + ')'
+        };
         for (var repositoryName in formattedRevisions)
-            markup.push(linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url));
-        return markup.join('<br>');
+            buildInfo[repositoryName] = linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url);
+        var markup = '';
+        for (var key in buildInfo)
+            markup += '<tr><th>' + key + '</th><td>' + buildInfo[key] + '</td>';
+        return '<tr>' + markup + '</tr>';
     }
 
     function Chart(container, isDashboard, platform, metric, bugTrackers, onClose) {
@@ -384,9 +443,8 @@ td, th {
         if (metric.test.url)
             linkifiedFullName = '<a href="' + metric.test.url + '">' + linkifiedFullName + '</a>';
         var section = $('<section class="chart"><div class="pane"><header><h2>' + linkifiedFullName + '</h2>'
-            + '<h3 class="platform">' + platform.name + '</h3>'
-            + '<span class="status"></span></header>'
-            + '<table class="summaryTable"><tbody></tbody></table>'
+            + '<h3 class="platform">' + platform.name + '</h3></header>'
+            + '<div class="meta"><table class="status"><tbody></tbody></table><table class="summaryTable"><tbody></tbody></table></div>'
             + '<div class="overviewPlot"></div></div>'
             + '<div class="plot"></div>'
             + '<div class="unit"></div>'
@@ -459,10 +517,11 @@ td, th {
             summaryRows = createSummaryRowMarkup('Current', results) + summaryRows;
 
             var status = computeStatus(results.smallerIsBetter(), results.lastResult(), baseline, target);
+            if (status.text)
+                summaryRows = '<tr><td colspan="2">' + status.text + '</td></tr>' + summaryRows;
             section.addClass(status.class);
-            section.find('.status').html(status.text);
+            section.find('.status tbody').html(buildLabelWithLinks(results.lastResult().build()));
             section.find('.summaryTable tbody').html(summaryRows);
-            section.find('.unit').html(results.unit());
             if (results.smallerIsBetter()) {
                 section.find('.arrow .downwardArrowHead').show();
                 section.find('.arrow .upwardArrowHead').hide();
@@ -566,8 +625,9 @@ td, th {
                     + ' around ' + result.build().formattedTime();
                 var revisions = result.build().formattedRevisions(resultToCompare.build());
 
-                for (var trackerName in bugTrackers) {
-                    var repositories = bugTrackers[trackerName].repositories;
+                for (var trackerId in bugTrackers) {
+                    var tracker = bugTrackers[trackerId];
+                    var repositories = tracker.repositories;
                     var description = 'Platform: ' + result.build().platform().name + '\n\n';
                     for (var i = 0; i < repositories.length; ++i) {
                         var repositoryName = repositories[i];
@@ -580,18 +640,18 @@ td, th {
                             description += revision.label;
                         description += '\n';
                     }
-                    var url = bugTrackers[trackerName].newBugUrl
+                    var url = tracker.newBugUrl
                         .replace(/\$title/g, encodeURIComponent(title))
                         .replace(/\$description/g, encodeURIComponent(description))
                         .replace(/\$link/g, encodeURIComponent(location.href));
                     if (newBugUrls)
                         newBugUrls += ',';
-                    newBugUrls += ' <a href="' + url + '" target="_blank">' + trackerName + '</a>';
+                    newBugUrls += ' <a href="' + url + '" target="_blank">' + tracker.name + '</a>';
                 }
                 newBugUrls = 'File:' + newBugUrls;
             }
-            tooltip.show(x, y, result.label(resultToCompare) + '<br>'
-                + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '<br>'
+            tooltip.show(x, y, result.label(resultToCompare) + '<table>'
+                + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '</table>'
                 + newBugUrls);
         }
 
@@ -671,12 +731,16 @@ td, th {
             else
                 this.attachMainPlot(minTime);
 
-            var self = this;
+            if (bindPlotEventHandlers)
+                bindPlotEventHandlers(this);
+            bindPlotEventHandlers = null;
+        };
 
+        function bindPlotEventHandlers(chart) {
             // FIXME: Crosshair should stay where it was between charts.
             $(plotContainer).bind("plothover", function (event, pos, item) {
                 for (var i = 0; i < charts.length; i++) {
-                    if (charts[i] !== self) {
+                    if (charts[i] !== chart) {
                         charts[i].setCrosshair(pos);
                         charts[i].hideTooltip();
                     }
@@ -714,8 +778,8 @@ td, th {
                         toggleClickTooltip(tooltip.currentItem.dataIndex, tooltip.currentItem.pageX, tooltip.currentItem.pageY);
                 });
             }
-        };
-        
+        }
+
         charts.push(this);
     }
 
@@ -763,16 +827,20 @@ function fetchTest(repositories, builders, filename, platform, metric, callback)
             // We should create PerfTestResult on demand.
             return new PerfTestResult(runs, rawRun, new TestBuild(repositories, builders, platform, rawRun));
         });
-        sortedResults = results.sort(function (a, b) { return a.build().time() - b.build().time(); });
-        sortedResults.forEach(function (result) { runs.addResult(result); });
+        runs.setResults(results.sort(function (a, b) { return a.build().time() - b.build().time(); }));
         return runs;
     }
 
-    $.getJSON('api/runs/' + filename, function (data) {
+    $.getJSON('api/runs/' + filename + '?cache=true', function (response) {
+        var data = response.configurations;
         callback(createRunAndResults(data.current), createRunAndResults(data.baseline), createRunAndResults(data.target));
     });
 }
 
+function fileNameFromPlatformAndTest(platformId, testId) {
+    return platformId + '-' + testId + '.json';
+}
+
 function init() {
     var allPlatforms;
     var tests = [];
@@ -882,15 +950,33 @@ function init() {
             while (metricList.firstChild)
                 metricList.removeChild(metricList.firstChild);
 
-            addOption(metricList, 'All metrics', OPTION_VALUE_FOR_ALL);
+            var metricsGroup = document.createElement('optgroup');
+            metricsGroup.label = 'Metrics';
+            metricList.appendChild(metricsGroup);
+            addOption(metricsGroup, 'All metrics', OPTION_VALUE_FOR_ALL);
+            for (var i = 0; i < tests.length; ++i) {
+                if (tests[i].id == testList.value) {
+                    var selectedTest = tests[i];
+                    for (var j = 0; j < selectedTest.metrics.length; ++j) {
+                        var fullName = selectedTest.metrics[j].fullName;
+                        var relativeName = fullName.replace(selectedTest.fullName, '').replace(/^[:/]/, '');
+                        addOption(metricsGroup, relativeName, fullName);
+                    }
+                }
+            }
+            var subtestsGroup = document.createElement('optgroup');
+            subtestsGroup.label = 'Tests';
+            metricList.appendChild(subtestsGroup);
+            addOption(subtestsGroup, 'All subtests', OPTION_VALUE_FOR_ALL);
             for (var i = 0; i < tests.length; ++i) {
-                if (tests[i].id != testList.value && (!tests[i].parentTest || tests[i].parentTest.id != testList.value))
+                if (!tests[i].parentTest || tests[i].parentTest.id != testList.value)
                     continue;
-                var selectedTest = tests[i].id == testList.value ? tests[i] : tests[i].parentTest;
-                for (var j = 0; j < tests[i].metrics.length; ++j) {
-                    var fullName = tests[i].metrics[j].fullName;
+                var subtest = tests[i];
+                var selectedTest = subtest.parentTest;
+                for (var j = 0; j < subtest.metrics.length; ++j) {
+                    var fullName = subtest.metrics[j].fullName;
                     var relativeName = fullName.replace(selectedTest.fullName, '').replace(/^[:/]/, '');
-                    addOption(metricList, relativeName, fullName);
+                    addOption(subtestsGroup, relativeName, fullName);
                 }
             }
         }
@@ -946,13 +1032,14 @@ function init() {
                     newChartList.push([allPlatforms[i].name, metricList.value]);
                 }
             } else if (metricList.value === OPTION_VALUE_FOR_ALL) {
-                for (var i = 0; i < tests.length; ++i) {
-                    if (tests[i].id != testList.value && (!tests[i].parentTest || tests[i].parentTest.id != testList.value))
+                var group = metricList.selectedOptions[0].parentNode;
+                var metricsToAdd = [];
+                for (var i = 0; i < group.children.length; i++) {
+                    var metric = group.children[i].value;
+                    if (metric == OPTION_VALUE_FOR_ALL)
                         continue;
-                    for (var j = 0; j < tests[i].metrics.length; ++j) {
-                        createChartFromListPair(platformList.value, tests[i].metrics[j].fullName);
-                        newChartList.push([platformList.value, tests[i].metrics[j].fullName]);
-                    }
+                    createChartFromListPair(platformList.value, metric);
+                    newChartList.push([platformList.value, metric]);
                 }
             } else {
                 createChartFromListPair(platformList.value, metricList.value);
@@ -975,9 +1062,36 @@ function init() {
             // Ignore any exception thrown by parse.
         }
 
+        redirectChartsToV3(chartList);
+
         chartList.forEach(function (item) { createChartFromListPair(item[0], item[1]); });
     }
 
+    function redirectChartsToV3(chartList)
+    {
+        var v3URLParams = [];
+        var numberOfDays = URLState.get('days');
+        if (parseInt(numberOfDays) == numberOfDays)
+            v3URLParams.push('since=' + (+Date.now() - numberOfDays * 24 * 3600 * 1000));
+
+        var v3PaneList = [];
+        for (var item of chartList) {
+            var platform = nameToPlatform[item[0]];
+            var metric = fullNameToMetric[item[1]];
+            if (platform && metric)
+                v3PaneList.push(`(${platform.id}-${metric.id})`);
+        }
+        v3URLParams.push(`paneList=(${v3PaneList.join('-')})`);
+
+        try {
+            var zoomValues = JSON.parse(URLState.get('zoom', '[]'));
+            if (zoomValues.length == 2)
+                v3URLParams.push(`zoom=(${zoomValues[0]}-${zoomValues[1]})`);
+        } catch (error) { }
+
+        location.href = '/v3/#/charts?' + v3URLParams.join('&');
+    }
+
     // FIXME: We should use exponential slider for charts page where we expect to have
     // the full JSON as opposed to the dashboard where we can't afford loading really big JSON files.
     var exponential = true;
@@ -1142,6 +1256,9 @@ function init() {
         builders = manifest.builders;
         bugTrackers = manifest.bugTrackers;
 
+        document.title = manifest.siteTitle;
+        document.getElementById('siteTitle').textContent = manifest.siteTitle;
+
         setMode(URLState.get('mode', 'dashboard'));
     });
 }
@@ -1153,15 +1270,14 @@ window.addEventListener('DOMContentLoaded', init, false);
 <body>
 
 <header id="title">
-<h1><a href="/">WebKit Perf Monitor</a></h1>
+<h1><a id="siteTitle" href="/">Perf Monitor</a></h1>
 <ul>
+    <li id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></li>
     <li><a href="javascript:setMode('dashboard');">Dashboard</a></li>
     <li><a href="javascript:setMode('charts');">Charts</a></li>
 </ul>
 </header>
 
-<div id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></div>
-
 <div id="mainContents"></div>
 </body>
 </html>