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

     1  import { LitElement, html, PropertyValues } from "lit";
     2  import { map } from "lit/directives/map.js";
     3  import { customElement, property, state } from "lit/decorators.js";
     4  import { ListHeadersResponse, ListRowsResponse, ListRowsResponse_Row } from './gen/pb/api/v1/data.js';
     5  import './testgrid-grid-row';
     6  import './testgrid-grid-header-row';
     7  
     8  /**
     9   * Class definition for `testgrid-grid` component.
    10   * Renders the test results grid.
    11   */
    12  @customElement('testgrid-grid')
    13  export class TestgridGrid extends LitElement {
    14  
    15    @property({ type: String, reflect: true })
    16    dashboardName: String = '';
    17  
    18    @property({ type: String, reflect: true })
    19    tabName: String = '';
    20  
    21    @state()
    22    tabGridRows: Array<ListRowsResponse_Row> = [];
    23  
    24    @state()
    25    tabGridHeaders: ListHeadersResponse;
    26  
    27    /**
    28     * Lit-element lifecycle method.
    29     * Invoked when element properties are changed.
    30     */
    31    willUpdate(changedProperties: PropertyValues<this>) {
    32      if (changedProperties.has('tabName')) {
    33        this.fetchTabGrid();
    34      }
    35    }
    36  
    37    /**
    38     * Lit-element lifecycle method.
    39     * Invoked on each update to perform rendering tasks.
    40     */
    41    render() {
    42      return html`
    43      <testgrid-grid-header-row .headers="${this.tabGridHeaders}"></testgrid-grid-header-row>
    44      ${map(this.tabGridRows,
    45        (row: ListRowsResponse_Row) => html`<testgrid-grid-row .name="${row.name}" .rowData="${row}"></testgrid-grid-row>`
    46      )}
    47      `;
    48    }
    49  
    50    private async fetchTabGrid() {
    51      this.fetchTabGridRows();
    52      this.fetchTabGridHeaders();
    53    }
    54  
    55    private async fetchTabGridRows() {
    56      this.tabGridRows = [];
    57      try {
    58        const response = await fetch(
    59          `http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboards/${this.dashboardName}/tabs/${this.tabName}/rows`
    60        );
    61        if (!response.ok) {
    62          throw new Error(`HTTP error: ${response.status}`);
    63        }
    64        const data = ListRowsResponse.fromJson(await response.json());
    65        var rows: Array<ListRowsResponse_Row> = [];
    66        data.rows.forEach(row => rows.push(row));
    67        this.tabGridRows = rows;
    68      } catch (error) {
    69        console.error(`Could not get grid rows: ${error}`);
    70      }
    71    }
    72  
    73    private async fetchTabGridHeaders() {
    74      try {
    75        const response = await fetch(
    76          `http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboards/${this.dashboardName}/tabs/${this.tabName}/headers`
    77        );
    78        if (!response.ok) {
    79          throw new Error(`HTTP error: ${response.status}`);
    80        }
    81        const data = ListHeadersResponse.fromJson(await response.json());
    82        this.tabGridHeaders = data;
    83      } catch (error) {
    84        console.error(`Could not get grid headers: ${error}`);
    85      }
    86    }
    87  }