Improve test freshness page interaction experience.
[WebKit.git] / Websites / perf.webkit.org / public / index.html
index 447d68a..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>
@@ -10,8 +16,7 @@
 <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">
 
@@ -188,19 +193,6 @@ 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;
@@ -530,7 +522,6 @@ td, th {
             section.addClass(status.class);
             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();
@@ -634,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];
@@ -648,13 +640,13 @@ 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;
             }
@@ -835,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 = [];
@@ -1066,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;
@@ -1233,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'));
     });
 }
@@ -1244,7 +1270,7 @@ 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>