debugging cluster-view error -- part 1

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

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<T = any> extends ConfOptions<T> {
   autoLoad?: boolean;
   syncEnabled?: boolean;

src/common/cluster-store.ts

@@ -143,6 +143,8 @@ 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);
 
@@ -152,16 +154,20 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       });
     } 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;
       });
     }
   }

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<IClusterViewRouteParams> {
-}
+import { getMatchedClusterId } from "../../navigation";
 
 @observer
-export class ClusterView extends React.Component<Props> {
-  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 (
       <div className="ClusterView flex align-center">
         {showStatus && (

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;