Replace WorkloadsOverviewDetailRegistry with reactive solution (#4817)

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

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) => {

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[] = [];

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";

src/extensions/registries/workloads-overview-detail-registry.ts

@@ -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<WorkloadsOverviewDetailRegistration>;
-
-export class WorkloadsOverviewDetailRegistry extends BaseRegistry<WorkloadsOverviewDetailRegistration, RegisteredWorkloadsOverviewDetail> {
-  getItems() {
-    return orderBy(super.getItems(), "priority", "desc");
-  }
-
-  protected getRegisteredItem(item: WorkloadsOverviewDetailRegistration): RegisteredWorkloadsOverviewDetail {
-    const { priority = 50, ...rest } = item;
-
-    return { priority, ...rest };
-  }
-}

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();
 

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;

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<WorkloadsOverviewRouteParams> {
 }
 
 interface Dependencies {
+  detailComponents: IComputedValue<React.ComponentType<{}>[]>;
   clusterFrameContext: ClusterFrameContext;
   subscribeStores: (stores: KubeObjectStore<KubeObject>[], options: KubeWatchSubscribeStoreOptions) => Disposer;
 }
@@ -91,13 +92,6 @@ class NonInjectedWorkloadsOverview extends React.Component<WorkloadsOverviewProp
   }
 
   render() {
-    const items = WorkloadsOverviewDetailRegistry
-      .getInstance()
-      .getItems()
-      .map(({ components: { Details }}, index) => (
-        <Details key={`workload-overview-${index}`}/>
-      ));
-
     return (
       <div className="WorkloadsOverview flex column gaps">
         <div className="header flex gaps align-center">
@@ -105,7 +99,10 @@ class NonInjectedWorkloadsOverview extends React.Component<WorkloadsOverviewProp
           {this.renderLoadErrors()}
           <NamespaceSelectFilter />
         </div>
-        {items}
+
+        {this.props.detailComponents.get().map((Details, index) => (
+          <Details key={`workload-overview-${index}`} />
+        ))}
       </div>
     );
   }
@@ -116,6 +113,7 @@ export const WorkloadsOverview = withInjectables<Dependencies, WorkloadsOverview
 
   {
     getProps: (di, props) => ({
+      detailComponents: di.inject(detailComponentsInjectable),
       clusterFrameContext: di.inject(clusterFrameContextInjectable),
       subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
       ...props,

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;
+}

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";

src/renderer/initializers/registries.ts

@@ -12,5 +12,4 @@ export function initRegistries() {
   registries.EntitySettingRegistry.createInstance();
   registries.GlobalPageRegistry.createInstance();
   registries.KubeObjectDetailRegistry.createInstance();
-  registries.WorkloadsOverviewDetailRegistry.createInstance();
 }

src/renderer/initializers/workloads-overview-detail-registry.tsx

@@ -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,
-        },
-      },
-    ]);
-}