Add cluster UI block injection token and current implementation as a Feature

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

packages/core/src/features/metrics/metrics-feature.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getFeature } from "@k8slens/feature-core";
+import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetrics } from "../../renderer/components/+cluster/cluster-metrics";
+import { ClusterPieCharts } from "../../renderer/components/+cluster/cluster-pie-charts";
+
+const clusterPieChartsClusterOverviewInjectable = getInjectable({
+  id: "cluster-pie-charts-cluster-overview",
+
+  instantiate: () => ({
+    id: "cluster-pie-charts-cluster-overview",
+    Component: ClusterPieCharts,
+    orderNumber: 2,
+  }),
+
+  injectionToken: clusterOverviewUIBlockInjectionToken,
+});
+
+const clusterMetricsOverviewBlockInjectable = getInjectable({
+  id: "cluster-metrics-overview-block",
+
+  instantiate: () => ({
+    id: "cluster-metrics-overview-block",
+    Component: ClusterMetrics,
+    orderNumber: 1,
+  }),
+
+  injectionToken: clusterOverviewUIBlockInjectionToken,
+});
+
+export const metricsFeature = getFeature({
+  id: "core-metrics-feature",
+
+  register: (di) => {
+    di.register(clusterPieChartsClusterOverviewInjectable);
+    di.register(clusterMetricsOverviewBlockInjectable);
+  },
+});

packages/core/src/renderer/components/+cluster/cluster-overview.tsx

@@ -15,9 +15,7 @@ import { interval } from "@k8slens/utilities";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
 import { ClusterIssues } from "./cluster-issues";
-import { ClusterMetrics } from "./cluster-metrics";
 import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
-import { ClusterPieCharts } from "./cluster-pie-charts";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { EventStore } from "../+events/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -28,6 +26,9 @@ import podStoreInjectable from "../+workloads-pods/store.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
 import nodeStoreInjectable from "../+nodes/store.injectable";
 import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable";
+import type { ClusterOverviewUIBlock } from "@k8slens/metrics";
+import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
+import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
 
 interface Dependencies {
   subscribeStores: SubscribeStores;
@@ -36,6 +37,7 @@ interface Dependencies {
   eventStore: EventStore;
   nodeStore: NodeStore;
   clusterMetricsAreVisible: IComputedValue<boolean>;
+  uiBlocks: ClusterOverviewUIBlock[];
 }
 
 @observer
@@ -76,8 +78,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
 
     return (
       <>
-        <ClusterMetrics/>
-        <ClusterPieCharts/>
+        {orderByOrderNumber(this.props.uiBlocks).map((block) => (
+          <block.Component key={block.id} />
+        ))}
       </>
     );
   }
@@ -118,5 +121,6 @@ export const ClusterOverview = withInjectables<Dependencies>(NonInjectedClusterO
     podStore: di.inject(podStoreInjectable),
     eventStore: di.inject(eventStoreInjectable),
     nodeStore: di.inject(nodeStoreInjectable),
+    uiBlocks: di.injectMany(clusterOverviewUIBlockInjectionToken),
   }),
 });

packages/core/src/renderer/library.ts

@@ -20,3 +20,4 @@ export * as ReactRouter from "react-router";
 export * as ReactRouterDom from "react-router-dom";
 export * as rendererExtensionApi from "../extensions/renderer-api";
 export * as commonExtensionApi from "../extensions/common-api";
+export { metricsFeature } from "../features/metrics/metrics-feature";