cluster-view battling -- part 2

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

src/common/cluster-ipc.ts

@@ -3,6 +3,14 @@ import { ClusterId, clusterStore } from "./cluster-store";
 import { tracker } from "./tracker";
 
 export const clusterIpc = {
+  // todo: remove
+  init: createIpcChannel({
+    channel: "cluster:init",
+    handle: async (clusterId: ClusterId) => {
+      return clusterStore.getById(clusterId)?.pushState();
+    },
+  }),
+
   activate: createIpcChannel({
     channel: "cluster:activate",
     handle: async (clusterId: ClusterId = clusterStore.activeClusterId) => {

src/common/ipc.ts

@@ -129,7 +129,7 @@ export function broadcastIpc({ channel, webContentId, filter, args = [] }: IpcBr
   }
   views.forEach(webContent => {
     const type = webContent.getType();
-    logger.debug(`[IPC]: sending message "${channel}" to ${type}=${webContent.id}`, { args });
+    logger.debug(`[IPC]: broadcasting "${channel}" to ${type}=${webContent.id}`, { args });
     webContent.send(channel, ...[args].flat());
   })
 }

src/renderer/components/app.tsx

@@ -31,10 +31,13 @@ import { isAllowedResource } from "../../common/rbac";
 import { ClusterSettings, clusterSettingsRoute } from "./+cluster-settings";
 import { ErrorBoundary } from "./error-boundary";
 import { Terminal } from "./dock/terminal";
+import { getHostedClusterId } from "../../common/cluster-store";
+import { clusterIpc } from "../../common/cluster-ipc";
 
 @observer
 export class App extends React.Component {
   static async init() {
+    await clusterIpc.init.invokeFromRenderer(getHostedClusterId())
     await Terminal.preloadFonts()
   }
 

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

@@ -1,8 +1,8 @@
 .ClusterView {
   width: 100%;
   height: 100%;
-  border: 0;
-  //display: none;
+  flex: 1;
+  display: none;
 
   &.loaded {
     display: flex;

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

@@ -5,53 +5,67 @@ import { autorun, computed, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ClusterId, clusterStore } from "../../../common/cluster-store";
 import { getMatchedClusterId } from "./cluster-view.route";
-import { Cluster } from "../../../main/cluster";
 import { ClusterStatus } from "./cluster-status";
+import logger from "../../../main/logger";
 
 @observer
 export class ClusterView extends React.Component {
   static views = observable.map<ClusterId, WebviewTag>()
   static isLoaded = observable.map<ClusterId, boolean>()
 
+  @observable.ref placeholder: HTMLElement;
+
   @computed get cluster() {
     return clusterStore.getById(getMatchedClusterId())
   }
 
-  @computed get clusterView() {
-    return ClusterView.views.get(this.cluster?.id)
-  }
-
   componentDidMount() {
     disposeOnUnmount(this, [
-      autorun(() => this.activateView(this.cluster))
+      autorun(() => {
+        if (this.cluster) {
+          this.initView(this.cluster.id)
+          this.activateView(this.cluster.id)
+        }
+      })
     ])
   }
 
-  // fixme
-  activateView = (cluster: Cluster) => {
-    if (!cluster || ClusterView.views.has(cluster.id)) {
+  initView = (clusterId: ClusterId) => {
+    if (ClusterView.views.has(clusterId)) {
       return;
     }
-    const view = document.createElement("webview");
-    view.className = "ClusterView"
-    view.setAttribute("nodeintegration", "true")
-    view.setAttribute("enableremotemodule", "true")
-    view.addEventListener("did-finish-load", () => {
-      console.log('CLUSTER VIEW READY!', cluster)
-      // view.openDevTools()
+    const webview = document.createElement("webview");
+    webview.className = "ClusterView"
+    webview.setAttribute("src", `//${clusterId}.${location.host}`)
+    webview.setAttribute("nodeintegration", "true")
+    webview.setAttribute("enableremotemodule", "true")
+    webview.addEventListener("did-finish-load", () => {
+      webview.openDevTools();
+      webview.classList.add("loaded");
+      ClusterView.isLoaded.set(clusterId, true)
     });
-    view.addEventListener("did-fail-load", event => {
-      // todo: handle
+    webview.addEventListener("did-fail-load", (event) => {
+      logger.error("failed to load lens-webview", event)
     });
-    view.src = `${location.protocol}//${cluster.id}.${location.host}`
-    document.body.appendChild(view);
-    ClusterView.views.set(cluster.id, view);
+    document.body.appendChild(webview);
+    ClusterView.views.set(clusterId, webview);
+  }
+
+  activateView = async (clusterId: ClusterId) => {
+    const view = ClusterView.views.get(clusterId);
+    const isLoaded = ClusterView.isLoaded.has(clusterId);
+    if (view && isLoaded && this.placeholder) {
+      this.placeholder.replaceWith(view);
+    }
   }
 
   render() {
     const { cluster } = this;
     if (cluster) {
-      return <ClusterStatus clusterId={cluster.id}/>
+      if (!cluster.accessible) {
+        return <ClusterStatus clusterId={cluster.id}/>
+      }
+      return <div ref={e => this.placeholder = e}/>
     }
   }
 }