kwa(front): Support all namespaces

Add support for all-namespaces in KWA.

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

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

@@ -17,7 +17,7 @@ import {
   numberToExponential,
   transformStringResponses,
 } from '../../shared/utils';
-import { getDeleteDialogConfig } from '../experiments/delete-modal-config';
+import { generateDeleteConfig } from '../experiments/delete-modal-config';
 import { ExperimentK8s } from '../../models/experiment.k8s.model';
 
 @Component({
@@ -134,7 +134,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
   }
 
   private deleteExperiment(name: string, namespace: string) {
-    const deleteDialogConfig = getDeleteDialogConfig(name, namespace);
+    const deleteDialogConfig = generateDeleteConfig(name);
     const ref = this.confirmDialog.open(name, deleteDialogConfig);
 
     const delSub = ref.componentInstance.applying$.subscribe(applying => {

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

@@ -5,8 +5,6 @@ import {
   ActionIconValue,
   TableConfig,
   DateTimeValue,
-  TemplateValue,
-  ChipsListValue,
   ComponentValue,
   LinkValue,
   LinkType,
@@ -16,11 +14,11 @@ import {
   parseSucceededTrials,
   parseRunningTrials,
   parseFailedTrials,
-  parseTotalTrials,
 } from './utils';
 import { ExperimentOptimalTrialComponent } from './optimal-trial/experiment-optimal-trial.component';
 
 export const experimentsTableConfig: TableConfig = {
+  dynamicNamespaceColumn: true,
   columns: [
     {
       matHeaderCellDef: 'Status',

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

@@ -1,18 +1,15 @@
 import { DialogConfig } from 'kubeflow';
 
 // --- Configs for the Confirm Dialogs ---
-export function getDeleteDialogConfig(
-  name: string,
-  namespace: string,
-): DialogConfig {
+export function generateDeleteConfig(name: string): DialogConfig {
   return {
-    title: `Delete experiment`,
-    message: `Are you sure you want to delete ${name} experiment from namespace ${namespace}?`,
-    accept: 'DELETE',
+    title: $localize`Delete experiment ${name}?`,
+    message: $localize`You cannot undo this action. Are you sure you want to delete this experiment?`,
+    accept: $localize`DELETE`,
     confirmColor: 'warn',
-    cancel: 'CANCEL',
+    cancel: $localize`CANCEL`,
     error: '',
-    applying: 'DELETING',
+    applying: $localize`DELETING`,
     width: '600px',
   };
 }

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

@@ -9,6 +9,7 @@ import {
   ConfirmDialogService,
   NamespaceService,
   KubeflowModule,
+  PollerService,
 } from 'kubeflow';
 import { KWABackendService } from 'src/app/services/backend.service';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -46,6 +47,7 @@ describe('ExperimentsComponent', () => {
           { provide: KWABackendService, useValue: KWABackendServiceStub },
           { provide: ConfirmDialogService, useValue: {} },
           { provide: NamespaceService, useValue: NamespaceServiceStub },
+          { provide: PollerService, useValue: {} },
         ],
       }).compileComponents();
     }),

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

@@ -1,15 +1,14 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { environment } from '@app/environment';
 import { Subscription } from 'rxjs';
-import isEqual from 'lodash-es/isEqual';
 import {
   ConfirmDialogService,
   DIALOG_RESP,
-  ExponentialBackoff,
   NamespaceService,
   ActionEvent,
   DashboardState,
   ToolbarButton,
+  PollerService,
 } from 'kubeflow';
 
 import { KWABackendService } from 'src/app/services/backend.service';
@@ -18,7 +17,7 @@ import {
   ExperimentsProcessed,
 } from '../../models/experiment.model';
 import { experimentsTableConfig } from './config';
-import { getDeleteDialogConfig } from './delete-modal-config';
+import { generateDeleteConfig } from './delete-modal-config';
 import { Router } from '@angular/router';
 
 @Component({
@@ -27,50 +26,67 @@ import { Router } from '@angular/router';
   styleUrls: ['./experiments.component.scss'],
 })
 export class ExperimentsComponent implements OnInit, OnDestroy {
-  experiments: ExperimentsProcessed = [];
-  currNamespace: string;
-  config = experimentsTableConfig;
   env = environment;
-  dashboardDisconnectedState = DashboardState.Disconnected;
 
-  private subs = new Subscription();
-  private poller: ExponentialBackoff;
+  nsSub = new Subscription();
+  pollSub = new Subscription();
 
-  private rawData: Experiment[] = [];
+  currNamespace: string | string[];
+  config = experimentsTableConfig;
+  experiments: ExperimentsProcessed = [];
 
-  buttons: ToolbarButton[] = [
-    new ToolbarButton({
-      text: `New Experiment`,
-      icon: 'add',
-      stroked: true,
-      fn: () => {
-        this.router.navigate(['/new']);
-      },
-    }),
-  ];
+  dashboardDisconnectedState = DashboardState.Disconnected;
+
+  private newExperimentButton = new ToolbarButton({
+    text: $localize`New Experiment`,
+    icon: 'add',
+    stroked: true,
+    fn: () => {
+      this.router.navigate(['/new']);
+    },
+  });
+
+  buttons: ToolbarButton[] = [this.newExperimentButton];
 
   constructor(
     private backend: KWABackendService,
     private confirmDialog: ConfirmDialogService,
     private router: Router,
     public ns: NamespaceService,
+    public poller: PollerService,
   ) {}
 
-  ngOnInit() {
-    this.startExperimentsPolling();
-
+  ngOnInit(): void {
     // Reset the poller whenever the selected namespace changes
-    this.subs.add(
-      this.ns.getSelectedNamespace().subscribe(nameSpace => {
-        this.currNamespace = nameSpace;
-        this.poller.reset();
-      }),
-    );
+    this.nsSub = this.ns.getSelectedNamespace2().subscribe(ns => {
+      this.currNamespace = ns;
+      this.poll(ns);
+      this.newExperimentButton.namespaceChanged(ns, $localize`Experiment`);
+    });
+  }
+
+  ngOnDestroy() {
+    this.nsSub.unsubscribe();
+    this.pollSub.unsubscribe();
   }
 
-  ngOnDestroy(): void {
-    this.subs.unsubscribe();
-    this.poller.stop();
+  public poll(ns: string | string[]) {
+    this.pollSub.unsubscribe();
+    this.experiments = [];
+
+    const request = this.backend.getExperiments(ns);
+
+    this.pollSub = this.poller.exponential(request).subscribe(experiments => {
+      this.experiments = experiments.map(row => {
+        return {
+          ...row,
+          link: {
+            text: row.name,
+            url: `/experiment/${this.currNamespace}/${row.name}`,
+          },
+        };
+      });
+    });
   }
 
   trackByFn(index: number, experiment: Experiment) {
@@ -81,76 +97,38 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
     const exp = a.data as Experiment;
     switch (a.action) {
       case 'delete':
-        this.onDeleteExperiment(exp.name);
+        this.deleteClicked(exp);
         break;
     }
   }
 
-  onDeleteExperiment(name: string) {
-    const deleteDialogConfig = getDeleteDialogConfig(name, this.currNamespace);
-    const ref = this.confirmDialog.open(name, deleteDialogConfig);
+  deleteClicked(exp: Experiment) {
+    const deleteDialogConfig = generateDeleteConfig(exp.name);
+    const ref = this.confirmDialog.open(exp.name, deleteDialogConfig);
 
     const delSub = ref.componentInstance.applying$.subscribe(applying => {
       if (!applying) {
         return;
       }
 
       // Close the open dialog only if the DELETE request succeeded
-      this.backend.deleteExperiment(name, this.currNamespace).subscribe({
-        next: _ => {
-          this.poller.reset();
+      this.backend.deleteExperiment(exp.name, exp.namespace).subscribe(
+        res => {
           ref.close(DIALOG_RESP.ACCEPT);
         },
-        error: err => {
-          const errorMsg = err;
-          deleteDialogConfig.error = errorMsg;
+        err => {
+          deleteDialogConfig.error = err;
           ref.componentInstance.applying$.next(false);
         },
-      });
+      );
 
       // DELETE request has succeeded
       ref.afterClosed().subscribe(res => {
         delSub.unsubscribe();
         if (res !== DIALOG_RESP.ACCEPT) {
           return;
         }
-
-        this.poller.reset();
       });
     });
   }
-
-  private startExperimentsPolling() {
-    this.poller = new ExponentialBackoff({ interval: 1000, retries: 3 });
-
-    // Poll for new data and reset the poller if different data is found
-    this.subs.add(
-      this.poller.start().subscribe(() => {
-        if (!this.currNamespace) {
-          return;
-        }
-
-        this.backend
-          .getExperiments(this.currNamespace)
-          .subscribe(experiments => {
-            if (isEqual(this.rawData, experiments)) {
-              return;
-            }
-
-            this.experiments = experiments.map(row => {
-              return {
-                ...row,
-                link: {
-                  text: row.name,
-                  url: `/experiment/${row.namespace}/${row.name}`,
-                },
-              };
-            });
-
-            this.rawData = experiments;
-            this.poller.reset();
-          });
-      }),
-    );
-  }
 }

pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.ts

@@ -38,7 +38,7 @@ export class KWABackendService extends BackendService {
     return throwError(msg);
   }
 
-  getExperiments(namespace: string): Observable<Experiments> {
+  getExperimentsSingleNamespace(namespace: string): Observable<Experiments> {
     // If the route doesn't end in a "/"" then the backend will return a 301 to
     // the url ending with "/".
     const url = `/katib/fetch_experiments/?namespace=${namespace}`;
@@ -51,6 +51,21 @@ export class KWABackendService extends BackendService {
     );
   }
 
+  getExperimentsAllNamespaces(namespaces: string[]): Observable<Experiments> {
+    return this.getObjectsAllNamespaces(
+      this.getExperimentsSingleNamespace.bind(this),
+      namespaces,
+    );
+  }
+
+  getExperiments(ns: string | string[]): Observable<Experiments> {
+    if (Array.isArray(ns)) {
+      return this.getExperimentsAllNamespaces(ns);
+    }
+
+    return this.getExperimentsSingleNamespace(ns);
+  }
+
   getExperimentTrialsInfo(name: string, namespace: string): Observable<any> {
     const url = `/katib/fetch_hp_job_info/?experimentName=${name}&namespace=${namespace}`;