From 09c765cab05718d52403d73dc10073422bfa93b0 Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 7 Aug 2020 09:59:07 +0300 Subject: [PATCH] cluster-view battling -- part 2 Signed-off-by: Roman Signed-off-by: Lauri Nevala --- src/common/cluster-ipc.ts | 8 +++ src/common/ipc.ts | 2 +- src/renderer/components/app.tsx | 3 + .../cluster-manager/cluster-view.scss | 4 +- .../cluster-manager/cluster-view.tsx | 58 ++++++++++++------- 5 files changed, 50 insertions(+), 25 deletions(-) diff --git a/src/common/cluster-ipc.ts b/src/common/cluster-ipc.ts index 5d5dfe206d..6782578c40 100644 --- a/src/common/cluster-ipc.ts +++ b/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) => { diff --git a/src/common/ipc.ts b/src/common/ipc.ts index ef6a18e1c4..2c18793801 100644 --- a/src/common/ipc.ts +++ b/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()); }) } diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx index c51afbdc14..1f747ede31 100755 --- a/src/renderer/components/app.tsx +++ b/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() } diff --git a/src/renderer/components/cluster-manager/cluster-view.scss b/src/renderer/components/cluster-manager/cluster-view.scss index 8839e8cca1..4f95d5d131 100644 --- a/src/renderer/components/cluster-manager/cluster-view.scss +++ b/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; diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx index 5dcd6b1a36..40561efbb0 100644 --- a/src/renderer/components/cluster-manager/cluster-view.tsx +++ b/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() static isLoaded = observable.map() + @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 + if (!cluster.accessible) { + return + } + return
this.placeholder = e}/> } } }