| Index: appengine/sheriff_o_matic/ui/ct-trooper-card.html
|
| diff --git a/appengine/sheriff_o_matic/ui/ct-trooper-card.html b/appengine/sheriff_o_matic/ui/ct-trooper-card.html
|
| index c6db3b09b963c7deaf1225c959e74234101d0d91..39e8a179679b819f9019d4e4a64a188f1e7b209b 100644
|
| --- a/appengine/sheriff_o_matic/ui/ct-trooper-card.html
|
| +++ b/appengine/sheriff_o_matic/ui/ct-trooper-card.html
|
| @@ -2,13 +2,10 @@
|
| Copyright 2014 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.
|
| --->
|
| +--><html><head><link rel="import" href="ct-chart.html">
|
|
|
| -<link rel="import" href="ct-chart.html">
|
| -
|
| -<polymer-element name="ct-trooper-card" attributes="group">
|
| - <template>
|
| - <style>
|
| +<dom-module id="ct-trooper-card">
|
| + <style>
|
| :host {
|
| display: flex;
|
| }
|
| @@ -27,46 +24,66 @@ found in the LICENSE file.
|
| width: 400px;
|
| }
|
| </style>
|
| + <template>
|
| <div id="failure">
|
| <div id="details">
|
| - {{ group.tree }}: {{ group.details }}
|
| + <span>{{ group.tree }}</span>: <span>{{ group.details }}</span>
|
| </div>
|
| - <ct-chart table="{{ table }}" options="{{ options }}" width=400 height=100></ct-chart>
|
| + <ct-chart table="{{ table }}" options="{{ options }}" width="400" height="100"></ct-chart>
|
| </div>
|
| </template>
|
| <script>
|
| Polymer({
|
| - group: null,
|
| - table: null,
|
| - options: null,
|
| - fromPercent: function(v) {
|
| + is: 'ct-trooper-card',
|
| + properties: {
|
| + group: {
|
| + value: null,
|
| + notify: true,
|
| + observer: 'groupChanged'
|
| + },
|
| + options: { value: null },
|
| + table: { value: null }
|
| + },
|
| + fromPercent: function (v) {
|
| return Number(v.substring(0, v.length - 1));
|
| },
|
| - groupChanged: function() {
|
| + groupChanged: function () {
|
| if (!this.group) {
|
| return;
|
| }
|
| switch (this.group.type) {
|
| case 'cq_latency':
|
| this.table = {
|
| - labels: ["50th Percentile", "90th Percentile"],
|
| + labels: [
|
| + '50th Percentile',
|
| + '90th Percentile'
|
| + ],
|
| datasets: [
|
| {
|
| title: 'Limit',
|
| fillColor: 'grey',
|
| - data: [60, 180]
|
| + data: [
|
| + 60,
|
| + 180
|
| + ]
|
| },
|
| {
|
| title: 'Actual',
|
| - fillColor: [this.group.data.p50 > 60 ? 'red' : 'green',
|
| - this.group.data.p90 > 180 ? 'red' : 'green'],
|
| - data: [this.group.data.p50, this.group.data.p90]
|
| + fillColor: [
|
| + this.group.data.p50 > 60 ? 'red' : 'green',
|
| + this.group.data.p90 > 180 ? 'red' : 'green'
|
| + ],
|
| + data: [
|
| + this.group.data.p50,
|
| + this.group.data.p90
|
| + ]
|
| }
|
| - ]};
|
| + ]
|
| + };
|
| break;
|
| case 'tree_status':
|
| this.table = {
|
| - labels: ["Tree Status"],
|
| + labels: ['Tree Status'],
|
| datasets: [
|
| {
|
| title: 'Minimum',
|
| @@ -78,11 +95,12 @@ found in the LICENSE file.
|
| fillColor: 'red',
|
| data: [this.group.data.percent_open]
|
| }
|
| - ]};
|
| + ]
|
| + };
|
| break;
|
| case 'cycle_time':
|
| this.table = {
|
| - labels: ["Percent of Builds"],
|
| + labels: ['Percent of Builds'],
|
| datasets: [
|
| {
|
| title: 'Median',
|
| @@ -94,37 +112,49 @@ found in the LICENSE file.
|
| fillColor: 'red',
|
| data: [this.fromPercent(this.group.data.percent_over_max_slo)]
|
| }
|
| - ]};
|
| + ]
|
| + };
|
| break;
|
| case 'cq_false_rejection':
|
| this.table = {
|
| - labels: ["Hourly", "Weekly"],
|
| + labels: [
|
| + 'Hourly',
|
| + 'Weekly'
|
| + ],
|
| datasets: [
|
| {
|
| title: 'Limit',
|
| fillColor: 'grey',
|
| - data: [this.group.data.hourly_max, this.group.data.weekly_max]
|
| + data: [
|
| + this.group.data.hourly_max,
|
| + this.group.data.weekly_max
|
| + ]
|
| },
|
| {
|
| title: 'Actual',
|
| - fillColor: [this.group.data.hourly > this.group.data.hourly_max ? 'red' : 'green',
|
| - this.group.data.weekly > this.group.data.weekly_max ? 'red' : 'green'],
|
| - data: [this.group.data.hourly, this.group.data.weekly]
|
| + fillColor: [
|
| + this.group.data.hourly > this.group.data.hourly_max ? 'red' : 'green',
|
| + this.group.data.weekly > this.group.data.weekly_max ? 'red' : 'green'
|
| + ],
|
| + data: [
|
| + this.group.data.hourly,
|
| + this.group.data.weekly
|
| + ]
|
| }
|
| - ]};
|
| + ]
|
| + };
|
| break;
|
| default:
|
| console.error('unknown trooper error type');
|
| return;
|
| }
|
| -
|
| this.options = {
|
| scaleBeginAtZero: true,
|
| legend: false,
|
| annotateLabel: '<%=v1%>: <%=Math.round(v3)%>',
|
| annotateDisplay: true
|
| - }
|
| - },
|
| + };
|
| + }
|
| });
|
| </script>
|
| -</polymer-element>
|
| +</dom-module>
|
|
|