| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright 2014 The Chromium Authors. All rights reserved. | 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 | 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-chart.html"> |
| 6 | 6 |
| 7 <link rel="import" href="ct-chart.html"> | 7 <dom-module id="ct-trooper-card"> |
| 8 | 8 <style> |
| 9 <polymer-element name="ct-trooper-card" attributes="group"> | |
| 10 <template> | |
| 11 <style> | |
| 12 :host { | 9 :host { |
| 13 display: flex; | 10 display: flex; |
| 14 } | 11 } |
| 15 | 12 |
| 16 #failure { | 13 #failure { |
| 17 flex: 1; | 14 flex: 1; |
| 18 margin-left: 10px; | 15 margin-left: 10px; |
| 19 } | 16 } |
| 20 | 17 |
| 21 #details { | 18 #details { |
| 22 font-weight: bold; | 19 font-weight: bold; |
| 23 } | 20 } |
| 24 | 21 |
| 25 ::shadow #chart { | 22 ::shadow #chart { |
| 26 height: 100px; | 23 height: 100px; |
| 27 width: 400px; | 24 width: 400px; |
| 28 } | 25 } |
| 29 </style> | 26 </style> |
| 27 <template> |
| 30 <div id="failure"> | 28 <div id="failure"> |
| 31 <div id="details"> | 29 <div id="details"> |
| 32 {{ group.tree }}: {{ group.details }} | 30 <span>{{ group.tree }}</span>: <span>{{ group.details }}</span> |
| 33 </div> | 31 </div> |
| 34 <ct-chart table="{{ table }}" options="{{ options }}" width=400 height=100
></ct-chart> | 32 <ct-chart table="{{ table }}" options="{{ options }}" width="400" height="
100"></ct-chart> |
| 35 </div> | 33 </div> |
| 36 </template> | 34 </template> |
| 37 <script> | 35 <script> |
| 38 Polymer({ | 36 Polymer({ |
| 39 group: null, | 37 is: 'ct-trooper-card', |
| 40 table: null, | 38 properties: { |
| 41 options: null, | 39 group: { |
| 42 fromPercent: function(v) { | 40 value: null, |
| 41 notify: true, |
| 42 observer: 'groupChanged' |
| 43 }, |
| 44 options: { value: null }, |
| 45 table: { value: null } |
| 46 }, |
| 47 fromPercent: function (v) { |
| 43 return Number(v.substring(0, v.length - 1)); | 48 return Number(v.substring(0, v.length - 1)); |
| 44 }, | 49 }, |
| 45 groupChanged: function() { | 50 groupChanged: function () { |
| 46 if (!this.group) { | 51 if (!this.group) { |
| 47 return; | 52 return; |
| 48 } | 53 } |
| 49 switch (this.group.type) { | 54 switch (this.group.type) { |
| 50 case 'cq_latency': | 55 case 'cq_latency': |
| 51 this.table = { | 56 this.table = { |
| 52 labels: ["50th Percentile", "90th Percentile"], | 57 labels: [ |
| 58 '50th Percentile', |
| 59 '90th Percentile' |
| 60 ], |
| 53 datasets: [ | 61 datasets: [ |
| 54 { | 62 { |
| 55 title: 'Limit', | 63 title: 'Limit', |
| 56 fillColor: 'grey', | 64 fillColor: 'grey', |
| 57 data: [60, 180] | 65 data: [ |
| 66 60, |
| 67 180 |
| 68 ] |
| 58 }, | 69 }, |
| 59 { | 70 { |
| 60 title: 'Actual', | 71 title: 'Actual', |
| 61 fillColor: [this.group.data.p50 > 60 ? 'red' : 'green', | 72 fillColor: [ |
| 62 this.group.data.p90 > 180 ? 'red' : 'green'], | 73 this.group.data.p50 > 60 ? 'red' : 'green', |
| 63 data: [this.group.data.p50, this.group.data.p90] | 74 this.group.data.p90 > 180 ? 'red' : 'green' |
| 75 ], |
| 76 data: [ |
| 77 this.group.data.p50, |
| 78 this.group.data.p90 |
| 79 ] |
| 64 } | 80 } |
| 65 ]}; | 81 ] |
| 82 }; |
| 66 break; | 83 break; |
| 67 case 'tree_status': | 84 case 'tree_status': |
| 68 this.table = { | 85 this.table = { |
| 69 labels: ["Tree Status"], | 86 labels: ['Tree Status'], |
| 70 datasets: [ | 87 datasets: [ |
| 71 { | 88 { |
| 72 title: 'Minimum', | 89 title: 'Minimum', |
| 73 fillColor: 'grey', | 90 fillColor: 'grey', |
| 74 data: [80] | 91 data: [80] |
| 75 }, | 92 }, |
| 76 { | 93 { |
| 77 title: 'Actual', | 94 title: 'Actual', |
| 78 fillColor: 'red', | 95 fillColor: 'red', |
| 79 data: [this.group.data.percent_open] | 96 data: [this.group.data.percent_open] |
| 80 } | 97 } |
| 81 ]}; | 98 ] |
| 99 }; |
| 82 break; | 100 break; |
| 83 case 'cycle_time': | 101 case 'cycle_time': |
| 84 this.table = { | 102 this.table = { |
| 85 labels: ["Percent of Builds"], | 103 labels: ['Percent of Builds'], |
| 86 datasets: [ | 104 datasets: [ |
| 87 { | 105 { |
| 88 title: 'Median', | 106 title: 'Median', |
| 89 fillColor: 'orange', | 107 fillColor: 'orange', |
| 90 data: [this.fromPercent(this.group.data.percent_over_median_slo)
] | 108 data: [this.fromPercent(this.group.data.percent_over_median_slo)
] |
| 91 }, | 109 }, |
| 92 { | 110 { |
| 93 title: 'Max', | 111 title: 'Max', |
| 94 fillColor: 'red', | 112 fillColor: 'red', |
| 95 data: [this.fromPercent(this.group.data.percent_over_max_slo)] | 113 data: [this.fromPercent(this.group.data.percent_over_max_slo)] |
| 96 } | 114 } |
| 97 ]}; | 115 ] |
| 116 }; |
| 98 break; | 117 break; |
| 99 case 'cq_false_rejection': | 118 case 'cq_false_rejection': |
| 100 this.table = { | 119 this.table = { |
| 101 labels: ["Hourly", "Weekly"], | 120 labels: [ |
| 121 'Hourly', |
| 122 'Weekly' |
| 123 ], |
| 102 datasets: [ | 124 datasets: [ |
| 103 { | 125 { |
| 104 title: 'Limit', | 126 title: 'Limit', |
| 105 fillColor: 'grey', | 127 fillColor: 'grey', |
| 106 data: [this.group.data.hourly_max, this.group.data.weekly_max] | 128 data: [ |
| 129 this.group.data.hourly_max, |
| 130 this.group.data.weekly_max |
| 131 ] |
| 107 }, | 132 }, |
| 108 { | 133 { |
| 109 title: 'Actual', | 134 title: 'Actual', |
| 110 fillColor: [this.group.data.hourly > this.group.data.hourly_max
? 'red' : 'green', | 135 fillColor: [ |
| 111 this.group.data.weekly > this.group.data.weekly_max ? 'red'
: 'green'], | 136 this.group.data.hourly > this.group.data.hourly_max ? 'red' :
'green', |
| 112 data: [this.group.data.hourly, this.group.data.weekly] | 137 this.group.data.weekly > this.group.data.weekly_max ? 'red' :
'green' |
| 138 ], |
| 139 data: [ |
| 140 this.group.data.hourly, |
| 141 this.group.data.weekly |
| 142 ] |
| 113 } | 143 } |
| 114 ]}; | 144 ] |
| 145 }; |
| 115 break; | 146 break; |
| 116 default: | 147 default: |
| 117 console.error('unknown trooper error type'); | 148 console.error('unknown trooper error type'); |
| 118 return; | 149 return; |
| 119 } | 150 } |
| 120 | |
| 121 this.options = { | 151 this.options = { |
| 122 scaleBeginAtZero: true, | 152 scaleBeginAtZero: true, |
| 123 legend: false, | 153 legend: false, |
| 124 annotateLabel: '<%=v1%>: <%=Math.round(v3)%>', | 154 annotateLabel: '<%=v1%>: <%=Math.round(v3)%>', |
| 125 annotateDisplay: true | 155 annotateDisplay: true |
| 126 } | 156 }; |
| 127 }, | 157 } |
| 128 }); | 158 }); |
| 129 </script> | 159 </script> |
| 130 </polymer-element> | 160 </dom-module> |
| OLD | NEW |