web-apps(front): Changes needed for trials table (kubeflow/kubeflow#6768

) * web-apps(front): Import @types/lodash package Import @types/lodash package to support type definitions. Signed-off-by: Elena Zioga <elena@arrikto.com> * web-apps(front): Changes needed for trials table In this commit: - Adjust filtering tooltip to expose info only for the existing columns. - Extend table component to be able to highlight a row. - Fix autocomplete dropdown bug. Signed-off-by: Elena Zioga <elena@arrikto.com> Signed-off-by: Elena Zioga <elena@arrikto.com>
Adembc · Jun 23, 2024 · 677796a · 677796a
1 parent a0e46a6
commit 677796a
Show file tree

Hide file tree

Showing 8 changed files with 361 additions and 54 deletions.
diff --git a/notebooks/crud-web-apps/common/frontend/kubeflow-common-lib/package-lock.json b/notebooks/crud-web-apps/common/frontend/kubeflow-common-lib/package-lock.json
diff --git a/notebooks/crud-web-apps/common/frontend/kubeflow-common-lib/package.json b/notebooks/crud-web-apps/common/frontend/kubeflow-common-lib/package.json
@@ -54,6 +54,7 @@
     "@kubernetes/client-node": "^0.16.3",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.9",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.28.2",
     "@typescript-eslint/parser": "4.28.2",

diff --git a/...nd/kubeflow-common-lib/projects/kubeflow/src/lib/help-popover/help-popover.component.html b/...nd/kubeflow-common-lib/projects/kubeflow/src/lib/help-popover/help-popover.component.html
@@ -33,40 +33,44 @@
       </mat-chip>
     </p>
     <mat-divider></mat-divider>
-    <p><b>Status</b></p>
-    <p>Filter based on the objects' status, by using:</p>
-    <ul>
-      <li>The value shown in the tooltip</li>
-      <li>
-        The status types (i.e.
-        <i
-          >ready, waiting, warning, error, unavailable, uninitialized,
-          terminating, stopped</i
-        >)
-      </li>
-    </ul>
+    <ng-template [ngIf]="showStatus">
+      <p><b>Status</b></p>
+      <p>Filter based on the objects' status, by using:</p>
+      <ul>
+        <li>The value shown in the tooltip</li>
+        <li>
+          The status types (i.e.
+          <i
+            >ready, waiting, warning, error, unavailable, uninitialized,
+            terminating, stopped</i
+          >)
+        </li>
+      </ul>
+    </ng-template>
     <mat-divider></mat-divider>
-    <p><b>Date</b></p>
-    <p>Filter timestamp values based on:</p>
-    <ul>
-      <li>
-        <span
-          >The "-" character for empty date values:
-          <mat-chip class="mat-chip-blue">
-            Created at: -
-            <button matChipRemove>
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip>
-        </span>
-      </li>
-      <li>
-        The relative time text, shown in the column (i.e. <i>X months ago</i>)
-      </li>
-      <li>
-        The substring of the timestamp, that is shown in the UTC part of the
-        tooltip
-      </li>
-    </ul>
+    <ng-template [ngIf]="showDate">
+      <p><b>Date</b></p>
+      <p>Filter timestamp values based on:</p>
+      <ul>
+        <li>
+          <span
+            >The "-" character for empty date values:
+            <mat-chip class="mat-chip-blue">
+              Created at: -
+              <button matChipRemove>
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip>
+          </span>
+        </li>
+        <li>
+          The relative time text, shown in the column (i.e. <i>X months ago</i>)
+        </li>
+        <li>
+          The substring of the timestamp, that is shown in the UTC part of the
+          tooltip
+        </li>
+      </ul>
+    </ng-template>
   </div>
 </ng-template>
diff --git a/...tend/kubeflow-common-lib/projects/kubeflow/src/lib/help-popover/help-popover.component.ts b/...tend/kubeflow-common-lib/projects/kubeflow/src/lib/help-popover/help-popover.component.ts
@@ -8,6 +8,12 @@ import { Component, OnInit, Input } from '@angular/core';
 export class HelpPopoverComponent implements OnInit {
   @Input() popoverPosition = 'below';
 
+  @Input()
+  showStatus: boolean;
+
+  @Input()
+  showDate: boolean;
+
   constructor() {}
 
   ngOnInit(): void {}

diff --git a/...d/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/table/table.component.html b/...d/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/table/table.component.html
@@ -41,17 +41,15 @@
     aria-label="Help"
     (click)="$event.stopPropagation()"
   >
-    <lib-help-popover></lib-help-popover>
+    <lib-help-popover [showStatus]="showStatus" [showDate]="showDate">
+    </lib-help-popover>
   </button>
   <mat-autocomplete
     #auto="matAutocomplete"
     panelWidth="270px"
     (optionSelected)="selected($event)"
   >
-    <mat-option
-      *ngFor="let header of filteredHeaders | async"
-      [value]="header.title"
-    >
+    <mat-option *ngFor="let header of filteredHeaders" [value]="header.title">
       {{ header.title }}
     </mat-option>
   </mat-autocomplete>
@@ -249,7 +247,13 @@
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  <tr
+    mat-row
+    *matRowDef="let row; let i = index; columns: displayedColumns"
+    [ngClass]="highlightRow(row, highlightedRow)"
+  >
+  {{row}}
+</tr>
 
   <!-- Row shown when there is no matching data. -->
   <tr class="mat-row" *matNoDataRow>

diff --git a/...d/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/table/table.component.scss b/...d/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/table/table.component.scss
@@ -72,3 +72,7 @@ lib-action {
 .filter-header {
   margin-right: 8px;
 }
+
+.highlight-row {
+  background-color: #ffffcd;
+}