1<!DOCTYPE html>
2<!--
3Copyright 2015 The Chromium Authors. All rights reserved.
4Use of this source code is governed by a BSD-style license that can be
5found in the LICENSE file.
6-->
7
8<link rel="import" href="/tracing/base/statistics.html">
9<link rel="import" href="/tracing/model/event_set.html">
10<link rel="import" href="/tracing/ui/base/table.html">
11<link rel="import" href="/tracing/ui/side_panel/side_panel.html">
12<link rel="import" href="/tracing/ui/base/dom_helpers.html">
13<link rel="import" href="/tracing/ui/base/line_chart.html">
14
15<polymer-element name='tr-ui-e-s-alerts-side-panel'
16    extends='tr-ui-side-panel'>
17  <template>
18    <style>
19    :host {
20      display: block;
21      width: 250px;
22    }
23    #content {
24      flex-direction: column;
25      display: flex;
26    }
27    </style>
28
29    <div id='content'>
30      <toolbar id='toolbar'></toolbar>
31      <result-area id='result_area'></result-area>
32    </div>
33  </template>
34
35  <script>
36  'use strict';
37
38  Polymer({
39    ready: function() {
40      this.rangeOfInterest_ = new tr.b.Range();
41      this.selection_ = undefined;
42    },
43
44    get model() {
45      return this.model_;
46    },
47
48    set model(model) {
49      this.model_ = model;
50      this.updateContents_();
51    },
52
53    set selection(selection) {
54    },
55
56    set rangeOfInterest(rangeOfInterest) {
57    },
58
59    /**
60     * Fires a selection event selecting all alerts of the specified
61     * type.
62     */
63    selectAlertsOfType: function(alertTypeString) {
64      var alertsOfType = this.model_.alerts.filter(function(alert) {
65        return alert.title === alertTypeString;
66      });
67
68      var event = new tr.model.RequestSelectionChangeEvent();
69      event.selection = new tr.model.EventSet(alertsOfType);
70      this.dispatchEvent(event);
71    },
72
73    /**
74     * Returns a map for the specified alerts where each key is the
75     * alert type string and each value is a list of alerts with that
76     * type.
77     */
78    alertsByType_: function(alerts) {
79      var alertsByType = {};
80      alerts.forEach(function(alert) {
81        if (!alertsByType[alert.title])
82          alertsByType[alert.title] = [];
83
84        alertsByType[alert.title].push(alert);
85      });
86      return alertsByType;
87    },
88
89    alertsTableRows_: function(alertsByType) {
90      return Object.keys(alertsByType).map(function(key) {
91        return {
92          alertType: key,
93          count: alertsByType[key].length
94        };
95      });
96    },
97
98    alertsTableColumns_: function() {
99      return [
100        {
101          title: 'Alert type',
102          value: function(row) { return row.alertType; },
103          width: '180px'
104        },
105        {
106          title: 'Count',
107          width: '100%',
108          value: function(row) { return row.count; }
109        }
110      ];
111    },
112
113    createAlertsTable_: function(alerts) {
114      var alertsByType = this.alertsByType_(alerts);
115
116      var table = document.createElement('tr-ui-b-table');
117      table.tableColumns = this.alertsTableColumns_();
118      table.tableRows = this.alertsTableRows_(alertsByType);
119      table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
120      table.addEventListener('selection-changed', function(e) {
121        var row = table.selectedTableRow;
122        if (row)
123          this.selectAlertsOfType(row.alertType);
124      }.bind(this));
125
126      return table;
127    },
128
129    updateContents_: function() {
130      this.$.result_area.textContent = '';
131      if (this.model_ === undefined)
132        return;
133
134      var panel = this.createAlertsTable_(this.model_.alerts);
135      this.$.result_area.appendChild(panel);
136    },
137
138    supportsModel: function(m) {
139      if (m == undefined) {
140        return {
141          supported: false,
142          reason: 'Unknown tracing model'
143        };
144      } else if (m.alerts.length === 0) {
145        return {
146          supported: false,
147          reason: 'No alerts in tracing model'
148        };
149      }
150
151      return {
152        supported: true
153      };
154    },
155
156    get textLabel() {
157      return 'Alerts';
158    }
159  });
160  </script>
161</polymer-element>
162