src/third_party/WebKit/Tools/TestResultServer/static-dashboards/ui.js

   1 // Copyright (C) 2013 Google Inc. All rights reserved.
   2 //
   3 // Redistribution and use in source and binary forms, with or without
   4 // modification, are permitted provided that the following conditions are
   5 // met:
   6 //
   7 //         * Redistributions of source code must retain the above copyright
   8 // notice, this list of conditions and the following disclaimer.
   9 //         * Redistributions in binary form must reproduce the above
  10 // copyright notice, this list of conditions and the following disclaimer
  11 // in the documentation and/or other materials provided with the
  12 // distribution.
  13 //         * Neither the name of Google Inc. nor the names of its
  14 // contributors may be used to endorse or promote products derived from
  15 // this software without specific prior written permission.
  16 //
  17 // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  18 // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  19 // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  20 // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  21 // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  22 // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  23 // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  24 // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  25 // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26 // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  27 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28
  29 var ui = ui || {};
  30
  31 (function() {
  32
  33 ui.popup = {};
  34
  35 ui.popup.hide = function()
  36 {
  37     var popup = $('popup');
  38     if (popup) {
  39         popup.parentNode.removeChild(popup);
  40         document.removeEventListener('mousedown', ui.popup._handleMouseDown, false);
  41     }
  42 }
  43
  44 ui.popup.show = function(target, html)
  45 {
  46     var popup = $('popup');
  47     if (!popup) {
  48         popup = document.createElement('div');
  49         popup.id = 'popup';
  50         document.body.appendChild(popup);
  51         document.addEventListener('mousedown', ui.popup._handleMouseDown, false);
  52     }
  53
  54     // Set html first so that we can get accurate size metrics on the popup.
  55     popup.innerHTML = html;
  56
  57     var targetRect = target.getBoundingClientRect();
  58
  59     var x = Math.min(targetRect.left - 10, document.documentElement.clientWidth - popup.offsetWidth);
  60     x = Math.max(0, x);
  61     popup.style.left = x + window.pageXOffset + 'px';
  62
  63     var y = targetRect.top + targetRect.height;
  64     if (y + popup.offsetHeight > document.documentElement.clientHeight)
  65         y = targetRect.top - popup.offsetHeight;
  66     y = Math.max(0, y);
  67     popup.style.top = y + window.pageYOffset + 'px';
  68 }
  69
  70 ui.popup._handleMouseDown = function(e) {
  71     // Clear the open popup, unless the click was inside the popup.
  72     var popup = $('popup');
  73     if (popup && e.target != popup && !(popup.compareDocumentPosition(e.target) & 16))
  74         ui.popup.hide();
  75 }
  76
  77 ui.html = {};
  78
  79 ui.html.checkbox = function(queryParameter, label, isChecked, opt_extraJavaScript)
  80 {
  81     var js = opt_extraJavaScript || '';
  82     return '<label style="padding-left: 2em">' +
  83         '<input type="checkbox" onchange="g_history.toggleQueryParameter(\'' + queryParameter + '\');' + js + '" ' +
  84             (isChecked ? 'checked' : '') + '>' + label +
  85         '</label>';
  86 }
  87
  88 ui.html.range = function(queryParameter, label, min, max, initialValue)
  89 {
  90     return '<label>' +
  91         label +
  92         '<input type=range onchange="g_history.setQueryParameter(\'' + queryParameter + '\', this.value)" min=' + min + ' max=' + max + ' value=' + initialValue + '>' +
  93     '</label>';
  94 }
  95
  96 ui.html.select = function(label, queryParameter, options)
  97 {
  98     var html = '<label style="padding-left: 2em">' + label + ': ' +
  99         '<select onchange="g_history.setQueryParameter(\'' + queryParameter + '\', this[this.selectedIndex].value)">';
 100
 101     for (var i = 0; i < options.length; i++) {
 102         var value = options[i];
 103         html += '<option value="' + value + '" ' +
 104             (g_history.queryParameterValue(queryParameter) == value ? 'selected' : '') +
 105             '>' + value + '</option>'
 106     }
 107     html += '</select></label> ';
 108     return html;
 109 }
 110
 111 ui.html.navbar = function(opt_extraHtml)
 112 {
 113     var html = '<div style="border-bottom:1px dashed">';
 114     html = ui.html._dashboardLink('Overview', 'overview.html') +
 115         ui.html._dashboardLink('Results', 'flakiness_dashboard.html') +
 116         ui.html._dashboardLink('Times', 'treemap.html') +
 117         ui.html._dashboardLink('Stats', 'aggregate_results.html') +
 118         ui.html._dashboardLink('Stats Timeline', 'timeline_explorer.html');
 119
 120     if (opt_extraHtml)
 121         html += opt_extraHtml;
 122
 123     if (!history.isTreeMap())
 124         html += ui.html.checkbox('showAllRuns', 'Use all recorded runs', g_history.crossDashboardState.showAllRuns);
 125
 126     return html + '</div>';
 127 }
 128
 129 // Returns the HTML for the select element to switch to different testTypes.
 130 ui.html.testTypeSwitcher = function(opt_noBuilderMenu, opt_extraHtml, opt_includeNoneBuilder)
 131 {
 132     var html = ui.html.select('Test type', 'testType', builders.testTypes);
 133     if (!opt_noBuilderMenu) {
 134         var buildersForMenu = Object.keys(currentBuilders());
 135         if (opt_includeNoneBuilder)
 136             buildersForMenu.unshift('--------------');
 137         html += ui.html.select('Builder', 'builder', buildersForMenu);
 138     }
 139
 140     html += ui.html.select('Group', 'group', builders.groupNamesForTestType(g_history.crossDashboardState.testType));
 141
 142     if (opt_extraHtml)
 143         html += opt_extraHtml;
 144     return ui.html.navbar(html);
 145 }
 146
 147 ui.html._loadDashboard = function(fileName)
 148 {
 149     var pathName = window.location.pathname;
 150     pathName = pathName.substring(0, pathName.lastIndexOf('/') + 1);
 151     window.location = pathName + fileName + window.location.hash;
 152 }
 153
 154 ui.html._topLink = function(html, onClick, isSelected)
 155 {
 156     var cssText = isSelected ? 'font-weight: bold;' : 'color:blue;text-decoration:underline;cursor:pointer;';
 157     cssText += 'margin: 0 5px;';
 158     return '<span style="' + cssText + '" onclick="' + onClick + '">' + html + '</span>';
 159 }
 160
 161 ui.html._dashboardLink = function(html, fileName)
 162 {
 163     var pathName = window.location.pathname;
 164     var currentFileName = pathName.substring(pathName.lastIndexOf('/') + 1);
 165     var isSelected = currentFileName == fileName;
 166     var onClick = 'ui.html._loadDashboard(\'' + fileName + '\')';
 167     return ui.html._topLink(html, onClick, isSelected);
 168 }
 169
 170 ui.html._revisionLink = function(resultsKey, testResults, index)
 171 {
 172     var currentRevision = parseInt(testResults[resultsKey][index], 10);
 173     var previousRevision = parseInt(testResults[resultsKey][index + 1], 10);
 174
 175     var isChrome = resultsKey == results.CHROME_REVISIONS;
 176     var singleUrl = 'http://src.chromium.org/viewvc/' + (isChrome ? 'chrome' : 'blink') + '?view=rev&revision=' + currentRevision;
 177
 178     if (currentRevision == previousRevision)
 179         return 'At <a href="' + singleUrl + '">r' + currentRevision    + '</a>';
 180
 181     if (currentRevision - previousRevision == 1)
 182         return '<a href="' + singleUrl + '">r' + currentRevision    + '</a>';
 183
 184     var rangeUrl = 'http://build.chromium.org/f/chromium/perf/dashboard/ui/changelog' +
 185         (isChrome ? '' : '_blink') + '.html?url=/trunk' + (isChrome ? '/src' : '') +
 186         '&range=' + (previousRevision + 1) + ':' + currentRevision + '&mode=html';
 187     return '<a href="' + rangeUrl + '">r' + (previousRevision + 1) + ' to r' + currentRevision + '</a>';
 188 }
 189
 190 ui.html.chromiumRevisionLink = function(testResults, index)
 191 {
 192     return ui.html._revisionLink(results.CHROME_REVISIONS, testResults, index);
 193 }
 194
 195 ui.html.blinkRevisionLink = function(testResults, index)
 196 {
 197     return ui.html._revisionLink(results.BLINK_REVISIONS, testResults, index);
 198 }
 199
 200
 201 ui.Errors = function() {
 202     this._messages = '';
 203     // Element to display the errors within.
 204     this._containerElement = null;
 205 }
 206
 207 ui.Errors.prototype = {
 208     show: function()
 209     {
 210         if (!this._containerElement) {
 211             this._containerElement = document.createElement('H2');
 212             this._containerElement.style.color = 'red';
 213             this._containerElement.id = 'errors';
 214             document.documentElement.insertBefore(this._containerElement, document.body);
 215         }
 216
 217         this._containerElement.innerHTML = this._messages;
 218     },
 219     // Record a new error message.
 220     addError: function(message)
 221     {
 222         this._messages += message + '<br>';
 223     },
 224     hasErrors: function()
 225     {
 226         return !!this._messages;
 227     }
 228 }
 229
 230 })();