mwa(front): Support all namespaces

Add support for all-namespaces in MWA. Signed-off-by: Elena Zioga <elena@arrikto.com>
kserve · Mar 22, 2023 · fa3b256 · fa3b256
1 parent 7a1b7d4
commit fa3b256
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 59 deletions.
diff --git a/frontend/src/app/pages/index/config.ts b/frontend/src/app/pages/index/config.ts
@@ -27,6 +27,7 @@ export function generateDeleteConfig(svc: InferenceServiceK8s): DialogConfig {
 }
 
 export const defaultConfig: TableConfig = {
+  dynamicNamespaceColumn: true,
   columns: [
     {
       matHeaderCellDef: $localize`Status`,

diff --git a/frontend/src/app/pages/index/index.component.spec.ts b/frontend/src/app/pages/index/index.component.spec.ts
@@ -8,6 +8,7 @@ import {
   NamespaceService,
   ConfirmDialogService,
   SnackBarService,
+  PollerService,
 } from 'kubeflow';
 import { CommonModule } from '@angular/common';
 import { KubeflowModule } from 'kubeflow';
@@ -47,6 +48,7 @@ describe('IndexComponent', () => {
         { provide: NamespaceService, useValue: NamespaceServiceStub },
         { provide: SnackBarService, useValue: {} },
         { provide: Clipboard, useValue: {} },
+        { provide: PollerService, useValue: {} },
       ],
     }).compileComponents();
   }));

diff --git a/frontend/src/app/pages/index/index.component.ts b/frontend/src/app/pages/index/index.component.ts
@@ -8,7 +8,6 @@ import {
 import { environment } from 'src/environments/environment';
 import {
   NamespaceService,
-  ExponentialBackoff,
   STATUS_TYPE,
   ActionEvent,
   ConfirmDialogService,
@@ -18,9 +17,9 @@ import {
   DashboardState,
   ToolbarButton,
   SnackBarConfig,
+  PollerService,
 } from 'kubeflow';
 import { Subscription } from 'rxjs';
-import { isEqual } from 'lodash';
 import { defaultConfig, generateDeleteConfig } from './config';
 import { Router } from '@angular/router';
 import {
@@ -34,26 +33,27 @@ import {
   templateUrl: './index.component.html',
 })
 export class IndexComponent implements OnInit, OnDestroy {
-  public env = environment;
-  public currNamespace = '';
-  public inferenceServices: InferenceServiceIR[] = [];
-  public poller: ExponentialBackoff;
-  public subs = new Subscription();
-  public config = defaultConfig;
-  public dashboardDisconnectedState = DashboardState.Disconnected;
-
-  private rawData: InferenceServiceK8s[] = [];
-
-  buttons: ToolbarButton[] = [
-    new ToolbarButton({
-      text: `New Endpoint`,
-      icon: 'add',
-      stroked: true,
-      fn: () => {
-        this.router.navigate(['/new']);
-      },
-    }),
-  ];
+  env = environment;
+
+  nsSub = new Subscription();
+  pollSub = new Subscription();
+
+  currNamespace: string | string[];
+  config = defaultConfig;
+  inferenceServices: InferenceServiceIR[] = [];
+
+  dashboardDisconnectedState = DashboardState.Disconnected;
+
+  private newEndpointButton = new ToolbarButton({
+    text: $localize`New Endpoint`,
+    icon: 'add',
+    stroked: true,
+    fn: () => {
+      this.router.navigate(['/new']);
+    },
+  });
+
+  buttons: ToolbarButton[] = [this.newEndpointButton];
 
   constructor(
     private backend: MWABackendService,
@@ -62,47 +62,32 @@ export class IndexComponent implements OnInit, OnDestroy {
     private router: Router,
     private clipboard: Clipboard,
     public ns: NamespaceService,
+    public poller: PollerService,
   ) {}
 
-  ngOnInit() {
-    this.poller = new ExponentialBackoff({
-      interval: 1000,
-      retries: 3,
-      maxInterval: 4000,
+  ngOnInit(): void {
+    // Reset the poller whenever the selected namespace changes
+    this.nsSub = this.ns.getSelectedNamespace2().subscribe(ns => {
+      this.currNamespace = ns;
+      this.poll(ns);
+      this.newEndpointButton.namespaceChanged(ns, $localize`Endpoint`);
     });
+  }
 
-    this.subs.add(
-      this.poller.start().subscribe(() => {
-        if (!this.currNamespace) {
-          return;
-        }
+  ngOnDestroy() {
+    this.nsSub.unsubscribe();
+    this.pollSub.unsubscribe();
+  }
 
-        this.backend
-          .getInferenceServices(this.currNamespace)
-          .subscribe((svcs: InferenceServiceK8s[]) => {
-            if (isEqual(this.rawData, svcs)) {
-              return;
-            }
-
-            this.inferenceServices = this.processIncomingData(svcs);
-            this.rawData = svcs;
-            this.poller.reset();
-          });
-      }),
-    );
+  public poll(ns: string | string[]) {
+    this.pollSub.unsubscribe();
+    this.inferenceServices = [];
 
-    // Reset the poller whenever the selected namespace changes
-    this.subs.add(
-      this.ns.getSelectedNamespace().subscribe(ns => {
-        this.currNamespace = ns;
-        this.poller.reset();
-      }),
-    );
-  }
+    const request = this.backend.getInferenceServices(ns);
 
-  ngOnDestroy() {
-    this.subs.unsubscribe();
-    this.poller.stop();
+    this.pollSub = this.poller.exponential(request).subscribe(svcs => {
+      this.inferenceServices = this.processIncomingData(svcs);
+    });
   }
 
   // action handling functions
@@ -157,7 +142,6 @@ export class IndexComponent implements OnInit, OnDestroy {
 
         this.backend.deleteInferenceService(svc).subscribe(
           res => {
-            this.poller.reset();
             dialogRef.close(DIALOG_RESP.ACCEPT);
           },
           err => {

diff --git a/frontend/src/app/services/backend.service.ts b/frontend/src/app/services/backend.service.ts
@@ -3,7 +3,6 @@ import { BackendService, SnackBarService, K8sObject } from 'kubeflow';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import { svcHasComponent, getSvcComponents } from '../shared/utils';
 import { InferenceServiceK8s } from '../types/kfserving/v1beta1';
 import { MWABackendResponse, InferenceServiceLogs } from '../types/backend';
 
@@ -32,7 +31,7 @@ export class MWABackendService extends BackendService {
     );
   }
 
-  public getInferenceServices(
+  private getInferenceServicesSingleNamespace(
     namespace: string,
   ): Observable<InferenceServiceK8s[]> {
     const url = `api/namespaces/${namespace}/inferenceservices`;
@@ -45,6 +44,25 @@ export class MWABackendService extends BackendService {
     );
   }
 
+  private getInferenceServicesAllNamespaces(
+    namespaces: string[],
+  ): Observable<InferenceServiceK8s[]> {
+    return this.getObjectsAllNamespaces(
+      this.getInferenceServicesSingleNamespace.bind(this),
+      namespaces,
+    );
+  }
+
+  public getInferenceServices(
+    ns: string | string[],
+  ): Observable<InferenceServiceK8s[]> {
+    if (Array.isArray(ns)) {
+      return this.getInferenceServicesAllNamespaces(ns);
+    }
+
+    return this.getInferenceServicesSingleNamespace(ns);
+  }
+
   public getKnativeService(
     namespace: string,
     name: string,