| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 | |
| 3 <!-- | |
| 4 Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
| 5 Use of this source code is governed by a BSD-style license that can be | |
| 6 found in the LICENSE file. | |
| 7 --> | |
| 8 | |
| 9 <!-- | |
| 10 Display all graphs for machines specified in chrome_config.js. | |
| 11 --> | |
| 12 | |
| 13 <head> | |
| 14 <title>Chrome Perf Overview</title> | |
| 15 <style type="text/css"> | |
| 16 a { | |
| 17 color: #004277; | |
| 18 text-decoration: none; | |
| 19 } | |
| 20 | |
| 21 /* Containers */ | |
| 22 #top { | |
| 23 text-align: center; | |
| 24 padding: 10px; | |
| 25 } | |
| 26 #top-left { | |
| 27 float:left; | |
| 28 } | |
| 29 #top-right { | |
| 30 float:right; | |
| 31 } | |
| 32 .clear { | |
| 33 clear: both; | |
| 34 } | |
| 35 .header { | |
| 36 font-family:Tahoma; | |
| 37 text-align:left; | |
| 38 font-size:12px; | |
| 39 font-weight:bold; | |
| 40 text-decoration:none; | |
| 41 } | |
| 42 .section-title { | |
| 43 text-align: center; | |
| 44 border-bottom: 1px solid #EFEFEF; | |
| 45 margin: 0px 15px 0px 15px; | |
| 46 font-size: 11px; | |
| 47 align: center; | |
| 48 } | |
| 49 | |
| 50 /* Graph */ | |
| 51 div.plot { | |
| 52 cursor: pointer; | |
| 53 } | |
| 54 div.switcher * { | |
| 55 border: 1px solid black; | |
| 56 border-radius: 4px 4px 0 0; | |
| 57 padding-left: 0.5em; | |
| 58 padding-right: 0.5em; | |
| 59 } | |
| 60 div.switcher .select { | |
| 61 background: #ddd; | |
| 62 cursor: pointer; | |
| 63 } | |
| 64 canvas.plot { | |
| 65 border: 1px solid black; | |
| 66 cursor: pointer; | |
| 67 } | |
| 68 div.plot-coordinates { | |
| 69 font-family: monospace; | |
| 70 } | |
| 71 iframe.detail { | |
| 72 display: none; | |
| 73 width: 100%; | |
| 74 height: 100%; | |
| 75 border: none; | |
| 76 } | |
| 77 div.selector { | |
| 78 border: solid 1px black; | |
| 79 cursor: pointer; | |
| 80 padding-left: 0.3em; | |
| 81 background-color: white; | |
| 82 } | |
| 83 div.selector:hover { | |
| 84 background-color: rgb(200,200,250); | |
| 85 } | |
| 86 div.selected { | |
| 87 border-left: none; | |
| 88 } | |
| 89 div.selectors { | |
| 90 width: 80px; | |
| 91 display: none; | |
| 92 } | |
| 93 #explain { | |
| 94 font-size: 0.75em; | |
| 95 font-style: italic; | |
| 96 color: rgb(100,100,100); | |
| 97 } | |
| 98 | |
| 99 /* Header Tab. */ | |
| 100 .header-tab .empty { | |
| 101 clear: left; | |
| 102 } | |
| 103 .header-tab { | |
| 104 border-bottom: 1px solid #6B90DA; | |
| 105 padding-left: 5px; | |
| 106 } | |
| 107 .header-tab ul { | |
| 108 list-style: none; | |
| 109 padding: 0; | |
| 110 margin: 0; | |
| 111 } | |
| 112 .header-tab li { | |
| 113 float: left; | |
| 114 border: 1px solid #bbb; | |
| 115 border-bottom-width: 0; | |
| 116 margin: 0; | |
| 117 } | |
| 118 .header-tab a { | |
| 119 text-decoration: none; | |
| 120 display: block; | |
| 121 background: #eee; | |
| 122 padding: 0.24em 1em; | |
| 123 color: #004277; | |
| 124 text-align: center; | |
| 125 } | |
| 126 .header-tab a:hover { | |
| 127 background: #ddf; | |
| 128 } | |
| 129 .header-tab .active { | |
| 130 border-color: #6B90DA; | |
| 131 } | |
| 132 .header-tab .active a { | |
| 133 position: relative; | |
| 134 top: 1px; | |
| 135 background: white; | |
| 136 font-weight: bold; | |
| 137 color: black; | |
| 138 } | |
| 139 </style> | |
| 140 | |
| 141 <script src="chrome_config.js"></script> | |
| 142 <script src="ui/js/common.js"></script> | |
| 143 <script src="ui/js/plotter.js"></script> | |
| 144 <script src="ui/js/coordinates.js"></script> | |
| 145 <script src="ui/js/graph.js"></script> | |
| 146 | |
| 147 <script language="javascript"> | |
| 148 var params = ParseParams(); | |
| 149 var view = (params['view']) ? params['view'] : 'important'; | |
| 150 | |
| 151 var CHANNELS = ['canary', 'dev', 'beta', 'stable']; | |
| 152 | |
| 153 function init() { | |
| 154 // Fetch graphs.dat from all machines and tests. | |
| 155 var graphFiles = []; | |
| 156 var graphPaths = []; | |
| 157 for (var system in ChromeConfig.systemTitles) { | |
| 158 for (var testName in ChromeConfig.testTitles) { | |
| 159 var path = '../' + system + '/' + testName; | |
| 160 graphFiles.push(path + '/' + 'graphs.dat'); | |
| 161 var p = { | |
| 162 path: path, | |
| 163 testName: testName, | |
| 164 machine: ChromeConfig.systemTitles[system], | |
| 165 } | |
| 166 graphPaths.push(p); | |
| 167 } | |
| 168 } | |
| 169 new FetchList(graphFiles, onGraphListReceived, graphPaths); | |
| 170 } | |
| 171 | |
| 172 function onGraphListReceived(data, graphPaths) { | |
| 173 // Order graphList by machine and test name. | |
| 174 var graphMap = {}; | |
| 175 var testNames = []; | |
| 176 for (var i = 0; i < data.length; i++) { | |
| 177 var graphList = JsonToJs(data[i]); | |
| 178 if (graphList) { | |
| 179 if (!(graphPaths[i].machine in graphMap)) | |
| 180 graphMap[graphPaths[i].machine] = {}; | |
| 181 graphMap[graphPaths[i].machine][graphPaths[i].testName] = | |
| 182 [graphList, graphPaths[i].path]; | |
| 183 if (testNames.indexOf(graphPaths[i].testName) < 0) | |
| 184 testNames.push(graphPaths[i].testName); | |
| 185 } | |
| 186 } | |
| 187 | |
| 188 // Get all important graphs. | |
| 189 var selectedGraphNames = {}; | |
| 190 for (var machine in graphMap) { | |
| 191 var graphByTestName = graphMap[machine]; | |
| 192 for (var test in graphByTestName) { | |
| 193 var gList = graphByTestName[test][0]; | |
| 194 for (var k = 0; k < gList.length; k++) { | |
| 195 var g = gList[k]; | |
| 196 if (!(g.name in selectedGraphNames)) { | |
| 197 if (g.important) { | |
| 198 selectedGraphNames[g.name] = 1; | |
| 199 } | |
| 200 } | |
| 201 } | |
| 202 } | |
| 203 } | |
| 204 | |
| 205 if (view == 'channel-comparison') { | |
| 206 addGraphTable(graphMap, testNames, selectedGraphNames, CHANNELS); | |
| 207 } else if (view == 'platform-comparison') { | |
| 208 displayPlatformComparison(graphMap, testNames, selectedGraphNames); | |
| 209 } else { | |
| 210 displayImportantGraphs(graphMap, testNames, selectedGraphNames); | |
| 211 } | |
| 212 | |
| 213 } | |
| 214 | |
| 215 function displayImportantGraphs(graphMap, testNames, selectedGraphNames) { | |
| 216 // Add graph for each channels. For total graph only. | |
| 217 var output = document.getElementById('output'); | |
| 218 | |
| 219 // Add section labels. | |
| 220 var sectionBelow = document.createElement('p'); | |
| 221 sectionBelow.setAttribute('style', 'text-align: center;'); | |
| 222 output.appendChild(sectionBelow); | |
| 223 sectionBelow.appendChild(document.createTextNode('[ ')); | |
| 224 for (var i = 0; i < CHANNELS.length; i++) { | |
| 225 var a = document.createElement('a'); | |
| 226 a.innerHTML = CHANNELS[i]; | |
| 227 a.setAttribute('href', '#' + CHANNELS[i]); | |
| 228 sectionBelow.appendChild(a); | |
| 229 if (i < CHANNELS.length - 1) | |
| 230 sectionBelow.appendChild(document.createTextNode(' | ')); | |
| 231 } | |
| 232 sectionBelow.appendChild(document.createTextNode(' ]')); | |
| 233 | |
| 234 for (var i = 0; i < CHANNELS.length; i++) { | |
| 235 var channel = CHANNELS[i]; | |
| 236 // Channel title. | |
| 237 var channelTitle = document.createElement('div'); | |
| 238 output.appendChild(channelTitle); | |
| 239 channelTitle.setAttribute('id', channel); | |
| 240 channelTitle.setAttribute('class', 'section-title'); | |
| 241 channelTitle.innerHTML = '<h2>' + channel + '</h2>'; | |
| 242 addGraphTable(graphMap, testNames, selectedGraphNames, [channel]); | |
| 243 } | |
| 244 } | |
| 245 | |
| 246 function addGraphTable(graphMap, testNames, selectedGraphNames, channels) { | |
| 247 var output = document.getElementById('output'); | |
| 248 var table = document.createElement('table'); | |
| 249 output.appendChild(table); | |
| 250 | |
| 251 // Add machine titles. | |
| 252 var trMachineTitle = document.createElement('tr'); | |
| 253 table.appendChild(trMachineTitle); | |
| 254 trMachineTitle.appendChild(document.createElement('th')); | |
| 255 for (var system in ChromeConfig.systemTitles) { | |
| 256 var th = document.createElement('th'); | |
| 257 trMachineTitle.appendChild(th); | |
| 258 th.innerHTML = '<a href="#" >' + ChromeConfig.systemTitles[system] + | |
| 259 '</a>'; | |
| 260 } | |
| 261 | |
| 262 // For each tests. | |
| 263 for (var j = 0; j < testNames.length; j++) { | |
| 264 var testName = testNames[j]; | |
| 265 var tr = document.createElement('tr'); | |
| 266 table.appendChild(tr); | |
| 267 | |
| 268 // Add graph title. | |
| 269 var tdGraphTitle = document.createElement('td'); | |
| 270 tdGraphTitle.setAttribute( | |
| 271 'style', 'width: 50px; vertical-align:top; padding-top: 80px'); | |
| 272 tr.appendChild(tdGraphTitle); | |
| 273 tdGraphTitle.innerHTML = ChromeConfig.testTitles[testName]; | |
| 274 | |
| 275 // For each machine, add graph. | |
| 276 for (var machine in graphMap) { | |
| 277 var toBeGraphedList = []; | |
| 278 if (testName in graphMap[machine]) { | |
| 279 var gMap = graphMap[machine][testName]; | |
| 280 var graphList = gMap[0]; | |
| 281 var graphPath = gMap[1]; | |
| 282 for (var m = 0; m < graphList.length; m++) { | |
| 283 if (graphList[m].name in selectedGraphNames) { | |
| 284 graphList[m].loc = graphPath + '/' + graphList[m].name + | |
| 285 '-summary.dat'; | |
| 286 toBeGraphedList.push(graphList[m]); | |
| 287 break; | |
| 288 } | |
| 289 } | |
| 290 } | |
| 291 | |
| 292 var td = document.createElement('td'); | |
| 293 td.setAttribute('style', 'vertical-align:top;'); | |
| 294 var div = document.createElement('div'); | |
| 295 td.appendChild(div); | |
| 296 tr.appendChild(td); | |
| 297 | |
| 298 if (toBeGraphedList.length > 0) { | |
| 299 var options = { | |
| 300 channels: channels, | |
| 301 width: 250, | |
| 302 height: 250, | |
| 303 showDetail: false, | |
| 304 showTabs: false, | |
| 305 history: 50, | |
| 306 enableMouseScroll: false, | |
| 307 }; | |
| 308 var graph = new Graph(div, toBeGraphedList, options) | |
| 309 var reportURL = graphPath + '/' + 'report.html?channel=' + | |
| 310 channels.join(',') + '&graph=' + | |
| 311 toBeGraphedList[0].name; | |
| 312 graph.onPlotClicked = function(url) { | |
| 313 return function () {window.open(url)}; | |
| 314 }(reportURL); | |
| 315 graph.graph(); | |
| 316 } else { | |
| 317 div.setAttribute( | |
| 318 'style', 'display: inline-block; width: 250px; height: 250px') | |
| 319 } | |
| 320 } | |
| 321 } | |
| 322 } | |
| 323 | |
| 324 function displayPlatformComparison(graphMap, testNames, selectedGraphNames) { | |
| 325 var output = document.getElementById('output'); | |
| 326 | |
| 327 var table = document.createElement('table'); | |
| 328 output.appendChild(table); | |
| 329 | |
| 330 // Add channel titles. | |
| 331 var trChannelTitle = document.createElement('tr'); | |
| 332 table.appendChild(trChannelTitle); | |
| 333 trChannelTitle.appendChild(document.createElement('th')); | |
| 334 for (var i = 0; i < CHANNELS.length; i++) { | |
| 335 var th = document.createElement('th'); | |
| 336 trChannelTitle.appendChild(th); | |
| 337 th.innerHTML = '<a href="#" >' + CHANNELS[i] + '</a>'; | |
| 338 } | |
| 339 | |
| 340 var machines = []; | |
| 341 for (var machine in graphMap) | |
| 342 machines.push(machine); | |
| 343 | |
| 344 // For each tests. | |
| 345 for (var j = 0; j < testNames.length; j++) { | |
| 346 var testName = testNames[j]; | |
| 347 var tr = document.createElement('tr'); | |
| 348 table.appendChild(tr); | |
| 349 | |
| 350 // Add test title. | |
| 351 var tdGraphTitle = document.createElement('td'); | |
| 352 tdGraphTitle.setAttribute( | |
| 353 'style', 'width: 50px; vertical-align:top; padding-top: 80px'); | |
| 354 tr.appendChild(tdGraphTitle); | |
| 355 tdGraphTitle.innerHTML = ChromeConfig.testTitles[testName]; | |
| 356 | |
| 357 // For each channel, add graph. | |
| 358 for (var i = 0; i < CHANNELS.length; i++) { | |
| 359 var channel = CHANNELS[i]; | |
| 360 var toBeGraphedList = []; | |
| 361 for (var machine in graphMap) { | |
| 362 if (testName in graphMap[machine]) { | |
| 363 var gMap = graphMap[machine][testName]; | |
| 364 var graphList = gMap[0]; | |
| 365 var graphPath = gMap[1]; | |
| 366 for (var m = 0; m < graphList.length; m++) { | |
| 367 if (graphList[m].name in selectedGraphNames) { | |
| 368 graphList[m].loc = graphPath + '/' + graphList[m].name + | |
| 369 '-summary.dat'; | |
| 370 graphList[m].machine = cleanId(machine); | |
| 371 toBeGraphedList.push(graphList[m]); | |
| 372 break; | |
| 373 } | |
| 374 } | |
| 375 } | |
| 376 } | |
| 377 | |
| 378 var td = document.createElement('td'); | |
| 379 td.setAttribute('style', 'vertical-align:top;'); | |
| 380 var div = document.createElement('div'); | |
| 381 td.appendChild(div); | |
| 382 tr.appendChild(td); | |
| 383 | |
| 384 if (toBeGraphedList.length > 0) { | |
| 385 var options = { | |
| 386 channels: [channel], | |
| 387 width: 250, | |
| 388 height: 250, | |
| 389 showDetail: false, | |
| 390 showTabs: false, | |
| 391 history: 50, | |
| 392 enableMouseScroll: false, | |
| 393 orderDataByVersion: true, | |
| 394 }; | |
| 395 var graph = new Graph(div, toBeGraphedList, options) | |
| 396 var reportURL = 'platform-comparison.html?channel=' + | |
| 397 channel + '&graph=' + toBeGraphedList[0].name + | |
| 398 '&test=' + testNames[j] + | |
| 399 '&platforms=' + machines.join(','); | |
| 400 graph.onPlotClicked = function(url) { | |
| 401 return function () {window.open(url)}; | |
| 402 }(reportURL); | |
| 403 graph.graph(); | |
| 404 } else { | |
| 405 div.setAttribute( | |
| 406 'style', 'display: inline-block; width: 250px; height: 250px') | |
| 407 } | |
| 408 } | |
| 409 } | |
| 410 } | |
| 411 | |
| 412 function cleanId(str) { | |
| 413 return str.replace(/\s/g, '_').toLowerCase(); | |
| 414 } | |
| 415 | |
| 416 window.addEventListener('load', init, false); | |
| 417 </script> | |
| 418 </head> | |
| 419 <body> | |
| 420 <div id="top"> | |
| 421 <h2 class="title"> | |
| 422 Chrome Perf: | |
| 423 <script> | |
| 424 document.write('<a href="overview-chrome.html' | |
| 425 + window.location.search | |
| 426 + '">overview</a>'); | |
| 427 </script> | |
| 428 </h2> | |
| 429 <div class="clear"></div> | |
| 430 </div> | |
| 431 <div class="header-tab" style="margin:0 auto;"> | |
| 432 <ul> | |
| 433 <script language="javascript"> | |
| 434 var tabs = { | |
| 435 'important': 'Important Graphs', | |
| 436 'channel-comparison': 'Channel Comparison', | |
| 437 'platform-comparison': 'Platform Comparison', | |
| 438 } | |
| 439 for (var key in tabs) { | |
| 440 var selected = (view == key) ? 'class="active"' : ''; | |
| 441 document.write('<li ' + selected + | |
| 442 '><a href="overview-chrome.html?view=' + key + | |
| 443 '">' + tabs[key] + '</a></li>'); | |
| 444 } | |
| 445 </script> | |
| 446 </ul> | |
| 447 <div class="empty"></div> | |
| 448 </div> | |
| 449 <br /> | |
| 450 <div id="output" style="margin:0 auto;"></div> | |
| 451 </body> | |
| 452 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 171303002:
Remove perf dashboards for security reasons. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/tools/perf