Make details metrics a computed value.

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

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const daemonSetMetricsInjectable = getInjectable({
   id: "daemon-set-details-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const deploymentMetricsInjectable = getInjectable({
   id: "deployment-details-metrics",

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/empty-metrics.tsx

@@ -1,7 +0,0 @@
-/**
- * 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/metrics/get-metrics-kube-object-detail-item.injectable.tsx

@@ -2,23 +2,25 @@
  * 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 { EmptyMetrics } from "./empty-metrics";
+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 metrics = di.injectMany(token);
+    const computedInjectedMany = di.inject(computedInjectManyInjectable);
-    const first = metrics[0];
+    const metrics = computedInjectedMany(token);
-
+    const Component = (props: KubeObjectDetailsProps<any>) => <DetailsMetricsContainer metrics={metrics} {...props} />;
-    const Component = first?.Component ?? EmptyMetrics;
 
     return {
       Component,

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const ingressMetricsInjectable = getInjectable({
   id: "ingress-details-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const jobMetricsInjectable = getInjectable({
   id: "job-details-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const namespaceMetricsInjectable = getInjectable({
   id: "namespace-details-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const nodeMetricsInjectable = getInjectable({
   id: "node-details-metrics",

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

@@ -6,7 +6,7 @@ import { persistentVolumeClaimDetailsMetricsInjectionToken } from "@k8slens/metr
 import { getInjectable } from "@ogre-tools/injectable";
 import { ClusterMetricsResourceType } from "../../../../../common/cluster-types";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
-import { getMetricsKubeObjectDetailItemInjectable } from "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const persistentVolumeClaimMetricsInjectable = getInjectable({
   id: "persistent-volume-claim-details-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const podMetricsInjectable = getInjectable({
   id: "pod-details-pod-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const replicaSetMetricsInjectable = getInjectable({
   id: "replica-set-details-metrics",

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

@@ -6,7 +6,7 @@ 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 "./getMetricsKubeObjectDetailItem.injectable";
+import { getMetricsKubeObjectDetailItemInjectable } from "./get-metrics-kube-object-detail-item.injectable";
 
 const statefulSetMetricsInjectable = getInjectable({
   id: "stateful-set-details-metrics",