hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Make Inject-component usable in both LensApp and "App"

Browse Source 
Note: this will need some rehaul, as current design with "bootstrap" and iframe make single root for injectables somewhat challenging.

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Mikko Aspiala 2021-11-15 13:37:09 +02:00 committed by Janne Savolainen
parent c4c4bc5845
commit 3bc01dc50f
2 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/bootstrap.tsx
View File

@ -50,6 +50,9 @@ import { SentryInit } from "../common/sentry";
import { TerminalStore } from "./components/dock/terminal.store"; import { TerminalStore } from "./components/dock/terminal.store";
import { AppPaths } from "../common/app-paths"; import { AppPaths } from "../common/app-paths";
import { registerCustomThemes } from "./components/monaco-editor"; import { registerCustomThemes } from "./components/monaco-editor";
import { getDi } from "./components/getDi";
import { DiContextProvider } from "@ogre-tools/injectable-react";
import type { IDependencyInjectionContainer } from "@ogre-tools/injectable";
if (process.isMainFrame) { if (process.isMainFrame) {
SentryInit(); SentryInit();
@ -73,7 +76,7 @@ type AppComponent = React.ComponentType & {
init(rootElem: HTMLElement): Promise<void>; init(rootElem: HTMLElement): Promise<void>;
}; };
export async function bootstrap(comp: () => Promise<AppComponent>) { export async function bootstrap(comp: () => Promise<AppComponent>, di: IDependencyInjectionContainer) {
const rootElem = document.getElementById("app"); const rootElem = document.getElementById("app");
const logPrefix = `[BOOTSTRAP-${process.isMainFrame ? "ROOT" : "CLUSTER"}-FRAME]:`; const logPrefix = `[BOOTSTRAP-${process.isMainFrame ? "ROOT" : "CLUSTER"}-FRAME]:`;
@ -147,17 +150,26 @@ export async function bootstrap(comp: () => Promise<AppComponent>) {
await App.init(rootElem); await App.init(rootElem);
render(<> render(
{isMac && <div id="draggable-top" />} <DiContextProvider value={{ di }}>
{DefaultProps(App)} {isMac && <div id="draggable-top" />}
</>, rootElem);
{DefaultProps(App)}
</DiContextProvider>,
rootElem,
);
} }
const di = getDi();
// run // run
bootstrap( bootstrap(
async () => process.isMainFrame async () =>
? (await import("./root-frame")).RootFrame process.isMainFrame
: (await import("./cluster-frame")).ClusterFrame, ? (await import("./root-frame")).RootFrame
: (await import("./cluster-frame")).ClusterFrame,
di,
); );

73
src/renderer/cluster-frame.tsx
View File

@ -22,7 +22,6 @@ import React from "react";
import { observable, makeObservable } from "mobx"; import { observable, makeObservable } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { Redirect, Route, Router, Switch } from "react-router"; import { Redirect, Route, Router, Switch } from "react-router";
import { DiContextProvider } from "@ogre-tools/injectable-react";
import { history } from "./navigation"; import { history } from "./navigation";
import { NotFound } from "./components/+404"; import { NotFound } from "./components/+404";
import { UserManagement } from "./components/+user-management/user-management"; import { UserManagement } from "./components/+user-management/user-management";
@ -74,14 +73,12 @@ import { watchHistoryState } from "./remote-helpers/history-updater";
import { unmountComponentAtNode } from "react-dom"; import { unmountComponentAtNode } from "react-dom";
import { PortForwardDialog } from "./port-forward"; import { PortForwardDialog } from "./port-forward";
import { DeleteClusterDialog } from "./components/delete-cluster-dialog"; import { DeleteClusterDialog } from "./components/delete-cluster-dialog";
import { getDi } from "./components/getDi";
@observer @observer
export class ClusterFrame extends React.Component { export class ClusterFrame extends React.Component {
static clusterId: ClusterId; static clusterId: ClusterId;
static readonly logPrefix = "[CLUSTER-FRAME]:"; static readonly logPrefix = "[CLUSTER-FRAME]:";
static displayName = "ClusterFrame"; static displayName = "ClusterFrame";
diContainer = getDi();
constructor(props: {}) { constructor(props: {}) {
super(props); super(props);
@ -196,42 +193,40 @@ export class ClusterFrame extends React.Component {
render() { render() {
return ( return (
<DiContextProvider value={{ di: this.diContainer }}> <Router history={history}>
<Router history={history}> <ErrorBoundary>
<ErrorBoundary> <MainLayout sidebar={<Sidebar/>} footer={<Dock/>}>
<MainLayout sidebar={<Sidebar/>} footer={<Dock/>}> <Switch>
<Switch> <Route component={ClusterOverview} {...routes.clusterRoute}/>
<Route component={ClusterOverview} {...routes.clusterRoute}/> <Route component={Nodes} {...routes.nodesRoute}/>
<Route component={Nodes} {...routes.nodesRoute}/> <Route component={Workloads} {...routes.workloadsRoute}/>
<Route component={Workloads} {...routes.workloadsRoute}/> <Route component={Config} {...routes.configRoute}/>
<Route component={Config} {...routes.configRoute}/> <Route component={Network} {...routes.networkRoute}/>
<Route component={Network} {...routes.networkRoute}/> <Route component={Storage} {...routes.storageRoute}/>
<Route component={Storage} {...routes.storageRoute}/> <Route component={Namespaces} {...routes.namespacesRoute}/>
<Route component={Namespaces} {...routes.namespacesRoute}/> <Route component={Events} {...routes.eventRoute}/>
<Route component={Events} {...routes.eventRoute}/> <Route component={CustomResources} {...routes.crdRoute}/>
<Route component={CustomResources} {...routes.crdRoute}/> <Route component={UserManagement} {...routes.usersManagementRoute}/>
<Route component={UserManagement} {...routes.usersManagementRoute}/> <Route component={Apps} {...routes.appsRoute}/>
<Route component={Apps} {...routes.appsRoute}/> {this.renderExtensionTabLayoutRoutes()}
{this.renderExtensionTabLayoutRoutes()} {this.renderExtensionRoutes()}
{this.renderExtensionRoutes()} <Redirect exact from="/" to={this.startUrl}/>
<Redirect exact from="/" to={this.startUrl}/> <Route component={NotFound}/>
<Route component={NotFound}/> </Switch>
</Switch> </MainLayout>
</MainLayout> <Notifications/>
<Notifications/> <ConfirmDialog/>
<ConfirmDialog/> <KubeObjectDetails/>
<KubeObjectDetails/> <KubeConfigDialog/>
<KubeConfigDialog/> <DeploymentScaleDialog/>
<DeploymentScaleDialog/> <StatefulSetScaleDialog/>
<StatefulSetScaleDialog/> <ReplicaSetScaleDialog/>
<ReplicaSetScaleDialog/> <CronJobTriggerDialog/>
<CronJobTriggerDialog/> <PortForwardDialog/>
<PortForwardDialog/> <DeleteClusterDialog/>
<DeleteClusterDialog/> <CommandContainer clusterId={ClusterFrame.clusterId}/>
<CommandContainer clusterId={ClusterFrame.clusterId}/> </ErrorBoundary>
</ErrorBoundary> </Router>
</Router>
</DiContextProvider>
); );
} }
} }