Add metrics Feature (#7507)

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

package-lock.json

@@ -4634,6 +4634,10 @@
       "resolved": "packages/technical-features/messaging/electron/renderer",
       "link": true
     },
+    "node_modules/@k8slens/metrics": {
+      "resolved": "packages/metrics",
+      "link": true
+    },
     "node_modules/@k8slens/node-fetch": {
       "resolved": "packages/node-fetch",
       "link": true
@@ -38340,6 +38344,7 @@
         "@astronautlabs/jsonpath": "^1.1.0",
         "@hapi/call": "^9.0.1",
         "@hapi/subtext": "^7.1.0",
+        "@k8slens/metrics": "^6.5.0-alpha.1",
         "@k8slens/node-fetch": "^6.5.0-alpha.1",
         "@k8slens/react-application": "^1.0.0-alpha.0",
         "@kubernetes/client-node": "^0.18.1",
@@ -42604,6 +42609,20 @@
         "node": ">=10.13.0"
       }
     },
+    "packages/metrics": {
+      "name": "@k8slens/metrics",
+      "version": "6.5.0-alpha.1",
+      "license": "MIT",
+      "devDependencies": {
+        "@k8slens/eslint-config": "6.5.0-alpha.1",
+        "@k8slens/jest": "6.5.0-alpha.1",
+        "@k8slens/typescript": "6.5.0-alpha.1"
+      },
+      "peerDependencies": {
+        "@ogre-tools/injectable": "^15.1.2",
+        "react": "^17.0.2"
+      }
+    },
     "packages/node-fetch": {
       "name": "@k8slens/node-fetch",
       "version": "6.5.0-alpha.1",

packages/core/package.json

@@ -112,6 +112,7 @@
     "@astronautlabs/jsonpath": "^1.1.0",
     "@hapi/call": "^9.0.1",
     "@hapi/subtext": "^7.1.0",
+    "@k8slens/metrics": "^6.5.0-alpha.1",
     "@k8slens/node-fetch": "^6.5.0-alpha.1",
     "@k8slens/react-application": "^1.0.0-alpha.0",
     "@kubernetes/client-node": "^0.18.1",

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

@@ -0,0 +1,164 @@
+/**
+ * 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, daemonSetDetailsMetricsInjectionToken, deploymentDetailsMetricsInjectionToken, jobDetailsMetricsInjectionToken, namespaceDetailsMetricsInjectionToken, ingressDetailsMetricsInjectionToken, nodeDetailsMetricsInjectionToken, persistentVolumeClaimDetailsMetricsInjectionToken, podDetailsContainerMetricsInjectionToken, podDetailsMetricsInjectionToken, replicaSetDetailsMetricsInjectionToken, statefulSetDetailsMetricsInjectionToken } 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";
+import { NamespaceMetricsDetailsComponent } from "../../renderer/components/+namespaces/metrics-details-component";
+import { NodeMetricsDetailsComponent } from "../../renderer/components/+nodes/metrics-details-component";
+import { PersistentVolumeClaimMetricsDetailsComponent } from "../../renderer/components/+storage-volume-claims/metrics-details-component";
+import { DaemonSetMetricsDetailsComponent } from "../../renderer/components/+workloads-daemonsets/metrics-details-component";
+import { DeploymentMetricsDetailsComponent } from "../../renderer/components/+workloads-deployments/metrics-details-component";
+import { JobMetricsDetailsComponent } from "../../renderer/components/+workloads-jobs/metrics-details-component";
+import { PodDetailsContainerMetrics } from "../../renderer/components/+workloads-pods/pod-details-container-metrics";
+import PodMetricsDetailsComponent from "../../renderer/components/+workloads-pods/pod-metrics-details-component";
+import { ReplicaSetMetricsDetailsComponent } from "../../renderer/components/+workloads-replicasets/metrics-details-component";
+import { StatefulSetMetricsDetailsComponent } from "../../renderer/components/+workloads-statefulsets/metrics-details-component";
+import { IngressMetricsDetailsComponent } from "../../renderer/components/+network-ingresses/metrics-details-component";
+
+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,
+});
+
+const podDetailsMetricsInjectable = getInjectable({
+  id: "pod-details-metrics-injectable",
+  instantiate: () => ({
+    id: "pod-details-metrics",
+    Component: PodMetricsDetailsComponent,
+  }),
+  injectionToken: podDetailsMetricsInjectionToken,
+});
+
+const deploymentDetailsMetricsInjectable = getInjectable({
+  id: "deployment-details-metrics-injectable",
+  instantiate: () => ({
+    id: "deployment-details-metrics",
+    Component: DeploymentMetricsDetailsComponent,
+  }),
+  injectionToken: deploymentDetailsMetricsInjectionToken,
+});
+
+const podDetailsContainerMetricsInjectable = getInjectable({
+  id: "pod-details-container-metrics-injectable",
+  instantiate: () => ({
+    id: "pod-details-container-metrics",
+    Component: PodDetailsContainerMetrics,
+  }),
+  injectionToken: podDetailsContainerMetricsInjectionToken,
+});
+
+const nodeDetailsMetricsInjectable = getInjectable({
+  id: "node-details-metrics-injectable",
+  instantiate: () => ({
+    id: "node-details-metrics",
+    Component: NodeMetricsDetailsComponent,
+  }),
+  injectionToken: nodeDetailsMetricsInjectionToken,
+});
+
+const replicaSetDetailsMetricsInjectable = getInjectable({
+  id: "replica-set-details-metrics-injectable",
+  instantiate: () => ({
+    id: "replica-set-details-metrics",
+    Component: ReplicaSetMetricsDetailsComponent,
+  }),
+  injectionToken: replicaSetDetailsMetricsInjectionToken,
+});
+
+const persistentVolumeClaimDetailsMetricsInjectable = getInjectable({
+  id: "persistent-volume-claim-details-metrics-injectable",
+  instantiate: () => ({
+    id: "persistent-volume-claim-details-metrics",
+    Component: PersistentVolumeClaimMetricsDetailsComponent,
+  }),
+  injectionToken: persistentVolumeClaimDetailsMetricsInjectionToken,
+});
+
+const statefulSetDetailsMetricsInjectable = getInjectable({
+  id: "stateful-set-details-metrics-injectable",
+  instantiate: () => ({
+    id: "stateful-set-details-metrics",
+    Component: StatefulSetMetricsDetailsComponent,
+  }),
+  injectionToken: statefulSetDetailsMetricsInjectionToken,
+});
+
+const namespaceDetailsMetricsInjectable = getInjectable({
+  id: "namespace-details-metrics-injectable",
+  instantiate: () => ({
+    id: "namespace-details-metrics",
+    Component: NamespaceMetricsDetailsComponent,
+  }),
+  injectionToken: namespaceDetailsMetricsInjectionToken,
+});
+
+const jobDetailsMetricsInjectable = getInjectable({
+  id: "job-details-metrics-injectable",
+  instantiate: () => ({
+    id: "job-details-metrics",
+    Component: JobMetricsDetailsComponent,
+  }),
+  injectionToken: jobDetailsMetricsInjectionToken,
+});
+
+const daemonSetDetailsMetricsInjectable = getInjectable({
+  id: "daemon-set-details-metrics-injectable",
+  instantiate: () => ({
+    id: "daemon-set-details-metrics",
+    Component: DaemonSetMetricsDetailsComponent,
+  }),
+  injectionToken: daemonSetDetailsMetricsInjectionToken,
+});
+
+const ingressDetailsMetricsInjectable = getInjectable({
+  id: "network-ingress-details-metrics-injectable",
+  instantiate: () => ({
+    id: "network-ingress-details-metrics",
+    Component: IngressMetricsDetailsComponent,
+  }),
+  injectionToken: ingressDetailsMetricsInjectionToken,
+});
+
+export const metricsFeature = getFeature({
+  id: "core-metrics-feature",
+
+  register: (di) => {
+    di.register(clusterPieChartsClusterOverviewInjectable);
+    di.register(clusterMetricsOverviewBlockInjectable);
+
+    di.register(podDetailsMetricsInjectable);
+    di.register(podDetailsContainerMetricsInjectable);
+    di.register(deploymentDetailsMetricsInjectable);
+    di.register(nodeDetailsMetricsInjectable);
+    di.register(replicaSetDetailsMetricsInjectable);
+    di.register(persistentVolumeClaimDetailsMetricsInjectable);
+    di.register(statefulSetDetailsMetricsInjectable);
+    di.register(namespaceDetailsMetricsInjectable);
+    di.register(jobDetailsMetricsInjectable);
+    di.register(daemonSetDetailsMetricsInjectable);
+    di.register(ingressDetailsMetricsInjectable);
+  },
+});

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,10 @@ 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";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 
 interface Dependencies {
   subscribeStores: SubscribeStores;
@@ -36,6 +38,7 @@ interface Dependencies {
   eventStore: EventStore;
   nodeStore: NodeStore;
   clusterMetricsAreVisible: IComputedValue<boolean>;
+  uiBlocks: IComputedValue<ClusterOverviewUIBlock[]>;
 }
 
 @observer
@@ -76,8 +79,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
 
     return (
       <>
-        <ClusterMetrics/>
+        {orderByOrderNumber(this.props.uiBlocks.get()).map((block) => (
-        <ClusterPieCharts/>
+          <block.Component key={block.id} />
+        ))}
       </>
     );
   }
@@ -118,5 +122,6 @@ export const ClusterOverview = withInjectables<Dependencies>(NonInjectedClusterO
     podStore: di.inject(podStoreInjectable),
     eventStore: di.inject(eventStoreInjectable),
     nodeStore: di.inject(nodeStoreInjectable),
+    uiBlocks: di.inject(computedInjectManyInjectable)(clusterOverviewUIBlockInjectionToken),
   }),
 });

packages/core/src/renderer/components/+namespaces/metrics-details-component.tsx

@@ -2,17 +2,13 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Namespace } from "../../../common/k8s-api/endpoints";
 import type { PodMetricInNamespaceData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-in-namespace.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import namespaceMetricsInjectable from "./metrics.injectable";
 
@@ -33,21 +29,9 @@ const NonInjectedNamespaceMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const NamespaceMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Namespace>>(NonInjectedNamespaceMetricsDetailsComponent, {
+export const NamespaceMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Namespace>>(NonInjectedNamespaceMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(namespaceMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const namespaceMetricsDetailsComponentInjectable = getInjectable({
-  id: "namespace-metrics-details-component",
-  instantiate: (di) => ({
-    Component: NamespaceMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Namespace),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default namespaceMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+network-ingresses/metrics-details-component.tsx

@@ -2,16 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Ingress } from "../../../common/k8s-api/endpoints";
 import type { IngressMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-ingress-metrics.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import { IngressCharts } from "./ingress-charts";
 import ingressMetricsInjectable from "./metrics.injectable";
@@ -36,21 +32,9 @@ const NonInjectedIngressMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const IngressMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Ingress>>(NonInjectedIngressMetricsDetailsComponent, {
+export const IngressMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Ingress>>(NonInjectedIngressMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(ingressMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const ingressMetricsDetailsComponentInjectable = getInjectable({
-  id: "ingress-metrics-details-component",
-  instantiate: (di) => ({
-    Component: IngressMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Ingress),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default ingressMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+nodes/metrics-details-component.tsx

@@ -2,16 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Node } from "../../../common/k8s-api/endpoints";
 import type { ClusterMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import nodeMetricsInjectable from "./metrics.injectable";
 import { NodeCharts } from "./node-charts";
@@ -38,21 +34,9 @@ const NonInjectedNodeMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const NodeMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Node>>(NonInjectedNodeMetricsDetailsComponent, {
+export const NodeMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Node>>(NonInjectedNodeMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(nodeMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const nodeMetricsDetailsComponentInjectable = getInjectable({
-  id: "node-metrics-details-component",
-  instantiate: (di) => ({
-    Component: NodeMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Node),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default nodeMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+storage-volume-claims/metrics-details-component.tsx

@@ -2,16 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
 import type { PersistentVolumeClaimMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-persistent-volume-claim-metrics.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import persistentVolumeClaimMetricsInjectable from "./metrics.injectable";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
@@ -35,21 +31,9 @@ const NonInjectedPersistentVolumeClaimMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const PersistentVolumeClaimMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<PersistentVolumeClaim>>(NonInjectedPersistentVolumeClaimMetricsDetailsComponent, {
+export const PersistentVolumeClaimMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<PersistentVolumeClaim>>(NonInjectedPersistentVolumeClaimMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(persistentVolumeClaimMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const persistentVolumeClaimMetricsDetailsComponentInjectable = getInjectable({
-  id: "persistent-volume-claim-metrics-details-component",
-  instantiate: (di) => ({
-    Component: PersistentVolumeClaimMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.VolumeClaim),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default persistentVolumeClaimMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+workloads-daemonsets/metrics-details-component.tsx

@@ -2,17 +2,13 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { DaemonSet } from "../../../common/k8s-api/endpoints";
 import type { DaemonSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-daemon-sets.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import daemonSetMetricsInjectable from "./metrics.injectable";
 
@@ -33,21 +29,9 @@ const NonInjectedDaemonSetMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const DaemonSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<DaemonSet>>(NonInjectedDaemonSetMetricsDetailsComponent, {
+export const DaemonSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<DaemonSet>>(NonInjectedDaemonSetMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(daemonSetMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const daemonSetMetricsDetailsComponentInjectable = getInjectable({
-  id: "daemon-set-metrics-details-component",
-  instantiate: (di) => ({
-    Component: DaemonSetMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.DaemonSet),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default daemonSetMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+workloads-deployments/metrics-details-component.tsx

@@ -2,17 +2,13 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Deployment } from "../../../common/k8s-api/endpoints";
 import type { DeploymentPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-deployments.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import deploymentMetricsInjectable from "./metrics.injectable";
 
@@ -33,21 +29,9 @@ const NonInjectedDeploymentMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const DeploymentMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Deployment>>(NonInjectedDeploymentMetricsDetailsComponent, {
+export const DeploymentMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Deployment>>(NonInjectedDeploymentMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(deploymentMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const deploymentMetricsDetailsComponentInjectable = getInjectable({
-  id: "deployment-metrics-details-component",
-  instantiate: (di) => ({
-    Component: DeploymentMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Deployment),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default deploymentMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+workloads-jobs/metrics-details-component.tsx

@@ -2,16 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import { type IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Job } from "../../../common/k8s-api/endpoints";
 import type { JobPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import jobMetricsInjectable from "./metrics.injectable";
 
@@ -32,21 +28,10 @@ const NonInjectedJobMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const JobMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Job>>(NonInjectedJobMetricsDetailsComponent, {
+export const JobMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Job>>(NonInjectedJobMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(jobMetricsInjectable, props.object),
     ...props,
   }),
 });
 
-const jobMetricsDetailsComponentInjectable = getInjectable({
-  id: "job-metrics-details-component",
-  instantiate: (di) => ({
-    Component: JobMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Job),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default jobMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+workloads-pods/details/containers/pod-details-containers.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { DrawerTitle } from "../../../drawer";
+import { PodDetailsContainer } from "../../pod-details-container";
+import type { Pod } from "../../../../../common/k8s-api/endpoints";
+import { observer } from "mobx-react";
+
+interface PodDetailsContainersProps {
+  pod: Pod;
+}
+
+const PodDetailsContainers = observer(({ pod }: PodDetailsContainersProps) => {
+  const containers = pod.getContainers();
+
+  return (
+    <>
+      <DrawerTitle>Containers</DrawerTitle>
+      {containers.map(container => (
+        <PodDetailsContainer
+          key={container.name}
+          pod={pod}
+          container={container}
+        />
+      ))}
+    </>
+  );
+});
+
+export { PodDetailsContainers };

packages/core/src/renderer/components/+workloads-pods/details/containers/pod-details-init-containers.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { DrawerTitle } from "../../../drawer";
+import { PodDetailsContainer } from "../../pod-details-container";
+import type { Pod } from "../../../../../common/k8s-api/endpoints";
+import { observer } from "mobx-react";
+
+interface PodDetailsContainersProps {
+  pod: Pod;
+}
+
+const PodDetailsInitContainers = observer(({ pod }: PodDetailsContainersProps) => {
+  const initContainers = pod.getInitContainers();
+
+  if (initContainers.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <DrawerTitle>Init Containers</DrawerTitle>
+      {initContainers.map(container => (
+        <PodDetailsContainer
+          key={container.name}
+          pod={pod}
+          container={container}
+        />
+      ))}
+    </>
+  );
+});
+
+export { PodDetailsInitContainers };

packages/core/src/renderer/components/+workloads-pods/pod-details-container-metrics.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { IAsyncComputed } from "@ogre-tools/injectable-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import type { Container, Pod } from "../../../common/k8s-api/endpoints";
+import { getItemMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
+import type { PodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics.injectable";
+import { ResourceMetrics } from "../resource-metrics";
+import { ContainerCharts } from "./container-charts";
+import podContainerMetricsInjectable from "./container-metrics.injectable";
+
+interface ContainerMetricsProps {
+  container: Container;
+  pod: Pod;
+}
+
+interface Dependencies {
+  podContainerMetrics: IAsyncComputed<PodMetricData>;
+}
+
+const NonInjectedPodDetailsContainerMetrics = observer(({ pod, container, podContainerMetrics }: ContainerMetricsProps & Dependencies) => {
+  const metrics = getItemMetrics(toJS(podContainerMetrics.value.get()), container.name);
+
+  if (!metrics) {
+    return null;
+  }
+
+  return (
+    <ResourceMetrics
+      object={pod}
+      tabs={[
+        "CPU",
+        "Memory",
+        "Filesystem",
+      ]}
+      metrics={metrics}
+    >
+      <ContainerCharts />
+    </ResourceMetrics>
+  );
+});
+
+export const PodDetailsContainerMetrics = withInjectables<Dependencies, ContainerMetricsProps>(NonInjectedPodDetailsContainerMetrics, {
+  getProps: (di, props) => ({
+    ...props,
+    podContainerMetrics: di.inject(podContainerMetricsInjectable, props.pod),
+  }),
+});

packages/core/src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -13,9 +13,6 @@ import { StatusBrick } from "../status-brick";
 import { Badge } from "../badge";
 import { ContainerEnvironment } from "./pod-container-env";
 import { PodContainerPort } from "./pod-container-port";
-import { ResourceMetrics } from "../resource-metrics";
-import type { MetricData } from "../../../common/k8s-api/endpoints/metrics.api";
-import { ContainerCharts } from "./container-charts";
 import { LocaleDate } from "../locale-date";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { PortForwardStore } from "../../port-forward";
@@ -24,16 +21,18 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 import type { IComputedValue } from "mobx";
 import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable";
+import type { PodDetailsContainerMetricsComponent } from "@k8slens/metrics";
+import { podDetailsContainerMetricsInjectionToken } from "@k8slens/metrics";
 
 export interface PodDetailsContainerProps {
   pod: Pod;
   container: Container;
-  metrics?: Partial<Record<string, MetricData>>;
 }
 
 interface Dependencies {
   portForwardStore: PortForwardStore;
   containerMetricsVisible: IComputedValue<boolean>;
+  containerMetrics: PodDetailsContainerMetricsComponent[];
 }
 
 @observer
@@ -84,7 +83,7 @@ class NonInjectedPodDetailsContainer extends React.Component<PodDetailsContainer
   }
 
   render() {
-    const { pod, container, metrics, containerMetricsVisible } = this.props;
+    const { pod, container, containerMetricsVisible, containerMetrics } = this.props;
 
     if (!pod || !container) return null;
     const { name, image, imagePullPolicy, ports, volumeMounts, command, args } = container;
@@ -105,18 +104,15 @@ class NonInjectedPodDetailsContainer extends React.Component<PodDetailsContainer
           <StatusBrick className={cssNames(state, { ready })}/>
           {name}
         </div>
-        {(isMetricVisible && !isInitContainer && metrics) && (
+        {(isMetricVisible && !isInitContainer) && (
-          <ResourceMetrics
+          <>
-            object={pod}
+            {containerMetrics.map(ContainerMetrics => (
-            tabs={[
+              <ContainerMetrics.Component
-              "CPU",
+                key={ContainerMetrics.id}
-              "Memory",
+                container={container}
-              "Filesystem",
+                pod={pod}/>
-            ]}
+            ))}
-            metrics={metrics}
+          </>
-          >
-            <ContainerCharts/>
-          </ResourceMetrics>
         )}
         {status && (
           <DrawerItem name="Status">
@@ -218,5 +214,6 @@ export const PodDetailsContainer = withInjectables<Dependencies, PodDetailsConta
     ...props,
     portForwardStore: di.inject(portForwardStoreInjectable),
     containerMetricsVisible: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.Container),
+    containerMetrics: di.injectMany(podDetailsContainerMetricsInjectionToken),
   }),
 });

packages/core/src/renderer/components/+workloads-pods/pod-details.tsx

@@ -11,18 +11,15 @@ import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { Pod } from "../../../common/k8s-api/endpoints";
 import type { NodeApi, PriorityClassApi, RuntimeClassApi, ServiceAccountApi } from "../../../common/k8s-api/endpoints";
-import { DrawerItem, DrawerTitle } from "../drawer";
+import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { cssNames, stopPropagation } from "@k8slens/utilities";
-import { PodDetailsContainer } from "./pod-details-container";
 import { PodDetailsAffinities } from "./pod-details-affinities";
 import { PodDetailsTolerations } from "./pod-details-tolerations";
 import { PodDetailsSecrets } from "./pod-details-secrets";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getItemMetrics } from "../../../common/k8s-api/endpoints/metrics.api";
 import type { Logger } from "../../../common/logger";
 import { PodVolumes } from "./details/volumes/view";
-import type { IAsyncComputed } from "@ogre-tools/injectable-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
@@ -31,9 +28,8 @@ import runtimeClassApiInjectable from "../../../common/k8s-api/endpoints/runtime
 import serviceAccountApiInjectable from "../../../common/k8s-api/endpoints/service-account.api.injectable";
 import priorityClassApiInjectable from "../../../common/k8s-api/endpoints/priority-class.api.injectable";
 import loggerInjectable from "../../../common/logger.injectable";
-import type { PodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics.injectable";
+import { PodDetailsContainers } from "./details/containers/pod-details-containers";
-import podContainerMetricsInjectable from "./container-metrics.injectable";
+import { PodDetailsInitContainers } from "./details/containers/pod-details-init-containers";
-import { toJS } from "../../../common/utils";
 
 export interface PodDetailsProps extends KubeObjectDetailsProps<Pod> {
 }
@@ -45,13 +41,12 @@ interface Dependencies {
   runtimeClassApi: RuntimeClassApi;
   serviceAccountApi: ServiceAccountApi;
   logger: Logger;
-  containerMetrics: IAsyncComputed<PodMetricData>;
 }
 
 @observer
 class NonInjectedPodDetails extends React.Component<PodDetailsProps & Dependencies> {
   render() {
-    const { object: pod, getDetailsUrl, nodeApi, logger, containerMetrics } = this.props;
+    const { object: pod, getDetailsUrl, nodeApi, logger } = this.props;
 
     if (!pod) {
       return null;
@@ -68,8 +63,6 @@ class NonInjectedPodDetails extends React.Component<PodDetailsProps & Dependenci
     const podIPs = pod.getIPs();
     const { nodeName } = spec ?? {};
     const nodeSelector = pod.getNodeSelectors();
-    const initContainers = pod.getInitContainers();
-    const containers = pod.getContainers();
 
     const namespace = pod.getNs();
     const priorityClassName = pod.getPriorityClassName();
@@ -169,28 +162,9 @@ class NonInjectedPodDetails extends React.Component<PodDetailsProps & Dependenci
           <PodDetailsSecrets pod={pod} />
         </DrawerItem>
 
-        {initContainers.length > 0 && (
+        <PodDetailsInitContainers pod={pod} />
-          <>
-            <DrawerTitle>Init Containers</DrawerTitle>
-            {initContainers.map(container => (
-              <PodDetailsContainer
-                key={container.name}
-                pod={pod}
-                container={container}
-              />
-            ))}
-          </>
-        )}
 
-        <DrawerTitle>Containers</DrawerTitle>
+        <PodDetailsContainers pod={pod} />
-        {containers.map(container => (
-          <PodDetailsContainer
-            key={container.name}
-            pod={pod}
-            container={container}
-            metrics={getItemMetrics(toJS(containerMetrics.value.get()), container.name)}
-          />
-        ))}
 
         <PodVolumes pod={pod} />
       </div>
@@ -207,6 +181,5 @@ export const PodDetails = withInjectables<Dependencies, PodDetailsProps>(NonInje
     runtimeClassApi: di.inject(runtimeClassApiInjectable),
     serviceAccountApi: di.inject(serviceAccountApiInjectable),
     logger: di.inject(loggerInjectable),
-    containerMetrics: di.inject(podContainerMetricsInjectable, props.object),
   }),
 });

packages/core/src/renderer/components/+workloads-pods/pod-metrics-details-component.tsx

@@ -2,15 +2,11 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import { type IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Pod } from "../../../common/k8s-api/endpoints";
 import type { PodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import podMetricsInjectable from "./metrics.injectable";
 import { PodCharts, podMetricTabs } from "./pod-charts";
@@ -39,14 +35,4 @@ const PodMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetai
   }),
 });
 
-const podMetricsDetailsComponentInjectable = getInjectable({
+export default PodMetricsDetailsComponent;
-  id: "pod-metrics-details-container",
-  instantiate: (di) => ({
-    Component: PodMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Pod),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default podMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+workloads-replicasets/metrics-details-component.tsx

@@ -2,16 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import { type IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { ReplicaSet } from "../../../common/k8s-api/endpoints";
 import type { ReplicaSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import replicaSetMetricsInjectable from "./metrics.injectable";
 
@@ -32,21 +28,9 @@ const NonInjectedReplicaSetMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const ReplicaSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<ReplicaSet>>(NonInjectedReplicaSetMetricsDetailsComponent, {
+export const ReplicaSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<ReplicaSet>>(NonInjectedReplicaSetMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(replicaSetMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const replicaSetMetricsDetailsComponentInjectable = getInjectable({
-  id: "replica-set-metrics-details-component",
-  instantiate: (di) => ({
-    Component: ReplicaSetMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.ReplicaSet),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default replicaSetMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/+workloads-statefulsets/metrics-details-component.tsx

@@ -2,16 +2,12 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
 import { type IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { StatefulSet } from "../../../common/k8s-api/endpoints";
 import type { StatefulSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable";
-import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-enabled.injectable";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { kubeObjectDetailItemInjectionToken } from "../kube-object-details/kube-object-detail-items/kube-object-detail-item-injection-token";
 import { ResourceMetrics } from "../resource-metrics";
 import statefulSetMetricsInjectable from "./metrics.injectable";
 
@@ -32,21 +28,9 @@ const NonInjectedStatefulSetMetricsDetailsComponent = ({
   </ResourceMetrics>
 );
 
-const StatefulSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<StatefulSet>>(NonInjectedStatefulSetMetricsDetailsComponent, {
+export const StatefulSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<StatefulSet>>(NonInjectedStatefulSetMetricsDetailsComponent, {
   getProps: (di, props) => ({
     metrics: di.inject(statefulSetMetricsInjectable, props.object),
     ...props,
   }),
 });
-
-const statefulSetMetricsDetailsComponentInjectable = getInjectable({
-  id: "stateful-set-metrics-details-component",
-  instantiate: (di) => ({
-    Component: StatefulSetMetricsDetailsComponent,
-    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.StatefulSet),
-    orderNumber: -1,
-  }),
-  injectionToken: kubeObjectDetailItemInjectionToken,
-});
-
-export default statefulSetMetricsDetailsComponentInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/daemon-set-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { daemonSetDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const daemonSetMetricsInjectable = getInjectable({
+  id: "daemon-set-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      daemonSetDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.DaemonSet,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default daemonSetMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/deployment-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { deploymentDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const deploymentMetricsInjectable = getInjectable({
+  id: "deployment-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      deploymentDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.Deployment,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default deploymentMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/details-metrics-container.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { KubeObjectDetailMetrics } from "@k8slens/metrics";
+import type { IComputedValue } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+import type { KubeObject } from "../../../../../common/k8s-api/kube-object";
+
+interface DetailsMetricsContainerProps<Kube extends KubeObject = KubeObject> {
+  metrics: IComputedValue<KubeObjectDetailMetrics[]>;
+  object?: Kube;
+}
+
+export const DetailsMetricsContainer = observer(({ metrics, object }: DetailsMetricsContainerProps) => (
+  <>
+    {metrics.get().map((metrics) => (
+      <metrics.Component object={object} key={metrics.id} />
+    ))}
+  </>
+));

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import type { KubeObjectDetailMetrics } from "@k8slens/metrics";
+import type { InjectionToken } from "@ogre-tools/injectable";
+import { getInjectable } from "@ogre-tools/injectable";
+import type { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import metricsDetailsComponentEnabledInjectable from "../../../../api/catalog/entity/metrics-details-component-enabled.injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
+import { DetailsMetricsContainer } from "./details-metrics-container";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import type { KubeObjectDetailsProps } from "../../kube-object-details";
+
+type GetMetricsKubeObjectDetailItem = (token: InjectionToken<KubeObjectDetailMetrics, void>, metricResourceType: ClusterMetricsResourceType) => KubeObjectDetailItem;
+
+export const getMetricsKubeObjectDetailItemInjectable = getInjectable({
+  id: "get-metrics-kube-object-detail-item",
+  instantiate: (di) : GetMetricsKubeObjectDetailItem => (token, metricResourceType) => {
+    const computedInjectedMany = di.inject(computedInjectManyInjectable);
+    const metrics = computedInjectedMany(token);
+    const Component = (props: KubeObjectDetailsProps<any>) => <DetailsMetricsContainer metrics={metrics} {...props} />;
+
+    return {
+      Component,
+      enabled: di.inject(metricsDetailsComponentEnabledInjectable, metricResourceType),
+      orderNumber: -1,
+    };
+  },
+});
+

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/ingress-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { ingressDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const ingressMetricsInjectable = getInjectable({
+  id: "ingress-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      ingressDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.Ingress,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default ingressMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/job-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { jobDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const jobMetricsInjectable = getInjectable({
+  id: "job-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      jobDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.Job,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default jobMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/namespace-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { namespaceDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const namespaceMetricsInjectable = getInjectable({
+  id: "namespace-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      namespaceDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.Namespace,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default namespaceMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/node-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { nodeDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const nodeMetricsInjectable = getInjectable({
+  id: "node-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      nodeDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.Node,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default nodeMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/persistent-volume-claim-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { persistentVolumeClaimDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const persistentVolumeClaimMetricsInjectable = getInjectable({
+  id: "persistent-volume-claim-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      persistentVolumeClaimDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.VolumeClaim,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default persistentVolumeClaimMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/pod-details-pod-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { podDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const podMetricsInjectable = getInjectable({
+  id: "pod-details-pod-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      podDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.Pod,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default podMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/replica-set-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { replicaSetDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const replicaSetMetricsInjectable = getInjectable({
+  id: "replica-set-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      replicaSetDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.ReplicaSet,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default replicaSetMetricsInjectable;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/stateful-set-details-metrics.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { statefulSetDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
+
+const statefulSetMetricsInjectable = getInjectable({
+  id: "stateful-set-details-metrics",
+  instantiate: (di) => {
+    const getMetricsKubeObjectDetailItem = di.inject(getMetricsKubeObjectDetailItemInjectable);
+
+    return getMetricsKubeObjectDetailItem(
+      statefulSetDetailsMetricsInjectionToken,
+      ClusterMetricsResourceType.StatefulSet,
+    );
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default statefulSetMetricsInjectable;

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

packages/metrics/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: "@k8slens/eslint-config/eslint",
+    parserOptions: {
+      project: "./tsconfig.json",
+    },
+  };

packages/metrics/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/metrics/index.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type React from "react";
+import { getInjectionToken } from "@ogre-tools/injectable";
+
+export type ClusterOverviewUIBlock = {
+  id: string;
+  Component: React.ElementType;
+  orderNumber: number;
+};
+
+// this should be moved to cluster-overview package when there is one
+export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({
+  id: "cluster-overview-ui-block-injection-token",
+});
+
+export type KubeObjectDetailMetricsComponentProps = {
+  object: any;
+};
+
+export type KubeObjectDetailMetrics = {
+  id: string;
+  Component: React.ComponentType<KubeObjectDetailMetricsComponentProps>;
+};
+
+export const podDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "pod-details-metrics-injection-token",
+});
+
+export const deploymentDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "deployment-details-metrics-injection-token",
+});
+
+export const nodeDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "node-details-metrics-injection-token",
+});
+
+export const replicaSetDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "replica-set-details-metrics-injection-token",
+});
+
+export const persistentVolumeClaimDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "persistent-volume-claim-details-metrics-injection-token",
+});
+
+export const statefulSetDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "stateful-set-details-metrics-injection-token",
+});
+
+export const namespaceDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "namespace-details-metrics-injection-token",
+});
+
+export const jobDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "job-details-metrics-injection-token",
+});
+
+export const daemonSetDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "daemon-set-details-metrics-injection-token",
+});
+
+export const ingressDetailsMetricsInjectionToken = getInjectionToken<KubeObjectDetailMetrics>({
+  id: "ingress-details-metrics-injection-token",
+});
+
+export interface PodDetailsContainerMetricsComponentProps {
+  container: any;
+  pod: any;
+}
+
+export interface PodDetailsContainerMetricsComponent {
+  id: string;
+  Component: React.ComponentType<PodDetailsContainerMetricsComponentProps>;
+}
+
+export const podDetailsContainerMetricsInjectionToken = getInjectionToken<PodDetailsContainerMetricsComponent>({
+  id: "pod-details-container-metrics-injection-token",
+});

packages/metrics/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

packages/metrics/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "@k8slens/metrics",
+    "private": false,
+    "version": "6.5.0-alpha.1",
+    "description": "Injection tokens for implementing metrics for Lens",
+    "type": "commonjs",
+    "publishConfig": {
+      "access": "public",
+      "registry": "https://registry.npmjs.org/"
+    },
+    "files": [
+      "dist"
+    ],
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/lensapp/lens.git"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "author": {
+      "name": "OpenLens Authors",
+      "email": "info@k8slens.dev"
+    },
+    "license": "MIT",
+    "homepage": "https://github.com/lensapp/lens",
+    "scripts": {
+      "build": "webpack",
+      "clean": "rimraf dist/",
+      "dev": "webpack --mode=development --watch",
+      "test": "jest --coverage --runInBand",
+      "lint": "lens-lint",
+      "lint:fix": "lens-lint --fix"
+    },
+    "peerDependencies": {
+      "@ogre-tools/injectable": "^15.1.2",
+      "react": "^17.0.2"
+    },
+    "devDependencies": {
+      "@k8slens/eslint-config": "6.5.0-alpha.1",
+      "@k8slens/typescript": "6.5.0-alpha.1",
+      "@k8slens/jest":  "6.5.0-alpha.1"
+    }
+  }

packages/metrics/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "@k8slens/typescript/config/base.json",
+    "include": ["**/*.ts"]
+  }

packages/metrics/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;

packages/open-lens/src/renderer/index.ts

@@ -4,6 +4,7 @@ import {
   rendererExtensionApi as Renderer,
   commonExtensionApi as Common,
   registerLensCore,
+  metricsFeature
 } from "@k8slens/core/renderer";
 import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
 import { registerFeature } from "@k8slens/feature-core";
@@ -32,7 +33,8 @@ runInAction(() => {
     applicationFeature,
     messagingFeatureForRenderer,
     keyboardShortcutsFeature,
-    reactApplicationFeature
+    reactApplicationFeature,
+    metricsFeature
   );
 
   autoRegister({