fix: refreshing cluster-view on ready

Signed-off-by: Roman <ixrock@gmail.com>

src/common/cluster-store.ts

@@ -143,8 +143,6 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       logger.info("[CLUSTER-STORE] requesting initial state sync");
       const clusterStates: clusterStateSync[] = await requestMain(ClusterStore.stateRequestChannel);
 
-      console.log(`CLUSTERS (${document.URL})`, clusterStates);
-
       clusterStates.forEach((clusterState) => {
         const cluster = this.getById(clusterState.id);
 
@@ -163,10 +161,6 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
           });
         });
 
-        console.log('CLUSTERS', {
-          clusterStates
-        });
-
         return clusterStates;
       });
     }

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -1,9 +1,9 @@
 import "./cluster-view.scss";
 import React from "react";
-import { comparer, computed, makeObservable, reaction } from "mobx";
+import { computed, makeObservable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ClusterStatus } from "./cluster-status";
-import { hasLoadedView, initView, refreshViews } from "./lens-views";
+import { initView, lensViews, refreshViews } from "./lens-views";
 import { Cluster } from "../../../main/cluster";
 import { ClusterStore } from "../../../common/cluster-store";
 import { requestMain } from "../../../common/ipc";
@@ -15,9 +15,7 @@ import { getMatchedClusterId } from "../../navigation";
 export class ClusterView extends React.Component {
   constructor(props: {}) {
     super(props);
-
     makeObservable(this);
-    this.bindEvents();
   }
 
   get clusterId() {
@@ -28,44 +26,45 @@ export class ClusterView extends React.Component {
     return ClusterStore.getInstance().getById(this.clusterId);
   }
 
-  private bindEvents() {
+  @computed get isReady(): boolean {
+    const { cluster, clusterId } = this;
+
+    return [
+      cluster?.available,
+      cluster?.ready,
+      lensViews.get(clusterId)?.isLoaded, // cluster's iframe is loaded & ready
+    ].every(Boolean);
+  }
+
+  componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => [
+      reaction(() => this.isReady, () => this.refreshViews(), {
-        // refresh views when on of the following changes:
+        fireImmediately: true
-        hasLoadedView(this.clusterId),
-        this.cluster?.available,
-        this.cluster?.ready,
-      ], changes => {
-        console.log('CHANGES', changes)
-        this.refreshViews(this.clusterId);
-      }, {
-        fireImmediately: true,
-        equals: comparer.shallow,
       }),
     ]);
   }
 
   /**
-   * Refresh cluster-views visibility and catalog's active entity.
+   * Refresh cluster-views (iframes) visibility and catalog's active entity.
-   * @param visibleClusterId Currently viewing cluster's iframe
    */
-  refreshViews = async (visibleClusterId: string) => {
+  refreshViews(clusterId = this.clusterId) {
-    await initView(visibleClusterId);
+    try {
-    await requestMain(clusterActivateHandler, visibleClusterId, false);
+      initView(clusterId);
-    refreshViews(visibleClusterId);
+      requestMain(clusterActivateHandler, clusterId, false);
-
+      refreshViews(clusterId);
-    const activeEntity = catalogEntityRegistry.getById(visibleClusterId);
+      catalogEntityRegistry.activeEntity = catalogEntityRegistry.getById(clusterId);
-    catalogEntityRegistry.activeEntity = activeEntity;
+    } catch (error) {
+      console.error(`refreshing cluster-view: ${error}`);
+    }
   }
 
   render() {
-    const { cluster } = this;
+    const { clusterId, isReady } = this;
-    const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready);
 
     return (
       <div className="ClusterView flex align-center">
-        {showStatus && (
+        {!isReady && (
-          <ClusterStatus key={cluster.id} clusterId={cluster.id} className="box center"/>
+          <ClusterStatus key={clusterId} clusterId={clusterId} className="box center"/>
         )}
       </div>
     );

src/renderer/components/cluster-manager/lens-views.ts

@@ -15,13 +15,9 @@ export function hasLoadedView(clusterId: ClusterId): boolean {
 }
 
 export async function initView(clusterId: ClusterId) {
-  if (!clusterId || lensViews.has(clusterId)) {
-    return;
-  }
-
   const cluster = ClusterStore.getInstance().getById(clusterId);
 
-  if (!cluster) {
+  if (!cluster || lensViews.has(clusterId)) {
     return;
   }
 
@@ -37,6 +33,7 @@ export async function initView(clusterId: ClusterId) {
   }, { once: true });
   lensViews.set(clusterId, { clusterId, view: iframe });
   parentElem.appendChild(iframe);
+
   logger.info(`[LENS-VIEW]: waiting cluster to be ready, clusterId=${clusterId}`);
   await cluster.whenReady;
   await autoCleanOnRemove(clusterId, iframe);