From 06612409ef7835db55c357ccc1d191a86345eee3 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Tue, 1 Jun 2021 16:32:42 +0300
Subject: [PATCH] Fix ClusterView bugs (#2928)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../cluster-manager/cluster-view.tsx          | 29 +++++++++++--------
 .../components/cluster-manager/lens-views.ts  |  9 ++++--
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx
index af719107e0..67f0088e69 100644
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/src/renderer/components/cluster-manager/cluster-view.tsx
@@ -30,20 +30,26 @@ import { ClusterStore } from "../../../common/cluster-store";
 import { requestMain } from "../../../common/ipc";
 import { clusterActivateHandler } from "../../../common/cluster-ipc";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { getMatchedClusterId, navigate } from "../../navigation";
+import { navigate } from "../../navigation";
 import { catalogURL } from "../+catalog/catalog.route";
+import type { RouteComponentProps } from "react-router-dom";
+import type { IClusterViewRouteParams } from "./cluster-view.route";
+
+interface Props extends RouteComponentProps<IClusterViewRouteParams> {
+}
+
 
 @observer
-export class ClusterView extends React.Component {
+export class ClusterView extends React.Component<Props> {
   private store = ClusterStore.getInstance();
 
-  constructor(props: {}) {
+  constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
-  get clusterId() {
-    return getMatchedClusterId();
+  @computed get clusterId() {
+    return this.props.match.params.clusterId;
   }
 
   @computed get cluster(): Cluster | undefined {
@@ -71,14 +77,13 @@ export class ClusterView extends React.Component {
         fireImmediately: true,
       }),
 
-      reaction(() => this.isReady, (ready) => {
-        if (ready) {
-          refreshViews(this.clusterId); // show cluster's view (iframe)
-        } else if (hasLoadedView(this.clusterId)) {
+      reaction(() => [this.cluster?.ready, this.cluster?.disconnected], (values) => {
+        const disconnected = values[1];
+
+        if (hasLoadedView(this.clusterId) && disconnected) {
+          refreshViews();
           navigate(catalogURL()); // redirect to catalog when active cluster get disconnected/not available
         }
-      }, {
-        fireImmediately: true,
       }),
     ]);
   }
@@ -87,7 +92,7 @@ export class ClusterView extends React.Component {
     const { clusterId, cluster, isReady } = this;
 
     if (cluster && !isReady) {
-      return <ClusterStatus clusterId={clusterId} className="box center"/>;
+      return <ClusterStatus key={clusterId} clusterId={clusterId} className="box center"/>;
     }
 
     return null;
diff --git a/src/renderer/components/cluster-manager/lens-views.ts b/src/renderer/components/cluster-manager/lens-views.ts
index 1ec47a48fc..e6d636c318 100644
--- a/src/renderer/components/cluster-manager/lens-views.ts
+++ b/src/renderer/components/cluster-manager/lens-views.ts
@@ -56,8 +56,13 @@ export async function initView(clusterId: ClusterId) {
   parentElem.appendChild(iframe);
 
   logger.info(`[LENS-VIEW]: waiting cluster to be ready, clusterId=${clusterId}`);
-  await cluster.whenReady;
-  await autoCleanOnRemove(clusterId, iframe);
+
+  try {
+    await when(() => cluster.ready, { timeout: 5_000 }); // we cannot wait forever because cleanup would be blocked for broken cluster connections
+    logger.info(`[LENS-VIEW]: cluster is ready, clusterId=${clusterId}`);
+  } finally {
+    await autoCleanOnRemove(clusterId, iframe);
+  }
 }
 
 export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrameElement) {