diff --git a/src/renderer/components/+workloads-statefulsets/metrics-details-component.injectable.tsx b/src/renderer/components/+workloads-statefulsets/metrics-details-component.injectable.tsx new file mode 100644 index 0000000000..5b64eeb96e --- /dev/null +++ b/src/renderer/components/+workloads-statefulsets/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 { StatefulSet } 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 statefulSetMetricsInjectable from "./metrics.injectable"; + +const statefulSetMetricsDetailsComponentInjectable = getInjectable({ + id: "stateful-set-metrics-details-component", + instantiate: (di) => ({ + Component: ({ object }: KubeObjectDetailsProps) => ( + + + + ), + enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.StatefulSet), + orderNumber: -1, + }), + injectionToken: kubeObjectDetailItemInjectionToken, +}); + +export default statefulSetMetricsDetailsComponentInjectable; diff --git a/src/renderer/components/+workloads-statefulsets/metrics.injectable.ts b/src/renderer/components/+workloads-statefulsets/metrics.injectable.ts new file mode 100644 index 0000000000..c6bd8049bd --- /dev/null +++ b/src/renderer/components/+workloads-statefulsets/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 { StatefulSet } from "../../../common/k8s-api/endpoints"; +import requestPodMetricsForStatefulSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable"; + +const statefulSetMetricsInjectable = getInjectable({ + id: "stateful-set-metrics", + instantiate: (di, statefulSet) => { + const requestPodMetricsForStatefulSets = di.inject(requestPodMetricsForStatefulSetsInjectable); + + return asyncComputed(() => { + now(60 * 1000); + + return requestPodMetricsForStatefulSets([statefulSet], statefulSet.getNs()); + }); + }, + lifecycle: lifecycleEnum.keyedSingleton({ + getInstanceKey: (di, statefulSet: StatefulSet) => statefulSet.getId(), + }), +}); + +export default statefulSetMetricsInjectable; diff --git a/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx b/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx index 83fb856619..5c9eff2e84 100644 --- a/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx +++ b/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx @@ -7,7 +7,6 @@ import "./statefulset-details.scss"; import React from "react"; import { disposeOnUnmount, observer } from "mobx-react"; -import { makeObservable, observable, reaction } from "mobx"; import { Badge } from "../badge"; import { DrawerItem } from "../drawer"; import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses"; @@ -16,22 +15,15 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities" import type { StatefulSetStore } from "./store"; import type { KubeObjectDetailsProps } from "../kube-object-details"; import { StatefulSet } 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"; import type { PodStore } from "../+workloads-pods/store"; import podStoreInjectable from "../+workloads-pods/store.injectable"; import statefulSetStoreInjectable 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 { RequestPodMetricsForStatefulSets, StatefulSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable"; -import requestPodMetricsForStatefulSetsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable"; +import loggerInjectable from "../../../common/logger.injectable"; export interface StatefulSetDetailsProps extends KubeObjectDetailsProps { } @@ -40,39 +32,21 @@ interface Dependencies { subscribeStores: SubscribeStores; podStore: PodStore; statefulSetStore: StatefulSetStore; - getActiveClusterEntity: GetActiveClusterEntity; - requestPodMetricsForStatefulSets: RequestPodMetricsForStatefulSets; + logger: Logger; } @observer class NonInjectedStatefulSetDetails extends React.Component { - @observable metrics: StatefulSetPodMetricData | null = null; - - constructor(props: StatefulSetDetailsProps & 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: statefulSet, requestPodMetricsForStatefulSets } = this.props; - - this.metrics = await requestPodMetricsForStatefulSets([statefulSet], statefulSet.getNs()); - }; - render() { - const { object: statefulSet, podStore, statefulSetStore, getActiveClusterEntity } = this.props; + const { object: statefulSet, statefulSetStore, logger } = this.props; if (!statefulSet) { return null; @@ -88,21 +62,9 @@ class NonInjectedStatefulSetDetails extends React.Component - {!isMetricHidden && podStore.isLoaded && ( - - - - )} - {selectors.length && ( { @@ -131,7 +93,6 @@ class NonInjectedStatefulSetDetails extends React.Component - ); @@ -144,8 +105,7 @@ export const StatefulSetDetails = withInjectables { - renderPods(statefulSet: StatefulSet) { - const { readyReplicas, currentReplicas } = statefulSet.status ?? {}; +const renderPodCounts = (statefulSet: StatefulSet) => { + const { readyReplicas, currentReplicas } = statefulSet.status ?? {}; - return `${readyReplicas || 0}/${currentReplicas || 0}`; - } + return `${readyReplicas || 0}/${currentReplicas || 0}`; +}; - render() { - const { - eventStore, - filterByNamespace, - podStore, - statefulSetStore, - } = this.props; +const NonInjectedStatefulSets = observer((props: Dependencies) => { + const { + eventStore, + filterByNamespace, + statefulSetStore, + } = props; - return ( - - statefulSet.getName(), - [columnId.namespace]: statefulSet => statefulSet.getNs(), - [columnId.age]: statefulSet => -statefulSet.getCreationTimestamp(), - [columnId.replicas]: statefulSet => statefulSet.getReplicas(), - }} - searchFilters={[ - statefulSet => statefulSet.getSearchFields(), - ]} - renderHeaderTitle="Stateful Sets" - renderTableHeader={[ - { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, - { title: "Pods", className: "pods", id: columnId.pods }, - { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas }, - { className: "warning", showWithColumn: columnId.replicas }, - { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, - ]} - renderTableContents={statefulSet => [ - statefulSet.getName(), - filterByNamespace(statefulSet.getNs()))} - > - {statefulSet.getNs()} - , - this.renderPods(statefulSet), - statefulSet.getReplicas(), - , - , - ]} - /> - - ); - } -} + return ( + + statefulSet.getName(), + [columnId.namespace]: statefulSet => statefulSet.getNs(), + [columnId.age]: statefulSet => -statefulSet.getCreationTimestamp(), + [columnId.replicas]: statefulSet => statefulSet.getReplicas(), + }} + searchFilters={[ + statefulSet => statefulSet.getSearchFields(), + ]} + renderHeaderTitle="Stateful Sets" + renderTableHeader={[ + { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, + { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, + { title: "Pods", className: "pods", id: columnId.pods }, + { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas }, + { className: "warning", showWithColumn: columnId.replicas }, + { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, + ]} + renderTableContents={statefulSet => [ + statefulSet.getName(), + filterByNamespace(statefulSet.getNs()))} + > + {statefulSet.getNs()} + , + renderPodCounts(statefulSet), + statefulSet.getReplicas(), + , + , + ]} + /> + + ); +}); export const StatefulSets = withInjectables(NonInjectedStatefulSets, { getProps: (di, props) => ({ ...props, eventStore: di.inject(eventStoreInjectable), filterByNamespace: di.inject(filterByNamespaceInjectable), - podStore: di.inject(podStoreInjectable), statefulSetStore: di.inject(statefulSetStoreInjectable), }), });