diff --git a/src/common/base-store.ts b/src/common/base-store.ts index c4b9756635..826fde14e1 100644 --- a/src/common/base-store.ts +++ b/src/common/base-store.ts @@ -8,6 +8,8 @@ import logger from "../main/logger"; import { broadcastMessage, subscribeToBroadcast, unsubscribeFromBroadcast } from "./ipc"; import isEqual from "lodash/isEqual"; +// FIXME: sync/saving doesn't work + export interface BaseStoreParams extends ConfOptions { autoLoad?: boolean; syncEnabled?: boolean; diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts index bf36410d9a..5dbeea7167 100644 --- a/src/common/cluster-store.ts +++ b/src/common/cluster-store.ts @@ -143,6 +143,8 @@ 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); @@ -152,16 +154,20 @@ export class ClusterStore extends BaseStore { }); } else if (ipcMain) { handleRequest(ClusterStore.stateRequestChannel, (): clusterStateSync[] => { - const states: clusterStateSync[] = []; + const clusterStates: clusterStateSync[] = []; this.clustersList.forEach((cluster) => { - states.push({ + clusterStates.push({ state: cluster.getState(), id: cluster.id }); }); - return states; + 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 1fe11ff472..4206b76f50 100644 --- a/src/renderer/components/cluster-manager/cluster-view.tsx +++ b/src/renderer/components/cluster-manager/cluster-view.tsx @@ -1,77 +1,67 @@ import "./cluster-view.scss"; import React from "react"; -import { reaction } from "mobx"; +import { comparer, computed, makeObservable, reaction } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; -import { RouteComponentProps } from "react-router"; -import { IClusterViewRouteParams } from "./cluster-view.route"; import { ClusterStatus } from "./cluster-status"; -import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views"; +import { hasLoadedView, initView, refreshViews } from "./lens-views"; import { Cluster } from "../../../main/cluster"; 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 { catalogURL } from "../+catalog"; -import { navigate } from "../../navigation"; - -interface Props extends RouteComponentProps { -} +import { getMatchedClusterId } from "../../navigation"; @observer -export class ClusterView extends React.Component { - get clusterId() { - return this.props.match.params.clusterId; +export class ClusterView extends React.Component { + constructor(props: {}) { + super(props); + + makeObservable(this); + this.bindEvents(); } - get cluster(): Cluster { + get clusterId() { + return getMatchedClusterId(); + } + + @computed get cluster(): Cluster { return ClusterStore.getInstance().getById(this.clusterId); } - async componentDidMount() { + private bindEvents() { disposeOnUnmount(this, [ - reaction(() => this.clusterId, (clusterId) => { - this.showCluster(clusterId); - }, { fireImmediately: true} - ), - reaction(() => this.cluster?.ready, (ready) => { - const clusterView = lensViews.get(this.clusterId); - - if (clusterView && clusterView.isLoaded && !ready) { - navigate(catalogURL()); - } - }) + 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, + }), ]); } - componentWillUnmount() { - this.hideCluster(); - } + /** + * Refresh cluster-views visibility and catalog's active entity. + * @param visibleClusterId Currently viewing cluster's iframe + */ + refreshViews = async (visibleClusterId: string) => { + await initView(visibleClusterId); + await requestMain(clusterActivateHandler, visibleClusterId, false); + refreshViews(visibleClusterId); - showCluster(clusterId: string) { - initView(clusterId); - requestMain(clusterActivateHandler, this.clusterId, false); - - const entity = catalogEntityRegistry.getById(this.clusterId); - - if (entity) { - catalogEntityRegistry.activeEntity = entity; - } - } - - hideCluster() { - refreshViews(); - - if (catalogEntityRegistry.activeEntity?.metadata?.uid === this.clusterId) { - catalogEntityRegistry.activeEntity = null; - } + const activeEntity = catalogEntityRegistry.getById(visibleClusterId); + catalogEntityRegistry.activeEntity = activeEntity; } render() { const { cluster } = this; const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready); - refreshViews(cluster.id); - return (
{showStatus && ( diff --git a/src/renderer/components/cluster-manager/lens-views.ts b/src/renderer/components/cluster-manager/lens-views.ts index 60d90c45d7..4dd65a7ff2 100644 --- a/src/renderer/components/cluster-manager/lens-views.ts +++ b/src/renderer/components/cluster-manager/lens-views.ts @@ -15,8 +15,6 @@ export function hasLoadedView(clusterId: ClusterId): boolean { } export async function initView(clusterId: ClusterId) { - refreshViews(clusterId); - if (!clusterId || lensViews.has(clusterId)) { return; } @@ -63,7 +61,8 @@ export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrame } export function refreshViews(visibleClusterId?: string) { - const cluster = !visibleClusterId ? null : ClusterStore.getInstance().getById(visibleClusterId); + logger.info(`[LENS-VIEW]: refreshing iframe views, visible cluster id=${visibleClusterId}`); + const cluster = ClusterStore.getInstance().getById(visibleClusterId); lensViews.forEach(({ clusterId, view, isLoaded }) => { const isCurrent = clusterId === cluster?.id;