1<!DOCTYPE html>
2<!--
3Copyright (c) 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/base.html">
9<link rel="import" href="/tracing/ui/analysis/analysis_sub_view.html">
10<link rel="import" href="/tracing/ui/base/dom_helpers.html">
11<link rel="import" href="/tracing/ui/base/table.html">
12<link rel="import" href="/tracing/ui/base/ui.html">
13
14<polymer-element name="tr-ui-a-alert-sub-view"
15    extends="tr-ui-a-sub-view">
16  <template>
17    <style>
18    :host {
19      display: flex;
20      flex-direction: column;
21    }
22    #table {
23      flex: 1 1 auto;
24      align-self: stretch;
25    }
26    </style>
27    <tr-ui-b-table id="table">
28    </tr-ui-b-table>
29  </template>
30  <script>
31  'use strict';
32
33  Polymer({
34    ready: function() {
35      this.currentSelection_ = undefined;
36      this.$.table.tableColumns = [
37        {
38          title: 'Label',
39          value: function(row) { return row.name; },
40          width: '150px'
41        },
42        {
43          title: 'Value',
44          width: '100%',
45          value: function(row) { return row.value; }
46        }
47      ];
48      this.$.table.showHeader = false;
49    },
50
51    get selection() {
52      return this.currentSelection_;
53    },
54
55    set selection(selection) {
56      this.currentSelection_ = selection;
57      this.updateContents_();
58    },
59
60    getRowsForSingleAlert_: function(alert) {
61      var rows = [];
62
63      // Arguments
64      for (var argName in alert.args) {
65        var argView =
66            document.createElement('tr-ui-a-generic-object-view');
67        argView.object = alert.args[argName];
68        rows.push({ name: argName, value: argView });
69      }
70
71      // Associated events
72      if (alert.associatedEvents.length) {
73        alert.associatedEvents.forEach(function(event, i) {
74          var linkEl = document.createElement('tr-ui-a-analysis-link');
75          linkEl.setSelectionAndContent(function() {
76            return event;
77          }, event.title);
78
79          var valueString = '';
80          if (event instanceof tr.model.TimedEvent)
81            valueString = 'took ' + event.duration.toFixed(2) + 'ms';
82
83          rows.push({
84            name: linkEl,
85            value: valueString
86          });
87        });
88      }
89
90      // Description
91      var descriptionEl = tr.ui.b.createDiv({
92          textContent: alert.info.description,
93          maxWidth: '300px'
94      });
95      rows.push({
96        name: 'Description',
97        value: descriptionEl
98      });
99
100      // Additional Reading Links
101      if (alert.info.docLinks) {
102        alert.info.docLinks.forEach(function(linkObject) {
103          var linkEl = document.createElement('a');
104          linkEl.target = '_blank';
105          linkEl.href = linkObject.href;
106          linkEl.textContent = linkObject.textContent;
107          rows.push({
108            name: linkObject.label,
109            value: linkEl
110          });
111        });
112      }
113      return rows;
114    },
115
116    getRowsForAlerts_: function(alerts) {
117      if (alerts.length == 1) {
118        var rows = [{
119          name: 'Alert',
120          value: alerts[0].title
121        }];
122        var detailRows = this.getRowsForSingleAlert_(alerts[0]);
123        rows.push.apply(rows, detailRows);
124        return rows;
125      } else {
126        return alerts.map(function(alert) {
127          return {
128            name: 'Alert',
129            value: alert.title,
130            isExpanded: alerts.size < 10, // This is somewhat arbitrary for now.
131            subRows: this.getRowsForSingleAlert_(alert)
132          };
133        }, this);
134      }
135    },
136
137    updateContents_: function() {
138      if (this.currentSelection_ === undefined) {
139        this.$.table.rows = [];
140        this.$.table.rebuild();
141        return;
142      }
143
144      var alerts = this.currentSelection_;
145      this.$.table.tableRows = this.getRowsForAlerts_(alerts);
146      this.$.table.rebuild();
147    },
148
149    get relatedEventsToHighlight() {
150      if (!this.currentSelection_)
151        return undefined;
152      return this.currentSelection_[0].associatedEvents;
153    }
154  });
155  </script>
156</polymer-element>
157