4 <title>WebKit Perf Monitor</title>
5 <script src="js/jquery.js" defer></script>
6 <script src="js/jquery.flot.js" defer></script>
7 <script src="js/jquery.flot.crosshair.js" defer></script>
8 <script src="js/jquery.flot.fillbetween.js" defer></script>
9 <script src="js/jquery.flot.resize.js" defer></script>
10 <script src="js/jquery.flot.selection.js" defer></script>
11 <script src="js/jquery.flot.time.js" defer></script>
12 <script src="js/helper-classes.js" defer></script>
13 <script src="js/shared.js" defer></script>
14 <script src="js/statistics.js" defer></script>
15 <link rel="stylesheet" href="common.css">
16 <style type="text/css">
22 #numberOfDaysPicker input {
29 border-collapse: collapse;
32 #dashboard > tbody > tr > td {
34 padding-bottom: 1.5em;
37 #dashboard > thead th {
38 text-shadow: #bbb 1px 1px 2px;
45 border: solid 1px #ccc;
47 margin: 10px 10px 0px 0px;
68 vertical-align: middle;
75 .chart h2, .chart h3 {
80 word-break: break-all;
91 #dashboard .chart h3 {
95 #dashboard .chart .status {
105 margin: 5px 5px 10px 5px;
132 #dashboard .overviewPlot {
136 #charts .overviewPlot {
137 margin: 10px 0px 0px 0px;
142 .chart .summaryTable {
163 padding: 0 0.2em 0 0;
168 .chart .meta td:not(:first-child):before,
169 .tooltip td:not(:first-child):before {
173 #dashboard .chart .summaryTable {
226 .chart .yaxistoggler {
234 #dashboard .yaxistoggler {
261 border-color: #333 transparent transparent transparent;
265 text-decoration: underline;
279 display: inline-block;
281 border: solid 1px #ccc;
294 var sharedPlotOptions = {
295 lines: { show: true, lineWidth: 1 },
299 minTickSize: [1, 'day'],
300 max: Date.now(), // FIXME: This is likely broken for non-PST
302 yaxis: { tickLength: 0 },
303 series: { shadowSize: 0 },
304 points: { show: false },
309 backgroundColor: '#fff',
313 function computeYAxisBoundsToFitLines(minTime, results, baseline, target) {
314 var stdevOfAllRuns = results.sampleStandardDeviation(minTime);
315 var movingAverage = results.exponentialMovingArithmeticMean(minTime, /* alpha, the degree of weighting decrease */ 0.3);
316 var min = results.min(minTime);
317 var max = results.max(minTime);
320 min = Math.min(min, baseline.min(minTime));
321 max = Math.max(max, baseline.max(minTime));
324 min = Math.min(min, target.min(minTime));
325 max = Math.max(max, target.max(minTime));
328 var marginSize = (max - min) * 0.1;
329 return {min: min - marginSize, max: max + marginSize,
330 adjustedMin: Math.min(results.lastResult().mean() - marginSize, Math.max(movingAverage - stdevOfAllRuns * 2, min) - marginSize),
331 adjustedMax: Math.max(results.lastResult().mean() + marginSize, Math.min(movingAverage + stdevOfAllRuns * 2, max) + marginSize) };
334 function computeStatus(smallerIsBetter, lastResult, baseline, target) {
335 var relativeDifferenceWithBaseline = baseline ? lastResult.relativeDifference(baseline.lastResult()) : 0;
336 var relativeDifferenceWithTarget = target ? lastResult.relativeDifference(target.lastResult()) : 0;
340 if (relativeDifferenceWithBaseline && relativeDifferenceWithBaseline > 0 != smallerIsBetter) {
341 statusText = Math.abs(relativeDifferenceWithBaseline * 100).toFixed(2) + '% ' + (smallerIsBetter ? 'above' : 'below') + ' baseline';
343 } else if (relativeDifferenceWithTarget && relativeDifferenceWithTarget > 0 == smallerIsBetter) {
344 statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% ' + (smallerIsBetter ? 'below' : 'above') + ' target';
346 } else if (relativeDifferenceWithTarget)
347 statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% until target';
349 return {class: status, text: statusText};
352 function addPlotDataForRun(plotData, name, runs, color, interactive) {
353 var entry = {color: color, data: runs.meanPlotData()};
355 entry.clickable = false;
356 entry.hoverable = false;
358 if (runs.hasConfidenceInterval()) {
359 var lowerName = name.toLowerCase();
360 var confienceEntry = $.extend(true, {}, entry, {lines: {lineWidth: 0}, clickable: false, hoverable: false});
361 plotData.push($.extend(true, {}, confienceEntry, {id: lowerName, data: runs.upperConfidencePlotData()}));
362 plotData.push($.extend(true, {}, confienceEntry,
363 {fillBetween: lowerName, lines: {fill: 0.3}, data: runs.lowerConfidencePlotData()}));
365 plotData.push(entry);
368 function createSummaryRowMarkup(name, runs) {
369 return '<tr><th>' + name + '</th><td>' + runs.lastResult().label() + '</td></tr>';
372 function buildLabelWithLinks(build, previousBuild) {
373 function linkifyIfNotNull(label, url) {
374 return url ? '<a href="' + url + '" target="_blank">' + label + '</a>' : label;
377 var formattedRevisions = build.formattedRevisions(previousBuild);
379 'Commit': build.formattedTime(),
380 'Build': linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + '(' + build.formattedBuildTime() + ')'
382 for (var repositoryName in formattedRevisions)
383 buildInfo[repositoryName] = linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url);
385 for (var key in buildInfo)
386 markup += '<tr><th>' + key + '</th><td>' + buildInfo[key] + '</td>';
387 return '<tr>' + markup + '</tr>';
390 function Chart(container, isDashboard, platform, metric, bugTrackers, onClose) {
391 var linkifiedFullName = metric.fullName;
393 linkifiedFullName = '<a href="' + metric.test.url + '">' + linkifiedFullName + '</a>';
394 var section = $('<section class="chart"><div class="pane"><header><h2>' + linkifiedFullName + '</h2>'
395 + '<h3 class="platform">' + platform.name + '</h3></header>'
396 + '<div class="meta"><table class="status"><tbody></tbody></table><table class="summaryTable"><tbody></tbody></table></div>'
397 + '<div class="overviewPlot"></div></div>'
398 + '<div class="plot"></div>'
399 + '<div class="unit"></div>'
400 + '<svg viewBox="0 0 20 100" class="arrow">'
401 + '<g stroke-width="10"><line x1="10" y1="8" x2="10" y2="92" />'
402 + '<polygon points="5,85 15,85 10,90" class="downwardArrowHead" />'
403 + '<polygon points="5,15 15,15 10,10" class="upwardArrowHead" />'
405 + '<a href="#" class="toggleYAxis"><svg viewBox="0 0 40 100" class="yaxistoggler"><g stroke-width="10">'
406 + '<line x1="20" y1="8" x2="20" y2="82" />'
407 + '<polygon points="15,15 25,15 20,10" />'
408 + '<polygon points="15,75 25,75 20,80" />'
409 + '<line x1="0" y1="92" x2="40" y2="92" />'
411 + '<a href="#" class="closeButton"><svg viewBox="0 0 100 100">'
412 + '<g stroke-width="10"><circle cx="50" cy="50" r="45" fill="transparent"/><polygon points="30,30 70,70" />'
413 + '<polygon points="30,70 70,30" /></g></svg></a></section>');
415 $(container).append(section);
419 section.find('.closeButton').bind('click', function (event) {
420 event.preventDefault();
422 charts.splice(charts.indexOf(self), 1);
427 section.find('.closeButton').hide();
429 section.find('.yaxistoggler').bind('click', function (event) {
431 event.preventDefault();
440 var tooltip = new Tooltip(container, 'tooltip hoverTooltip');
442 var plotContainer = section.find('.plot');
445 var clickTooltips = [];
446 var shouldShowEntireYAxis = false;
448 this.platform = function () { return platform; }
449 this.metric = function () { return metric; }
451 this.populate = function (passedResults, passedBaseline, passedTarget) {
452 results = passedResults;
453 baseline = passedBaseline;
454 target = passedTarget;
456 var summaryRows = '';
458 addPlotDataForRun(plotData, 'Target', target, '#039');
459 summaryRows = createSummaryRowMarkup('Target', target) + summaryRows;
462 addPlotDataForRun(plotData, 'Baseline', baseline, '#930');
463 summaryRows = createSummaryRowMarkup('Baseline', baseline) + summaryRows;
465 addPlotDataForRun(plotData, 'Current', results, '#666', true);
466 summaryRows = createSummaryRowMarkup('Current', results) + summaryRows;
468 var status = computeStatus(results.smallerIsBetter(), results.lastResult(), baseline, target);
470 summaryRows = '<tr><td colspan="2">' + status.text + '</td></tr>' + summaryRows;
471 section.addClass(status.class);
472 section.find('.status tbody').html(buildLabelWithLinks(results.lastResult().build()));
473 section.find('.summaryTable tbody').html(summaryRows);
474 section.find('.unit').html(results.unit());
475 if (results.smallerIsBetter()) {
476 section.find('.arrow .downwardArrowHead').show();
477 section.find('.arrow .upwardArrowHead').hide();
479 section.find('.arrow .downwardArrowHead').hide();
480 section.find('.arrow .upwardArrowHead').show();
484 this.attachMainPlot = function (xMin, xMax) {
488 var mainPlotOptions = $.extend(true, {}, sharedPlotOptions, {
494 min: shouldShowEntireYAxis ? 0 : bounds.adjustedMin,
495 max: shouldShowEntireYAxis ? bounds.max : bounds.adjustedMax,
497 crosshair: {'mode': 'x', color: '#c90', lineWidth: 1},
498 grid: {clickable: true},
501 mainPlotOptions.xaxis.max = xMax;
503 mainPlotOptions.yaxis.labelWidth = 20;
504 mainPlotOptions.yaxis.ticks = [mainPlotOptions.yaxis.min, mainPlotOptions.yaxis.max];
505 mainPlotOptions.grid.autoHighlight = false;
507 mainPlotOptions.yaxis.labelWidth = 30;
508 mainPlotOptions.selection = {mode: "x"};
509 plotData[plotData.length - 1].points = {show: true, radius: 1};
511 mainPlot = $.plot(plotContainer, plotData, mainPlotOptions);
512 plotData[plotData.length - 1].points = {};
514 for (var i = 0; i < clickTooltips.length; i++) {
515 if (clickTooltips[i])
516 clickTooltips[i].remove();
521 this.toggleYAxis = function () {
522 shouldShowEntireYAxis = !shouldShowEntireYAxis;
524 this.attachMainPlot(currentZoom.from, currentZoom.to);
526 this.attachMainPlot(minTime);
529 this.zoom = function (from, to) {
530 this.attachMainPlot(from, to);
532 overviewPlot.setSelection({xaxis: {from: from, to: to}}, true);
535 this.clearZoom = function () {
536 this.attachMainPlot(minTime);
538 overviewPlot.clearSelection();
541 this.setCrosshair = function (pos) {
543 mainPlot.setCrosshair(pos);
546 this.clearCrosshair = function () {
548 mainPlot.clearCrosshair();
551 this.hideTooltip = function() {
556 function toggleClickTooltip(index, pageX, pageY) {
557 if (clickTooltips[index])
558 clickTooltips[index].toggle();
560 // FIXME: Put this on URLState.
561 var newTooltip = new Tooltip(container, 'tooltip clickTooltip');
562 showTooltipWithResults(newTooltip, pageX, pageY, results.resultAt(index), results.resultAt(index - 1));
563 newTooltip.bindClick(function () { toggleClickTooltip(index, pageX, pageY); });
564 newTooltip.bindMouseEnter(function () { tooltip.hide(); });
565 clickTooltips[index] = newTooltip;
570 function showTooltipWithResults(tooltip, x, y, result, resultToCompare) {
572 if (resultToCompare) {
573 var title = (resultToCompare.isBetterThan(result) ? 'REGRESSION: ' : '') + result.metric().fullName
574 + ' got ' + result.formattedProgressionOrRegression(resultToCompare)
575 + ' around ' + result.build().formattedTime();
576 var revisions = result.build().formattedRevisions(resultToCompare.build());
578 for (var trackerName in bugTrackers) {
579 var repositories = bugTrackers[trackerName].repositories;
580 var description = 'Platform: ' + result.build().platform().name + '\n\n';
581 for (var i = 0; i < repositories.length; ++i) {
582 var repositoryName = repositories[i];
583 var revision = revisions[repositoryName];
587 description += repositoryName + ': ' + revision.url;
589 description += revision.label;
592 var url = bugTrackers[trackerName].newBugUrl
593 .replace(/\$title/g, encodeURIComponent(title))
594 .replace(/\$description/g, encodeURIComponent(description))
595 .replace(/\$link/g, encodeURIComponent(location.href));
598 newBugUrls += ' <a href="' + url + '" target="_blank">' + trackerName + '</a>';
600 newBugUrls = 'File:' + newBugUrls;
602 tooltip.show(x, y, result.label(resultToCompare) + '<table>'
603 + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '</table>'
607 tooltip.bindClick(function () {
608 if (tooltip.currentItem)
609 toggleClickTooltip(tooltip.currentItem.dataIndex, tooltip.currentItem.pageX, tooltip.currentItem.pageY);
612 function closestItemForPageXRespectingPlotOffset(item, plot, series, pageX) {
613 if (!series || !series.data.length)
616 var offset = $(plotContainer).offset();
617 var points = series.datapoints.points;
618 var size = series.datapoints.pointsize;
619 var xInPlot = pageX - offset.left;
621 if (xInPlot < plot.getPlotOffset().left)
629 var currentPoint = plot.pointOffset({x: points[index * size], y: points[index * size + 1]});
630 if (xInPlot < currentPoint.left) {
631 if (previousPoint && xInPlot < (previousPoint.left + currentPoint.left) / 2) {
633 currentPoint = previousPoint;
637 if (index + 1 >= series.data.length)
639 previousPoint = currentPoint;
643 // Ideally we want to return a real item object but flot doesn't provide an API to obtain one
644 // so create an object that contain properties we use.
645 return {dataIndex: index, pageX: offset.left + currentPoint.left, pageY: offset.top + currentPoint.top};
648 // Return a plot generator. This function is called when we change the number of days to show.
649 this.attach = function () {
653 bounds = computeYAxisBoundsToFitLines(minTime, results, baseline, target);
655 var overviewContainer = section.find('.overviewPlot');
657 overviewPlot = $.plot(overviewContainer, plotData,
658 $.extend(true, {}, sharedPlotOptions, {
661 // The maximum number of ticks we can fit on the overflow plot is 4.
662 tickSize: [(TestBuild.now() - minTime) / 4 / 1000, 'second']
664 grid: { hoverable: false, clickable: false },
665 selection: { mode: "x" },
673 $(plotContainer).bind("plotselected", function (event, ranges) { Chart.zoom(ranges.xaxis.from, ranges.xaxis.to); });
674 $(overviewContainer).bind("plotselected", function (event, ranges) { Chart.zoom(ranges.xaxis.from, ranges.xaxis.to); });
675 $(overviewContainer).bind("plotunselected", function () { Chart.clearZoom(minTime) });
679 this.zoom(currentZoom.from, currentZoom.to);
681 this.attachMainPlot(minTime);
685 // FIXME: Crosshair should stay where it was between charts.
686 $(plotContainer).bind("plothover", function (event, pos, item) {
687 for (var i = 0; i < charts.length; i++) {
688 if (charts[i] !== self) {
689 charts[i].setCrosshair(pos);
690 charts[i].hideTooltip();
695 var data = mainPlot.getData();
696 item = closestItemForPageXRespectingPlotOffset(item, mainPlot, data[data.length - 1], pos.pageX);
700 showTooltipWithResults(tooltip, item.pageX, item.pageY, results.resultAt(item.dataIndex), results.resultAt(item.dataIndex - 1));
701 tooltip.currentItem = item;
704 $(plotContainer).bind("mouseleave", function (event) {
705 var offset = $(plotContainer).offset();
706 if (offset.left <= event.pageX && offset.top <= event.pageY && event.pageX <= offset.left + $(plotContainer).outerWidth()
707 && event.pageY <= offset.top + $(plotContainer).outerHeight())
709 for (var i = 0; i < charts.length; i++) {
710 charts[i].clearCrosshair();
711 charts[i].hideTooltip();
716 if (isDashboard) { // FIXME: This code doesn't belong here.
717 $(plotContainer).bind('click', function (event) {
718 openChart(results.platform(), results.metric());
721 $(plotContainer).bind("plotclick", function (event, pos, item) {
722 if (tooltip.currentItem)
723 toggleClickTooltip(tooltip.currentItem.dataIndex, tooltip.currentItem.pageX, tooltip.currentItem.pageY);
731 Chart.clear = function () {
735 Chart.setMinTime = function (newMinTime) {
736 minTime = newMinTime;
737 for (var i = 0; i < charts.length; i++)
741 Chart.onzoomchange = function (from, to) { };
743 Chart.zoom = function (from, to) {
744 currentZoom = {from: from, to: to};
745 for (var i = 0; i < charts.length; i++)
746 charts[i].zoom(from, to);
747 this.onzoomchange(from, to);
750 Chart.clearZoom = function (minTime) {
751 currentZoom = undefined;
752 for (var i = 0; i < charts.length; i++)
753 charts[i].clearZoom();
757 window.Chart = Chart;
760 // FIXME: We need to devise a way to fetch runs in multiple chunks so that
761 // we don't have to fetch the entire time series to just show the last 3 days.
762 // FIXME: We should do a mass-fetch where we fetch JSONs for multiple runs at once.
763 function fetchTest(repositories, builders, filename, platform, metric, callback) {
765 function createRunAndResults(rawRuns) {
769 var runs = new PerfTestRuns(metric, platform);
770 var results = rawRuns.map(function (rawRun) {
771 // FIXME: Creating PerfTestResult and keeping them alive in memory all the time seems like a terrible idea.
772 // We should create PerfTestResult on demand.
773 return new PerfTestResult(runs, rawRun, new TestBuild(repositories, builders, platform, rawRun));
775 sortedResults = results.sort(function (a, b) { return a.build().time() - b.build().time(); });
776 sortedResults.forEach(function (result) { runs.addResult(result); });
780 $.getJSON('api/runs/' + filename, function (data) {
781 callback(createRunAndResults(data.current), createRunAndResults(data.baseline), createRunAndResults(data.target));
788 var fullNameToMetric;
789 var dashboardPlatforms;
790 var runsCache = {}; // FIXME: We need to clear this cache at some point.
795 // FIXME: Show some error message when we get 404.
796 function getOrFetchTest(platform, metric, callback) {
797 var filename = fileNameFromPlatformAndTest(platform.id, metric.id);
798 var caches = runsCache[filename];
801 setTimeout(function () { callback(caches.current, caches.baseline, caches.target); }, 0);
803 fetchTest(repositories, builders, filename, platform, metric, function (current, baseline, target) {
804 runsCache[filename] = {current:current, baseline:baseline, target:target};
805 callback(current, baseline, target);
810 function showDashboard() {
811 var dashboardTable = $('<table id="dashboard"></table>');
812 $('#mainContents').html(dashboardTable);
814 // Split dashboard platforms into groups of three so that it doesn't grow horizontally too much.
815 // FIXME: Make this adaptive.
816 for (var i = 0; i < Math.ceil(dashboardPlatforms.length / 3); i++)
817 addPlatformsToDashboard(dashboardTable, dashboardPlatforms.slice(i * 3, (i + 1) * 3));
819 URLState.remove('chartList');
822 function addPlatformsToDashboard(dashboardTable, selectedPlatforms) {
823 var header = document.createElement('thead');
824 selectedPlatforms.forEach(function (platform) {
825 var cell = document.createElement('th');
826 $(cell).text(platform.name);
827 header.appendChild(cell);
829 dashboardTable.append(header);
831 var tbody = $(document.createElement('tbody'));
832 dashboardTable.append(tbody);
833 var row = document.createElement('tr');
836 selectedPlatforms.forEach(function (platform) {
837 var cell = document.createElement('td');
838 row.appendChild(cell);
840 platform.metrics.forEach(function (metric) {
841 var chart = new Chart(cell, true, platform, metric, bugTrackers);
842 getOrFetchTest(platform, metric, function (results, baseline, target) {
843 // FIXME: We shouldn't rely on the order in which XHR finishes to order plots.
844 if (dashboardTable.parent().length) {
845 chart.populate(results, baseline, target);
853 function showCharts(lists) {
854 var chartsContainer = document.createElement('section');
855 chartsContainer.id = 'charts';
856 $('#mainContents').html(chartsContainer);
858 var testPicker = document.createElement('section');
859 testPicker.id = 'testPicker';
861 function addOption(select, label, value) {
862 var option = document.createElement('option');
863 option.appendChild(document.createTextNode(label));
865 option.value = value;
866 select.appendChild(option);
869 var testList = document.createElement('select');
870 testList.id = 'testList';
871 testPicker.appendChild(testList);
872 for (var i = 0; i < tests.length; ++i) {
873 if (tests[i].parentTest)
875 addOption(testList, tests[i].fullName, tests[i].id);
878 var metricList = document.createElement('select');
879 metricList.id = 'metricList';
880 testPicker.appendChild(metricList);
882 var platformList = document.createElement('select');
883 platformList.id = 'platformList';
884 testPicker.appendChild(platformList);
885 const OPTION_VALUE_FOR_ALL = '-';
886 addOption(platformList, 'All platforms', OPTION_VALUE_FOR_ALL);
887 for (var i = 0; i < allPlatforms.length; ++i)
888 addOption(platformList, allPlatforms[i].name);
890 testList.onchange = function () {
891 while (metricList.firstChild)
892 metricList.removeChild(metricList.firstChild);
894 addOption(metricList, 'All metrics', OPTION_VALUE_FOR_ALL);
895 for (var i = 0; i < tests.length; ++i) {
896 if (tests[i].id != testList.value && (!tests[i].parentTest || tests[i].parentTest.id != testList.value))
898 var selectedTest = tests[i].id == testList.value ? tests[i] : tests[i].parentTest;
899 for (var j = 0; j < tests[i].metrics.length; ++j) {
900 var fullName = tests[i].metrics[j].fullName;
901 var relativeName = fullName.replace(selectedTest.fullName, '').replace(/^[:/]/, '');
902 addOption(metricList, relativeName, fullName);
906 metricList.onchange = function () {
907 var metric = fullNameToMetric[metricList.value];
908 var shouldAddAllMetrics = metricList.value === OPTION_VALUE_FOR_ALL;
909 for (var i = 0; i < platformList.options.length; ++i) {
910 var option = platformList.options[i];
911 if (option.value === OPTION_VALUE_FOR_ALL) // Adding all metrics for all platforms will be too slow.
912 option.disabled = shouldAddAllMetrics;
914 var platform = nameToPlatform[option.value];
915 var platformHasMetric = platform.metrics.indexOf(metric) >= 0;
916 option.disabled = !shouldAddAllMetrics && !platformHasMetric;
921 metricList.onchange();
923 $(testPicker).append(' <a href="">Add Chart</a>');
925 function removeChart(chart) {
926 for (var i = 0; i < chartList.length; i++) {
927 if (chartList[i][0] == chart.platform().name && chartList[i][1] == chart.metric().fullName) {
928 chartList.splice(i, 1);
932 URLState.set('chartList', JSON.stringify(chartList));
935 function createChartFromListPair(platformName, metricFullName) {
936 var platform = nameToPlatform[platformName];
937 var metric = fullNameToMetric[metricFullName]
938 var chart = new Chart(chartsContainer, false, platform, metric, bugTrackers, removeChart);
940 getOrFetchTest(platform, metric, function (results, baseline, target) {
941 if (!chartsContainer.parentNode)
943 chart.populate(results, baseline, target);
948 $(testPicker).children('a').bind('click', function (event) {
949 event.preventDefault();
951 var newChartList = [];
952 if (platformList.value === OPTION_VALUE_FOR_ALL) {
953 for (var i = 0; i < allPlatforms.length; ++i) {
954 createChartFromListPair(allPlatforms[i].name, metricList.value);
955 newChartList.push([allPlatforms[i].name, metricList.value]);
957 } else if (metricList.value === OPTION_VALUE_FOR_ALL) {
958 for (var i = 0; i < tests.length; ++i) {
959 if (tests[i].id != testList.value && (!tests[i].parentTest || tests[i].parentTest.id != testList.value))
961 for (var j = 0; j < tests[i].metrics.length; ++j) {
962 createChartFromListPair(platformList.value, tests[i].metrics[j].fullName);
963 newChartList.push([platformList.value, tests[i].metrics[j].fullName]);
967 createChartFromListPair(platformList.value, metricList.value);
968 newChartList.push([platformList.value, metricList.value]);
971 chartList = chartList.concat(newChartList);
972 URLState.set('chartList', JSON.stringify(chartList));
977 $('#mainContents').append(testPicker);
981 chartList = JSON.parse(URLState.get('chartList', ''));
982 // FIXME: Should we verify that platform and test names are valid here?
983 } catch (exception) {
984 // Ignore any exception thrown by parse.
987 chartList.forEach(function (item) { createChartFromListPair(item[0], item[1]); });
990 // FIXME: We should use exponential slider for charts page where we expect to have
991 // the full JSON as opposed to the dashboard where we can't afford loading really big JSON files.
992 var exponential = true;
994 var input = $('#numberOfDays')[0];
996 function updateSpanAndCall(newNumberOfDays) {
997 $('#numberOfDays').next().text(newNumberOfDays + ' days');
998 // FIXME: This is likely broken for non-PST.
999 Chart.setMinTime(Date.now() - newNumberOfDays * 24 * 3600 * 1000);
1001 $('#numberOfDays').bind('change', function () {
1002 var newNumberOfDays = Math.round(exponential ? Math.exp(input.value) : input.value);
1003 URLState.remove('zoom');
1005 URLState.set('days', newNumberOfDays);
1006 updateSpanAndCall(newNumberOfDays);
1008 function onchange() {
1009 var newNumberOfDays = URLState.get('days', Math.round(exponential ? Math.exp(input.defaultValue) : input.defaultValue));
1010 $('#numberOfDays').val(exponential ? Math.log(newNumberOfDays) : newNumberOfDays);
1011 updateSpanAndCall(newNumberOfDays);
1013 URLState.watch('days', onchange);
1017 URLState.watch('mode', function () { setMode(URLState.get('mode')); });
1018 URLState.watch('chartList', function (changedStates) {
1019 var modeChanged = changedStates.indexOf('mode') >= 0;
1020 if (URLState.get('mode') == 'charts' && !modeChanged)
1024 function zoomChartsIfParsedCorrectly() {
1026 zoomValues = JSON.parse(URLState.get('zoom', '[]'));
1027 if (zoomValues.length != 2)
1029 Chart.zoom(parseFloat(zoomValues[0]), parseFloat(zoomValues[1]));
1030 } catch (exception) {
1031 // Ignore all exceptions thrown by JSON.parse.
1036 URLState.watch('zoom', function (changedStates) {
1037 var modeChanged = changedStates.indexOf('mode') >= 0;
1038 if (URLState.get('mode') == 'charts' && !modeChanged) {
1039 if (!zoomChartsIfParsedCorrectly())
1040 return Chart.clearZoom();
1044 Chart.onzoomchange = function (from, to) {
1046 URLState.set('zoom', JSON.stringify([from, to]));
1048 URLState.remove('zoom');
1051 window.openChart = function (platform, metric) {
1052 URLState.set('chartList', JSON.stringify([[platform.name, metric.fullName]]));
1056 window.setMode = function (newMode) {
1057 URLState.set('mode', newMode);
1060 if (newMode == 'dashboard') {
1061 URLState.remove('zoom');
1064 } else { // FIXME: Dynamically obtain the list of tests to show.
1066 zoomChartsIfParsedCorrectly();
1070 function fullName(test) {
1073 names.push(test.name);
1074 test = test.parentTest;
1077 return names.join('/');
1080 // Perhaps we want an ordered list of platforms.
1081 $.getJSON('data/manifest.json', function (data) {
1082 var manifest = data;
1085 for (var testId in manifest.tests) {
1086 var test = manifest.tests[testId];
1087 test.parentTest = manifest.tests[manifest.tests[testId].parentId];
1092 tests.forEach(function (test) {
1093 test.fullName = fullName(test);
1094 nameToTest[test.fullName] = test;
1096 tests.sort(function (a, b) {
1097 if (a.fullName < b.fullName)
1099 if (a.fullName > b.fullName)
1104 fullNameToMetric = {};
1105 for (var metricId in manifest.metrics) {
1106 var entry = manifest.metrics[metricId];
1107 entry.id = metricId;
1108 entry.test = manifest.tests[entry.test];
1109 entry.fullName = entry.test.fullName + ':' + entry.name;
1110 if (entry.aggregator)
1111 entry.fullName += ':' + entry.aggregator;
1112 entry.test.metrics.push(entry);
1113 fullNameToMetric[entry.fullName] = entry;
1116 tests.forEach(function (test) {
1117 test.metrics.sort(function (a, b) {
1118 if (a.name < b.name)
1120 if (a.name > b.name)
1127 nameToPlatform = {};
1128 for (var platformId in manifest.all) {
1129 var platform = manifest.all[platformId];
1130 platform.id = platformId;
1131 allPlatforms.push(platform);
1132 nameToPlatform[platform.name] = platform;
1133 // FIXME: Sort tests
1134 for (var i = 0; i < platform.metrics.length; ++i)
1135 platform.metrics[i] = manifest.metrics[platform.metrics[i]];
1137 allPlatforms.sort(function (a, b) { return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); });
1139 dashboardPlatforms = [];
1140 for (var platformId in manifest.dashboard) {
1141 var platform = manifest.dashboard[platformId];
1142 platform.id = platformId;
1143 for (var i = 0; i < platform.metrics.length; ++i)
1144 platform.metrics[i] = manifest.metrics[platform.metrics[i]];
1145 platform.metrics.sort(function (a, b) { return a.fullName < b.fullName ? -1 : (a.fullName > b.fullName ? 1 : 0); });
1146 dashboardPlatforms.push(manifest.dashboard[platformId]);
1148 dashboardPlatforms.sort(function (a, b) { return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0); });
1150 repositories = manifest.repositories;
1151 builders = manifest.builders;
1152 bugTrackers = manifest.bugTrackers;
1154 setMode(URLState.get('mode', 'dashboard'));
1158 window.addEventListener('DOMContentLoaded', init, false);
1165 <h1><a href="/">WebKit Perf Monitor</a></h1>
1167 <li id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></li>
1168 <li><a href="javascript:setMode('dashboard');">Dashboard</a></li>
1169 <li><a href="javascript:setMode('charts');">Charts</a></li>
1173 <div id="mainContents"></div>