| <!DOCTYPE html> |
| <!-- |
| Copyright 2015 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/statistics.html"> |
| <link rel="import" href="/tracing/base/unit.html"> |
| <link rel="import" href="/tracing/ui/base/grouping_table.html"> |
| <link rel="import" href="/tracing/ui/base/grouping_table_groupby_picker.html"> |
| <link rel="import" href="/tracing/ui/base/table.html"> |
| <link rel="import" href="/tracing/ui/side_panel/side_panel.html"> |
| <link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html"> |
| <link rel="import" href="/tracing/value/numeric.html"> |
| <link rel="import" href="/tracing/value/ui/scalar_span.html"> |
| |
| <dom-module id='tr-ui-sp-file-size-stats-side-panel'> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| flex-direction: column; |
| } |
| toolbar { |
| align-items: center; |
| background-color: rgb(236, 236, 236); |
| border-bottom: 1px solid #8e8e8e; |
| display: flex; |
| flex-direction: row; |
| flex-direction: row; |
| flex: 0 0 auto; |
| font-size: 12px; |
| padding: 0 10px 0 10px; |
| } |
| table-container { |
| display: flex; |
| min-height: 0px; |
| overflow-y: auto; |
| } |
| </style> |
| |
| <toolbar> |
| <span><b>Group by:</b></span> |
| <tr-ui-b-grouping-table-groupby-picker id="picker"> |
| </tr-ui-b-grouping-table-groupby-picker> |
| </toolbar> |
| <table-container> |
| <tr-ui-b-grouping-table id="table"></tr-ui-b-grouping-table> |
| </table-container> |
| </template> |
| </dom-module> |
| |
| <script> |
| 'use strict'; |
| (function() { |
| |
| Polymer({ |
| is: 'tr-ui-sp-file-size-stats-side-panel', |
| behaviors: [tr.ui.behaviors.SidePanel], |
| |
| ready: function() { |
| this.model_ = undefined; |
| this.selection_ = new tr.model.EventSet(); |
| this.$.picker.settingsKey = 'tr-ui-sp-file-size-stats-side-panel-picker'; |
| this.$.picker.possibleGroups = [ |
| { |
| key: 'phase', label: 'Event Type', |
| dataFn: function(eventStat) { return eventStat.phase; } |
| }, |
| { |
| key: 'category', label: 'Category', |
| dataFn: function(eventStat) { return eventStat.category; } |
| }, |
| { |
| key: 'title', label: 'Title', |
| dataFn: function(eventStat) { return eventStat.title; } |
| } |
| ]; |
| this.$.picker.defaultGroupKeys = ['phase', 'title']; |
| this.$.picker.addEventListener('current-groups-changed', |
| this.updateContents_.bind(this)); |
| }, |
| |
| get textLabel() { |
| return 'File Size Stats'; |
| }, |
| |
| supportsModel: function(m) { |
| if (!m) { |
| return { |
| supported: false, |
| reason: 'No stats were collected for this file.' |
| }; |
| } |
| |
| if (m.stats.allTraceEventStats.length === 0) { |
| return { |
| supported: false, |
| reason: 'No stats were collected for this file.' |
| }; |
| } |
| return { |
| supported: true |
| }; |
| }, |
| |
| get model() { |
| return this.model_; |
| }, |
| |
| set model(model) { |
| this.model_ = model; |
| this.updateContents_(); |
| }, |
| |
| get rangeOfInterest() { |
| return this.rangeOfInterest_; |
| }, |
| |
| set rangeOfInterest(rangeOfInterest) { |
| this.rangeOfInterest_ = rangeOfInterest; |
| }, |
| |
| get selection() { |
| return this.selection_; |
| }, |
| |
| set selection(selection) { |
| this.selection_ = selection; |
| }, |
| |
| createColumns_: function(stats) { |
| var columns = [ |
| { |
| title: 'Title', |
| value: function(row) { |
| var titleEl = document.createElement('span'); |
| Polymer.dom(titleEl).textContent = row.title; |
| titleEl.style.textOverflow = 'ellipsis'; |
| return titleEl; |
| }, |
| cmp: function(a, b) { |
| return a.title.localeCompare(b.title); |
| }, |
| width: '400px' |
| }, |
| { |
| title: 'Num Events', |
| align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT, |
| value: function(row) { |
| return row.rowStats.numEvents; |
| }, |
| cmp: function(a, b) { |
| return a.rowStats.numEvents - b.rowStats.numEvents; |
| }, |
| width: '80px' |
| } |
| ]; |
| |
| if (stats && stats.hasEventSizesinBytes) { |
| columns.push({ |
| title: 'Bytes', |
| align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT, |
| value: function(row) { |
| var value = new tr.v.ScalarNumeric(tr.b.Unit.byName.sizeInBytes, |
| row.rowStats.totalEventSizeinBytes); |
| var spanEl = tr.v.ui.createScalarSpan(value); |
| return spanEl; |
| }, |
| cmp: function(a, b) { |
| return a.rowStats.totalEventSizeinBytes - |
| b.rowStats.totalEventSizeinBytes; |
| }, |
| width: '80px' |
| }); |
| } |
| return columns; |
| }, |
| |
| updateContents_: function() { |
| var table = this.$.table; |
| |
| var columns = this.createColumns_(this.model.stats); |
| table.rowStatsConstructor = function ModelStatsRowStats(row) { |
| var sum = tr.b.Statistics.sum(row.data, function(x) { |
| return x.numEvents; |
| }); |
| var totalEventSizeinBytes = tr.b.Statistics.sum(row.data, function(x) { |
| return x.totalEventSizeinBytes; |
| }); |
| return { |
| numEvents: sum, |
| totalEventSizeinBytes: totalEventSizeinBytes |
| }; |
| }; |
| table.tableColumns = columns; |
| table.sortColumnIndex = 1; |
| table.sortDescending = true; |
| table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW; |
| |
| table.groupBy = this.$.picker.currentGroups.map(function(group) { |
| return group.dataFn; |
| }); |
| |
| if (!this.model) { |
| table.dataToGroup = []; |
| } else { |
| table.dataToGroup = this.model.stats.allTraceEventStats; |
| } |
| this.$.table.rebuild(); |
| } |
| }); |
| |
| tr.ui.side_panel.SidePanelRegistry.register(function() { |
| return document.createElement('tr-ui-sp-file-size-stats-side-panel'); |
| }); |
| })(); |
| </script> |
