Switch components to be static to help with React performance

Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-10-25 12:43:06 -04:00 · 2022-10-25 12:43:06 -04:00 · 1f78c66cc2
commit 1f78c66cc2
parent a92c53eb56
10 changed files with 288 additions and 100 deletions
--- a/src/renderer/components/+namespaces/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+namespaces/metrics-details-component.injectable.tsx
@ -3,28 +3,47 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<PodMetricInNamespaceData>;
+}
+
+const NonInjectedNamespaceMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Namespace> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<Namespace>) => (
-      <ResourceMetrics
-        tabs={ podMetricTabs }
-        object={ object }
-        metrics={ di.inject(namespaceMetricsInjectable, object) }
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: NamespaceMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Namespace),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+network-ingresses/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+network-ingresses/metrics-details-component.injectable.tsx
@ -3,9 +3,12 @@
 * 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";
@ -13,21 +16,37 @@ import { ResourceMetrics } from "../resource-metrics";
 import { IngressCharts } from "./ingress-charts";
 import ingressMetricsInjectable from "./metrics.injectable";

+interface Dependencies {
+  metrics: IAsyncComputed<IngressMetricData>;
+}
+
+const NonInjectedIngressMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Ingress> & Dependencies) => (
+  <ResourceMetrics
+    tabs={[
+      "Network",
+      "Duration",
+    ]}
+    object={object}
+    metrics={metrics}
+  >
+    <IngressCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<Ingress>) => (
-      <ResourceMetrics
-        tabs={ [
-          "Network",
-          "Duration",
-        ] }
-        object={ object }
-        metrics={ di.inject(ingressMetricsInjectable, object) }
-      >
-        <IngressCharts />
-      </ResourceMetrics>
-    ),
+    Component: IngressMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Ingress),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+nodes/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+nodes/metrics-details-component.injectable.tsx
@ -3,9 +3,12 @@
 * 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";
@ -13,23 +16,39 @@ import { ResourceMetrics } from "../resource-metrics";
 import nodeMetricsInjectable from "./metrics.injectable";
 import { NodeCharts } from "./node-charts";

+interface Dependencies {
+  metrics: IAsyncComputed<ClusterMetricData>;
+}
+
+const NonInjectedNodeMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Node> & Dependencies) => (
+  <ResourceMetrics
+    tabs={[
+      "CPU",
+      "Memory",
+      "Disk",
+      "Pods",
+    ]}
+    object={object}
+    metrics={metrics}
+  >
+    <NodeCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<Node>) => (
-      <ResourceMetrics
-        tabs={ [
-          "CPU",
-          "Memory",
-          "Disk",
-          "Pods",
-        ] }
-        object={ object }
-        metrics={ di.inject(nodeMetricsInjectable, object) }
-      >
-        <NodeCharts />
-      </ResourceMetrics>
-    ),
+    Component: NodeMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Node),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+storage-volume-claims/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+storage-volume-claims/metrics-details-component.injectable.tsx
@ -3,28 +3,49 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<PersistentVolumeClaimMetricData>;
+}
+
+const NonInjectedPersistentVolumeClaimMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<PersistentVolumeClaim> & Dependencies) => (
+  <ResourceMetrics
+    tabs={[
+      "Disk",
+    ]}
+    object={object}
+    metrics={metrics}
+  >
+    <VolumeClaimDiskChart />
+  </ResourceMetrics>
+);
+
+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: ({ object }) => (
-      <ResourceMetrics
-        tabs={[
-          "Disk",
-        ]}
-        object={object}
-        metrics={di.inject(persistentVolumeClaimMetricsInjectable, object)}
-      >
-        <VolumeClaimDiskChart />
-      </ResourceMetrics>
-    ),
+    Component: PersistentVolumeClaimMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.VolumeClaim),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+workloads-daemonsets/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+workloads-daemonsets/metrics-details-component.injectable.tsx
@ -3,28 +3,47 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<DaemonSetPodMetricData>;
+}
+
+const NonInjectedDaemonSetMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<DaemonSet> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<DaemonSet>) => (
-      <ResourceMetrics
-        tabs={podMetricTabs}
-        object={object}
-        metrics={di.inject(daemonSetMetricsInjectable, object)}
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: DaemonSetMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.DaemonSet),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+workloads-deployments/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+workloads-deployments/metrics-details-component.injectable.tsx
@ -3,28 +3,47 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<DeploymentPodMetricData>;
+}
+
+const NonInjectedDeploymentMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Deployment> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<Deployment>) => (
-      <ResourceMetrics
-        tabs={podMetricTabs}
-        object={object}
-        metrics={di.inject(deploymentMetricsInjectable, object)}
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: DeploymentMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Deployment),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+workloads-jobs/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+workloads-jobs/metrics-details-component.injectable.tsx
@ -3,28 +3,46 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<JobPodMetricData>;
+}
+
+const NonInjectedJobMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Job> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<Job>) => (
-      <ResourceMetrics
-        tabs={podMetricTabs}
-        object={object}
-        metrics={di.inject(jobMetricsInjectable, object)}
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: JobMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Job),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+workloads-pods/metrics-detail-container.injectable.tsx
+++ b/src/renderer/components/+workloads-pods/metrics-detail-container.injectable.tsx
@ -3,9 +3,11 @@
 * 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";
@ -13,18 +15,34 @@ import { ResourceMetrics } from "../resource-metrics";
 import podMetricsInjectable from "./metrics.injectable";
 import { PodCharts, podMetricTabs } from "./pod-charts";

+interface Dependencies {
+  metrics: IAsyncComputed<PodMetricData>;
+}
+
+const NonInjectedPodMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<Pod> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+const PodMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<Pod>>(NonInjectedPodMetricsDetailsComponent, {
+  getProps: (di, props) => ({
+    metrics: di.inject(podMetricsInjectable, props.object),
+    ...props,
+  }),
+});
+
 const podMetricsDetailsComponentInjectable = getInjectable({
  id: "pod-metrics-details-container",
  instantiate: (di) => ({
-    Component: ({ object }: KubeObjectDetailsProps<Pod>) => (
-      <ResourceMetrics
-        tabs={podMetricTabs}
-        object={object}
-        metrics={di.inject(podMetricsInjectable, object)}
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: PodMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.Pod),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+workloads-replicasets/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+workloads-replicasets/metrics-details-component.injectable.tsx
@ -3,28 +3,46 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<ReplicaSetPodMetricData>;
+}
+
+const NonInjectedReplicaSetMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<ReplicaSet> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<ReplicaSet>) => (
-      <ResourceMetrics
-        tabs={podMetricTabs}
-        object={object}
-        metrics={di.inject(replicaSetMetricsInjectable, object)}
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: ReplicaSetMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.ReplicaSet),
    orderNumber: -1,
  }),
--- a/src/renderer/components/+workloads-statefulsets/metrics-details-component.injectable.tsx
+++ b/src/renderer/components/+workloads-statefulsets/metrics-details-component.injectable.tsx
@ -3,28 +3,46 @@
 * 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";

+interface Dependencies {
+  metrics: IAsyncComputed<StatefulSetPodMetricData>;
+}
+
+const NonInjectedStatefulSetMetricsDetailsComponent = ({
+  object,
+  metrics,
+}: KubeObjectDetailsProps<StatefulSet> & Dependencies) => (
+  <ResourceMetrics
+    tabs={podMetricTabs}
+    object={object}
+    metrics={metrics}
+  >
+    <PodCharts />
+  </ResourceMetrics>
+);
+
+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: ({ object }: KubeObjectDetailsProps<StatefulSet>) => (
-      <ResourceMetrics
-        tabs={podMetricTabs}
-        object={object}
-        metrics={di.inject(statefulSetMetricsInjectable, object)}
-      >
-        <PodCharts />
-      </ResourceMetrics>
-    ),
+    Component: StatefulSetMetricsDetailsComponent,
    enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.StatefulSet),
    orderNumber: -1,
  }),