Fix UI staleness after network issues (#1192) (#1306)

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/main/cluster-manager.ts

@@ -1,5 +1,6 @@
 import "../common/cluster-ipc";
 import type http from "http"
+import { ipcMain } from "electron"
 import { autorun } from "mobx";
 import { clusterStore, getClusterIdFromHost } from "../common/cluster-store"
 import { Cluster } from "./cluster"
@@ -30,6 +31,29 @@ export class ClusterManager {
     }, {
       delay: 250
     });
+
+    ipcMain.on("network:offline", () => { this.onNetworkOffline() })
+    ipcMain.on("network:online", () => { this.onNetworkOnline() })
+  }
+
+  protected onNetworkOffline() {
+    logger.info("[CLUSTER-MANAGER]: network is offline")
+    clusterStore.clustersList.forEach((cluster) => {
+      if (!cluster.disconnected) {
+        cluster.online = false
+        cluster.accessible = false
+        cluster.refreshConnectionStatus().catch((e) => e)
+      }
+    })
+  }
+
+  protected onNetworkOnline() {
+    logger.info("[CLUSTER-MANAGER]: network is online")
+    clusterStore.clustersList.forEach((cluster) => {
+      if (!cluster.disconnected) {
+        cluster.refreshConnectionStatus().catch((e) => e)
+      }
+    })
   }
 
   stop() {

src/main/cluster.ts

@@ -61,7 +61,7 @@ export class Cluster implements ClusterModel {
   @observable accessible = false;
   @observable ready = false;
   @observable reconnecting = false;
-  @observable disconnected = true;
+  @observable disconnected = true; // false if user has selected to connect
   @observable failureReason: string;
   @observable nodes = 0;
   @observable version: string;

src/renderer/api/kube-watch-api.ts

@@ -109,17 +109,22 @@ export class KubeWatchApi {
     }
   }
 
-  protected async onRouteEvent({ type, url }: IKubeWatchRouteEvent) {
-    if (type === "STREAM_END") {
+  protected async onRouteEvent(event: IKubeWatchRouteEvent) {
+    if (event.type === "STREAM_END") {
       this.disconnect();
-      const { apiBase, namespace } = KubeApi.parseApi(url);
+      const { apiBase, namespace } = KubeApi.parseApi(event.url);
       const api = apiManager.getApi(apiBase);
       if (api) {
         try {
           await api.refreshResourceVersion({ namespace });
           this.reconnect();
         } catch (error) {
-          console.debug("failed to refresh resource version", error)
+          console.error("failed to refresh resource version", error)
+          if (this.subscribers.size > 0) {
+            setTimeout(() => {
+              this.onRouteEvent(event)
+            }, 1000)
+          }
         }
       }
     }

src/renderer/components/app.tsx

@@ -46,6 +46,9 @@ export class App extends React.Component {
     await Terminal.preloadFonts()
     await clusterIpc.setFrameId.invokeFromRenderer(clusterId, frameId);
     await getHostedCluster().whenReady; // cluster.activate() is done at this point
+    window.addEventListener("online", () => {
+      window.location.reload()
+    })
   }
 
   get startURL() {

src/renderer/lens-app.tsx

@@ -1,5 +1,6 @@
 import "../common/system-ca"
 import React from "react";
+import { ipcRenderer } from "electron";
 import { Route, Router, Switch } from "react-router";
 import { observer } from "mobx-react";
 import { userStore } from "../common/user-store";
@@ -14,6 +15,15 @@ import { ConfirmDialog } from "./components/confirm-dialog";
 
 @observer
 export class LensApp extends React.Component {
+  static async init() {
+    window.addEventListener("offline", () => {
+      ipcRenderer.send("network:offline")
+    })
+    window.addEventListener("online", () => {
+      ipcRenderer.send("network:online")
+    })
+  }
+
   render() {
     return (
       <I18nProvider i18n={_i18n}>