1 <!DOCTYPE html> 2 <html> 3 <!-- 4 Copyright (c) 2015 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 <head> 9 <title>Deep insights via Bulk Trace Analysis</title> 10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 11 12 <script src="/components/webcomponentsjs/webcomponents.js"></script> 13 14 <link rel="import" href="/components/polymer/polymer.html"> 15 16 <link rel="import" href="/tracing/ui/timeline_view.html"> 17 <link rel="import" href="/tracing/ui/extras/full_config.html"> 18 19 <link rel="import" href="/tracing/ui/extras/deep_reports/main.html"> 20 <link rel="import" href="/tracing/ui/extras/deep_reports/html_results.html"> 21 22 <style> 23 body { 24 font-family: sans-serif; 25 } 26 </style> 27 </head> 28 <body> 29 <select id="trace-dir"></select> 30 <tr-ui-e-deep-reports-html-results id="results"> 31 </tr-ui-e-deep-reports-html-results> 32 33 <script> 34 'use strict'; 35 36 function onLoad() { 37 tr.b.getAsync('/test_data/__file_list__').then(function(data) { 38 var select = document.querySelector('#trace-file'); 39 var all_files = JSON.parse(data); 40 var filenames = all_files.filter(function(file) { 41 if (!file.startsWith('measurmt-traces/')) 42 return false; 43 if (file === 'measurmt-traces/README.md') 44 return false; 45 return true; 46 }); 47 48 initUI(filenames); 49 }); 50 } 51 window.addEventListener('load', onLoad); 52 53 function initUI(files) { 54 // Groups. 55 var filesByDirName = {}; 56 files.forEach(function(file) { 57 var rest = /measurmt-traces\/(.+)/.exec(file)[1]; 58 59 // Find subdirectories. 60 var m = /(.+?)\/(.*)/.exec(rest); 61 var dirName = m[1]; 62 var baseName = m[2]; 63 if (baseName == 'rail_expectations.json') { 64 // TODO(nduca): Stash this somewhere else. 65 return; 66 } 67 if (baseName.endsWith('.mp4')) { 68 // TODO(nduca): Stash this somewhere else. 69 return; 70 } 71 if (filesByDirName[dirName] === undefined) 72 filesByDirName[dirName] = []; 73 filesByDirName[dirName].push(file); 74 }); 75 76 var selectEl = document.body.querySelector('#trace-dir'); 77 selectEl.filesByDirName = filesByDirName; 78 79 tr.b.iterItems(filesByDirName, function(dirName, filesInDir) { 80 var runEl = document.createElement('option'); 81 runEl.textContent = dirName + ': ' + filesInDir.length + ' traces'; 82 runEl.value = dirName; 83 selectEl.appendChild(runEl); 84 }); 85 86 selectEl.selectedIndex = 0; 87 selectEl.addEventListener('change', onSelectionChange); 88 if (!window.location.hash) { 89 // This will trigger an onHashChange so no need to reload directly. 90 window.location.hash = '#' + selectEl[selectEl.selectedIndex].value; 91 } else { 92 onHashChange(); 93 } 94 } 95 96 function onSelectionChange() { 97 var selectEl = document.body.querySelector('#trace-dir'); 98 window.location.hash = '#' + selectEl[selectEl.selectedIndex].value; 99 } 100 101 function onHashChange() { 102 var file = window.location.hash.substr(1); 103 var selectEl = document.querySelector('#trace-dir'); 104 if (selectEl[selectEl.selectedIndex].value != file) { 105 for (var i = 0; i < selectEl.children.length; i++) { 106 if (selectEl.children[i].value == file) { 107 selectEl.selectedIndex = i; 108 break; 109 } 110 } 111 } 112 reload(); 113 } 114 window.addEventListener('hashchange', onHashChange); 115 116 function reload() { 117 var dirName = window.location.hash.substr(1); 118 var selectEl = document.body.querySelector('#trace-dir'); 119 var filesInDir = selectEl.filesByDirName[dirName]; 120 var results = document.querySelector('#results'); 121 results.clear(); 122 tr.ui.e.deep_reports.main(results, filesInDir).then( 123 function success() { 124 }, 125 function error(err) { 126 tr.showPanic('Error', err); 127 }); 128 } 129 </script> 130 </body> 131 </html> 132
