Merge pull request #1224 from bryan-lou/bryanlou-dev-1

Add healthiness report dropdown to dashboard summary tab

Author: google-oss-prow[bot]

web/src/fake-api/data.json

@@ -266,6 +266,20 @@
           "failure_stats": {
             "num_failing_tests":1
           }
+        },
+        "healthiness_summary": {
+          "top_flaky_tests": [
+            {
+              "display_name": "fake-test-2",
+              "flakiness": "2"
+            }
+          ],
+          "healthiness_stats": {
+            "start": "2023-05-29T11:25:20.000Z",
+            "end": "2023-05-29T11:25:20.000Z",
+            "num_flaky_tests": 2,
+            "average_flakiness": 2.2
+          }
         }
       },
       {
@@ -284,7 +298,21 @@
         "detailed_status_message": "Tab stats: 3 of 5 (60 %) recent columns passed (5 of 7 or 71.43 % cells)",
         "last_run_timestamp": "2023-05-29T11:25:20.000Z",
         "last_update_timestamp": "2023-05-29T11:25:20.000Z",
-        "latest_passing_build": "0987654"
+        "latest_passing_build": "0987654",
+        "healthiness_summary": {
+          "top_flaky_tests": [
+            {
+              "display_name": "fake-test-2",
+              "flakiness": "2"
+            }
+          ],
+          "healthiness_stats": {
+            "start": "2023-05-29T11:25:20.000Z",
+            "end": "2023-05-29T11:25:20.000Z",
+            "num_flaky_tests": 2,
+            "average_flakiness": 2.2
+          }
+        }
       },
       {
         "dashboard_name": "fake-dashboard-1",

web/src/tab-summary.ts

@@ -4,6 +4,8 @@ import { map } from 'lit/directives/map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { TabSummaryInfo } from './testgrid-dashboard-summary';
 import './testgrid-failures-summary';
+import './testgrid-healthiness-summary';
+
 @customElement('tab-summary')
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class TabSummary extends LitElement {
@@ -45,6 +47,9 @@ export class TabSummary extends LitElement {
       ${this.info?.failuresSummary !== undefined ?
         html `<testgrid-failures-summary .info=${this.info}>
         </testgrid-failures-summary>`:''}
+      ${this.info?.healthinessSummary !== undefined ?
+        html `<testgrid-healthiness-summary .info=${this.info}>
+        </testgrid-healthiness-summary>`:''}
     `;
   }
   /**

web/src/testgrid-dashboard-summary.ts

@@ -16,6 +16,7 @@ export interface TabSummaryInfo {
   latestGreenBuild: string;
   dashboardName: string;
   failuresSummary?: FailuresSummaryInfo;
+  healthinessSummary?: HealthinessSummaryInfo;
 }
 
 interface FailuresSummaryInfo {
@@ -28,6 +29,25 @@ interface FailingTestInfo {
   failCount: number;
   passTimestamp: string;
   failTimestamp: string;
+  healthinessSummary?: HealthinessSummaryInfo;
+}
+
+interface HealthinessSummaryInfo {
+  topFlakyTests: FlakyTestInfo[];
+  healthinessStats: HealthinessStats;
+}
+
+interface FlakyTestInfo {
+  displayName: string;
+  flakiness: number;
+}
+
+interface HealthinessStats {
+  startTimestamp: string;
+  endTimestamp: string;
+  numFlakyTests: number;
+  averageFlakiness: number;
+  previousFlakiness: number;
 }
 
 interface FailureStats {
@@ -76,6 +96,27 @@ function convertResponse(ts: TabSummary) {
     tsi.failuresSummary!.topFailingTests.push(failingTest)
     });
   }
+
+  if (ts.healthinessSummary !== undefined) {
+    tsi.healthinessSummary = {} as HealthinessSummaryInfo
+    const healthinessStats: HealthinessStats = {
+      startTimestamp: Timestamp.toDate(ts.healthinessSummary!.healthinessStats!.start!).toISOString(),
+      endTimestamp: Timestamp.toDate(ts.healthinessSummary!.healthinessStats!.end!).toISOString(),
+      numFlakyTests: ts.healthinessSummary!.healthinessStats!.numFlakyTests,
+      averageFlakiness: ts.healthinessSummary!.healthinessStats!.averageFlakiness,
+      previousFlakiness: ts.healthinessSummary!.healthinessStats!.previousFlakiness,
+    }
+    tsi.healthinessSummary!.healthinessStats = healthinessStats
+
+    tsi.healthinessSummary!.topFlakyTests = [];
+    ts.healthinessSummary?.topFlakyTests.forEach( test => {
+      const flakyTest: FlakyTestInfo = {
+        displayName: test.displayName,
+        flakiness: test.flakiness,
+      }
+      tsi.healthinessSummary!.topFlakyTests.push(flakyTest)
+    })
+  }
   return tsi;
 }
 

web/src/testgrid-healthiness-summary.ts

@@ -0,0 +1,78 @@
+import { LitElement, html, css } from 'lit';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { customElement, property, state } from 'lit/decorators.js';
+import { TabSummaryInfo } from './testgrid-dashboard-summary';
+import { map } from 'lit/directives/map.js';
+
+@customElement('testgrid-healthiness-summary')
+export class TestgridTabTable extends LitElement {
+  @state() showHealthinesSummary = false;
+  @property() info?: TabSummaryInfo;
+
+  render() {
+    return html`
+    <div class="dropdown-container">
+        <button @click="${() => this.dropdownTable()}" class="btn">
+          ${this.showHealthinesSummary ? html`- Hide Healthiness Report -`: html `- Show Healthiness Report -`}
+        </button>
+      ${this.showHealthinesSummary ? html`
+          <table class="dropdown-menu">
+            <tr>
+              <th>Test Name</th>
+              <th>Flakiness (Previous)</th>
+              <th>Flakiness (Current)</th>
+              <th>Trend</th>
+              <th>Infra Failure Rate</th>
+              <th>Flaky Tests Count</th>
+            </tr>
+            ${map(
+              this.info?.healthinessSummary!.topFlakyTests,
+              (test: any) => html`
+                <tr>
+                  <td>${test.displayName}</td>
+                  <td>${this.info?.healthinessSummary?.healthinessStats.previousFlakiness}</td>
+                  <td>${this.info?.healthinessSummary?.healthinessStats.averageFlakiness}</td>
+                  <td>N/A</td>
+                  <td>${test.flakiness}</td>
+                  <td>${this.info?.healthinessSummary?.healthinessStats.numFlakyTests}</td>
+                </tr>
+              `)}
+          </table>`
+          : ''}
+      </div>
+    `
+  }
+  private dropdownTable(){
+    this.showHealthinesSummary = !this.showHealthinesSummary;
+  }
+
+  static styles = css`
+    .dropdown-container {
+      border-left: 1px solid #6b90da;
+      border-right: 1px solid #6b90da;
+      border-bottom: 1px solid #6b90da;
+      border-radius: 0 0 6px 6px;
+      color: #000;
+      display: block;
+      position: relative;
+    }
+
+    .dropdown-menu {
+      position: relative;
+      width: 100%;
+    }
+
+    .btn {
+      display: grid;
+      border-radius: var(--radius);
+      border: none;
+      cursor: pointer;
+      position: relative;
+      width: 100%;
+    }
+
+    th {
+      text-align: left;
+    }
+  `
+}