Add metrics Feature

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

@@ -3,10 +3,11 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getFeature } from "@k8slens/feature-core";
-import { clusterOverviewUIBlockInjectionToken, podDetailsContainerMetricsInjectionToken, podDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { clusterOverviewUIBlockInjectionToken, deploymentDetailsMetricsInjectionToken, podDetailsContainerMetricsInjectionToken, podDetailsMetricsInjectionToken } 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 { DeploymentMetricsDetailsComponent } from "../../renderer/components/+workloads-deployments/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";
 
@@ -36,10 +37,24 @@ const clusterMetricsOverviewBlockInjectable = getInjectable({
 
 const podDetailsMetricsInjectable = getInjectable({
   id: "pod-details-metrics-injectable",
-  instantiate: () => PodMetricsDetailsComponent,
+  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,
+});
+
+console.log(deploymentDetailsMetricsInjectable);
+
 const podDetailsContainerMetricsInjectable = getInjectable({
   id: "pod-details-container-metrics-injectable",
   instantiate: () => ({
@@ -58,5 +73,6 @@ export const metricsFeature = getFeature({
 
     di.register(podDetailsMetricsInjectable);
     di.register(podDetailsContainerMetricsInjectable);
+    di.register(deploymentDetailsMetricsInjectable);
   },
 });

packages/core/src/renderer/components/+workloads-deployments/metrics-details-component.injectable.tsx → 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/kube-object-details/kube-object-detail-items/metrics/deployment-details-metrics.injectable.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 metricsDetailsComponentEnabledInjectable from "../../../../api/catalog/entity/metrics-details-component-enabled.injectable";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { deploymentDetailsMetricsInjectionToken } from "@k8slens/metrics";
+import { EmptyMetrics } from "./empty-metrics";
+
+const deploymentMetricsInjectable = getInjectable({
+  id: "deployment-details-metrics",
+  instantiate: (di) => {
+    const deploymentMetrics = di.injectMany(deploymentDetailsMetricsInjectionToken);
+    const first = deploymentMetrics[0];
+
+    const Component = first?.Component ?? EmptyMetrics;
+
+    return {
+      Component,
+      enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Deployment),
+      orderNumber: -1,
+    };
+  },
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default deploymentMetricsInjectable;

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+
+export const EmptyMetrics = () => <></>;

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

@@ -2,22 +2,20 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import React from "react";
 import { podDetailsMetricsInjectionToken } from "@k8slens/metrics";
 import { getInjectable } from "@ogre-tools/injectable";
-import { ClusterMetricsResourceType } from "../../../../common/cluster-types";
-import metricsDetailsComponentEnabledInjectable from "../../../api/catalog/entity/metrics-details-component-enabled.injectable";
-import { kubeObjectDetailItemInjectionToken } from "./kube-object-detail-item-injection-token";
-
-const Empty = () => <></>;
+import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
+import metricsDetailsComponentEnabledInjectable from "../../../../api/catalog/entity/metrics-details-component-enabled.injectable";
+import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { EmptyMetrics } from "./empty-metrics";
 
 const podMetricsInjectable = getInjectable({
-  id: "kube-object-pod-metrics-injectable",
+  id: "pod-details-pod-metrics",
   instantiate: (di) => {
     const podMetrics = di.injectMany(podDetailsMetricsInjectionToken);
     const first = podMetrics[0];
 
-    const Component = first ?? Empty;
+    const Component = first?.Component ?? EmptyMetrics;
 
     return {
       Component,

packages/metrics/index.ts

@@ -16,16 +16,28 @@ export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOve
   id: "cluster-overview-ui-block-injection-token",
 });
 
-export type KubeObjectDetailMetrics = React.ElementType;
+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 interface PodDetailsContainerMetricsComponentProps {
   container: any;
   pod: any;
 }
+
 export interface PodDetailsContainerMetricsComponent {
   id: string;
   Component: React.ComponentType<PodDetailsContainerMetricsComponentProps>;