summaryrefslogtreecommitdiff
path: root/chromium/third_party/catapult/tracing/tracing/ui/analysis/counter_sample_sub_view.html
blob: 40ae156078ca6faaa239952523bd493ce6fbdebe (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/base/iteration_helpers.html">
<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
<link rel="import" href="/tracing/ui/base/table.html">

<polymer-element name='tr-ui-a-counter-sample-sub-view'
    extends='tr-ui-a-sub-view'>
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    </style>
    <tr-ui-b-table id='table'></tr-ui-b-table>
  </template>
</polymer-element>

<script>
'use strict';
(function() {
  var COUNTER_SAMPLE_TABLE_COLUMNS = [
    {
      title: 'Counter',
      width: '150px',
      value: function(row) { return row.counter; }
    },
    {
      title: 'Series',
      width: '150px',
      value: function(row) { return row.series; }
    },
    {
      title: 'Time',
      width: '150px',
      value: function(row) { return row.start; }
    },
    {
      title: 'Value',
      width: '100%',
      value: function(row) { return row.value; }
    }
  ];

  Polymer('tr-ui-a-counter-sample-sub-view', {
    ready: function() {
      this.currentSelection_ = undefined;
      this.$.table.tableColumns = COUNTER_SAMPLE_TABLE_COLUMNS;
    },

    get selection() {
      return this.currentSelection_;
    },

    set selection(selection) {
      this.currentSelection_ = selection;
      this.updateContents_();
    },

    updateContents_: function() {
      this.$.table.tableRows =
          this.selection ? this.getRows_(this.selection.toArray()) : [];
      this.$.table.rebuild();
    },

    /**
     * Returns the table rows for the specified samples.
     *
     * We print each counter/series combination the first time that it
     * appears. For subsequent samples in each series, we omit the counter
     * and series name. This makes it easy to scan to find the next series.
     *
     * Each series can be collapsed. In the expanded state, all samples
     * are shown. In the collapsed state, only the first sample is displayed.
     */
    getRows_: function(samples) {
      var samplesByCounter = tr.b.group(samples, function(sample) {
        return sample.series.counter.guid;
      });

      var rows = [];
      tr.b.iterItems(samplesByCounter, function(unused, counterSamples) {
        var samplesBySeries = tr.b.group(counterSamples, function(sample) {
          return sample.series.guid;
        });

        tr.b.iterItems(samplesBySeries, function(unused, seriesSamples) {
          var seriesRows = this.getRowsForSamples_(seriesSamples);
          seriesRows[0].counter = seriesSamples[0].series.counter.name;
          seriesRows[0].series = seriesSamples[0].series.name;

          if (seriesRows.length > 1) {
            seriesRows[0].subRows = seriesRows.slice(1);
            seriesRows[0].isExpanded = true;
          }

          rows.push(seriesRows[0]);
        }, this);
      }, this);

      return rows;
    },

    getRowsForSamples_: function(samples) {
      return samples.map(function(sample) {
        return {
          start: sample.timestamp,
          value: sample.value
        };
      });
    }
  });
})();
</script>