fix: Back-off UI retries. Fixes argoproj#5697

Signed-off-by: Alex Collins <[email protected]>
alexec · Apr 7, 2022 · 0fd8b13 · 0fd8b13
1 parent aa9ff17
commit 0fd8b13
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/ui/src/app/shared/list-watch.ts b/ui/src/app/shared/list-watch.ts
@@ -12,8 +12,6 @@ type Sorter = (a: Resource, b: Resource) => number;
 // put the youngest at the start of the list
 export const sortByYouth: Sorter = (a: Resource, b: Resource) => b.metadata.creationTimestamp.localeCompare(a.metadata.creationTimestamp);
 
-const reconnectAfterMs = 3000;
-
 /**
  * ListWatch allows you to start watching for changes, automatically reconnecting on error.
  */
@@ -26,6 +24,7 @@ export class ListWatch<T extends Resource> {
     private items: T[];
     private retryWatch: RetryWatch<T>;
     private timeout: any;
+    private reconnectAfterMs = 3000;
 
     constructor(
         list: () => Promise<{metadata: kubernetes.ListMeta; items: T[]}>,
@@ -66,7 +65,7 @@ export class ListWatch<T extends Resource> {
             .catch(e => {
                 this.stop();
                 this.onError(e);
-                this.timeout = setTimeout(() => this.start(), reconnectAfterMs);
+                this.reconnect();
             });
     }
 
@@ -77,6 +76,11 @@ export class ListWatch<T extends Resource> {
         clearTimeout(this.timeout);
         this.retryWatch.stop();
     }
+
+    private reconnect() {
+        this.timeout = setTimeout(() => this.start(), this.reconnectAfterMs);
+        this.reconnectAfterMs = Math.min(this.reconnectAfterMs * 1.5, 60000);
+    }
 }
 
 /**

diff --git a/ui/src/app/shared/retry-observable.ts b/ui/src/app/shared/retry-observable.ts
@@ -1,7 +1,5 @@
 import {Observable, Subscription} from 'rxjs';
 
-const reconnectAfterMs = 5000;
-
 /**
  * RetryObservable allows you to watch for changes, automatically reconnecting on error.
  */
@@ -12,6 +10,7 @@ export class RetryObservable<E, V> {
     private readonly onError: (error: Error) => void;
     private subscription: Subscription;
     private timeout: any; // should be `number`
+    private reconnectAfterMs = 3000;
 
     constructor(
         watch: (v?: V) => Observable<E>,
@@ -38,7 +37,7 @@ export class RetryObservable<E, V> {
             e => {
                 this.stop();
                 this.onError(e);
-                this.timeout = setTimeout(() => this.start(null), reconnectAfterMs);
+                this.reconnect();
             }
         );
     }
@@ -50,4 +49,9 @@ export class RetryObservable<E, V> {
             this.subscription.unsubscribe();
         }
     }
+
+    private reconnect() {
+        this.timeout = setTimeout(() => this.start(), this.reconnectAfterMs);
+        this.reconnectAfterMs = Math.min(this.reconnectAfterMs * 1.5, 60000);
+    }
 }