frontend: Fix 500 error after detail page refresh (#1967)

Fix 500 error when refreshing KWA's detail page by also considering the
namespace variable as a query param.

Signed-off-by: Elena Zioga <[email protected]>

Author: elenzio9

pkg/new-ui/v1beta1/frontend/src/app/app-routing.module.ts

@@ -7,7 +7,10 @@ import { TrialModalComponent } from './pages/experiment-details/trials-table/tri
 
 const routes: Routes = [
   { path: '', component: ExperimentsComponent },
-  { path: 'experiment/:experimentName', component: ExperimentDetailsComponent },
+  {
+    path: 'experiment/:namespace/:experimentName',
+    component: ExperimentDetailsComponent,
+  },
   { path: 'new', component: ExperimentCreationComponent },
   {
     path: 'experiment/:experimentName/trial/:trialName',

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

@@ -26,34 +26,32 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 let KWABackendServiceStub: Partial<KWABackendService>;
 let NamespaceServiceStub: Partial<NamespaceService>;
+let ActivatedRouteStub: Partial<ActivatedRoute>;
 
 KWABackendServiceStub = {
-  getExperimentTrialsInfo: () => of([]),
+  getExperimentTrialsInfo: () =>
+    of(
+      'Status,trialName,Validation-accuracy,Train-accuracy,lr,num-layers,optimizer\nSucceeded,tpe-05daf02d,0.977807,0.993104,0.023222418198803642,3,sgd',
+    ),
   getExperiment: () => of(),
   deleteExperiment: () => of(),
 };
 
 NamespaceServiceStub = {
-  getSelectedNamespace: () => of(),
+  updateSelectedNamespace: () => {},
+};
+
+ActivatedRouteStub = {
+  params: of({ namespace: 'kubeflow-user', experimentName: '' }),
+  queryParams: of({}),
 };
 
 describe('ExperimentDetailsComponent', () => {
   let component: ExperimentDetailsComponent;
   let fixture: ComponentFixture<ExperimentDetailsComponent>;
-  let activatedRouteSpy;
 
   beforeEach(
     waitForAsync(() => {
-      activatedRouteSpy = {
-        snapshot: {
-          params: {
-            experimentName: '',
-          },
-          queryParams: {
-            tab: '',
-          },
-        },
-      };
       TestBed.configureTestingModule({
         imports: [
           CommonModule,
@@ -75,7 +73,7 @@ describe('ExperimentDetailsComponent', () => {
         ],
         declarations: [ExperimentDetailsComponent],
         providers: [
-          { provide: ActivatedRoute, useValue: activatedRouteSpy },
+          { provide: ActivatedRoute, useValue: ActivatedRouteStub },
           { provide: Router, useValue: {} },
           { provide: KWABackendService, useValue: KWABackendServiceStub },
           { provide: ConfirmDialogService, useValue: {} },

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

@@ -49,7 +49,6 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
     private router: Router,
     private backendService: KWABackendService,
     private confirmDialog: ConfirmDialogService,
-    private backend: KWABackendService,
     private namespaceService: NamespaceService,
   ) {}
 
@@ -68,20 +67,18 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
   private subs = new Subscription();
 
   ngOnInit() {
-    this.name = this.activatedRoute.snapshot.params.experimentName;
+    this.activatedRoute.params.subscribe(params => {
+      this.namespaceService.updateSelectedNamespace(params.namespace);
 
-    if (this.activatedRoute.snapshot.queryParams['tab']) {
-      this.selectedTab = this.tabs.get(
-        this.activatedRoute.snapshot.queryParams['tab'],
-      );
-    }
+      this.name = params.experimentName;
+      this.namespace = params.namespace;
 
-    this.subs.add(
-      this.namespaceService.getSelectedNamespace().subscribe(namespace => {
-        this.namespace = namespace;
-        this.updateExperimentInfo();
-      }),
-    );
+      this.updateExperimentInfo();
+    });
+
+    this.activatedRoute.queryParams.subscribe(queryParams => {
+      this.selectedTab = this.tabs.get(queryParams.tab);
+    });
   }
 
   tabChanged(event: MatTabChangeEvent) {
@@ -146,7 +143,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
       }
 
       // Close the open dialog only if the DELETE request succeeded
-      this.backend.deleteExperiment(name, namespace).subscribe({
+      this.backendService.deleteExperiment(name, namespace).subscribe({
         next: _ => {
           ref.close(DIALOG_RESP.ACCEPT);
         },

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

@@ -221,8 +221,11 @@ export class TrialModalComponent implements OnInit {
   }
 
   returnToExperimentDetails() {
-    this.router.navigate([`/experiment/${this.experimentName}`], {
-      queryParams: { tab: 'trials' },
-    });
+    this.router.navigate(
+      [`/experiment/${this.namespace}/${this.experimentName}`],
+      {
+        queryParams: { tab: 'trials' },
+      },
+    );
   }
 }

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

@@ -86,7 +86,7 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
     const exp = a.data as Experiment;
     switch (a.action) {
       case 'name:link':
-        this.router.navigate([`/experiment/${exp.name}`]);
+        this.router.navigate([`/experiment/${exp.namespace}/${exp.name}`]);
         break;
       case 'delete':
         this.onDeleteExperiment(exp.name);