From 54fa39c897d9883cec841450808102d71bd46fa8 Mon Sep 17 00:00:00 2001
From: Alex Collins <alexec@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:15:16 -0700
Subject: [PATCH] fix: Back-off UI retries. Fixes #5697 (#8333)

Signed-off-by: Alex Collins <alex_collins@intuit.com>
---
 ui/src/app/shared/list-watch.ts       | 10 +++++++---
 ui/src/app/shared/retry-observable.ts | 10 +++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/src/app/shared/list-watch.ts b/ui/src/app/shared/list-watch.ts
index 55a5936227f4..9ccda629c625 100644
--- 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
index 74826756e9bf..c8793a963ce4 100644
--- 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);
+    }
 }