src/third_party/WebKit/Tools/GardeningServer/ui/ct-sheriff-o-matic.html

   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="../lib/sugar.html">
   8 <script src="../scripts/results.js"></script>
   9
  10 <link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
  11 <link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">
  12 <link rel="import" href="../lib/analytics.html">
  13 <link rel="import" href="../lib/ct-scheduled-updater.html">
  14 <link rel="import" href="../model/ct-commit-log.html">
  15 <link rel="import" href="../model/ct-failures.html">
  16 <link rel="import" href="../model/ct-tree-list.html">
  17 <link rel="import" href="ct-results-panel.html">
  18 <link rel="import" href="ct-router.html">
  19 <link rel="import" href="ct-tree-select.html">
  20 <link rel="import" href="ct-unexpected-failures.html">
  21 <link rel="import" href="ct-view.html">
  22 <link rel="import" href="ct-view-handler.html">
  23
  24 <polymer-element name="ct-sheriff-o-matic">
  25   <template>
  26     <style>
  27       :host {
  28         display: flex;
  29         flex-direction: column;
  30         height: 100%;
  31       }
  32       header {
  33         -webkit-user-select: none;
  34         align-items: center;
  35         background-color: #212121;
  36         color: white;
  37         cursor: default;
  38         display: flex;
  39         flex-wrap: wrap;
  40         justify-content: space-between;
  41         font-size: 1.1em;
  42         padding: 0 5px;
  43         white-space: nowrap;
  44       }
  45       header span {
  46         color: white;
  47         display: inline-block;
  48         padding: 0.25em 4px;
  49         text-decoration: none;
  50       }
  51       #right-toolbar {
  52         display: flex;
  53         flex-wrap: wrap;
  54         align-items: center;
  55       }
  56       ct-last-updated {
  57         margin: 0 5px;
  58       }
  59       core-animated-pages {
  60         flex: 1;
  61       }
  62       core-animated-pages > * {
  63         overflow: auto;
  64       }
  65       ct-router {
  66         flex: 1;
  67       }
  68     </style>
  69     <ct-view-handler></ct-view-handler>
  70
  71     <header>
  72       <div>
  73         <a href="{{ tree }}"><img src="../favicon.ico"> <span>Sheriff-o-matic</span></a>
  74       </div>
  75       <div id="right-toolbar">
  76         <ct-last-updated date="{{ failures.lastUpdateDate }}"></ct-last-updated>
  77         <ct-tree-select tree="{{ tree }}" treeList="{{ treeList }}"></ct-tree-select>
  78       </div>
  79     </header>
  80
  81     <ct-router id="router" defaultPath="{{ _defaultPath }}">
  82       <ct-view path="/{tree}" default>
  83         <ct-unexpected-failures id="unexpected" tree="{{ tree }}" commitLog="{{ commitLog }}" failures="{{ failures }}"></ct-unexpected-failures>
  84       </ct-view>
  85       <ct-view path="/{tree}/failure/{failureGroupKey}">
  86         <ct-results-panel id="resultsPanel" group="{{ examinedFailureGroup }}" failureGroupKey="{{ failureGroupKey }}" tree="{{ tree }}"></ct-results-panel>
  87       </ct-view>
  88     </ct-router>
  89   </template>
  90   <script>
  91     var kUpdateFrequency = 1000 * 30;
  92
  93     Polymer({
  94       tree: '',
  95       treeList: null,
  96       examinedFailureGroup: null,
  97       _pendingFailureGroupKey: '',
  98
  99       created: function() {
 100         this.treeList = new CTTreeList();
 101         this._defaultPath = '/' + this.treeList.defaultValue();
 102         this.commitLog = new CTCommitLog();
 103         this.failures = new CTFailures(this.commitLog);
 104         this._updater = new CTScheduledUpdater(this.update.bind(this), kUpdateFrequency);
 105         this._analytics = new Analytics('UA-55762617-1');
 106       },
 107
 108       ready: function() {
 109         this.update();
 110       },
 111
 112       update: function() {
 113         if (this._promise)
 114           return;
 115
 116         this._promise = Promise.all(
 117           [this.commitLog.update(),
 118            this.failures.update()]).then(this._updateCompleted.bind(this));
 119       },
 120
 121       failureGroupKeyChanged: function() {
 122         this.examinedFailureGroup = null;
 123         this._pendingFailureGroupKey = this.failureGroupKey;
 124         this._updateCompleted();
 125       },
 126
 127       _updateCompleted: function() {
 128         this._promise = null;
 129         this.$.unexpected.update();
 130
 131         if (!this.failures.failures)
 132           return;
 133         if (!this._pendingFailureGroupKey)
 134           return;
 135
 136         this.examinedFailureGroup = this.failures.failures[this.tree].find(function(group) {
 137           return group.key == this._pendingFailureGroupKey;
 138         }.bind(this));
 139
 140         if (!this.examinedFailureGroup) {
 141           this.asyncFire('navigate', {
 142             url: this.tree,
 143             replaceState: true
 144           });
 145         }
 146
 147         this._pendingFailureGroupKey = '';
 148       },
 149     });
 150   </script>
 151 </polymer-element>