Home | History | Annotate | Download | only in examples 
      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="/ui/timeline_view.html">
     17 <link rel="import" href="/extras/full_config.html">
     18 
     19 <link rel="import" href="/ui/extras/deep_reports/main.html">
     20 <link rel="import" href="/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('/json/examples').then(function(data) {
     38       var select = document.querySelector('#trace-file');
     39       var all_files = JSON.parse(data);
     40       var files = 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       var filenames = files.map(function(file) {
     49         return '../test_data/' + file;
     50       });
     51       initUI(filenames);
     52     });
     53   }
     54   window.addEventListener('load', onLoad);
     55 
     56   function initUI(files) {
     57     // Groups.
     58     var filesByDirName = {};
     59     files.forEach(function(file) {
     60       var rest = /measurmt-traces\/(.+)/.exec(file)[1];
     61 
     62       // Find subdirectories.
     63       var m = /(.+?)\/(.*)/.exec(rest);
     64       var dirName = m[1];
     65       var baseName = m[2];
     66       if (baseName == 'rail_expectations.json') {
     67         // TODO(nduca): Stash this somewhere else.
     68         return;
     69       }
     70       if (baseName.endsWith('.mp4')) {
     71         // TODO(nduca): Stash this somewhere else.
     72         return;
     73       }
     74       if (filesByDirName[dirName] === undefined)
     75         filesByDirName[dirName] = [];
     76       filesByDirName[dirName].push(file);
     77     });
     78 
     79     var selectEl = document.body.querySelector('#trace-dir');
     80     selectEl.filesByDirName = filesByDirName;
     81 
     82     tr.b.iterItems(filesByDirName, function(dirName, filesInDir) {
     83       var runEl = document.createElement('option');
     84       runEl.textContent = dirName + ': ' + filesInDir.length + ' traces';
     85       runEl.value = dirName;
     86       selectEl.appendChild(runEl);
     87     });
     88 
     89     selectEl.selectedIndex = 0;
     90     selectEl.addEventListener('change', onSelectionChange);
     91     if (!window.location.hash) {
     92       // This will trigger an onHashChange so no need to reload directly.
     93       window.location.hash = '#' + selectEl[selectEl.selectedIndex].value;
     94     } else {
     95       onHashChange();
     96     }
     97   }
     98 
     99   function onSelectionChange() {
    100     var selectEl = document.body.querySelector('#trace-dir');
    101     window.location.hash = '#' + selectEl[selectEl.selectedIndex].value;
    102   }
    103 
    104   function onHashChange() {
    105     var file = window.location.hash.substr(1);
    106     var selectEl = document.querySelector('#trace-dir');
    107     if (selectEl[selectEl.selectedIndex].value != file) {
    108       for (var i = 0; i < selectEl.children.length; i++) {
    109         if (selectEl.children[i].value == file) {
    110           selectEl.selectedIndex = i;
    111           break;
    112         }
    113       }
    114     }
    115     reload();
    116   }
    117   window.addEventListener('hashchange', onHashChange);
    118 
    119   function reload() {
    120     var dirName = window.location.hash.substr(1);
    121     var selectEl = document.body.querySelector('#trace-dir');
    122     var filesInDir = selectEl.filesByDirName[dirName];
    123     var results = document.querySelector('#results');
    124     results.clear();
    125     tr.ui.e.deep_reports.main(results, filesInDir).then(
    126       function success() {
    127       },
    128       function error(err) {
    129         tr.showPanic('Error', err);
    130       });
    131   }
    132   </script>
    133 </body>
    134 </html>
    135