From b4d57320713703e352405404591db71a9ddc3772 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 27 Apr 2023 10:38:08 -0400
Subject: [PATCH] chore: Use new typings of metrics components

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../metrics/details-metrics-container.tsx     | 30 ++++++++++++-------
 ...ics-kube-object-detail-item.injectable.tsx | 20 ++++++++-----
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/details-metrics-container.tsx b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/details-metrics-container.tsx
index bed0d62fc9..7893bbe146 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/details-metrics-container.tsx
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/details-metrics-container.tsx
@@ -6,17 +6,25 @@ 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";
+import type { KubeObject } from "@k8slens/kube-object";
 
-interface DetailsMetricsContainerProps<Kube extends KubeObject = KubeObject> {
-  metrics: IComputedValue<KubeObjectDetailMetrics[]>;
-  object?: Kube;
+export interface DetailsMetricsContainerProps<K extends KubeObject> {
+  metrics: IComputedValue<KubeObjectDetailMetrics<K>[]>;
+  object?: K;
 }
 
-export const DetailsMetricsContainer = observer(({ metrics, object }: DetailsMetricsContainerProps) => (
-  <>
-    {metrics.get().map((metrics) => (
-      <metrics.Component object={object} key={metrics.id} />
-    ))}
-  </>
-));
+function NonObservingDetailsMetricsContainer<K extends KubeObject>({ metrics, object }: DetailsMetricsContainerProps<K>) {
+  if (!object) {
+    return null;
+  }
+
+  return (
+    <>
+      {metrics.get().map((metrics) => (
+        <metrics.Component object={object} key={metrics.id} />
+      ))}
+    </>
+  );
+}
+
+export const DetailsMetricsContainer = observer(NonObservingDetailsMetricsContainer);
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx
index 7aa3b874de..741810b85d 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx
@@ -12,20 +12,24 @@ import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-
 import { DetailsMetricsContainer } from "./details-metrics-container";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 import type { KubeObjectDetailsProps } from "../../kube-object-details";
+import type { KubeObject } from "@k8slens/kube-object";
 
-type GetMetricsKubeObjectDetailItem = (token: InjectionToken<KubeObjectDetailMetrics, void>, metricResourceType: ClusterMetricsResourceType) => KubeObjectDetailItem;
+export type GetMetricsKubeObjectDetailItem = <K extends KubeObject>(token: InjectionToken<KubeObjectDetailMetrics<K>, void>, metricResourceType: ClusterMetricsResourceType) => KubeObjectDetailItem;
 
 export const getMetricsKubeObjectDetailItemInjectable = getInjectable({
   id: "get-metrics-kube-object-detail-item",
-  instantiate: (di) : GetMetricsKubeObjectDetailItem => (token, metricResourceType) => {
+  instantiate: (di): GetMetricsKubeObjectDetailItem => {
     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,
+    return <K extends KubeObject>(token: InjectionToken<KubeObjectDetailMetrics<K>, void>, metricResourceType: ClusterMetricsResourceType) => {
+      const metrics = computedInjectedMany(token);
+      const Component = (props: KubeObjectDetailsProps<K>) => <DetailsMetricsContainer<K> metrics={metrics} {...props} />;
+
+      return {
+        Component,
+        enabled: di.inject(metricsDetailsComponentEnabledInjectable, metricResourceType),
+        orderNumber: -1,
+      };
     };
   },
 });