1<!DOCTYPE html>
2<html>
3<!--
4Copyright (c) 2015 The Chromium Authors. All rights reserved.
5Use of this source code is governed by a BSD-style license that can be
6found 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