| <!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="/base/base.html"> |
| <link rel="import" href="/ui/analysis/analysis_sub_view.html"> |
| <link rel="import" href="/ui/base/dom_helpers.html"> |
| <link rel="import" href="/ui/base/table.html"> |
| <link rel="import" href="/ui/base/ui.html"> |
| |
| <polymer-element name="tr-ui-a-alert-sub-view" |
| extends="tr-ui-a-sub-view"> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| flex-direction: column; |
| } |
| #table { |
| flex: 1 1 auto; |
| align-self: stretch; |
| } |
| </style> |
| <tr-ui-b-table id="table"> |
| </tr-ui-b-table> |
| </template> |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| ready: function() { |
| this.currentSelection_ = undefined; |
| this.$.table.tableColumns = [ |
| { |
| title: 'Label', |
| value: function(row) { return row.name; }, |
| width: '150px' |
| }, |
| { |
| title: 'Value', |
| width: '100%', |
| value: function(row) { return row.value; } |
| } |
| ]; |
| this.$.table.showHeader = false; |
| }, |
| |
| get selection() { |
| return this.currentSelection_; |
| }, |
| |
| set selection(selection) { |
| this.currentSelection_ = selection; |
| this.updateContents_(); |
| }, |
| |
| getRowsForSingleAlert_: function(alert) { |
| var rows = []; |
| |
| // Arguments |
| for (var argName in alert.args) { |
| var argView = |
| document.createElement('tr-ui-a-generic-object-view'); |
| argView.object = alert.args[argName]; |
| rows.push({ name: argName, value: argView }); |
| } |
| |
| // Associated events |
| if (alert.associatedEvents.length) { |
| alert.associatedEvents.forEach(function(event, i) { |
| var linkEl = document.createElement('tr-ui-a-analysis-link'); |
| linkEl.setSelectionAndContent(function() { |
| return event; |
| }, event.title); |
| |
| var valueString = ''; |
| if (event instanceof tr.model.TimedEvent) |
| valueString = 'took ' + event.duration.toFixed(2) + 'ms'; |
| |
| rows.push({ |
| name: linkEl, |
| value: valueString |
| }); |
| }); |
| } |
| |
| // Description |
| var descriptionEl = tr.ui.b.createDiv({ |
| textContent: alert.info.description, |
| maxWidth: '300px' |
| }); |
| rows.push({ |
| name: 'Description', |
| value: descriptionEl |
| }); |
| |
| // Additional Reading Links |
| if (alert.info.docLinks) { |
| alert.info.docLinks.forEach(function(linkObject) { |
| var linkEl = document.createElement('a'); |
| linkEl.target = '_blank'; |
| linkEl.href = linkObject.href; |
| linkEl.textContent = linkObject.textContent; |
| rows.push({ |
| name: linkObject.label, |
| value: linkEl |
| }); |
| }); |
| } |
| return rows; |
| }, |
| |
| getRowsForAlerts_: function(alerts) { |
| if (alerts.length == 1) { |
| var rows = [{ |
| name: 'Alert', |
| value: alerts[0].title |
| }]; |
| var detailRows = this.getRowsForSingleAlert_(alerts[0]); |
| rows.push.apply(rows, detailRows); |
| return rows; |
| } else { |
| return alerts.map(function(alert) { |
| return { |
| name: 'Alert', |
| value: alert.title, |
| isExpanded: alerts.size < 10, // This is somewhat arbitrary for now. |
| subRows: this.getRowsForSingleAlert_(alert) |
| }; |
| }, this); |
| } |
| }, |
| |
| updateContents_: function() { |
| if (this.currentSelection_ === undefined) { |
| this.$.table.rows = []; |
| this.$.table.rebuild(); |
| return; |
| } |
| |
| var alerts = this.currentSelection_; |
| this.$.table.tableRows = this.getRowsForAlerts_(alerts); |
| this.$.table.rebuild(); |
| }, |
| |
| get relatedEventsToHighlight() { |
| if (!this.currentSelection_) |
| return undefined; |
| return this.currentSelection_[0].associatedEvents; |
| } |
| }); |
| </script> |
| </polymer-element> |
