src/third_party/WebKit/Tools/GardeningServer/ui/ct-results-panel.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="../bower_components/core-menu/core-menu.html">
   8 <link rel="import" href="ct-results-by-builder.html">
   9 <link rel="import" href="ct-embedded-flakiness-dashboard.html">
  10 <link rel="import" href="ct-popout-iframe.html">
  11 <link rel="import" href="ct-commit-list.html">
  12
  13 <polymer-element name="ct-results-panel" attributes="group failureGroupKey tree">
  14   <template>
  15     <style>
  16       :host {
  17         display: flex;
  18         flex-direction: column;
  19       }
  20
  21       core-menu > div {
  22         padding: 5px 10px;
  23       }
  24
  25       core-menu > div.core-selected {
  26         font-weight: bold;
  27       }
  28
  29       .message {
  30         margin: 20px;
  31         text-align: center;
  32       }
  33
  34       ct-popout-iframe {
  35         height: 100%;
  36       }
  37
  38       core-menu {
  39         box-shadow: 0 3px 3px #ccc;
  40         flex: none;
  41         /* Override /deep/ selector in core-menu.css. */
  42         margin: 0 !important;
  43         max-height: 20%;
  44         overflow: auto;
  45         /* So the box-shadow goes on top of the results. */
  46         z-index: 1;
  47       }
  48
  49       .results {
  50         flex: 1;
  51         overflow: auto;
  52         /* Stay below the box shadow of the core-menu. */
  53         padding-top: 6px;
  54       }
  55     </style>
  56
  57     <template if="{{ !group.data.url && !group.data.failures.length }}">
  58       <div class="message">{{ loading ? 'Loading...' : 'No results to display.' }}</div>
  59     </template>
  60
  61     <template if="{{ group.data.url }}">
  62       <ct-popout-iframe src="{{ group.data.url }}"></ct-popout-iframe>
  63     </template>
  64
  65     <template if="{{ group.data.failures }}">
  66       <template if="{{ group.data.failures.length }}">
  67         <core-menu selected="{{ selected }}">
  68           <template repeat="{{ failure in group.data.failures }}">
  69             <template if="{{ failure.testName }}">
  70               <div>{{ failure.testName }}</div>
  71             </template>
  72           </template>
  73         </core-menu>
  74       </template>
  75       <div class="results">
  76         <template if="{{ group.data.failures[selected].testName }}">
  77           <ct-embedded-flakiness-dashboard test="{{ group.data.failures[selected] }}"></ct-embedded-flakiness-dashboard>
  78         </template>
  79         <ct-results-by-builder failure="{{ group.data.failures[selected] }}"></ct-results-by-builder>
  80         <ct-commit-list commitList="{{ group.data.commitList }}" detailed="true"></ct-commit-list>
  81       </div>
  82     </template>
  83
  84   </template>
  85   <script>
  86     Polymer({
  87       group: null,
  88       selected: 0,
  89       loading: true,
  90
  91       groupChanged: function() {
  92         if (this.group)
  93           this.loading = false;
  94         this.selected = 0;
  95       },
  96     });
  97   </script>
  98 </polymer-element>