github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/src/testgrid-failures-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-failures-summary')
     8  export class TestgridFailuresSummary extends LitElement {
     9    @state() showFailureSummary = 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.showFailureSummary ? html`- Hide Alerts -`: html `- Show Alerts -`}
    17          </button>
    18        ${this.showFailureSummary ? html`
    19            <table class="dropdown-menu">
    20              <tr>
    21                <th>Test Name</th>
    22                <th># Fails</th>
    23                <th>First Failed</th>
    24                <th>Last Passed</th>
    25              </tr>
    26              ${map(
    27                this.info?.failuresSummary!.topFailingTests,
    28                (test: any) => html`
    29                  <tr>
    30                    <td>${test.displayName}</td>
    31                    <td>${test.failCount}</td>
    32                    <td>${test.passTimestamp}</td>
    33                    <td>${test.failTimestamp}</td>
    34                  </tr>
    35                `)}
    36            </table>`
    37            : ''}
    38        </div>
    39      `
    40    }
    41    private dropdownTable(){
    42      this.showFailureSummary = !this.showFailureSummary;
    43    }
    44  
    45    static styles = css`
    46      .dropdown-container {
    47        border-left: 1px solid #6b90da;
    48        border-right: 1px solid #6b90da;
    49        border-bottom: 1px solid #6b90da;
    50        border-radius: 0 0 6px 6px;
    51        color: #000;
    52        display: block;
    53        position: relative;
    54      }
    55  
    56      .dropdown-menu {
    57        position: relative;
    58        width: 100%;
    59      }
    60  
    61      .btn {
    62        display: grid;
    63        border-radius: var(--radius);
    64        border: none;
    65        cursor: pointer;
    66        position: relative;
    67        width: 100%;
    68      }
    69  
    70      th {
    71        text-align: left;
    72      }
    73    `
    74  }