Change PersistentVolumeClaim metrics to be injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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

@@ -0,0 +1,34 @@
+/**
+ * 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 React from "react";
+import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable";
+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";
+
+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>
+    ),
+    enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.VolumeClaim),
+    orderNumber: -1,
+  }),
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export default persistentVolumeClaimMetricsDetailsComponentInjectable;

src/renderer/components/+storage-volume-claims/metrics.injectable.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { asyncComputed } from "@ogre-tools/injectable-react";
+import { now } from "mobx-utils";
+import type { PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
+import requestPersistentVolumeClaimMetricsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-persistent-volume-claim-metrics.injectable";
+
+const persistentVolumeClaimMetricsInjectable = getInjectable({
+  id: "persistent-volume-claim-metrics",
+  instantiate: (di, persistentVolumeClaim) => {
+    const requestPersistentVolumeClaimMetrics = di.inject(requestPersistentVolumeClaimMetricsInjectable);
+
+    return asyncComputed(() => {
+      now(60 * 1000); // update every minute
+
+      return requestPersistentVolumeClaimMetrics(persistentVolumeClaim);
+    });
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, persistentVolumeClaim: PersistentVolumeClaim) => persistentVolumeClaim.getId(),
+  }),
+});
+
+export default persistentVolumeClaimMetricsInjectable;

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -6,64 +6,37 @@
 import "./volume-claim-details.scss";
 
 import React, { Fragment } from "react";
-import { makeObservable, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
-import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { Link } from "react-router-dom";
-import { ResourceMetrics } from "../resource-metrics";
-import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { PersistentVolumeClaim, storageClassApi } from "../../../common/k8s-api/endpoints";
+import type { StorageClassApi } from "../../../common/k8s-api/endpoints";
-import { ClusterMetricsResourceType } from "../../../common/cluster-types";
+import { PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
-import { KubeObjectMeta } from "../kube-object-meta";
+import type { Logger } from "../../../common/logger";
-import logger from "../../../common/logger";
-import type { PersistentVolumeClaimMetricData, RequestPersistentVolumeClaimMetrics } from "../../../common/k8s-api/endpoints/metrics.api/request-persistent-volume-claim-metrics.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import requestPersistentVolumeClaimMetricsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-persistent-volume-claim-metrics.injectable";
-import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable";
 import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
 import type { PodStore } from "../+workloads-pods/store";
-import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 import podStoreInjectable from "../+workloads-pods/store.injectable";
 import { stopPropagation } from "../../../renderer/utils";
+import storageClassApiInjectable from "../../../common/k8s-api/endpoints/storage-class.api.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
 
 export interface PersistentVolumeClaimDetailsProps extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
 
 interface Dependencies {
-  requestPersistentVolumeClaimMetrics: RequestPersistentVolumeClaimMetrics;
-  getActiveClusterEntity: GetActiveClusterEntity;
   getDetailsUrl: GetDetailsUrl;
   podStore: PodStore;
+  storageClassApi: StorageClassApi;
+  logger: Logger;
 }
 
 @observer
 class NonInjectedPersistentVolumeClaimDetails extends React.Component<PersistentVolumeClaimDetailsProps & Dependencies> {
-  @observable metrics: PersistentVolumeClaimMetricData | null = null;
-
-  constructor(props: PersistentVolumeClaimDetailsProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
-  componentDidMount() {
-    disposeOnUnmount(this, [
-      reaction(() => this.props.object, () => {
-        this.metrics = null;
-      }),
-    ]);
-  }
-
-  loadMetrics = async () => {
-    const { object: volumeClaim, requestPersistentVolumeClaimMetrics } = this.props;
-
-    this.metrics = await requestPersistentVolumeClaimMetrics(volumeClaim);
-  };
-
   render() {
-    const { object: volumeClaim, getActiveClusterEntity, podStore, getDetailsUrl } = this.props;
+    const { object: volumeClaim, podStore, getDetailsUrl, storageClassApi, logger } = this.props;
 
     if (!volumeClaim) {
       return null;
@@ -77,27 +50,13 @@ class NonInjectedPersistentVolumeClaimDetails extends React.Component<Persistent
 
     const { storageClassName, accessModes } = volumeClaim.spec;
     const pods = volumeClaim.getPods(podStore.items);
-    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.VolumeClaim);
 
-    const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
+    const storageClassDetailsUrl = getDetailsUrl(storageClassApi.formatUrlForNotListing({
       name: storageClassName,
     }));
 
     return (
       <div className="PersistentVolumeClaimDetails">
-        {!isMetricHidden && (
-          <ResourceMetrics
-            loader={this.loadMetrics}
-            tabs={[
-              "Disk",
-            ]}
-            object={volumeClaim}
-            metrics={this.metrics}
-          >
-            <VolumeClaimDiskChart />
-          </ResourceMetrics>
-        )}
-        <KubeObjectMeta object={volumeClaim} />
         <DrawerItem name="Access Modes">
           {accessModes?.join(", ")}
         </DrawerItem>
@@ -147,9 +106,9 @@ class NonInjectedPersistentVolumeClaimDetails extends React.Component<Persistent
 export const PersistentVolumeClaimDetails = withInjectables<Dependencies, PersistentVolumeClaimDetailsProps>(NonInjectedPersistentVolumeClaimDetails, {
   getProps: (di, props) => ({
     ...props,
-    requestPersistentVolumeClaimMetrics: di.inject(requestPersistentVolumeClaimMetricsInjectable),
-    getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
     getDetailsUrl: di.inject(getDetailsUrlInjectable),
     podStore: di.inject(podStoreInjectable),
+    storageClassApi: di.inject(storageClassApiInjectable),
+    logger: di.inject(loggerInjectable),
   }),
 });