github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/src/testgrid-data-content.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 { map } from 'lit/directives/map.js';
     5  import { when } from 'lit/directives/when.js';
     6  import { navigateTab } from './utils/navigation.js';
     7  import { ListDashboardTabsResponse } from './gen/pb/api/v1/data.js';
     8  import '@material/mwc-tab';
     9  import '@material/mwc-tab-bar';
    10  import './testgrid-dashboard-summary';
    11  import './testgrid-grid';
    12  
    13  /**
    14   * Class definition for the `testgrid-data-content` element.
    15   * Acts as a container for dashboard summary or grid data.
    16   */
    17  @customElement('testgrid-data-content')
    18  // eslint-disable-next-line @typescript-eslint/no-unused-vars
    19  export class TestgridDataContent extends LitElement {
    20  
    21    @state()
    22    tabNames: string[] = [];
    23  
    24    @state()
    25    activeIndex = 0;
    26  
    27    @property({ type: Boolean })
    28    showTab = false;
    29  
    30    @property({ type: String })
    31    dashboardName = '';
    32  
    33    @property({ type: String })
    34    tabName?: string;
    35  
    36    // set the functionality when any tab is clicked on
    37    private onTabActivated(event: CustomEvent<{index: number}>) {
    38      const tabIndex = event.detail.index;
    39  
    40      if (tabIndex === this.activeIndex){
    41        return
    42      }
    43  
    44      this.tabName = this.tabNames[tabIndex];
    45  
    46      if (this.activeIndex === 0 || tabIndex === 0){
    47        this.showTab = !this.showTab;
    48      }
    49      this.activeIndex = tabIndex;
    50      navigateTab(this.dashboardName, this.tabName)
    51    }
    52  
    53    /**
    54     * Lit-element lifecycle method.
    55     * Invoked when a component is added to the document's DOM.
    56     */
    57    connectedCallback() {
    58      super.connectedCallback();
    59      this.fetchTabNames();
    60      window.addEventListener('tab-changed', (evt: Event) => {
    61        this.tabName = (<CustomEvent>evt).detail.tabName;
    62        this.showTab = !this.showTab;
    63        this.highlightIndex(this.tabName);
    64        navigateTab(this.dashboardName, this.tabName!);
    65      });
    66      window.addEventListener('popstate', () => {
    67        console.log(location.pathname);
    68        console.log(location.pathname.split('/'));
    69        if (location.pathname.split('/').length === 2){
    70          this.showTab = false;
    71          this.tabName = undefined;
    72          this.highlightIndex(this.tabName);
    73          navigateTab(this.dashboardName, this.tabName!);
    74        }
    75      })
    76    }
    77  
    78    /**
    79     * Lit-element lifecycle method.
    80     * Invoked on each update to perform rendering tasks.
    81     */
    82    render() {
    83      var tabBar = html`${
    84        // make sure we only render the tabs when there are tabs
    85        when(this.tabNames.length > 0, () => html`
    86          <mwc-tab-bar .activeIndex=${this.activeIndex} @MDCTabBar:activated="${this.onTabActivated}">
    87            ${map(
    88              this.tabNames,(name: string) => html`<mwc-tab label=${name}></mwc-tab>`
    89            )}
    90          </mwc-tab-bar>`)
    91      }`;
    92      return html`
    93        ${tabBar}
    94        ${!this.showTab ?
    95          html`<testgrid-dashboard-summary .dashboardName=${this.dashboardName}></testgrid-dashboard-summary>` :
    96          html`<testgrid-grid .dashboardName=${this.dashboardName} .tabName=${this.tabName}></testgrid-grid>`}
    97      `;
    98    }
    99  
   100    // fetch the tab names to populate the tab bar
   101    private async fetchTabNames() {
   102      try {
   103        const response = await fetch(
   104          `http://${process.env.API_HOST}:${process.env.API_PORT}/api/v1/dashboards/${this.dashboardName}/tabs`
   105        );
   106        if (!response.ok) {
   107          throw new Error(`HTTP error: ${response.status}`);
   108        }
   109        const data = ListDashboardTabsResponse.fromJson(await response.json());
   110        var tabNames: string[] = ['Summary'];
   111        data.dashboardTabs.forEach(tab => {
   112          tabNames.push(tab.name);
   113        });
   114        this.tabNames = tabNames;
   115        this.highlightIndex(this.tabName);
   116      } catch (error) {
   117        console.error(`Could not get dashboard summaries: ${error}`);
   118      }
   119    }
   120  
   121    // identify which tab to highlight on the tab bar
   122    private highlightIndex(tabName: string | undefined) {
   123      if (tabName === undefined){
   124        this.activeIndex = 0;
   125        return
   126      }
   127      var index = this.tabNames.indexOf(tabName);
   128      if (index > -1){
   129        this.activeIndex = index;
   130      }
   131    }
   132  
   133    static styles = css`
   134      mwc-tab{
   135        --mdc-typography-button-letter-spacing: 0;
   136        --mdc-tab-horizontal-padding: 12px;
   137        --mdc-typography-button-font-size: 0.8rem;
   138      }
   139  `;
   140  }