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 && }
+
+ )
}
}