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

Introduce a way to use injectables for UI

Browse Source 
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2021-11-10 14:01:02 +02:00
parent ae97e16e9d
commit c4c4bc5845
7 changed files with 263 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -188,6 +188,8 @@
"@kubernetes/client-node": "^0.15.1",
"@sentry/electron": "^2.5.4",
"@sentry/integrations": "^6.15.0",
"@ogre-tools/injectable": "^1.0.2",
"@ogre-tools/injectable-react": "^1.0.3",
"abort-controller": "^3.0.0",
"auto-bind": "^4.0.0",
"autobind-decorator": "^2.4.0",

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

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

31
src/renderer/components/getDi.tsx Normal file
View File

@ -0,0 +1,31 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import { createContainer } from "@ogre-tools/injectable";
import type { IConfigurableDependencyInjectionContainer } from "@ogre-tools/injectable";
export const getDi = () => {
const di: IConfigurableDependencyInjectionContainer = createContainer(
() => require.context("./", true, /\.injectable\.(ts|tsx)$/),
);
return di;
};

53
src/renderer/components/getDiForUnitTesting.tsx Normal file
View File

@ -0,0 +1,53 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import glob from "glob";
import { memoize } from "lodash/fp";
import {
createContainer,
IConfigurableDependencyInjectionContainer,
} from "@ogre-tools/injectable";
export const getDiForUnitTesting = () => {
const di: IConfigurableDependencyInjectionContainer = createContainer();
getInjectableFilePaths()
.map(key => {
const injectable = require(key).default;
return {
id: key,
...injectable,
aliases: [injectable, ...(injectable.aliases || [])],
};
})
.forEach(injectable => di.register(injectable));
di.preventSideEffects();
return di;
};
const getInjectableFilePaths = memoize(() =>
glob.sync("./**/*.injectable.{ts,tsx}", { cwd: __dirname }),
);

45
types/ogre-tools-injectable-react.d.ts vendored Normal file
View File

@ -0,0 +1,45 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/// <reference types="react" />
declare module "@ogre-tools/injectable-react" {
import type { IDependencyInjectionContainer } from "@ogre-tools/injectable";
interface IDependencyInjectionContainerProviderProps {
di: IDependencyInjectionContainer;
}
export const DiContextProvider: React.Provider<IDependencyInjectionContainerProviderProps>;
export const Inject: <
TComponentInjectable extends IComponentInjectable<any, {}>,
>({
Component,
injectableKey,
getPlaceholder,
...props
}: Omit<
React.ComponentProps<TComponentInjectable["instantiate"]>,
keyof ReturnType<TComponentInjectable["getDependencies"]>
> & {
injectableKey: TComponentInjectable;
getPlaceholder?: () => JSX.Element | null;
}) => JSX.Element;
}

69
types/ogre-tools-injectable.d.ts vendored Normal file
View File

@ -0,0 +1,69 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
declare module "@ogre-tools/injectable" {
export interface IDependencyInjectionContainer {
inject: <
TInjectable extends IInjectable<TInstance, TDependencies>,
TInstance,
TDependencies,
>(
injectableKey: TInjectable,
) => ReturnType<TInjectable["instantiate"]>;
}
export interface IConfigurableDependencyInjectionContainer
extends IDependencyInjectionContainer {
register: (
injectable: IInjectable<any> | IComponentInjectable<any>,
) => void;
preventSideEffects: () => void;
override: <TInjectable extends IInjectable<TInstance, any>, TInstance>(
injectable: TInjectable,
overrider: ReturnType<TInjectable["instantiate"]>,
) => void;
}
interface ICommonInjectable<TDependencies> {
id?: string;
getDependencies: (di?: IDependencyInjectionContainer) => TDependencies;
lifecycle?: lifecycleEnum;
}
export interface IInjectable<TInstance, TDependencies = {}>
extends ICommonInjectable<TDependencies> {
instantiate: (dependencies: TDependencies) => TInstance;
}
export interface IComponentInjectable<TInstance, TDependencies = {}>
extends ICommonInjectable<TDependencies> {
instantiate: TInstance;
}
export enum lifecycleEnum {
singleton,
transient,
scopedTransient,
}
export const createContainer = (...getRequireContexts: any[]) =>
IConfigurableDependencyInjectionContainer;
}

24
yarn.lock
View File

@ -946,6 +946,30 @@
"@nodelib/fs.scandir" "2.1.3"
fastq "^1.6.0"
"@ogre-tools/fp@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@ogre-tools/fp/-/fp-1.0.2.tgz#26c2c5cf60aa01cc94763cc68beba7052fdadfd9"
integrity sha512-ftvi/aoi5PaojWnuhHzp0YiecUd22HzW5gErsSiKyO2bps90WI4WjgY6d9hWdlzM9eukVmwM+dC6rGNlltNHNw==
dependencies:
lodash "^4.17.21"
"@ogre-tools/injectable-react@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@ogre-tools/injectable-react/-/injectable-react-1.0.3.tgz#e30ea455cc4ccf24fbad831b460023492832c2f9"
integrity sha512-CFJeuezdJIZD0o0rp1MnahzItzZ7eSixSo0v0+002kq8T7HZb1ycD8d/zvXOBnkEF34K6GGibXicEw1q46SZzw==
dependencies:
"@ogre-tools/fp" "^1.0.2"
"@ogre-tools/injectable" "^1.0.2"
lodash "^4.17.21"
"@ogre-tools/injectable@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@ogre-tools/injectable/-/injectable-1.0.2.tgz#b081fefb2026c57fe47e27c268efa73d43934546"
integrity sha512-NZ7FHxKLfr+8o4aL51UQ212w1wD3QIsEN/JNtjtEq0TgLjd2Qo3zSniL4hCEj5M49K2qe3CxEb6ezyf2vFTb5g==
dependencies:
"@ogre-tools/fp" "^1.0.2"
lodash "^4.17.21"
"@panva/asn1.js@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"