frontend: Make trials table support pagination/sorting/filtering (#2040)

* build: Update the COMMIT file * Update the COMMIT file. Signed-off-by: Elena Zioga <elena@arrikto.com> * frontend: Support paging/sorting/filtering in trials table (#1441) * Make trials table support paging, sorting and filtering. Signed-off-by: Elena Zioga <elena@arrikto.com> * frontend: Create unit tests for trials table (#1441) * Create unit tests for trials-table component. Signed-off-by: Elena Zioga <elena@arrikto.com> Signed-off-by: Elena Zioga <elena@arrikto.com>
kubeflow · Dec 1, 2022 · 88e6787 · 88e6787
1 parent 6b54eb2
commit 88e6787
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 147 deletions.
diff --git a/pkg/new-ui/v1beta1/frontend/COMMIT b/pkg/new-ui/v1beta1/frontend/COMMIT
@@ -1 +1 @@
-1cca7b81
+2b4cc42e
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.module.ts
@@ -16,6 +16,7 @@ import { ExperimentOverviewModule } from './overview/experiment-overview.module'
 import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
 import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
 import { TrialsGraphEchartsModule } from './trials-graph-echarts/trials-graph-echarts.module';
+import { KubeflowModule } from 'kubeflow';
 
 @NgModule({
   declarations: [ExperimentDetailsComponent],
@@ -33,6 +34,7 @@ import { TrialsGraphEchartsModule } from './trials-graph-echarts/trials-graph-ec
     ExperimentYamlModule,
     TitleActionsToolbarModule,
     TrialsGraphEchartsModule,
+    KubeflowModule,
   ],
   exports: [ExperimentDetailsComponent],
 })

diff --git a/...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html b/...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html
@@ -1,64 +1,10 @@
-<table [dataSource]="data" class="wide" mat-table>
-  <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on the row definition" -->
-
-  <!-- Position Column -->
-  <ng-container
-    *ngFor="let column of displayedColumns; let i = index"
-    [matColumnDef]="column"
-  >
-    <th mat-header-cell *matHeaderCellDef>
-      {{ column === 'Kfp run' ? '' : column }}
-    </th>
-    <td
-      *matCellDef="let element"
-      [ngClass]="{ cell: column === 'Trial name' }"
-      mat-cell
-    >
-      <span
-        *ngIf="
-          column !== 'Trial name' && column !== 'Status' && column !== 'Kfp run'
-        "
-        >{{ element[i] }}
-      </span>
-
-      <span
-        (click)="openTrialDetails(element[i])"
-        *ngIf="column === 'Trial name'"
-        class="name"
-        >{{ element[i] }}
-      </span>
-
-      <div *ngIf="column === 'Kfp run'" class="svg-color">
-        <mat-icon
-          (click)="goToKfpRun(element[i])"
-          [matTooltipDisabled]="!!element[i]"
-          [ngClass]="{ 'icon-disable': !element[i] }"
-          class="icon"
-          matTooltip="No KFP run"
-          svgIcon="pipeline-centered"
-        ></mat-icon>
-      </div>
-
-      <span
-        *ngIf="column === 'Status'"
-        [ngClass]="{
-          green: element[i] === 'Succeeded',
-          red: element[i] === 'Failed'
-        }"
-        >{{ element[i] }}</span
-      >
-    </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr
-    (mouseleave)="handleMouseLeave()"
-    (mouseover)="handleMouseOver(row)"
-    *matRowDef="let row; let i = index; columns: displayedColumns"
-    [ngClass]="{ 'best-trail-row': bestTrialIndex === i }"
-    mat-row
-  >
-    >
-  </tr>
-</table>
+<div class="lib-content-wrapper">
+  <div class="page-padding lib-flex-grow lib-overflow-auto">
+    <lib-table
+      [config]="config"
+      [data]="processedData"
+      [highlightedRow]="bestTrialRow"
+      (actionsEmitter)="reactToAction($event)"
+    ></lib-table>
+  </div>
+</div>
diff --git a/...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.scss b/...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.scss
@@ -2,64 +2,3 @@
   display: block;
   min-height: 550px;
 }
-
-.cell {
-  width: 300px;
-}
-
-.name {
-  cursor: pointer;
-
-  &:hover {
-    color: #1e88e5;
-    text-decoration: underline;
-  }
-}
-
-.green {
-  color: green;
-}
-
-.red {
-  color: red;
-}
-
-.icon {
-  cursor: pointer;
-
-  &-disable {
-    cursor: default;
-    opacity: 0.5;
-  }
-}
-
-td.mat-cell:not(:first-of-type) {
-  padding: 2px 28px 2px 0;
-}
-
-td.mat-cell:first-of-type {
-  padding: 2px 28px 2px 24px;
-}
-
-.mat-row:hover {
-  background-color: #f3f3f3;
-}
-
-.svg-color {
-  color: #1e88e5;
-  display: flex;
-  justify-content: flex-end;
-  margin-right: 16px;
-}
-
-::ng-deep :host svg {
-  fill: currentColor;
-}
-
-.best-trail-row {
-  background-color: #ffffcd;
-
-  &:hover {
-    background-color: #ffff98;
-  }
-}
diff --git a/...ta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts b/...ta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts
@@ -11,6 +11,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { TrialsTableComponent } from './trials-table.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import { SimpleChange } from '@angular/core';
+import { PropertyValue, StatusValue, ComponentValue } from 'kubeflow';
+import { parseStatus } from '../../experiments/utils';
+import lowerCase from 'lodash-es/lowerCase';
+import { KfpRunComponent } from './kfp-run/kfp-run.component';
+
 describe('TrialsTableComponent', () => {
   let component: TrialsTableComponent;
   let fixture: ComponentFixture<TrialsTableComponent>;
@@ -38,10 +44,157 @@ describe('TrialsTableComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TrialsTableComponent);
     component = fixture.componentInstance;
+    component.displayedColumns = [
+      'Status',
+      'Trial name',
+      'Validation loss',
+      'Lr',
+      'Batch size',
+      'Embed dim',
+      'Dropout',
+      'Sp dropout',
+      'Kfp run',
+    ];
+    component.data = [
+      [
+        'Succeeded',
+        'open-vaccine-0f37u-6cd03cbf',
+        '0.70573',
+        '0.0001',
+        '32',
+        '20',
+        '0.2',
+        '0.2',
+        '9af7c534-689a-48aa-996b-537d13989729',
+        '0',
+      ],
+      [
+        'Succeeded',
+        'open-vaccine-0f37u-8ec17b8f',
+        '0.76401',
+        '0.0001',
+        '96',
+        '20',
+        '0.2',
+        '0.2',
+        '19aed8e0-143c-49d8-8bd3-7ebb464181d8',
+        '1',
+      ],
+    ];
+    component.ngOnChanges({
+      displayedColumns: new SimpleChange(
+        null,
+        component.displayedColumns,
+        false,
+      ),
+    });
+
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should create processedData', () => {
+    expect(component.processedData).toEqual([
+      {
+        'trial name': 'open-vaccine-0f37u-6cd03cbf',
+        status: 'Succeeded',
+        'validation loss': '0.70573',
+        lr: '0.0001',
+        'batch size': '32',
+        'embed dim': '20',
+        dropout: '0.2',
+        'sp dropout': '0.2',
+        'kfp run': '9af7c534-689a-48aa-996b-537d13989729',
+      },
+      {
+        'trial name': 'open-vaccine-0f37u-8ec17b8f',
+        status: 'Succeeded',
+        'validation loss': '0.76401',
+        lr: '0.0001',
+        'batch size': '96',
+        'embed dim': '20',
+        dropout: '0.2',
+        'sp dropout': '0.2',
+        'kfp run': '19aed8e0-143c-49d8-8bd3-7ebb464181d8',
+      },
+    ]);
+  });
+
+  it('should create config', () => {
+    expect(component.config).toEqual({
+      columns: [
+        {
+          matColumnDef: 'Status',
+          matHeaderCellDef: 'Status',
+          value: new StatusValue({
+            valueFn: parseStatus,
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'name',
+          matHeaderCellDef: 'Trial name',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[1]),
+            isLink: true,
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'Validation loss',
+          matHeaderCellDef: 'Validation loss',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[2]),
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'Lr',
+          matHeaderCellDef: 'Lr',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[3]),
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'Batch size',
+          matHeaderCellDef: 'Batch size',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[4]),
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'Embed dim',
+          matHeaderCellDef: 'Embed dim',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[5]),
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'Dropout',
+          matHeaderCellDef: 'Dropout',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[6]),
+          }),
+          sort: true,
+        },
+        {
+          matColumnDef: 'Sp dropout',
+          matHeaderCellDef: 'Sp dropout',
+          value: new PropertyValue({
+            field: lowerCase(component.displayedColumns[7]),
+          }),
+          sort: true,
+        },
+        {
+          matHeaderCellDef: '',
+          matColumnDef: 'actions',
+          value: new ComponentValue({
+            component: KfpRunComponent,
+          }),
+        },
+      ],
+    });
   });
 });