cluster-view bugfixing, attempt 100500..

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

src/common/ipc.ts

@@ -49,7 +49,7 @@ export function createIpcChannel({ autoBind = true, mode = IpcMode.ASYNC, timeou
           if (resolved) return;
           res.msgId = req.msgId; // return back to sender to be able to handle response
           resolved = true
-          logger.info(`[IPC]: sending response to "${channel}"`, res);
+          logger.debug(`[IPC]: sending response to "${channel}"`, res);
           if (mode === IpcMode.ASYNC) {
             event.reply(channel, res);
           }
@@ -82,7 +82,6 @@ export function createIpcChannel({ autoBind = true, mode = IpcMode.ASYNC, timeou
         msgId: getRandId({ prefix: "ipc-msg-id" }),
         args: args,
       }
-      logger.info(`[IPC]: "${channel}" sending message to main`, req);
       if (mode === IpcMode.ASYNC) {
         ipcRenderer.send(channel, req)
       }
@@ -94,7 +93,7 @@ export function createIpcChannel({ autoBind = true, mode = IpcMode.ASYNC, timeou
           if (req.msgId === res.msgId) {
             const meta = { ...req, ...res };
             if (res.data) {
-              logger.info(`[IPC]: "${channel}" resolve`, meta);
+              logger.debug(`[IPC]: "${channel}" resolve`, meta);
               resolve(res.data);
             }
             if (res.error) {

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

@@ -1,13 +1,13 @@
 .ClusterManager {
   display: grid;
-  grid-template-areas: "menu lens-view" "menu lens-view" "bottom-bar bottom-bar";
+  grid-template-areas: "menu main" "menu main" "bottom-bar bottom-bar";
   grid-template-rows: auto 1fr min-content;
   grid-template-columns: min-content 1fr;
   height: 100%;
 
-  #lens-view {
+  main {
     position: relative;
-    grid-area: lens-view;
+    grid-area: main;
     display: flex;
   }
 

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

@@ -30,7 +30,7 @@ export class ClusterManager extends React.Component {
     return (
       <div className="ClusterManager">
         <div id="draggable-top"/>
-        <div id="lens-view">
+        <main>
           <Switch>
             <Route component={LandingPage} {...landingRoute}/>
             <Route component={Preferences} {...preferencesRoute}/>
@@ -39,7 +39,7 @@ export class ClusterManager extends React.Component {
             <Route component={ClusterView} {...clusterViewRoute}/>
             <Redirect exact from="/" to={this.startUrl}/>
           </Switch>
-        </div>
+        </main>
         <ClustersMenu/>
         <BottomBar/>
       </div>

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

@@ -8,11 +8,12 @@ import { computed, observable } from "mobx";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { Icon } from "../icon";
 import { Button } from "../button";
-import { cssNames } from "../../utils";
+import { cssNames, IClassName } from "../../utils";
 import { Cluster } from "../../../main/cluster";
 import { ClusterId, clusterStore } from "../../../common/cluster-store";
 
 interface Props {
+  className?: IClassName;
   clusterId: ClusterId;
 }
 
@@ -68,7 +69,7 @@ export class ClusterStatus extends React.Component<Props> {
     const failureReason = cluster.failureReason;
     const isError = hasErrors || isDisconnected;
     return (
-      <div className="ClusterStatus flex column gaps">
+      <div className={cssNames("ClusterStatus flex column gaps", this.props.className)}>
         {isError && (
           <Icon
             material="cloud_off"

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

@@ -1,10 +1,18 @@
 .ClusterView {
   width: 100%;
   height: 100%;
-  flex: 1;
   display: none;
 
   &.loaded {
     display: flex;
   }
 }
+
+//#lens-views {
+//  position: absolute;
+//  left: 0;
+//  top: 0;
+//  width: 0;
+//  height: 0;
+//  overflow: hidden;
+//}

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

@@ -1,7 +1,7 @@
 import "./cluster-view.scss"
 import React from "react";
 import { WebviewTag } from "electron"
-import { autorun, computed, observable } from "mobx";
+import { action, autorun, computed, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ClusterId, clusterStore } from "../../../common/cluster-store";
 import { getMatchedClusterId } from "./cluster-view.route";
@@ -9,65 +9,71 @@ import { ClusterStatus } from "./cluster-status";
 import logger from "../../../main/logger";
 import { clusterIpc } from "../../../common/cluster-ipc";
 
+const lensViews = observable.map<ClusterId, WebviewTag>()
+const isLoaded = observable.map<ClusterId, boolean>()
+
 @observer
 export class ClusterView extends React.Component {
-  static views = observable.map<ClusterId, WebviewTag>()
-  static isLoaded = observable.map<ClusterId, boolean>()
-
-  @observable.ref placeholder: HTMLElement;
+  protected placeholder: HTMLElement;
 
   @computed get cluster() {
     return clusterStore.getById(getMatchedClusterId())
   }
 
+  // fixme: attach/detach doesn't work properly
   componentDidMount() {
-    disposeOnUnmount(this, [
-      autorun(() => {
-        if (this.cluster) {
-          this.initView(this.cluster.id)
-          this.attachView(this.cluster.id)
-        }
-      })
-    ])
+    // disposeOnUnmount(this, [
+    //   autorun(() => {
+    //     const activeClusterId = this.cluster?.id;
+    //     if (activeClusterId) {
+    //       this.initView(activeClusterId);
+    //       Array.from(lensViews).forEach(([clusterId, view]) => {
+    //         if (activeClusterId === clusterId && isLoaded.has(clusterId)) {
+    //           this.placeholder.appendChild(view)
+    //         } else {
+    //           view.parentElement.removeChild(view);
+    //         }
+    //       })
+    //     }
+    //   }),
+    // ])
   }
 
-  initView = (clusterId: ClusterId) => {
-    if (ClusterView.views.has(clusterId)) {
+  @action
+  initView(clusterId: ClusterId) {
+    if (lensViews.has(clusterId)) {
       return;
     }
+    logger.info(`[WEBVIEW]: init view for clusterId=${clusterId}`)
     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");
-      clusterIpc.init.invokeFromRenderer(clusterId); // push-state to webview
-      ClusterView.isLoaded.set(clusterId, true);
+      logger.info(`[WEBVIEW]: loaded, clusterId=${clusterId}`)
+      isLoaded.set(clusterId, true);
+      webview.classList.add("loaded")
+      clusterIpc.init.invokeFromRenderer(clusterId); // push cluster-state to webview
     });
     webview.addEventListener("did-fail-load", (event) => {
-      logger.error("failed to load lens-webview", event)
+      logger.error(`[WEBVIEW]: failed to load, clusterId=${clusterId}`, event)
     });
+    lensViews.set(clusterId, webview);
     document.body.appendChild(webview);
-    ClusterView.views.set(clusterId, webview);
   }
 
-  attachView = async (clusterId: ClusterId) => {
-    const view = ClusterView.views.get(clusterId);
-    const isLoaded = ClusterView.views.has(clusterId);
-    if (view && isLoaded && this.placeholder) {
-      this.placeholder.replaceWith(view);
-    }
+  bindRef = (elem: HTMLElement) => {
+    this.placeholder = elem;
   }
 
   render() {
     const { cluster } = this;
-    if (cluster) {
-      if (!cluster.accessible) {
-        return <ClusterStatus clusterId={cluster.id}/>
-      }
-      return <div ref={e => this.placeholder = e}/>
-    }
+    const showStatus = cluster && !cluster.accessible;
+    return (
+      <div className="ClusterView" ref={this.bindRef}>
+        {showStatus && <ClusterStatus clusterId={cluster.id}/>}
+      </div>
+    )
   }
 }