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="../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">
     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       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>
     99