twa(front): Use the new Polling Service

The frontend code of TWA will now be using the new Poller Service which
has a pure RxJS implementation underneath. This will make it simpler to
cancel in-flight requests and also moves the reset logic into the common
code.

components/crud-web-apps/tensorboards/frontend/src/app/pages/index/index.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
   NamespaceService,
@@ -11,6 +11,7 @@ import {
   SnackBarService,
   SnackType,
   ToolbarButton,
+  PollerService,
 } from 'kubeflow';
 import { defaultConfig } from './config';
 import { environment } from '@app/environment';
@@ -20,23 +21,20 @@ import {
   TensorboardProcessedObject,
 } from 'src/app/types';
 import { Subscription } from 'rxjs';
-import { isEqual } from 'lodash';
 import { FormComponent } from '../form/form.component';
 
 @Component({
   selector: 'app-index',
   templateUrl: './index.component.html',
   styleUrls: ['./index.component.scss'],
 })
-export class IndexComponent implements OnInit {
-  public env = environment;
-  public poller: ExponentialBackoff;
-
+export class IndexComponent implements OnInit, OnDestroy {
   public currNamespace = '';
-  public subs = new Subscription();
+  public nsSub = new Subscription();
+  public pollSub = new Subscription();
 
+  public env = environment;
   public config = defaultConfig;
-  public rawData: TensorboardResponseObject[] = [];
   public processedData: TensorboardProcessedObject[] = [];
 
   buttons: ToolbarButton[] = [
@@ -56,39 +54,30 @@ export class IndexComponent implements OnInit {
     public backend: TWABackendService,
     public dialog: MatDialog,
     public snackBar: SnackBarService,
+    public poller: PollerService,
   ) {}
 
   ngOnInit() {
-    this.poller = new ExponentialBackoff({ interval: 1000, retries: 3 });
+    this.nsSub = this.ns.getSelectedNamespace().subscribe(ns => {
+      this.currNamespace = ns;
+      this.poll(ns);
+    });
+  }
 
-    // Poll for new data and reset the poller if different data is found
-    this.subs.add(
-      this.poller.start().subscribe(() => {
-        if (!this.currNamespace) {
-          return;
-        }
+  ngOnDestroy() {
+    this.nsSub.unsubscribe();
+    this.pollSub.unsubscribe();
+  }
+
+  public poll(ns: string) {
+    this.pollSub.unsubscribe();
+    this.processedData = [];
 
-        this.backend
-          .getTensorboards(this.currNamespace)
-          .subscribe(tensorboards => {
-            if (!isEqual(this.rawData, tensorboards)) {
-              this.rawData = tensorboards;
-
-              // Update the frontend's state
-              this.processedData = this.processIncomingData(tensorboards);
-              this.poller.reset();
-            }
-          });
-      }),
-    );
-
-    // 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.getTensorboards(ns);
+
+    this.pollSub = this.poller.exponential(request).subscribe(tensorboards => {
+      this.processedData = this.processIncomingData(tensorboards);
+    });
   }
 
   public reactToAction(a: ActionEvent) {
@@ -115,7 +104,7 @@ export class IndexComponent implements OnInit {
           SnackType.Success,
           2000,
         );
-        this.poller.reset();
+        this.poll(this.currNamespace);
       }
     });
   }
@@ -140,10 +129,10 @@ export class IndexComponent implements OnInit {
 
       // Close the open dialog only if the DELETE request succeeded
       this.backend
-        .deleteTensorboard(this.currNamespace, tensorboard.name)
+        .deleteTensorboard(tensorboard.namespace, tensorboard.name)
         .subscribe({
           next: _ => {
-            this.poller.reset();
+            this.poll(tensorboard.namespace);
             ref.close(DIALOG_RESP.ACCEPT);
           },
           error: err => {