| OLD | NEW |
| (Empty) |
| 1 <!-- | |
| 2 Copyright 2014 The Chromium Authors. All rights reserved. | |
| 3 Use of this source code is governed by a BSD-style license that can be | |
| 4 found in the LICENSE file. | |
| 5 --> | |
| 6 | |
| 7 <link rel="import" href="ct-chart.html"> | |
| 8 | |
| 9 <polymer-element name="ct-trooper-card" attributes="group"> | |
| 10 <template> | |
| 11 <style> | |
| 12 :host { | |
| 13 display: flex; | |
| 14 } | |
| 15 | |
| 16 #failure { | |
| 17 flex: 1; | |
| 18 margin-left: 10px; | |
| 19 } | |
| 20 | |
| 21 #details { | |
| 22 font-weight: bold; | |
| 23 } | |
| 24 | |
| 25 ::shadow #chart { | |
| 26 height: 100px; | |
| 27 width: 400px; | |
| 28 } | |
| 29 </style> | |
| 30 <div id="failure"> | |
| 31 <div id="details"> | |
| 32 {{ group.tree }}: {{ group.details }} | |
| 33 </div> | |
| 34 <ct-chart table="{{ table }}" options="{{ options }}" width=400 height=100
></ct-chart> | |
| 35 </div> | |
| 36 </template> | |
| 37 <script> | |
| 38 Polymer({ | |
| 39 group: null, | |
| 40 table: null, | |
| 41 options: null, | |
| 42 fromPercent: function(v) { | |
| 43 return Number(v.substring(0, v.length - 1)); | |
| 44 }, | |
| 45 groupChanged: function() { | |
| 46 if (!this.group) { | |
| 47 return; | |
| 48 } | |
| 49 switch (this.group.type) { | |
| 50 case 'cq_latency': | |
| 51 this.table = { | |
| 52 labels: ["50th Percentile", "90th Percentile"], | |
| 53 datasets: [ | |
| 54 { | |
| 55 title: 'Limit', | |
| 56 fillColor: 'grey', | |
| 57 data: [60, 180] | |
| 58 }, | |
| 59 { | |
| 60 title: 'Actual', | |
| 61 fillColor: [this.group.data.p50 > 60 ? 'red' : 'green', | |
| 62 this.group.data.p90 > 180 ? 'red' : 'green'], | |
| 63 data: [this.group.data.p50, this.group.data.p90] | |
| 64 } | |
| 65 ]}; | |
| 66 break; | |
| 67 case 'tree_status': | |
| 68 this.table = { | |
| 69 labels: ["Tree Status"], | |
| 70 datasets: [ | |
| 71 { | |
| 72 title: 'Minimum', | |
| 73 fillColor: 'grey', | |
| 74 data: [80] | |
| 75 }, | |
| 76 { | |
| 77 title: 'Actual', | |
| 78 fillColor: 'red', | |
| 79 data: [this.group.data.percent_open] | |
| 80 } | |
| 81 ]}; | |
| 82 break; | |
| 83 case 'cycle_time': | |
| 84 this.table = { | |
| 85 labels: ["Percent of Builds"], | |
| 86 datasets: [ | |
| 87 { | |
| 88 title: 'Median', | |
| 89 fillColor: 'orange', | |
| 90 data: [this.fromPercent(this.group.data.percent_over_median_slo)
] | |
| 91 }, | |
| 92 { | |
| 93 title: 'Max', | |
| 94 fillColor: 'red', | |
| 95 data: [this.fromPercent(this.group.data.percent_over_max_slo)] | |
| 96 } | |
| 97 ]}; | |
| 98 break; | |
| 99 default: | |
| 100 console.error('unknown trooper error type'); | |
| 101 return; | |
| 102 } | |
| 103 | |
| 104 this.options = { | |
| 105 scaleBeginAtZero: true, | |
| 106 legend: false, | |
| 107 annotateLabel: '<%=v1%>: <%=Math.round(v3)%>', | |
| 108 annotateDisplay: true | |
| 109 } | |
| 110 }, | |
| 111 }); | |
| 112 </script> | |
| 113 </polymer-element> | |
| OLD | NEW |