From 3518c448ff444df4358a4ce863f5e713e1dfed8d Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 24 Oct 2022 15:24:03 -0400 Subject: [PATCH] Change PersistentVolumeClaim metrics to be injectable Signed-off-by: Sebastian Malton --- .../metrics-details-component.injectable.tsx | 34 ++++++++++ .../metrics.injectable.ts | 27 ++++++++ .../volume-claim-details.tsx | 65 ++++--------------- 3 files changed, 73 insertions(+), 53 deletions(-) create mode 100644 src/renderer/components/+storage-volume-claims/metrics-details-component.injectable.tsx create mode 100644 src/renderer/components/+storage-volume-claims/metrics.injectable.ts diff --git a/src/renderer/components/+storage-volume-claims/metrics-details-component.injectable.tsx b/src/renderer/components/+storage-volume-claims/metrics-details-component.injectable.tsx new file mode 100644 index 0000000000..771645a74c --- /dev/null +++ b/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 }) => ( + + + + ), + enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.VolumeClaim), + orderNumber: -1, + }), + injectionToken: kubeObjectDetailItemInjectionToken, +}); + +export default persistentVolumeClaimMetricsDetailsComponentInjectable; diff --git a/src/renderer/components/+storage-volume-claims/metrics.injectable.ts b/src/renderer/components/+storage-volume-claims/metrics.injectable.ts new file mode 100644 index 0000000000..edd74b50e6 --- /dev/null +++ b/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; diff --git a/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx b/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx index 250ab2e713..954bad9bc5 100644 --- a/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx +++ b/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 { disposeOnUnmount, observer } from "mobx-react"; +import { 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 { ClusterMetricsResourceType } from "../../../common/cluster-types"; -import { KubeObjectMeta } from "../kube-object-meta"; -import logger from "../../../common/logger"; -import type { PersistentVolumeClaimMetricData, RequestPersistentVolumeClaimMetrics } from "../../../common/k8s-api/endpoints/metrics.api/request-persistent-volume-claim-metrics.injectable"; +import type { StorageClassApi } from "../../../common/k8s-api/endpoints"; +import { PersistentVolumeClaim } from "../../../common/k8s-api/endpoints"; +import type { Logger } from "../../../common/logger"; 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 { } interface Dependencies { - requestPersistentVolumeClaimMetrics: RequestPersistentVolumeClaimMetrics; - getActiveClusterEntity: GetActiveClusterEntity; getDetailsUrl: GetDetailsUrl; podStore: PodStore; + storageClassApi: StorageClassApi; + logger: Logger; } @observer class NonInjectedPersistentVolumeClaimDetails extends React.Component { - @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 - {!isMetricHidden && ( - - - - )} - {accessModes?.join(", ")} @@ -147,9 +106,9 @@ class NonInjectedPersistentVolumeClaimDetails extends React.Component(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), }), });