From a1c9b9a22bc512c6a5509ed30ce5889b0ca5a7e3 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 24 Oct 2022 15:06:02 -0400 Subject: [PATCH] Replace NodeMetrics in details with injectable Signed-off-by: Sebastian Malton --- .../entity/metrics-enabled.injectable.ts | 22 ++++++++ src/renderer/components/+nodes/details.tsx | 55 ++----------------- .../metrics-details-component.injectable.tsx | 39 +++++++++++++ .../components/+nodes/metrics.injectable.ts | 27 +++++++++ 4 files changed, 93 insertions(+), 50 deletions(-) create mode 100644 src/renderer/api/catalog/entity/metrics-enabled.injectable.ts create mode 100644 src/renderer/components/+nodes/metrics-details-component.injectable.tsx create mode 100644 src/renderer/components/+nodes/metrics.injectable.ts diff --git a/src/renderer/api/catalog/entity/metrics-enabled.injectable.ts b/src/renderer/api/catalog/entity/metrics-enabled.injectable.ts new file mode 100644 index 0000000000..9f9fee93ee --- /dev/null +++ b/src/renderer/api/catalog/entity/metrics-enabled.injectable.ts @@ -0,0 +1,22 @@ +/** + * 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 { computed } from "mobx"; +import type { ClusterMetricsResourceType } from "../../../../common/cluster-types"; +import getActiveClusterEntityInjectable from "./get-active-cluster-entity.injectable"; + +const enabledMetricsInjectable = getInjectable({ + id: "enabled-metrics", + instantiate: (di, kind) => { + const getActiveClusterEntity = di.inject(getActiveClusterEntityInjectable); + + return computed(() => !getActiveClusterEntity()?.isMetricsHidden(kind)); + }, + lifecycle: lifecycleEnum.keyedSingleton({ + getInstanceKey: (di, kind: ClusterMetricsResourceType) => kind, + }), +}); + +export default enabledMetricsInjectable; diff --git a/src/renderer/components/+nodes/details.tsx b/src/renderer/components/+nodes/details.tsx index f71d5bfa5f..4e1eeddb65 100644 --- a/src/renderer/components/+nodes/details.tsx +++ b/src/renderer/components/+nodes/details.tsx @@ -11,26 +11,18 @@ import kebabCase from "lodash/kebabCase"; import { disposeOnUnmount, observer } from "mobx-react"; import { DrawerItem, DrawerItemLabels } from "../drawer"; import { Badge } from "../badge"; -import { ResourceMetrics } from "../resource-metrics"; import type { KubeObjectDetailsProps } from "../kube-object-details"; import { formatNodeTaint, Node } from "../../../common/k8s-api/endpoints"; -import { NodeCharts } from "./node-charts"; -import { makeObservable, observable, reaction } from "mobx"; import { PodDetailsList } from "../+workloads-pods/pod-details-list"; -import { KubeObjectMeta } from "../kube-object-meta"; -import { ClusterMetricsResourceType } from "../../../common/cluster-types"; import { NodeDetailsResources } from "./details-resources"; import { DrawerTitle } from "../drawer/drawer-title"; -import logger from "../../../common/logger"; +import type { Logger } from "../../../common/logger"; import { withInjectables } from "@ogre-tools/injectable-react"; import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api"; import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable"; import type { PodStore } from "../+workloads-pods/store"; import podStoreInjectable from "../+workloads-pods/store.injectable"; -import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable"; -import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable"; -import type { ClusterMetricData, RequestClusterMetricsByNodeNames } from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable"; -import requestClusterMetricsByNodeNamesInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable"; +import loggerInjectable from "../../../common/logger.injectable"; export interface NodeDetailsProps extends KubeObjectDetailsProps { } @@ -38,39 +30,21 @@ export interface NodeDetailsProps extends KubeObjectDetailsProps { interface Dependencies { subscribeStores: SubscribeStores; podStore: PodStore; - getActiveClusterEntity: GetActiveClusterEntity; - requestClusterMetricsByNodeNames: RequestClusterMetricsByNodeNames; + logger: Logger; } @observer class NonInjectedNodeDetails extends React.Component { - @observable metrics: ClusterMetricData | null = null; - - constructor(props: NodeDetailsProps & Dependencies) { - super(props); - makeObservable(this); - } - componentDidMount() { disposeOnUnmount(this, [ - reaction(() => this.props.object.getName(), () => { - this.metrics = null; - }), - this.props.subscribeStores([ this.props.podStore, ]), ]); } - loadMetrics = async () => { - const { object: node, requestClusterMetricsByNodeNames } = this.props; - - this.metrics = await requestClusterMetricsByNodeNames([node.getName()]); - }; - render() { - const { object: node, podStore, getActiveClusterEntity } = this.props; + const { object: node, podStore, logger } = this.props; if (!node) { return null; @@ -86,27 +60,9 @@ class NonInjectedNodeDetails extends React.Component - {!isMetricHidden && podStore.isLoaded && ( - - - - )} - {addresses && ( { @@ -197,8 +153,7 @@ export const NodeDetails = withInjectables(NonIn ...props, subscribeStores: di.inject(subscribeStoresInjectable), podStore: di.inject(podStoreInjectable), - getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable), - requestClusterMetricsByNodeNames: di.inject(requestClusterMetricsByNodeNamesInjectable), + logger: di.inject(loggerInjectable), }), }); diff --git a/src/renderer/components/+nodes/metrics-details-component.injectable.tsx b/src/renderer/components/+nodes/metrics-details-component.injectable.tsx new file mode 100644 index 0000000000..c6060b7ebb --- /dev/null +++ b/src/renderer/components/+nodes/metrics-details-component.injectable.tsx @@ -0,0 +1,39 @@ +/** + * 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 type { Node } from "../../../common/k8s-api/endpoints"; +import enabledMetricsInjectable from "../../api/catalog/entity/metrics-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 nodeMetricsInjectable from "./metrics.injectable"; +import { NodeCharts } from "./node-charts"; + +const nodeMetricsDetailsComponentInjectable = getInjectable({ + id: "node-metrics-details-component", + instantiate: (di) => ({ + Component: ({ object }: KubeObjectDetailsProps) => ( + + + + ), + enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.Node), + orderNumber: -1, + }), + injectionToken: kubeObjectDetailItemInjectionToken, +}); + +export default nodeMetricsDetailsComponentInjectable; diff --git a/src/renderer/components/+nodes/metrics.injectable.ts b/src/renderer/components/+nodes/metrics.injectable.ts new file mode 100644 index 0000000000..c97630027e --- /dev/null +++ b/src/renderer/components/+nodes/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 { Node } from "../../../common/k8s-api/endpoints"; +import requestClusterMetricsByNodeNamesInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable"; + +const nodeMetricsInjectable = getInjectable({ + id: "node-metrics", + instantiate: (di, node) => { + const requestClusterMetricsByNodeNames = di.inject(requestClusterMetricsByNodeNamesInjectable); + + return asyncComputed(() => { + now(60 * 1000); + + return requestClusterMetricsByNodeNames([node.getName()]); + }); + }, + lifecycle: lifecycleEnum.keyedSingleton({ + getInstanceKey: (di, node: Node) => node.getId(), + }), +}); + +export default nodeMetricsInjectable;