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/ui/base/grouping_table.html"> 10<link rel="import" href="/tracing/ui/base/grouping_table_groupby_picker.html"> 11<link rel="import" href="/tracing/ui/side_panel/side_panel.html"> 12<link rel="import" href="/tracing/value/numeric.html"> 13<link rel="import" href="/tracing/value/ui/scalar_span.html"> 14<link rel="import" href="/tracing/value/unit.html"> 15 16<polymer-element name='tr-ui-sp-file-size-stats-side-panel' 17 extends='tr-ui-side-panel'> 18 <template> 19 <style> 20 :host { 21 display: flex; 22 flex-direction: column; 23 width: 600px; 24 } 25 toolbar { 26 align-items: center; 27 background-color: rgb(236, 236, 236); 28 border-bottom: 1px solid #8e8e8e; 29 display: flex; 30 flex-direction: row; 31 flex-direction: row; 32 flex: 0 0 auto; 33 font-size: 12px; 34 padding: 0 10px 0 10px; 35 } 36 table-container { 37 display: flex; 38 min-height: 0px; 39 overflow-y: auto; 40 } 41 </style> 42 43 <toolbar> 44 <span><b>Group by:</b></span> 45 <tr-ui-b-grouping-table-groupby-picker id="picker"> 46 </tr-ui-b-grouping-table-groupby-picker> 47 </toolbar> 48 <table-container> 49 <tr-ui-b-grouping-table id="table"></tr-ui-b-grouping-table> 50 </table-container> 51 </template> 52</polymer-element> 53 54<script> 55'use strict'; 56(function() { 57 58 Polymer('tr-ui-sp-file-size-stats-side-panel', { 59 ready: function() { 60 this.model_ = undefined; 61 this.selection_ = new tr.model.EventSet(); 62 this.$.picker.settingsKey = 'tr-ui-sp-file-size-stats-side-panel-picker'; 63 this.$.picker.possibleGroups = [ 64 { 65 key: 'phase', label: 'Event Type', 66 dataFn: function(eventStat) { return eventStat.phase; } 67 }, 68 { 69 key: 'category', label: 'Category', 70 dataFn: function(eventStat) { return eventStat.category; } 71 }, 72 { 73 key: 'title', label: 'Title', 74 dataFn: function(eventStat) { return eventStat.title; } 75 } 76 ]; 77 this.$.picker.defaultGroupKeys = ['phase', 'title']; 78 this.$.picker.addEventListener('current-groups-changed', 79 this.updateContents_.bind(this)); 80 }, 81 82 get textLabel() { 83 return 'File Size Stats'; 84 }, 85 86 supportsModel: function(m) { 87 if (!m) { 88 return { 89 supported: false, 90 reason: 'No stats were collected for this file.' 91 }; 92 } 93 94 if (m.stats.allTraceEventStats.length === 0) { 95 return { 96 supported: false, 97 reason: 'No stats were collected for this file.' 98 }; 99 } 100 return { 101 supported: true 102 }; 103 }, 104 105 get model() { 106 return this.model_; 107 }, 108 109 set model(model) { 110 this.model_ = model; 111 this.updateContents_(); 112 }, 113 114 get rangeOfInterest() { 115 return this.rangeOfInterest_; 116 }, 117 118 set rangeOfInterest(rangeOfInterest) { 119 this.rangeOfInterest_ = rangeOfInterest; 120 }, 121 122 get selection() { 123 return this.selection_; 124 }, 125 126 set selection(selection) { 127 this.selection_ = selection; 128 }, 129 130 createColumns_: function(stats) { 131 var columns = [ 132 { 133 title: 'Title', 134 value: function(row) { 135 var titleEl = document.createElement('span'); 136 titleEl.textContent = row.title; 137 titleEl.style.textOverflow = 'ellipsis'; 138 return titleEl; 139 }, 140 cmp: function(a, b) { 141 return a.title.localeCompare(b.title); 142 }, 143 width: '400px' 144 }, 145 { 146 title: 'Num Events', 147 textAlign: 'right', 148 value: function(row) { 149 return row.rowStats.numEvents; 150 }, 151 cmp: function(a, b) { 152 return a.rowStats.numEvents - b.rowStats.numEvents; 153 }, 154 width: '80px' 155 } 156 ]; 157 158 if (stats && stats.hasEventSizesinBytes) { 159 columns.push({ 160 title: 'Bytes', 161 textAlign: 'right', 162 value: function(row) { 163 var value = new tr.v.ScalarNumeric(tr.v.Unit.byName.sizeInBytes, 164 row.rowStats.totalEventSizeinBytes); 165 var spanEl = tr.v.ui.createScalarSpan(value); 166 return spanEl; 167 }, 168 cmp: function(a, b) { 169 return a.rowStats.totalEventSizeinBytes - 170 b.rowStats.totalEventSizeinBytes; 171 }, 172 width: '80px' 173 }); 174 } 175 return columns; 176 }, 177 178 updateContents_: function() { 179 var table = this.$.table; 180 181 var columns = this.createColumns_(this.model.stats); 182 table.rowStatsConstructor = function ModelStatsRowStats(row) { 183 var sum = tr.b.Statistics.sum(row.data, function(x) { 184 return x.numEvents; 185 }); 186 var totalEventSizeinBytes = tr.b.Statistics.sum(row.data, function(x) { 187 return x.totalEventSizeinBytes; 188 }); 189 return { 190 numEvents: sum, 191 totalEventSizeinBytes: totalEventSizeinBytes 192 }; 193 }; 194 table.tableColumns = columns; 195 table.sortColumnIndex = 1; 196 table.sortDescending = true; 197 table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW; 198 199 table.groupBy = this.$.picker.currentGroups.map(function(group) { 200 return group.dataFn; 201 }); 202 203 if (!this.model) { 204 table.dataToGroup = []; 205 } else { 206 table.dataToGroup = this.model.stats.allTraceEventStats; 207 } 208 this.$.table.rebuild(); 209 } 210 }); 211})(); 212</script> 213