diff --git a/src/common/ipc.ts b/src/common/ipc.ts index fa79942ddc..150d8acdef 100644 --- a/src/common/ipc.ts +++ b/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) { diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index d6c1c842cc..582a32ff17 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/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; } diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index 7baf5d1fd2..9933b1f22c 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -30,7 +30,7 @@ export class ClusterManager extends React.Component { return (
-
+
@@ -39,7 +39,7 @@ export class ClusterManager extends React.Component { -
+
diff --git a/src/renderer/components/cluster-manager/cluster-status.tsx b/src/renderer/components/cluster-manager/cluster-status.tsx index 9a6849c20b..2e0ff8784f 100644 --- a/src/renderer/components/cluster-manager/cluster-status.tsx +++ b/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 { const failureReason = cluster.failureReason; const isError = hasErrors || isDisconnected; return ( -
+
{isError && ( () +const isLoaded = observable.map() + @observer export class ClusterView extends React.Component { - static views = observable.map() - static isLoaded = observable.map() - - @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 - } - return
this.placeholder = e}/> - } + const showStatus = cluster && !cluster.accessible; + return ( +
+ {showStatus && } +
+ ) } }