diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts index 5dbeea7167..eb0c93724e 100644 --- a/src/common/cluster-store.ts +++ b/src/common/cluster-store.ts @@ -143,8 +143,6 @@ export class ClusterStore extends BaseStore { 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 { }); }); - console.log('CLUSTERS', { - clusterStates - }); - return clusterStates; }); } diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx index 4206b76f50..06f0b8c9fa 100644 --- a/src/renderer/components/cluster-manager/cluster-view.tsx +++ b/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(() => [ - // refresh views when on of the following changes: - hasLoadedView(this.clusterId), - this.cluster?.available, - this.cluster?.ready, - ], changes => { - console.log('CHANGES', changes) - this.refreshViews(this.clusterId); - }, { - fireImmediately: true, - equals: comparer.shallow, + reaction(() => this.isReady, () => this.refreshViews(), { + fireImmediately: true }), ]); } /** - * Refresh cluster-views visibility and catalog's active entity. - * @param visibleClusterId Currently viewing cluster's iframe + * Refresh cluster-views (iframes) visibility and catalog's active entity. */ - refreshViews = async (visibleClusterId: string) => { - await initView(visibleClusterId); - await requestMain(clusterActivateHandler, visibleClusterId, false); - refreshViews(visibleClusterId); - - const activeEntity = catalogEntityRegistry.getById(visibleClusterId); - catalogEntityRegistry.activeEntity = activeEntity; + refreshViews(clusterId = this.clusterId) { + try { + initView(clusterId); + requestMain(clusterActivateHandler, clusterId, false); + refreshViews(clusterId); + catalogEntityRegistry.activeEntity = catalogEntityRegistry.getById(clusterId); + } catch (error) { + console.error(`refreshing cluster-view: ${error}`); + } } render() { - const { cluster } = this; - const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready); + const { clusterId, isReady } = this; return (
- {showStatus && ( - + {!isReady && ( + )}
); diff --git a/src/renderer/components/cluster-manager/lens-views.ts b/src/renderer/components/cluster-manager/lens-views.ts index 4dd65a7ff2..ed8556046b 100644 --- a/src/renderer/components/cluster-manager/lens-views.ts +++ b/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);