[kwa-actual-links-in-tables] Make links in KWA's tables actual links

pkg/new-ui/v1beta1/frontend/COMMIT

@@ -1 +1 @@
-b931a7f8
+8dcfe792

pkg/new-ui/v1beta1/frontend/src/app/models/experiment.model.ts

@@ -1,3 +1,5 @@
+import { Params } from '@angular/router';
+
 /*
  * UI relative types
  */
@@ -47,3 +49,13 @@ export interface Experiment {
 }
 
 export type Experiments = Experiment[];
+
+export interface ExperimentProcessed extends Experiment {
+  link: {
+    text: string;
+    url: string;
+    queryParams?: Params | null;
+  };
+}
+
+export type ExperimentsProcessed = ExperimentProcessed[];

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html

@@ -4,7 +4,6 @@
       [config]="config"
       [data]="processedData"
       [highlightedRow]="bestTrialRow"
-      (actionsEmitter)="reactToAction($event)"
     ></lib-table>
   </div>
 </div>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts

@@ -15,12 +15,15 @@ import {
   PropertyValue,
   StatusValue,
   ComponentValue,
+  LinkValue,
+  LinkType,
   KubeflowModule,
 } from 'kubeflow';
 import { parseStatus } from '../../experiments/utils';
 import lowerCase from 'lodash-es/lowerCase';
 import { KfpRunComponent } from './kfp-run/kfp-run.component';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
+import { TrialDetailsModule } from './trial-details/trial-details.module';
 
 describe('TrialsTableComponent', () => {
   let component: TrialsTableComponent;
@@ -37,6 +40,8 @@ describe('TrialsTableComponent', () => {
           NgxChartsModule,
           MatTooltipModule,
           MatButtonModule,
+          KubeflowModule,
+          TrialDetailsModule,
           RouterTestingModule,
           BrowserAnimationsModule,
           KubeflowModule,
@@ -50,6 +55,7 @@ describe('TrialsTableComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TrialsTableComponent);
     component = fixture.componentInstance;
+    component.experimentName = ['open-vaccine'];
     component.displayedColumns = [
       'Status',
       'Trial name',
@@ -110,6 +116,10 @@ describe('TrialsTableComponent', () => {
         dropout: '0.2',
         'sp dropout': '0.2',
         'kfp run': '9af7c534-689a-48aa-996b-537d13989729',
+        link: {
+          text: 'open-vaccine-0f37u-6cd03cbf',
+          url: '/experiment/open-vaccine/trial/open-vaccine-0f37u-6cd03cbf',
+        },
       },
       {
         'trial name': 'open-vaccine-0f37u-8ec17b8f',
@@ -121,6 +131,10 @@ describe('TrialsTableComponent', () => {
         dropout: '0.2',
         'sp dropout': '0.2',
         'kfp run': '19aed8e0-143c-49d8-8bd3-7ebb464181d8',
+        link: {
+          text: 'open-vaccine-0f37u-8ec17b8f',
+          url: '/experiment/open-vaccine/trial/open-vaccine-0f37u-8ec17b8f',
+        },
       },
     ]);
   });
@@ -139,9 +153,12 @@ describe('TrialsTableComponent', () => {
         {
           matColumnDef: 'name',
           matHeaderCellDef: 'Trial name',
-          value: new PropertyValue({
-            field: lowerCase(component.displayedColumns[1]),
-            isLink: true,
+          style: { width: '25%' },
+          value: new LinkValue({
+            field: 'link',
+            popoverField: 'trial name',
+            truncate: true,
+            linkType: LinkType.Internal,
           }),
           sort: true,
         },

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.ts

@@ -1,10 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
   OnChanges,
-  Output,
   SimpleChanges,
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
@@ -13,7 +11,8 @@ import {
   StatusValue,
   ComponentValue,
   TableConfig,
-  ActionEvent,
+  LinkValue,
+  LinkType,
 } from 'kubeflow';
 import { parseStatus } from '../../experiments/utils';
 import lowerCase from 'lodash-es/lowerCase';
@@ -42,12 +41,6 @@ export class TrialsTableComponent implements OnChanges {
   @Input()
   bestTrialName: string;
 
-  @Output()
-  mouseOnTrial = new EventEmitter<number>();
-
-  @Output()
-  leaveMouseFromTrial = new EventEmitter<void>();
-
   bestTrialRow: {};
 
   config: TableConfig = { columns: [] };
@@ -83,6 +76,13 @@ export class TrialsTableComponent implements OnChanges {
         var key = lowerCase(displayedColumns[j]);
         var value = list[j];
         processedData[i][key] = value;
+
+        if (key === 'trial name') {
+          processedData[i].link = {
+            text: list[j],
+            url: `/experiment/${this.experimentName}/trial/${list[j]}`,
+          };
+        }
       }
     }
 
@@ -97,9 +97,12 @@ export class TrialsTableComponent implements OnChanges {
           columns.push({
             matHeaderCellDef: displayedColumns[i],
             matColumnDef: 'name',
-            value: new PropertyValue({
-              field: lowerCase(displayedColumns[i]),
-              isLink: true,
+            style: { width: '25%' },
+            value: new LinkValue({
+              field: 'link',
+              popoverField: 'trial name',
+              truncate: true,
+              linkType: LinkType.Internal,
             }),
             sort: true,
           });
@@ -146,17 +149,4 @@ export class TrialsTableComponent implements OnChanges {
       columns,
     };
   }
-
-  // Event handling functions
-  reactToAction(a: ActionEvent) {
-    switch (a.action) {
-      case 'name:link':
-        this.openTrialDetails(a.data['trial name']);
-        break;
-    }
-  }
-
-  openTrialDetails(name: string) {
-    this.router.navigate([`/experiment/${this.experimentName}/trial/${name}`]);
-  }
 }

pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts

@@ -8,6 +8,8 @@ import {
   TemplateValue,
   ChipsListValue,
   ComponentValue,
+  LinkValue,
+  LinkType,
 } from 'kubeflow';
 import {
   parseStatus,
@@ -31,9 +33,11 @@ export const experimentsTableConfig: TableConfig = {
     {
       matHeaderCellDef: 'Name',
       matColumnDef: 'name',
-      value: new PropertyValue({
-        field: 'name',
-        isLink: true,
+      value: new LinkValue({
+        field: 'link',
+        popoverField: 'name',
+        truncate: true,
+        linkType: LinkType.Internal,
       }),
       sort: true,
     },

pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts

@@ -1,29 +1,22 @@
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  TemplateRef,
-} from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { environment } from '@app/environment';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { combineLatest, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import isEqual from 'lodash-es/isEqual';
-import { startWith } from 'rxjs/operators';
 import {
   ConfirmDialogService,
   DIALOG_RESP,
   ExponentialBackoff,
   NamespaceService,
-  TemplateValue,
   ActionEvent,
   DashboardState,
   ToolbarButton,
 } from 'kubeflow';
 
 import { KWABackendService } from 'src/app/services/backend.service';
-import { Experiments, Experiment } from '../../models/experiment.model';
-import { StatusEnum } from '../../enumerations/status.enum';
+import {
+  Experiment,
+  ExperimentsProcessed,
+} from '../../models/experiment.model';
 import { experimentsTableConfig } from './config';
 import { getDeleteDialogConfig } from './delete-modal-config';
 import { Router } from '@angular/router';
@@ -34,7 +27,7 @@ import { Router } from '@angular/router';
   styleUrls: ['./experiments.component.scss'],
 })
 export class ExperimentsComponent implements OnInit, OnDestroy {
-  experiments: Experiments = [];
+  experiments: ExperimentsProcessed = [];
   currNamespace: string;
   config = experimentsTableConfig;
   env = environment;
@@ -43,6 +36,8 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
   private subs = new Subscription();
   private poller: ExponentialBackoff;
 
+  private rawData: Experiment[] = [];
+
   buttons: ToolbarButton[] = [
     new ToolbarButton({
       text: `New Experiment`,
@@ -85,9 +80,6 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
   reactToAction(a: ActionEvent) {
     const exp = a.data as Experiment;
     switch (a.action) {
-      case 'name:link':
-        this.router.navigate([`/experiment/${exp.namespace}/${exp.name}`]);
-        break;
       case 'delete':
         this.onDeleteExperiment(exp.name);
         break;
@@ -141,11 +133,21 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
         this.backend
           .getExperiments(this.currNamespace)
           .subscribe(experiments => {
-            if (isEqual(this.experiments, experiments)) {
+            if (isEqual(this.rawData, experiments)) {
               return;
             }
 
-            this.experiments = experiments;
+            this.experiments = experiments.map(row => {
+              return {
+                ...row,
+                link: {
+                  text: row.name,
+                  url: `/experiment/${row.namespace}/${row.name}`,
+                },
+              };
+            });
+
+            this.rawData = experiments;
             this.poller.reset();
           });
       }),