Index: dashboard/dashboard/elements/bug-details.html |
diff --git a/dashboard/dashboard/elements/bug-details.html b/dashboard/dashboard/elements/bug-details.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9e7e470099751da19c97e2696d1cc7a7fcdd71f8 |
--- /dev/null |
+++ b/dashboard/dashboard/elements/bug-details.html |
@@ -0,0 +1,154 @@ |
+<!DOCTYPE html> |
+<!-- |
+Copyright 2017 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="/components/polymer/polymer.html"> |
+ |
+<link rel="import" href="/dashboard/static/simple_xhr.html"> |
+ |
+<dom-module id="bug-details"> |
+ <style> |
+ .error { |
+ color: #dd4b39; |
+ font-weight: bold; |
+ } |
+ |
+ #loading-spinner { |
+ width: 100%; |
+ display: flex; |
+ justify-content: center; |
+ } |
+ |
+ .container { |
+ padding: 20px; |
+ background-color: #eaeaea; |
+ border-radius: 4px; |
+ margin: 20px; |
+ width: 600px; |
+ } |
+ |
+ .bordered-cell { |
+ border: 1px solid #a8a8a8; |
+ border-radius: 4px; |
+ } |
+ |
+ td { |
+ padding-left, padding-right: 10px; |
+ } |
+ </style> |
+ <template> |
+ <template is="dom-if" if="{{loading}}"> |
+ <div id="loading-spinner"><img src="//www.google.com/images/loading.gif"></div> |
+ </template> |
+ <template is="dom-if" if="{{!loading}}"> |
+ <table class="container"> |
+ <tr><th colspan="2">Bug <a href="http://crbug.com/{{bugId}}" target="_blank">{{bugId}}</a></th></tr> |
+ <template is="dom-if" if="{{error}}"> |
+ <tr><td colspan="2" class="error">Could not load bug {{bugId}}. {{error}}</td></tr> |
+ </template> |
+ <template is="dom-if" if="{{!error}}"> |
+ <tr><td colspan="2">{{summary}}</td></tr> |
+ <tr><td>Filed</td><td>{{formatDate(published)}}</td></tr> |
+ <tr><td>Owner</td><td>{{owner}}</td></tr> |
+ <tr><td>State</td><td>{{state}}</td></tr> |
+ <tr><td>Status</td><td>{{status}}</td></tr> |
+ <template is="dom-if" if="{{bisects.length}}"> |
+ <tr> |
+ <td class="bordered-cell">Bisects</td> |
+ <td class="bordered-cell"><ul><template is="dom-repeat" items="{{bisects}}"> |
+ <li><a href="{{item.buildbucket_link}}">{{item.metric}} on {{item.bot}}</a>: {{item.status}} |
+ </template></ul></td> |
+ </tr> |
+ </template> |
+ <template is="dom-if" if="{{reviewUrls.length}}"> |
+ <tr> |
+ <td class="bordered-cell">Changelists</td> |
+ <td class="bordered-cell"><ul><template is="dom-repeat" items="{{reviewUrls}}"> |
+ <li><a href="{{item}}">{{item}}</a> |
+ </template></ul></td> |
+ </tr> |
+ </template> |
+ </template> |
+ </table> |
+ </template> |
+ </template> |
+ <script> |
+ 'use strict'; |
+ Polymer({ |
+ is: 'bug-details', |
+ properties: { |
+ bisects: { |
+ notify: true, |
+ type: Array |
+ }, |
+ bugId: { |
+ notify: true, |
+ type: Number |
+ }, |
+ comments: { |
+ notify: true, |
+ type: Array |
+ }, |
+ error: { |
+ notify: true, |
+ type: Boolean, |
+ value: false |
+ }, |
+ loading: { |
+ notify: true, |
+ type: Boolean, |
+ value: true |
+ }, |
+ owner: { |
+ notify: true, |
+ type: String |
+ }, |
+ published: { |
+ notify: true |
+ }, |
+ reviewUrls: { |
+ notify: true, |
+ type: Array |
+ }, |
+ state: { |
+ notify: true, |
+ type: String |
+ }, |
+ status: { |
+ notify: true, |
+ type: String |
+ }, |
+ summary: { |
+ notify: true, |
+ type: String |
+ } |
+ }, |
+ |
+ formatDate: d => d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate(), |
+ |
+ attached: function() { |
+ var params = { |
+ 'bug_id': this.bugId |
+ }; |
+ simple_xhr.send('/bug_details', params, |
+ response => { |
+ this.bisects = response['bisects']; |
+ this.comments = response['comments']; |
+ this.owner = response['owner']; |
+ this.published = new Date(response['published']); |
+ this.reviewUrls = response['review_urls']; |
+ this.state = response['state']; |
+ this.status = response['status']; |
+ this.summary = response['summary']; |
+ this.loading = false; |
+ }, |
+ errorMsg => { |
+ this.error = errorMsg; |
+ this.loading = false; |
+ }); |
+ } |
+ }); |
+ </script> |
+</dom-module> |