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

     1  import { LitElement, html, css } from 'lit';
     2  // eslint-disable-next-line @typescript-eslint/no-unused-vars
     3  import { customElement, property, state } from 'lit/decorators.js';
     4  import { TabSummaryInfo } from './testgrid-dashboard-summary';
     5  import { map } from 'lit/directives/map.js';
     6  
     7  @customElement('testgrid-healthiness-summary')
     8  export class TestgridTabTable extends LitElement {
     9    @state() showHealthinesSummary = false;
    10    @property() info?: TabSummaryInfo;
    11  
    12    render() {
    13      return html`
    14      <div class="dropdown-container">
    15          <button @click="${() => this.dropdownTable()}" class="btn">
    16            ${this.showHealthinesSummary ? html`- Hide Healthiness Report -`: html `- Show Healthiness Report -`}
    17          </button>
    18        ${this.showHealthinesSummary ? html`
    19            <table class="dropdown-menu">
    20              <tr>
    21                <th>Test Name</th>
    22                <th>Flakiness (Previous)</th>
    23                <th>Flakiness (Current)</th>
    24                <th>Trend</th>
    25                <th>Infra Failure Rate</th>
    26                <th>Flaky Tests Count</th>
    27              </tr>
    28              ${map(
    29                this.info?.healthinessSummary!.topFlakyTests,
    30                (test: any) => html`
    31                  <tr>
    32                    <td>${test.displayName}</td>
    33                    <td>${this.info?.healthinessSummary?.healthinessStats.previousFlakiness}</td>
    34                    <td>${this.info?.healthinessSummary?.healthinessStats.averageFlakiness}</td>
    35                    <td>N/A</td>
    36                    <td>${test.flakiness}</td>
    37                    <td>${this.info?.healthinessSummary?.healthinessStats.numFlakyTests}</td>
    38                  </tr>
    39                `)}
    40            </table>`
    41            : ''}
    42        </div>
    43      `
    44    }
    45    private dropdownTable(){
    46      this.showHealthinesSummary = !this.showHealthinesSummary;
    47    }
    48  
    49    static styles = css`
    50      .dropdown-container {
    51        border-left: 1px solid #6b90da;
    52        border-right: 1px solid #6b90da;
    53        border-bottom: 1px solid #6b90da;
    54        border-radius: 0 0 6px 6px;
    55        color: #000;
    56        display: block;
    57        position: relative;
    58      }
    59  
    60      .dropdown-menu {
    61        position: relative;
    62        width: 100%;
    63      }
    64  
    65      .btn {
    66        display: grid;
    67        border-radius: var(--radius);
    68        border: none;
    69        cursor: pointer;
    70        position: relative;
    71        width: 100%;
    72      }
    73  
    74      th {
    75        text-align: left;
    76      }
    77    `
    78  }