Update grid component with header rows and hardcoded links.

web/.npmrc

@@ -1 +1,2 @@
-shamefully-hoist=true
+public-hoist-pattern[]=*
+public-hoist-pattern[]=!*lit*

web/package.json

@@ -21,14 +21,15 @@
   },
   "dependencies": {
     "@lit-labs/router": "^0.1.1",
+    "@lit/context": "^1.1.3",
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-tab": "^0.27.0",
     "@material/mwc-tab-bar": "^0.27.0",
     "@protobuf-ts/plugin": "^2.8.3",
     "@web/test-runner-playwright": "^0.9.0",
     "json-server": "^0.17.3",
-    "lit": "^2.7.0"
+    "lit": "^3.2.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.4",

web/src/APIClient.ts

@@ -15,7 +15,7 @@ export class APIClientImpl implements APIClient {
     const dashboards: Array<String> = [];
 
     fetch(`${this.host}/api/v1/dashboards`).then(async response => {
-      const resp = ListDashboardsResponse.fromJson(await response.json());
+      const resp = ListDashboardsResponse.fromJson(await response.json(), {ignoreUnknownFields: true});
       resp.dashboards.forEach(db => {
         dashboards.push(db.name);
       });
@@ -28,7 +28,7 @@ export class APIClientImpl implements APIClient {
     const dashboardGroups: Array<String> = [];
 
     fetch(`${this.host}/api/v1/dashboard-groups`).then(async response => {
-      const resp = ListDashboardGroupsResponse.fromJson(await response.json());
+      const resp = ListDashboardGroupsResponse.fromJson(await response.json(), {ignoreUnknownFields: true});
       resp.dashboardGroups.forEach(db => {
         dashboardGroups.push(db.name);
       });

web/src/testgrid-app.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import './testgrid-router';
 
@@ -8,6 +8,14 @@ import './testgrid-router';
  */
 @customElement('testgrid-app')
 export class TestgridApp extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      width: 100vw;
+      height: 100vh;
+    }
+  `;
+
   /**
    * Lit-element lifecycle method.
    * Invoked on each update to perform rendering tasks.

web/src/testgrid-context.ts

@@ -0,0 +1,5 @@
+import {createContext} from '@lit/context';
+import { TestGridLinkTemplate } from './utils/link-template';
+
+export { TestGridLinkTemplate } from './utils/link-template';
+export const linkContext = createContext<TestGridLinkTemplate>('testgrid-link-context');

web/src/testgrid-dashboard-summary.ts

@@ -3,7 +3,7 @@ import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { Timestamp } from './gen/google/protobuf/timestamp.js';
-import { FailuresSummary, ListTabSummariesResponse, TabSummary } from './gen/pb/api/v1/data.js';
+import { ListTabSummariesResponse, TabSummary } from './gen/pb/api/v1/data.js';
 import './tab-summary.js';
 
 export interface TabSummaryInfo {
@@ -161,7 +161,7 @@ export class TestgridDashboardSummary extends LitElement {
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
-      const data = ListTabSummariesResponse.fromJson(await response.json());
+      const data = ListTabSummariesResponse.fromJson(await response.json(), {ignoreUnknownFields: true});
       const tabSummaries: Array<TabSummaryInfo> = [];
       data.tabSummaries.forEach(ts => {
         const si = convertResponse(ts);

web/src/testgrid-data-content.ts

@@ -3,8 +3,10 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
+import { provide } from '@lit/context';
 import { navigateTab } from './utils/navigation.js';
 import { ListDashboardTabsResponse } from './gen/pb/api/v1/data.js';
+import { type TestGridLinkTemplate, linkContext } from './testgrid-context.js';
 import '@material/mwc-tab';
 import '@material/mwc-tab-bar';
 import './testgrid-dashboard-summary';
@@ -17,6 +19,21 @@ import './testgrid-grid';
 @customElement('testgrid-data-content')
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class TestgridDataContent extends LitElement {
+  static styles = css`
+    :host {
+      display: grid;
+      grid-template-rows: minmax(1em, auto) minmax(0, 100%);
+      width: 100%;
+      height: 100%;
+    }
+
+    mwc-tab {
+      --mdc-typography-button-letter-spacing: 0;
+      --mdc-tab-horizontal-padding: 12px;
+      --mdc-typography-button-font-size: 0.8rem;
+    }
+  `;
+
   @state()
   tabNames: string[] = [];
 
@@ -32,6 +49,9 @@ export class TestgridDataContent extends LitElement {
   @property({ type: String })
   tabName?: string;
 
+  @provide({ context: linkContext })
+  linkTemplate: TestGridLinkTemplate = { url: new URL('https://prow.k8s.io/') };
+
   // set the functionality when any tab is clicked on
   private onTabActivated(event: CustomEvent<{ index: number }>) {
     const tabIndex = event.detail.index;
@@ -84,6 +104,7 @@ export class TestgridDataContent extends LitElement {
       when(
         this.tabNames.length > 0,
         () => html` <mwc-tab-bar
+          style="width: 100vw"
           .activeIndex=${this.activeIndex}
           @MDCTabBar:activated="${this.onTabActivated}"
         >
@@ -116,7 +137,9 @@ export class TestgridDataContent extends LitElement {
       if (!response.ok) {
         throw new Error(`HTTP error: ${response.status}`);
       }
-      const data = ListDashboardTabsResponse.fromJson(await response.json());
+      const data = ListDashboardTabsResponse.fromJson(await response.json(), {
+        ignoreUnknownFields: true,
+      });
       const tabNames: string[] = ['Summary'];
       data.dashboardTabs.forEach(tab => {
         tabNames.push(tab.name);
@@ -139,12 +162,4 @@ export class TestgridDataContent extends LitElement {
       this.activeIndex = index;
     }
   }
-
-  static styles = css`
-    mwc-tab {
-      --mdc-typography-button-letter-spacing: 0;
-      --mdc-tab-horizontal-padding: 12px;
-      --mdc-typography-button-font-size: 0.8rem;
-    }
-  `;
 }

web/src/testgrid-grid-cell.ts

@@ -1,10 +1,12 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { LitElement, html, css } from 'lit';
+import {consume} from '@lit/context';
+import { customElement, property } from 'lit/decorators.js';
+import { linkContext, TestGridLinkTemplate } from './testgrid-context';
 
 @customElement('testgrid-grid-cell')
-export class TestgridGridCell extends LitElement{
-    // Styling for status attribute corresponds to test_status.proto enum.
-    static styles = css`
+export class TestgridGridCell extends LitElement {
+  // Styling for status attribute corresponds to test_status.proto enum.
+  static styles = css`
     :host {
       min-width: 80px;
       width: 80px;
@@ -23,46 +25,69 @@ export class TestgridGridCell extends LitElement{
       font-size: 12px;
     }
 
-    :host([status="NO_RESULT"]) {
-        background-color: transparent;
+    :host([status='NO_RESULT']) {
+      background-color: transparent;
     }
 
-    :host([status="PASS"]), :host([status="PASS_WITH_ERRORS"]) {
-        background-color: #4d7;
-        color: #273;
+    :host([status='PASS']),
+    :host([status='PASS_WITH_ERRORS']) {
+      background-color: #4d7;
+      color: #273;
     }
 
-    :host([status="PASS_WITH_SKIPS"]), :host([status="BUILD_PASSED"]) {
-        background-color: #bfd;
-        color: #465;
+    :host([status='PASS_WITH_SKIPS']),
+    :host([status='BUILD_PASSED']) {
+      background-color: #bfd;
+      color: #465;
     }
 
-    :host([status="RUNNING"]), :host([status="CATEGORIZED_ABORT"]), :host([status="UNKNOWN"]), :host([status="CANCEL"]), :host([status="BLOCKED"]) {
-        background-color: #ccd;
-        color: #446;
+    :host([status='RUNNING']),
+    :host([status='CATEGORIZED_ABORT']),
+    :host([status='UNKNOWN']),
+    :host([status='CANCEL']),
+    :host([status='BLOCKED']) {
+      background-color: #ccd;
+      color: #446;
     }
 
-    :host([status="TIMED_OUT"]), :host([status="CATEGORIZED_FAIL"]), :host([status="FAIL"]), :host([status="FLAKY"]) {
-        background-color: #a24;
-        color: #fdd;
+    :host([status='TIMED_OUT']),
+    :host([status='CATEGORIZED_FAIL']),
+    :host([status='FAIL']),
+    :host([status='FLAKY']) {
+      background-color: #a24;
+      color: #fdd;
     }
 
-    :host([status="BUILD_FAIL"]) {
-        background-color: #111;
-        color: #ddd;
+    :host([status='BUILD_FAIL']) {
+      background-color: #111;
+      color: #ddd;
     }
 
-    :host([status="FLAKY"]) {
-        background-color: #63a;
-        color: #dcf;
+    :host([status='FLAKY']) {
+      background-color: #63a;
+      color: #dcf;
+    }
+
+    a {
+      text-decoration: inherit;
+      color: inherit;
+      width: 100%;
+      height: 100%;
     }
   `;
 
-    @property({reflect: true, attribute: 'status'}) status: String;
+  @property({ reflect: true, attribute: 'status' }) status: string;
+
+  @property() icon: string;
 
-    @property() icon: String;
+  @consume({context: linkContext})
+  @property({attribute: false})
+  public linkTemplate?: TestGridLinkTemplate;
 
-    render(){
-        return html`${this.icon}`;
+  render() {
+    if (this.linkTemplate == undefined) {
+        return html `<span>${this.icon}</span>`
     }
+    return html`<a href="${this.linkTemplate.url.toString()}"><span>${this.icon}</span></a>`;
+  }
 }

web/src/testgrid-grid-column-header.ts

@@ -1,10 +1,10 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { LitElement, html, css } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('testgrid-grid-column-header')
-export class TestgridGridColumnHeader extends LitElement{
-    // TODO(michelle192837): Collate column headers with the same value.
-    static styles = css`
+export class TestgridGridColumnHeader extends LitElement {
+  static styles = css`
     :host {
       text-align: center;
       font-family: Roboto, Verdana, sans-serif;
@@ -13,20 +13,24 @@ export class TestgridGridColumnHeader extends LitElement{
       color: #224;
       min-height: 22px;
       max-height: 22px;
-      max-width: 80px;
-      width:80px;
-      min-width: 80px;
-      padding: .1em .3em;
+      padding: 0.1em 0.3em;
       box-sizing: border-box;
-      white-space:nowrap;
+      white-space: nowrap;
       overflow-x: hidden;
       text-overflow: ellipsis;
     }
+    span {
+      position: sticky;
+      left: 0;
+      right: 0;
+      width: fit-content;
+      margin: auto;
+    }
   `;
 
-    @property() name: String;
+  @property() value: string;
 
-    render(){
-        return html`${this.name}`;
-    }
+  render() {
+    return html`<span>${this.value}</span>`;
+  }
 }

web/src/testgrid-grid-header-row.ts

@@ -1,10 +1,17 @@
 import { LitElement, html, css } from 'lit';
 import { map } from 'lit/directives/map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { customElement, property } from 'lit/decorators.js';
-import { ListHeadersResponse } from './gen/pb/api/v1/data.js';
 import './testgrid-grid-row-name';
 import './testgrid-grid-column-header';
 
+// CombinedHeader represents a header element that spans multiple columns
+// (when a header value is repeated multiple times in a row).
+export interface CombinedHeader {
+  value: string;
+  count: number;
+}
+
 @customElement('testgrid-grid-header-row')
 export class TestgridGridHeaderRow extends LitElement {
   static styles = css`
@@ -15,21 +22,31 @@ export class TestgridGridHeaderRow extends LitElement {
       flex-flow: row nowrap;
       gap: 0px 2px;
       margin: 2px;
+      width: fit-content;
     }
   `;
 
-  @property() headers: ListHeadersResponse;
+  @property() name: string;
+
+  @property() combinedHeaders: CombinedHeader[];
 
   render() {
-    // TODO(michelle192837): Replace row name component with more appropriate one.
+    const nameStyles = {background: '#ededed', zIndex: '20'};
     return html`
-      <testgrid-grid-row-name></testgrid-grid-row-name>
+      <testgrid-grid-row-name .name="${this.name}" style=${styleMap(nameStyles)}></testgrid-grid-row-name>
       ${map(
-        this.headers?.headers,
-        header =>
-          html`<testgrid-grid-column-header
-            .name="${header.build}"
-          ></testgrid-grid-column-header>`
+        this.combinedHeaders,
+        header => {
+          // TODO(michelle192837): Stop hardcoding header width.
+          const width = `${ (header.count - 1) * (80 + 2) + 80 }px`
+          const styles = {width, minWidth: width, maxWidth: width};
+          return html`
+            <testgrid-grid-column-header 
+              style=${styleMap(styles)}
+              .value="${header.value}"
+            ></testgrid-grid-column-header>
+          `
+        }
       )}
     `;
   }