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