Cluster dashboard not rendered, fix #811

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

src/common/cluster-ipc.ts

@@ -3,21 +3,14 @@ import { ClusterId, clusterStore } from "./cluster-store";
 import { tracker } from "./tracker";
 
 export const clusterIpc = {
-  initView: createIpcChannel({
-    channel: "cluster:init",
-    handle: async (clusterId: ClusterId, frameId: number) => {
-      const cluster = clusterStore.getById(clusterId);
-      if (cluster) {
-        cluster.frameId = frameId; // save cluster's webFrame.routingId to be able to send push-updates
-        return cluster.pushState();
-      }
-    },
-  }),
-
   activate: createIpcChannel({
     channel: "cluster:activate",
-    handle: (clusterId: ClusterId) => {
-      return clusterStore.getById(clusterId)?.activate();
+    handle: (clusterId: ClusterId, frameId?: number) => {
+      const cluster = clusterStore.getById(clusterId);
+      if (cluster) {
+        if (frameId) cluster.frameId = frameId; // save cluster's webFrame.routingId to be able to send push-updates
+        return cluster.activate();
+      }
     },
   }),
 

src/main/cluster.ts

@@ -130,7 +130,7 @@ export class Cluster implements ClusterModel {
     if (!this.eventDisposers.length) {
       this.bindEvents();
     }
-    if (this.disconnected || !this.accessible) {
+    if (this.disconnected) {
       await this.reconnect();
     }
     await this.refresh();

src/renderer/components/app.tsx

@@ -43,8 +43,8 @@ export class App extends React.Component {
     const clusterId = getHostedClusterId();
     logger.info(`[APP]: Init dashboard, clusterId=${clusterId}, frameId=${frameId}`)
     await Terminal.preloadFonts()
-    await clusterIpc.initView.invokeFromRenderer(clusterId, frameId);
-    await getHostedCluster().whenInitialized;
+    await clusterIpc.activate.invokeFromRenderer(clusterId, frameId);
+    await getHostedCluster().whenReady; // cluster.refresh() is done at this point
   }
 
   get startURL() {

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

@@ -1,7 +1,7 @@
 import "./cluster-manager.scss"
 import React from "react";
 import { Redirect, Route, Switch } from "react-router";
-import { reaction } from "mobx";
+import { comparer, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
@@ -23,11 +23,14 @@ export class ClusterManager extends React.Component {
         fireImmediately: true
       }),
       reaction(() => [
+        getMatchedClusterId(), // refresh when active cluster-view changed
         hasLoadedView(getMatchedClusterId()), // refresh when cluster's webview loaded
         getMatchedCluster()?.available, // refresh on disconnect active-cluster
+        getMatchedCluster()?.ready, // refresh when cluster ready-state change
       ], refreshViews, {
-        fireImmediately: true
-      })
+        fireImmediately: true,
+        equals: comparer.shallow,
+      }),
     ])
   }
 

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

@@ -38,7 +38,7 @@ export class ClusterStatus extends React.Component<Props> {
         error: res.error,
       });
     })
-    if (!this.cluster.initialized || this.cluster.disconnected) {
+    if (this.cluster.disconnected) {
       await this.refreshCluster();
     }
   }
@@ -63,7 +63,7 @@ export class ClusterStatus extends React.Component<Props> {
     if (!hasErrors || this.isReconnecting) {
       return (
         <>
-          <CubeSpinner />
+          <CubeSpinner/>
           <pre className="kube-auth-out">
             <p>{this.isReconnecting ? "Reconnecting..." : "Connecting..."}</p>
             {authOutput.map(({ data, error }, index) => {
@@ -75,7 +75,7 @@ export class ClusterStatus extends React.Component<Props> {
     }
     return (
       <>
-        <Icon material="cloud_off" className="error" />
+        <Icon material="cloud_off" className="error"/>
         <h2>
           {cluster.preferences.clusterName}
         </h2>

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

@@ -21,7 +21,6 @@ export async function initView(clusterId: ClusterId) {
   }
   logger.info(`[LENS-VIEW]: init dashboard, clusterId=${clusterId}`)
   const cluster = clusterStore.getById(clusterId);
-  await cluster.whenReady;
   const parentElem = document.getElementById("lens-views");
   const iframe = document.createElement("iframe");
   iframe.name = cluster.contextName;
@@ -32,18 +31,22 @@ export async function initView(clusterId: ClusterId) {
   })
   lensViews.set(clusterId, { clusterId, view: iframe });
   parentElem.appendChild(iframe);
-  // auto-clean when cluster removed
+  autoCleanOnRemove(clusterId, iframe);
+}
+
+export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrameElement) {
   await when(() => !clusterStore.getById(clusterId));
   logger.info(`[LENS-VIEW]: remove dashboard, clusterId=${clusterId}`)
-  parentElem.removeChild(iframe)
+  iframe.parentElement.removeChild(iframe);
   lensViews.delete(clusterId)
-
 }
 
 export function refreshViews() {
   const cluster = getMatchedCluster();
   lensViews.forEach(({ clusterId, view, isLoaded }) => {
-    const isVisible = cluster && cluster.available && cluster.id === clusterId;
-    view.style.display = isLoaded && isVisible ? "flex" : "none"
+    const isCurrent = clusterId === cluster?.id;
+    const isReady = cluster?.available && cluster?.ready;
+    const isVisible = isCurrent && isLoaded && isReady;
+    view.style.display = isVisible ? "flex" : "none"
   })
 }