Home | History | Annotate | Download | only in ui 
      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>
    114