diff --git a/src/renderer/components/+workloads-replicasets/metrics-details-component.injectable.tsx b/src/renderer/components/+workloads-replicasets/metrics-details-component.injectable.tsx new file mode 100644 index 0000000000..fe979f2913 --- /dev/null +++ b/src/renderer/components/+workloads-replicasets/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 { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts"; +import { ClusterMetricsResourceType } from "../../../common/cluster-types"; +import type { ReplicaSet } 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 replicaSetMetricsInjectable from "./metrics.injectable"; + +const replicaSetMetricsDetailsComponentInjectable = getInjectable({ + id: "replica-set-metrics-details-component", + instantiate: (di) => ({ + Component: ({ object }: KubeObjectDetailsProps) => ( + + + + ), + enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.ReplicaSet), + orderNumber: -1, + }), + injectionToken: kubeObjectDetailItemInjectionToken, +}); + +export default replicaSetMetricsDetailsComponentInjectable; diff --git a/src/renderer/components/+workloads-replicasets/metrics.injectable.ts b/src/renderer/components/+workloads-replicasets/metrics.injectable.ts new file mode 100644 index 0000000000..c71b187ddf --- /dev/null +++ b/src/renderer/components/+workloads-replicasets/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 { ReplicaSet } from "../../../common/k8s-api/endpoints"; +import requestPodMetricsForReplicaSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable"; + +const replicaSetMetricsInjectable = getInjectable({ + id: "replica-set-metrics", + instantiate: (di, replicaSet) => { + const requestPodMetricsForReplicaSets = di.inject(requestPodMetricsForReplicaSetsInjectable); + + return asyncComputed(() => { + now(60 * 1000); // update every minute + + return requestPodMetricsForReplicaSets([replicaSet], replicaSet.getNs()); + }); + }, + lifecycle: lifecycleEnum.keyedSingleton({ + getInstanceKey: (di, replicaSet: ReplicaSet) => replicaSet.getId(), + }), +}); + +export default replicaSetMetricsInjectable; diff --git a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx b/src/renderer/components/+workloads-replicasets/replicaset-details.tsx index cf92b7976c..72e73c0726 100644 --- a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx +++ b/src/renderer/components/+workloads-replicasets/replicaset-details.tsx @@ -5,7 +5,6 @@ import "./replicaset-details.scss"; import React from "react"; -import { makeObservable, observable, reaction } from "mobx"; import { DrawerItem } from "../drawer"; import { Badge } from "../badge"; import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses"; @@ -14,12 +13,8 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities" import { disposeOnUnmount, observer } from "mobx-react"; import type { KubeObjectDetailsProps } from "../kube-object-details"; import { ReplicaSet } from "../../../common/k8s-api/endpoints"; -import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics"; -import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts"; import { PodDetailsList } from "../+workloads-pods/pod-details-list"; -import { KubeObjectMeta } from "../kube-object-meta"; -import { ClusterMetricsResourceType } from "../../../common/cluster-types"; -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"; @@ -27,10 +22,7 @@ import type { PodStore } from "../+workloads-pods/store"; import podStoreInjectable from "../+workloads-pods/store.injectable"; import type { ReplicaSetStore } from "./store"; import replicaSetStoreInjectable from "./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 { ReplicaSetPodMetricData, RequestPodMetricsForReplicaSets } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable"; -import requestPodMetricsForReplicaSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-replica-sets.injectable"; +import loggerInjectable from "../../../common/logger.injectable"; export interface ReplicaSetDetailsProps extends KubeObjectDetailsProps { } @@ -39,39 +31,20 @@ interface Dependencies { subscribeStores: SubscribeStores; podStore: PodStore; replicaSetStore: ReplicaSetStore; - getActiveClusterEntity: GetActiveClusterEntity; - requestPodMetricsForReplicaSets: RequestPodMetricsForReplicaSets; + logger: Logger; } @observer class NonInjectedReplicaSetDetails extends React.Component { - @observable metrics: ReplicaSetPodMetricData | null = null; - - constructor(props: ReplicaSetDetailsProps & Dependencies) { - super(props); - makeObservable(this); - } - componentDidMount() { disposeOnUnmount(this, [ - reaction(() => this.props.object, () => { - this.metrics = null; - }), - this.props.subscribeStores([ this.props.podStore, ]), ]); } - - loadMetrics = async () => { - const { object: replicaSet, requestPodMetricsForReplicaSets } = this.props; - - this.metrics = await requestPodMetricsForReplicaSets([replicaSet], replicaSet.getNs()); - }; - render() { - const { object: replicaSet, podStore, replicaSetStore, getActiveClusterEntity } = this.props; + const { object: replicaSet, replicaSetStore, logger } = this.props; if (!replicaSet) { return null; @@ -88,21 +61,9 @@ class NonInjectedReplicaSetDetails extends React.Component - {!isMetricHidden && podStore.isLoaded && ( - - - - )} - {selectors.length > 0 && ( { @@ -132,7 +93,6 @@ class NonInjectedReplicaSetDetails extends React.Component - ); @@ -145,7 +105,6 @@ export const ReplicaSetDetails = withInjectables { - render() { - const { - eventStore, - filterByNamespace, - replicaSetStore, - } = this.props; +const NonInjectedReplicaSets = observer((props: Dependencies) => { + const { + eventStore, + filterByNamespace, + replicaSetStore, + } = props; - return ( - - replicaSet.getName(), - [columnId.namespace]: replicaSet => replicaSet.getNs(), - [columnId.desired]: replicaSet => replicaSet.getDesired(), - [columnId.current]: replicaSet => replicaSet.getCurrent(), - [columnId.ready]: replicaSet => replicaSet.getReady(), - [columnId.age]: replicaSet => -replicaSet.getCreationTimestamp(), - }} - searchFilters={[ - replicaSet => replicaSet.getSearchFields(), - ]} - renderHeaderTitle="Replica Sets" - renderTableHeader={[ - { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { className: "warning", showWithColumn: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, - { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired }, - { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current }, - { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready }, - { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, - ]} - renderTableContents={replicaSet => [ - replicaSet.getName(), - , - filterByNamespace(replicaSet.getNs()))} - > - {replicaSet.getNs()} - , - replicaSet.getDesired(), - replicaSet.getCurrent(), - replicaSet.getReady(), - , - ]} - /> - - ); - } -} + return ( + + replicaSet.getName(), + [columnId.namespace]: replicaSet => replicaSet.getNs(), + [columnId.desired]: replicaSet => replicaSet.getDesired(), + [columnId.current]: replicaSet => replicaSet.getCurrent(), + [columnId.ready]: replicaSet => replicaSet.getReady(), + [columnId.age]: replicaSet => -replicaSet.getCreationTimestamp(), + }} + searchFilters={[ + replicaSet => replicaSet.getSearchFields(), + ]} + renderHeaderTitle="Replica Sets" + renderTableHeader={[ + { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, + { className: "warning", showWithColumn: columnId.name }, + { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, + { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired }, + { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current }, + { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready }, + { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, + ]} + renderTableContents={replicaSet => [ + replicaSet.getName(), + , + filterByNamespace(replicaSet.getNs()))} + > + {replicaSet.getNs()} + , + replicaSet.getDesired(), + replicaSet.getCurrent(), + replicaSet.getReady(), + , + ]} + /> + + ); +}); export const ReplicaSets = withInjectables(NonInjectedReplicaSets, { getProps: (di, props) => ({