github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/src/tab-summary.ts (about)

     1  import { LitElement, html, css } from 'lit';
     2  import { map } from 'lit/directives/map.js';
     3  // eslint-disable-next-line @typescript-eslint/no-unused-vars
     4  import { customElement, property } from 'lit/decorators.js';
     5  import { TabSummaryInfo } from './testgrid-dashboard-summary';
     6  import './testgrid-failures-summary';
     7  import './testgrid-healthiness-summary';
     8  
     9  @customElement('tab-summary')
    10  // eslint-disable-next-line @typescript-eslint/no-unused-vars
    11  export class TabSummary extends LitElement {
    12    @property({ type: Object })
    13    info?: TabSummaryInfo;
    14  
    15    render() {
    16      return html`
    17        <link
    18          rel="stylesheet"
    19          href="https://fonts.googleapis.com/icon?family=Material+Icons"
    20        />
    21        <div class="tab">
    22          <div class="left">
    23            <div class="icon-wrapper">
    24              <i class="material-icons ${this.info?.overallStatus}"
    25                >${this.info?.icon}</i
    26              >
    27            </div>
    28          </div>
    29          <div class="mid">
    30            <div @click=${() => this.changeTab()} class="tab-name">
    31              ${this.info?.name}: ${this.info?.overallStatus}
    32            </div>
    33            <div class="detailed-status">${this.info?.detailedStatusMsg}</div>
    34          </div>
    35          <div class="right">
    36            <div class="stats">
    37              Last update: ${this.info?.lastUpdateTimestamp}
    38            </div>
    39            <div class="stats">
    40              Tests last ran: ${this.info?.lastRunTimestamp}
    41            </div>
    42            <div class="stats">
    43              Last green run: ${this.info?.latestGreenBuild}
    44            </div>
    45          </div>
    46        </div>
    47        ${this.info?.failuresSummary !== undefined ?
    48          html `<testgrid-failures-summary .info=${this.info}>
    49          </testgrid-failures-summary>`:''}
    50        ${this.info?.healthinessSummary !== undefined ?
    51          html `<testgrid-healthiness-summary .info=${this.info}>
    52          </testgrid-healthiness-summary>`:''}
    53      `;
    54    }
    55    /**
    56     * Lets the data content element know that the tab changed
    57     *
    58     * @fires tab-changed
    59     * @param tabName string
    60     */
    61    private changeTab(){
    62      window.dispatchEvent(new CustomEvent('tab-changed',{
    63        detail: {
    64          tabName: this.info?.name!
    65        },
    66      }))
    67    }
    68  
    69    static styles = css`
    70      .tab-name { // title/link in each Summary card
    71        cursor: pointer;
    72        position: relative;
    73        padding: 4px 8px;
    74        color: #00c;
    75        text-decoration: underline;
    76      }
    77  
    78      .tab {
    79        border: 1px solid #6b90da;
    80        border-radius: 6px 6px 0 0;
    81        color: #000;
    82        display: grid;
    83        grid-template-columns: 1fr 17fr 6fr;
    84        margin-top: 5px;
    85        overflow: hidden;
    86        align-items: center;
    87      }
    88  
    89      .tab-name { // title/link in each Summary card
    90        cursor: pointer;
    91        position: relative;
    92        padding: 4px 8px;
    93        color: #00c;
    94        text-decoration: underline;
    95      }
    96  
    97      .stats {
    98        text-align: right;
    99      }
   100  
   101      .left {
   102        justify-content: center;
   103        text-align: center;
   104      }
   105  
   106      .material-icons {
   107        font-size: 2em;
   108        color: #fff;
   109      }
   110  
   111      .PENDING {
   112        background-color: #cc8200;
   113      }
   114  
   115      .PASSING {
   116        background-color: #0c3;
   117      }
   118  
   119      .FAILING {
   120        background-color: #a00;
   121      }
   122  
   123      .FLAKY {
   124        background-color: #609;
   125      }
   126  
   127      .ACCEPTABLE {
   128        background-color: #39a2ae;
   129      }
   130  
   131      .STALE {
   132        background-color: #808b96;
   133      }
   134  
   135      .BROKEN {
   136        background-color: #000;
   137      }
   138    `;
   139  
   140  }