Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(25)

Unified Diff: perf_insights/perf_insights/ui/reports/slice_cost_report.html

Issue 1772833002: Remove SystemHealthMetric (fka RAILScore) (Closed) Base URL: https://github.com/catapult-project/catapult.git@master
Patch Set: fix pi test Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: perf_insights/perf_insights/ui/reports/slice_cost_report.html
diff --git a/perf_insights/perf_insights/ui/reports/slice_cost_report.html b/perf_insights/perf_insights/ui/reports/slice_cost_report.html
deleted file mode 100644
index 9e72df96b284fb3327c23f58bc072235271f2d84..0000000000000000000000000000000000000000
--- a/perf_insights/perf_insights/ui/reports/slice_cost_report.html
+++ /dev/null
@@ -1,415 +0,0 @@
-<!DOCTYPE html>
-<!--
-Copyright (c) 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="/perf_insights/mappers/slice_cost.html">
-<link rel="import" href="/perf_insights/ui/reports/pi_report.html">
-<link rel="import" href="/perf_insights/ui/trace_link_list.html">
-<link rel="import" href="/tracing/ui/base/dom_helpers.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/info_bar_group.html">
-<link rel="import" href="/tracing/ui/base/overlay.html">
-<link rel="import" href="/tracing/ui/base/table.html">
-<link rel="import" href="/tracing/value/histogram.html">
-<link rel="import" href="/tracing/value/ui/histogram_span.html">
-<link rel="import" href="/tracing/value/ui/time_duration_span.html">
-<link rel="import" href="/tracing/value/unit.html">
-
-<polymer-element name="pi-ui-r-slice-cost-report"
- extends="pi-ui-r-pi-report"
- map-function-href="/perf_insights/mappers/weather_report_map_function.html"
- map-function-name="weatherReportMapFunction">
- <template>
- <style>
- :host {
- display: flex;
- flex-direction: column;
- }
-
- top-controls {
- display: flex;
- flex: 0 0 auto;
- flex-flow: wrap;
- background-color: rgb(236, 236, 236);
- border-bottom: 1px solid #8e8e8e;
- padding: 4px;
- }
-
- content-pane {
- min-height: 0;
- display: flex;
- flex-direction: row;
- }
-
- table-container {
- flex: 1 1 60%;
- display: flex;
- overflow: auto;
- }
- #table {
- flex: 1 1 60%;
- }
-
- right-pane {
- border-left: 1px solid black;
- display: flex;
- flex-direction: column;
- flex: 1 1 40%;
- }
- right-pane > * {
- margin-bottom: 20px;
- }
-
- #links {
- min-height: 0;
- overflow: auto;
- }
- </style>
- <top-controls>
- <span>Group by:</span>
- <tr-ui-b-grouping-table-groupby-picker id="picker">
- </tr-ui-b-grouping-table-groupby-picker>
- </top-controls>
- <content-pane>
- <table-container>
- <tr-ui-b-grouping-table id="table"></tr-ui-b-grouping-table>
- </table-container>
- <right-pane>
- <div id="script-costs">
- Script costs
- <tr-ui-b-table id="script-costs-table"></tr-ui-b-table>
- </div>
-
- <div id="costs-histogram-container">
- Histogram of
- <select id="costs-histogram-cost-type"></select> values:
- <tr-v-ui-histogram-span id="costs-histogram"></tr-v-ui-histogram-span>
-
- Links
- <pi-ui-trace-link-list id="links"></pi-ui-trace-link-list>
- </div>
- </div>
- </content-pane>
- </template>
- <script>
- 'use strict';
-
- Polymer({
- created: function() {
- this.mapResults_ = undefined;
- },
-
- ready: function() {
- this.$.table.addEventListener(
- 'selection-changed', this.onSelectionChanged_.bind(this));
-
- var topControls = this.shadowRoot.querySelector('top-controls');
- var picker = this.$.picker;
- picker.settingsKey = 'slice-cost-report-grouping-picker';
- picker.possibleGroups = [
- {
- key: 'threadGroup', label: 'Thread name',
- dataFn: function(datum) { return datum.sliceCostInfo.threadGroup; }
- },
- {
- key: 'railTypeName', label: 'RAIL Stage',
- dataFn: function(datum) { return datum.sliceCostInfo.railTypeName; }
- },
- {
- key: 'userFriendlyCategory', label: 'User Friendly Category',
- dataFn: function(datum) {
- return datum.sliceCostInfo.userFriendlyCategory || 'other';
- }
- },
- {
- key: 'title', label: 'Title',
- dataFn: function(datum) { return datum.sliceCostInfo.title; }
- },
- {
- key: 'domain', label: 'Domain',
- dataFn: function(datum) { return datum.sliceCostInfo.domain; }
- },
- {
- key: 'domainCategory', label: 'Domain Category',
- dataFn: function(datum) {
- return datum.sliceCostInfo.domainCategory;
- }
- }
- ];
- picker.defaultGroupKeys = [
- 'threadGroup', 'railTypeName', 'userFriendlyCategory'
- ];
- picker.addEventListener('current-groups-changed',
- this.updateContents_.bind(this));
-
- this.updateRightPane_();
- this.initCostsHistogram_();
- },
-
- get mapResults() {
- return this.mapResults_;
- },
-
- set mapResults(mapResults) {
- this.mapResults_ = mapResults;
- this.updateContents_();
- },
-
- onSelectionChanged_: function(event) {
- this.updateRightPane_();
- },
-
- updateRightPane_: function() {
- this.updateScriptCosts_();
- this.updateCostsHistogram_();
- var panes = this.shadowRoot.querySelector('right-pane').children;
- var isFirst = true;
- for (var i = 0; i < panes.length; i++) {
- if (getComputedStyle(panes[i]).display === 'none')
- continue;
- if (isFirst) {
- panes[i].style.borderTop = '';
- isFirst = false;
- continue;
- }
- panes[i].style.borderTop = '1px solid black';
- }
- },
-
- updateScriptCosts_: function() {
- var rows = [];
- var footerRows = [];
-
- // Aggregate values.
- var aggregated = new pi.m.SliceCostInfo();
- if (this.$.table.selectedTableRow) {
- this.$.table.selectedTableRow.data.forEach(function(datum) {
- aggregated.push(undefined, datum.sliceCostInfo);
- });
- }
- if (aggregated.jsTime === 0) {
- this.shadowRoot.querySelector('#script-costs').style.display = 'none';
- return;
- }
- this.shadowRoot.querySelector('#script-costs').style.display = '';
-
- // Display aggregated data.
- for (var state in tr.model.source_info.JSSourceState) {
- var stateName = tr.model.source_info.JSSourceState[state];
- rows.push({
- label: stateName,
- value: tr.v.ui.createTimeDurationSpan(
- aggregated.jsTimeByState[stateName])
- });
- }
- footerRows.push({
- label: 'JS Time',
- value: tr.v.ui.createTimeDurationSpan(aggregated.jsTime)
- });
-
- // Push to table.
- var scriptCostsTable = this.shadowRoot.querySelector(
- '#script-costs-table');
- scriptCostsTable.tableColumns = [
- {
- title: 'Label',
- value: function(row) { return row.label; },
- width: '150px'
- },
- {
- title: 'Value',
- value: function(row) { return row.value; },
- width: '100%'
- }
- ];
- scriptCostsTable.showHeader = false;
- scriptCostsTable.tableRows = rows;
- scriptCostsTable.footerRows = footerRows;
-
- scriptCostsTable.rebuild();
- },
-
- updateContents_: function() {
- var table = this.$.table;
-
- var results = this.mapResults_;
- if (!results)
- results = new tr.r.Results();
-
- table.rowStatsConstructor = this.createRowStatsConstructor_();
- var columns = this.createColumns_();
- table.tableColumns = columns;
- table.sortColumnIndex = 2;
- table.sortDescending = true;
-
- var allSliceCosts = [];
- results.forEach(function(result) {
- tr.b.iterItems(result.pairs, function(name, value) {
- if (name != 'wr')
- return;
-
- value.sliceCosts.forEach(function(item) {
- var sliceCostInfo = pi.m.SliceCostInfo.fromDict(item);
- allSliceCosts.push({
- canonicalurl: result.canonicalUrl,
- sliceCostInfo: sliceCostInfo
- });
- });
- });
- });
-
- table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
- table.groupBy = this.$.picker.currentGroups.map(function(group) {
- return group.dataFn;
- });
- table.dataToGroup = allSliceCosts;
- table.rebuild();
- this.updateRightPane_();
- },
-
- createRowStatsConstructor_: function() {
- return function SliceCostRowStats(row) {
- var stats = new pi.m.SliceCostInfo();
- row.data.forEach(function(datum) {
- stats.push(undefined, datum.sliceCostInfo);
- });
- return stats;
- }
- },
-
- createColumns_: function() {
- var columns = [
- {
- title: 'Title',
- value: function(row) {
- return row.title;
- },
- cmp: function(a, b) {
- return a.title.localeCompare(b.title);
- },
- width: '500px'
- },
- {
- title: 'Self time (total)',
- textAlign: 'right',
- value: function(row) {
- return tr.v.ui.createTimeDurationSpan(row.rowStats.selfTime);
- },
- cmp: function(a, b) {
- return tr.b.comparePossiblyUndefinedValues(a, b,
- function(a, b) {
- return a.rowStats.selfTime - b.rowStats.selfTime;
- });
- }
- },
- {
- title: 'CPU Self time (total)',
- textAlign: 'right',
- value: function(row) {
- return tr.v.ui.createTimeDurationSpan(row.rowStats.cpuSelfTime);
- },
- cmp: function(a, b) {
- return tr.b.comparePossiblyUndefinedValues(a, b,
- function(a, b) {
- return a.rowStats.cpuSelfTime - b.rowStats.cpuSelfTime;
- });
- }
- }
- ];
- return columns;
- },
-
- initCostsHistogram_: function() {
- var histogram = this.shadowRoot.querySelector('#costs-histogram');
- histogram.addEventListener('brushed-bins-changed',
- this.onBrushedBinsChanged_.bind(this));
-
- var options = [
- {
- label: 'Self time',
- value: 'selfTime',
- func: function(datum) { return datum.sliceCostInfo.selfTime; }
- },
- {
- label: 'CPU self time',
- value: 'cpuSelfTime',
- func: function(datum) { return datum.sliceCostInfo.cpuSelfTime; }
- },
- {
- label: 'JS time',
- value: 'jsTime',
- func: function(datum) { return datum.sliceCostInfo.jsTime; }
- }
- ];
- for (var state in tr.model.source_info.JSSourceState) {
- options.push({
- label: 'JS time: ' + state,
- value: 'jsTime.' + state,
- func: function(datum) {
- return datum.sliceCostInfo.jsTimeByState[state];
- }
- });
- }
- var oldSelector = this.shadowRoot.querySelector(
- '#costs-histogram-cost-type');
- var newSelector = tr.ui.b.createSelector(
- this, 'currentSliceReportCostType',
- 'pi.app_main.currentSliceReportCostType',
- options[0].value,
- options);
- newSelector.id = 'costs-histogram-cost-type';
- oldSelector.parentElement.replaceChild(newSelector, oldSelector);
- },
-
- set currentSliceReportCostType(currentSliceReportCostType) {
- this.updateCostsHistogram_();
- },
-
- updateCostsHistogram_: function() {
- var container = this.shadowRoot.querySelector(
- '#costs-histogram-container');
-
- if (this.$.table.selectedTableRow === undefined) {
- container.style.display = 'none';
- return;
- }
-
- container.style.display = '';
-
- var selector = this.shadowRoot.querySelector(
- '#costs-histogram-cost-type');
- var func = selector.selectedItem.func;
-
- var histogram = tr.v.Histogram.createLinear(
- tr.v.Unit.byName.timeDurationInMs,
- tr.b.Range.fromExplicitRange(0, 100),
- 100);
- this.$.table.selectedTableRow.data.forEach(function(datum) {
- var value = func(datum);
- histogram.add(value, datum.canonicalUrl);
- });
-
- var histogramSpan = this.shadowRoot.querySelector('#costs-histogram');
- histogramSpan.histogram = histogram;
- this.onBrushedBinsChanged_();
- },
-
- onBrushedBinsChanged_: function() {
- var histogramSpan = this.shadowRoot.querySelector('#costs-histogram');
- var brushedBins = histogramSpan.brushedBins;
- var urlSet = {};
- brushedBins.forEach(function(bin) {
- bin.sourceInfos.forEach(function(sourceInfo) {
- urlSet[sourceInfo] = 1;
- });
- });
- urlSet = Object.keys(urlSet);
- urlSet.sort();
- this.$.links.setTraceUrls(urlSet);
- }
- });
- </script>
-</polymer-element>

Powered by Google App Engine
This is Rietveld 408576698