1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Change PersistentVolumeClaim metrics to be injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-10-24 15:24:03 -04:00
parent 4328f03976
commit 3518c448ff
3 changed files with 73 additions and 53 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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<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),
}),
});