| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright 2015 The Chromium Authors. All rights reserved. | 2 Copyright 2015 The Chromium Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style license that can be | 3 Use of this source code is governed by a BSD-style license that can be |
| 4 found in the LICENSE file. | 4 found in the LICENSE file. |
| 5 --> | 5 --><html><head><link rel="import" href="ct-party-time.html"> |
| 6 | |
| 7 <link rel="import" href="ct-party-time.html"> | |
| 8 <link rel="import" href="ct-time-series-failure-card-buttons.html"> | 6 <link rel="import" href="ct-time-series-failure-card-buttons.html"> |
| 9 <link rel="import" href="../appengine_module/components/net.html"> | 7 <link rel="import" href="../appengine_module/components/net.html"> |
| 10 | 8 |
| 11 <polymer-element name="ct-time-series" attributes="bug"> | 9 <dom-module id="ct-time-series"> |
| 12 <template> | 10 <style> |
| 13 <style> | |
| 14 :host { | 11 :host { |
| 15 background-color: #fffc6c; | 12 background-color: #fffc6c; |
| 16 } | 13 } |
| 17 | 14 |
| 18 #clearAlerts { | 15 #clearAlerts { |
| 19 color: red; | 16 color: red; |
| 20 margin: 10px; | 17 margin: 10px; |
| 21 } | 18 } |
| 22 | 19 |
| 23 .card { | 20 .card { |
| 24 padding: 15px; | 21 padding: 15px; |
| 25 border-bottom: 1px solid lightgrey; | 22 border-bottom: 1px solid lightgrey; |
| 26 display: flex; | 23 display: flex; |
| 27 } | 24 } |
| 28 | 25 |
| 29 .message { | 26 .message { |
| 30 width: auto; | 27 width: auto; |
| 31 padding: 0px 35px; | 28 padding: 0px 35px; |
| 32 float: left; | 29 float: left; |
| 33 } | 30 } |
| 34 | 31 |
| 35 </style> | 32 </style> |
| 36 <template if="{{ alerts.length == 0 }}"> | 33 <template> |
| 34 <template is="dom-if" if="{{computeIf(alerts)}}"> |
| 37 <ct-party-time></ct-party-time> | 35 <ct-party-time></ct-party-time> |
| 38 </template> | 36 </template> |
| 39 <template repeat="{{ alert in alerts }}"> | 37 <template is="dom-repeat" items="{{alerts}}" as="alert"> |
| 40 <div class="card"> | 38 <div class="card"> |
| 41 <div class="message"> | 39 <div class="message"> |
| 42 <a href="{{ alert.playbook }}" target="_blank">Playbook</a><br> | 40 <a target="_blank" href$="{{ alert.playbook }}">Playbook</a><br> |
| 43 <a href="{{ alert.silence }}" target="_blank">Silence</a><br> | 41 <a target="_blank" href$="{{ alert.silence }}">Silence</a><br> |
| 44 <a href="/ts-alerts/{{alert.hash_key}}"> Details </a> | 42 <a href$="{{computeHref(alert)}}"> Details </a> |
| 45 </div> | 43 </div> |
| 46 <ct-time-series-failure-card-buttons key="{{alert.hash_key}}" alerts="{{
alerts}}" bug="{{ alert.bug_id }}"> | 44 <ct-time-series-failure-card-buttons key="{{alert.hash_key}}" alerts="{{
alerts}}" bug="{{ alert.bug_id }}"> |
| 47 </ct-time-series-failure-card-buttons> | 45 </ct-time-series-failure-card-buttons> |
| 48 <div class="message"><b>Error:</b> {{ alert.class_name }}<br> | 46 <div class="message"><b>Error:</b> <span>{{ alert.class_name }}</span><b
r> |
| 49 <b>Trigger Value:</b> {{ alert.trigger_value }}</div> | 47 <b>Trigger Value:</b> <span>{{ alert.trigger_value }}</span></div> |
| 50 <div class="message"><b>Active Since:</b> {{ alert.active_since }}<br> | 48 <div class="message"><b>Active Since:</b> <span>{{ alert.active_since }}
</span><br> |
| 51 <b>Active Time:</b> {{ alert.active_time }}<br> | 49 <b>Active Time:</b> <span>{{ alert.active_time }}</span><br> |
| 52 <b>Alert Sent:</b> {{ alert.alert_sent }}</div> | 50 <b>Alert Sent:</b> <span>{{ alert.alert_sent }}</span></div> |
| 53 <div class="message"> | 51 <div class="message"> |
| 54 <b>Targeted fields:</b><br> | 52 <b>Targeted fields:</b><br> |
| 55 <template repeat="{{ field in _toArray(alert.target_fields)}}"> | 53 <template is="dom-repeat" items="{{_toArray(alert.target_fields)}}" as
="field"> |
| 56 {{ field.k }}: {{ field.v }}<br> | 54 <span>{{ field.k }}</span>: <span>{{ field.v }}</span><br> |
| 57 </template> | 55 </template> |
| 58 <template repeat="{{ field in _toArray(alert.metric_fields)}}"> | 56 <template is="dom-repeat" items="{{_toArray(alert.metric_fields)}}" as
="field"> |
| 59 {{ field.k }}: {{ field.v }}<br> | 57 <span>{{ field.k }}</span>: <span>{{ field.v }}</span><br> |
| 60 </template> | 58 </template> |
| 61 </div> | 59 </div> |
| 62 <template if="{{ alert.bug_id }}"> | 60 <template is="dom-if" if="{{ alert.bug_id }}"> |
| 63 <div class="message"><b>Bug:</b> | 61 <div class="message"><b>Bug:</b> |
| 64 <a href="https://crbug.com/{{alert.bug_id}}">{{ alert.bug_id }}</a><br
> | 62 <a href$="{{computeHref2(alert)}}">{{ alert.bug_id }}</a><br> |
| 65 </div> | 63 </div> |
| 66 </template> | 64 </template> |
| 67 </div> | 65 </div> |
| 68 </template> | 66 </template> |
| 69 <template if="{{ alerts.length != 0 && updated }}" alerts="alerts"> | 67 <template is="dom-if" if="{{computeIf(alerts, updated)}}" alerts="{{computeI
f2(alerts, updated)}}"> |
| 70 <ct-button on-click="{{ toggleDelDialog }}" id="clearAlerts" label="Clear
All Alerts"> | 68 <ct-button on-click=" toggleDelDialog " id="clearAlerts" label="Clear All
Alerts"> |
| 71 </ct-button> | 69 </ct-button> |
| 72 <paper-action-dialog heading="Dismiss all alerts?" transition="paper-trans
ition-center" id="delBugDialog"> | 70 <paper-action-dialog heading="Dismiss all alerts?" transition="paper-trans
ition-center" id="delBugDialog"> |
| 73 <ct-button role="button" dismissive label="Cancel"></ct-button> | 71 <ct-button role="button" dismissive="" label="Cancel"></ct-button> |
| 74 <ct-button on-tap="{{ clearAlerts }}" role="button" affirmative label="D
ismiss"></ct-button> | 72 <ct-button on-tap=" clearAlerts " role="button" affirmative="" label="Di
smiss"></ct-button> |
| 75 </paper-action-dialog> | 73 </paper-action-dialog> |
| 76 </template> | 74 </template> |
| 77 </template> | 75 </template> |
| 78 <script> | 76 <script> |
| 79 | 77 (function () { |
| 80 (function() { | 78 Polymer({ |
| 81 | 79 is: 'ct-time-series', |
| 82 Polymer('ct-time-series', { | 80 properties: { bug: { notify: true } }, |
| 83 | 81 ready: function () { |
| 84 ready: function() { | 82 this.update(); |
| 85 this.update(); | 83 }, |
| 86 }, | 84 update: function () { |
| 87 | 85 var alerts_url = '/ts-alerts'; |
| 88 update: function() { | 86 return net.json(alerts_url).then(function (data) { |
| 89 var alerts_url = '/ts-alerts'; | 87 if (data['redirect-url']) { |
| 90 return net.json(alerts_url).then(function(data) { | 88 url = data['redirect-url']; |
| 91 if (data['redirect-url']) { | 89 url = url.replace('ts-alerts', 'time-series-alerts'); |
| 92 url = data['redirect-url'] | 90 window.location.replace(url); |
| 93 url = url.replace('ts-alerts', 'time-series-alerts'); | 91 } else { |
| 94 window.location.replace(url); | 92 this.alerts = data.alerts; |
| 93 this.updated = true; |
| 94 } |
| 95 }.bind(this)); |
| 96 }, |
| 97 _toArray: function (obj) { |
| 98 if (obj) { |
| 99 return Object.keys(obj).map(function (key) { |
| 100 return { |
| 101 k: key.remove('metric:'), |
| 102 v: obj[key] |
| 103 }; |
| 104 }); |
| 95 } else { | 105 } else { |
| 96 this.alerts = data.alerts; | 106 return []; |
| 97 this.updated = true; | |
| 98 } | 107 } |
| 99 }.bind(this)); | 108 }, |
| 100 }, | 109 toggleDelDialog: function (e, d, target) { |
| 101 | 110 this.$.delBugDialog.toggle(); |
| 102 _toArray: function(obj) { | 111 }, |
| 103 if (obj) { | 112 clearAlerts: function (e, d, target) { |
| 104 return Object.keys(obj).map(function(key) { | 113 var opt = { |
| 105 return {k: key.remove('metric:'), v: obj[key]} | 114 url: '/ts-alerts/all', |
| 115 type: 'DELETE' |
| 116 }; |
| 117 return net.ajax(opt).then(function (response) { |
| 118 console.log(response); |
| 119 this.alerts = []; |
| 120 }.bind(this), function (err) { |
| 121 console.log('Failed to delete: ' + err); |
| 106 }); | 122 }); |
| 107 } else { return []; } | 123 }, |
| 108 }, | 124 computeIf: function (alerts) { |
| 109 | 125 return alerts.length == 0; |
| 110 toggleDelDialog: function(e, d, target) { | 126 }, |
| 111 this.$.delBugDialog.toggle(); | 127 computeIf2: function (alerts, updated) { |
| 112 }, | 128 return alerts.length != 0 && updated; |
| 113 | 129 }, |
| 114 clearAlerts: function(e, d, target) { | 130 computeHref: function (alert) { |
| 115 var opt = { | 131 return '/ts-alerts/' + alert.hash_key; |
| 116 url: '/ts-alerts/all', | 132 }, |
| 117 type: 'DELETE' | 133 computeHref2: function (alert) { |
| 118 }; | 134 return 'https://crbug.com/' + alert.bug_id; |
| 119 return net.ajax(opt).then(function(response) { | 135 } |
| 120 console.log(response); | 136 }); |
| 121 this.alerts = []; | 137 }()); |
| 122 }.bind(this), function(err) { | |
| 123 console.log('Failed to delete: ' + err); | |
| 124 }); | |
| 125 } | |
| 126 | |
| 127 }); | |
| 128 })(); | |
| 129 </script> | 138 </script> |
| 130 </polymer-element> | 139 </dom-module> |
| OLD | NEW |