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