Replace WorkloadsOverviewDetailRegistry with reactive solution (#4817)

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

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