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 |