From 125a47a56d58540442587db3cc3f87410754f5b0 Mon Sep 17 00:00:00 2001 From: Janne Savolainen Date: Fri, 4 Mar 2022 10:04:38 +0200 Subject: [PATCH] Replace WorkloadsOverviewDetailRegistry with reactive solution (#4817) Signed-off-by: Janne Savolainen --- .../extension-loader/extension-loader.ts | 1 - src/extensions/lens-renderer-extension.ts | 3 +- src/extensions/registries/index.ts | 1 - .../workloads-overview-detail-registry.ts | 31 -------- src/renderer/bootstrap.tsx | 3 - .../detail-components.injectable.ts | 70 +++++++++++++++++++ .../+workloads-overview/overview.tsx | 18 +++-- .../workloads-overview-detail-registration.ts | 12 ++++ src/renderer/initializers/index.ts | 1 - src/renderer/initializers/registries.ts | 1 - .../workloads-overview-detail-registry.tsx | 25 ------- 11 files changed, 92 insertions(+), 74 deletions(-) delete mode 100644 src/extensions/registries/workloads-overview-detail-registry.ts create mode 100644 src/renderer/components/+workloads-overview/detail-components.injectable.ts create mode 100644 src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts delete mode 100644 src/renderer/initializers/workloads-overview-detail-registry.tsx diff --git a/src/extensions/extension-loader/extension-loader.ts b/src/extensions/extension-loader/extension-loader.ts index dee22e9407..5db134dd4c 100644 --- a/src/extensions/extension-loader/extension-loader.ts +++ b/src/extensions/extension-loader/extension-loader.ts @@ -277,7 +277,6 @@ export class ExtensionLoader { registries.ClusterPageRegistry.getInstance().add(extension.clusterPages, extension), registries.ClusterPageMenuRegistry.getInstance().add(extension.clusterPageMenus, extension), registries.KubeObjectDetailRegistry.getInstance().add(extension.kubeObjectDetailItems), - registries.WorkloadsOverviewDetailRegistry.getInstance().add(extension.kubeWorkloadsOverviewItems), ]; this.events.on("remove", (removedExtension: LensRendererExtension) => { diff --git a/src/extensions/lens-renderer-extension.ts b/src/extensions/lens-renderer-extension.ts index ba68306886..0c16b142a7 100644 --- a/src/extensions/lens-renderer-extension.ts +++ b/src/extensions/lens-renderer-extension.ts @@ -20,6 +20,7 @@ import type { AdditionalCategoryColumnRegistration } from "../renderer/component import type { CustomCategoryViewRegistration } from "../renderer/components/+catalog/custom-views"; import type { StatusBarRegistration } from "../renderer/components/status-bar/status-bar-registration"; import type { KubeObjectMenuRegistration } from "../renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registration"; +import type { WorkloadsOverviewDetailRegistration } from "../renderer/components/+workloads-overview/workloads-overview-detail-registration"; import type { KubeObjectStatusRegistration } from "../renderer/components/kube-object-status-icon/kube-object-status-registration"; export class LensRendererExtension extends LensExtension { @@ -32,7 +33,7 @@ export class LensRendererExtension extends LensExtension { statusBarItems: StatusBarRegistration[] = []; kubeObjectDetailItems: registries.KubeObjectDetailRegistration[] = []; kubeObjectMenuItems: KubeObjectMenuRegistration[] = []; - kubeWorkloadsOverviewItems: registries.WorkloadsOverviewDetailRegistration[] = []; + kubeWorkloadsOverviewItems: WorkloadsOverviewDetailRegistration[] = []; commands: CommandRegistration[] = []; welcomeMenus: WelcomeMenuRegistration[] = []; welcomeBanners: WelcomeBannerRegistration[] = []; diff --git a/src/extensions/registries/index.ts b/src/extensions/registries/index.ts index 6a4a821aaa..23f064a26b 100644 --- a/src/extensions/registries/index.ts +++ b/src/extensions/registries/index.ts @@ -10,5 +10,4 @@ export * from "./page-menu-registry"; export * from "./kube-object-detail-registry"; export * from "./entity-setting-registry"; export * from "./catalog-entity-detail-registry"; -export * from "./workloads-overview-detail-registry"; export * from "./protocol-handler"; diff --git a/src/extensions/registries/workloads-overview-detail-registry.ts b/src/extensions/registries/workloads-overview-detail-registry.ts deleted file mode 100644 index 2688ba72d6..0000000000 --- a/src/extensions/registries/workloads-overview-detail-registry.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ - -import { orderBy } from "lodash"; -import type React from "react"; -import { BaseRegistry } from "./base-registry"; - -export interface WorkloadsOverviewDetailComponents { - Details: React.ComponentType<{}>; -} - -export interface WorkloadsOverviewDetailRegistration { - components: WorkloadsOverviewDetailComponents; - priority?: number; -} - -type RegisteredWorkloadsOverviewDetail = Required; - -export class WorkloadsOverviewDetailRegistry extends BaseRegistry { - getItems() { - return orderBy(super.getItems(), "priority", "desc"); - } - - protected getRegisteredItem(item: WorkloadsOverviewDetailRegistration): RegisteredWorkloadsOverviewDetail { - const { priority = 50, ...rest } = item; - - return { priority, ...rest }; - } -} diff --git a/src/renderer/bootstrap.tsx b/src/renderer/bootstrap.tsx index 2c42698997..91e6892e33 100644 --- a/src/renderer/bootstrap.tsx +++ b/src/renderer/bootstrap.tsx @@ -76,9 +76,6 @@ export async function bootstrap(di: DiContainer) { logger.info(`${logPrefix} initializing KubeObjectDetailRegistry`); initializers.initKubeObjectDetailRegistry(); - logger.info(`${logPrefix} initializing WorkloadsOverviewDetailRegistry`); - initializers.initWorkloadsOverviewDetailRegistry(); - logger.info(`${logPrefix} initializing CatalogEntityDetailRegistry`); initializers.initCatalogEntityDetailRegistry(); diff --git a/src/renderer/components/+workloads-overview/detail-components.injectable.ts b/src/renderer/components/+workloads-overview/detail-components.injectable.ts new file mode 100644 index 0000000000..53b0a8c344 --- /dev/null +++ b/src/renderer/components/+workloads-overview/detail-components.injectable.ts @@ -0,0 +1,70 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; +import { computed } from "mobx"; +import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable"; +import { OverviewStatuses } from "./overview-statuses"; +import { WorkloadEvents } from "../../initializers/workload-events"; +import { orderBy } from "lodash/fp"; +import type { WorkloadsOverviewDetailRegistration } from "./workloads-overview-detail-registration"; + +const detailComponentsInjectable = getInjectable({ + id: "workload-detail-components", + + instantiate: (di) => { + const extensions = di.inject(rendererExtensionsInjectable); + + return computed(() => { + const extensionRegistrations = extensions + .get() + .flatMap((extension) => extension.kubeWorkloadsOverviewItems); + + const allRegistrations = [ + ...coreRegistrations, + ...extensionRegistrations, + ]; + + return getRegistrationsInPriorityOrder(allRegistrations).map( + (item) => item.components.Details, + ); + }); + }, + + lifecycle: lifecycleEnum.singleton, +}); + +const coreRegistrations = [ + { + components: { + Details: OverviewStatuses, + }, + }, + { + priority: 5, + components: { + Details: WorkloadEvents, + }, + }, +]; + +const toRegistrationWithDefaultPriority = ({ + priority = 50, + ...rest +}: WorkloadsOverviewDetailRegistration) => ({ + priority, + ...rest, +}); + +const getRegistrationsInPriorityOrder = ( + allRegistrations: WorkloadsOverviewDetailRegistration[], +) => + orderBy( + "priority", + "desc", + + allRegistrations.map(toRegistrationWithDefaultPriority), + ); + +export default detailComponentsInjectable; diff --git a/src/renderer/components/+workloads-overview/overview.tsx b/src/renderer/components/+workloads-overview/overview.tsx index b4ee166ca9..527fc547b7 100644 --- a/src/renderer/components/+workloads-overview/overview.tsx +++ b/src/renderer/components/+workloads-overview/overview.tsx @@ -16,9 +16,8 @@ import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store"; import { replicaSetStore } from "../+workloads-replicasets/replicasets.store"; import { jobStore } from "../+workloads-jobs/job.store"; import { cronJobStore } from "../+workloads-cronjobs/cronjob.store"; -import { WorkloadsOverviewDetailRegistry } from "../../../extensions/registries"; import type { WorkloadsOverviewRouteParams } from "../../../common/routes"; -import { makeObservable, observable, reaction } from "mobx"; +import { IComputedValue, makeObservable, observable, reaction } from "mobx"; import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter"; import { Icon } from "../icon"; import { TooltipPosition } from "../tooltip"; @@ -30,11 +29,13 @@ import type { KubeObject } from "../../../common/k8s-api/kube-object"; import type { Disposer } from "../../../common/utils"; import kubeWatchApiInjectable from "../../kube-watch-api/kube-watch-api.injectable"; import type { KubeWatchSubscribeStoreOptions } from "../../kube-watch-api/kube-watch-api"; +import detailComponentsInjectable from "./detail-components.injectable"; export interface WorkloadsOverviewProps extends RouteComponentProps { } interface Dependencies { + detailComponents: IComputedValue[]>; clusterFrameContext: ClusterFrameContext; subscribeStores: (stores: KubeObjectStore[], options: KubeWatchSubscribeStoreOptions) => Disposer; } @@ -91,13 +92,6 @@ class NonInjectedWorkloadsOverview extends React.Component ( -
- )); - return (
@@ -105,7 +99,10 @@ class NonInjectedWorkloadsOverview extends React.Component
- {items} + + {this.props.detailComponents.get().map((Details, index) => ( +
+ ))}
); } @@ -116,6 +113,7 @@ export const WorkloadsOverview = withInjectables ({ + detailComponents: di.inject(detailComponentsInjectable), clusterFrameContext: di.inject(clusterFrameContextInjectable), subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores, ...props, diff --git a/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts b/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts new file mode 100644 index 0000000000..19e59494da --- /dev/null +++ b/src/renderer/components/+workloads-overview/workloads-overview-detail-registration.ts @@ -0,0 +1,12 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +interface WorkloadsOverviewDetailComponents { + Details: React.ComponentType<{}>; +} + +export interface WorkloadsOverviewDetailRegistration { + components: WorkloadsOverviewDetailComponents; + priority?: number; +} diff --git a/src/renderer/initializers/index.ts b/src/renderer/initializers/index.ts index 11c318090c..b6b458a8eb 100644 --- a/src/renderer/initializers/index.ts +++ b/src/renderer/initializers/index.ts @@ -9,5 +9,4 @@ export * from "./entity-settings-registry"; export * from "./ipc"; export * from "./kube-object-detail-registry"; export * from "./registries"; -export * from "./workloads-overview-detail-registry"; export * from "./catalog-category-registry"; diff --git a/src/renderer/initializers/registries.ts b/src/renderer/initializers/registries.ts index 2f19e758b5..7362bdfbd7 100644 --- a/src/renderer/initializers/registries.ts +++ b/src/renderer/initializers/registries.ts @@ -12,5 +12,4 @@ export function initRegistries() { registries.EntitySettingRegistry.createInstance(); registries.GlobalPageRegistry.createInstance(); registries.KubeObjectDetailRegistry.createInstance(); - registries.WorkloadsOverviewDetailRegistry.createInstance(); } diff --git a/src/renderer/initializers/workloads-overview-detail-registry.tsx b/src/renderer/initializers/workloads-overview-detail-registry.tsx deleted file mode 100644 index 5654281b6b..0000000000 --- a/src/renderer/initializers/workloads-overview-detail-registry.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ - -import { WorkloadsOverviewDetailRegistry } from "../../extensions/registries"; -import { OverviewStatuses } from "../components/+workloads-overview/overview-statuses"; -import { WorkloadEvents } from "./workload-events"; - -export function initWorkloadsOverviewDetailRegistry() { - WorkloadsOverviewDetailRegistry.getInstance() - .add([ - { - components: { - Details: OverviewStatuses, - }, - }, - { - priority: 5, - components: { - Details: WorkloadEvents, - }, - }, - ]); -}