diff --git a/pkg/new-ui/v1beta1/frontend/COMMIT b/pkg/new-ui/v1beta1/frontend/COMMIT index 32af1f8b103..0e0063a2335 100644 --- a/pkg/new-ui/v1beta1/frontend/COMMIT +++ b/pkg/new-ui/v1beta1/frontend/COMMIT @@ -1 +1 @@ -b931a7f8 \ No newline at end of file +8dcfe792 diff --git a/pkg/new-ui/v1beta1/frontend/src/app/models/experiment.model.ts b/pkg/new-ui/v1beta1/frontend/src/app/models/experiment.model.ts index a49fffbd977..39593684422 100644 --- a/pkg/new-ui/v1beta1/frontend/src/app/models/experiment.model.ts +++ b/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[]; diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html index 013ba91a577..ef27aa44978 100644 --- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html +++ b/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)" > diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts index 15c29ac627e..05c529b4bfc 100644 --- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts +++ b/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, }, diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.ts index db64f2fe436..81be3b23a17 100644 --- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.ts +++ b/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(); - - @Output() - leaveMouseFromTrial = new EventEmitter(); - 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}`]); - } } diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts index 6abe4944282..80b6decde55 100644 --- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts +++ b/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, }, diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts index 32034aec408..76655848787 100644 --- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts +++ b/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(); }); }),