hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Make StatefulSet metrics component injectable

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-10-25 12:20:45 -04:00
parent c060a6b73e
commit d734276f9d
4 changed files with 120 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/renderer/components/+workloads-statefulsets/metrics-details-component.injectable.tsx Normal file
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 { 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<StatefulSet>) => (
<ResourceMetrics
tabs={podMetricTabs}
object={object}
metrics={di.inject(statefulSetMetricsInjectable, object)}
>
<PodCharts />
</ResourceMetrics>
),
enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.StatefulSet),
orderNumber: -1,
}),
injectionToken: kubeObjectDetailItemInjectionToken,
});
export default statefulSetMetricsDetailsComponentInjectable;

27
src/renderer/components/+workloads-statefulsets/metrics.injectable.ts Normal file
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 { 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;

50
src/renderer/components/+workloads-statefulsets/statefulset-details.tsx
View File

@ -7,7 +7,6 @@ import "./statefulset-details.scss";
import React from "react"; import React from "react";
import { disposeOnUnmount, observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { makeObservable, observable, reaction } from "mobx";
import { Badge } from "../badge"; import { Badge } from "../badge";
import { DrawerItem } from "../drawer"; import { DrawerItem } from "../drawer";
import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses"; 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 { StatefulSetStore } from "./store";
import type { KubeObjectDetailsProps } from "../kube-object-details"; import type { KubeObjectDetailsProps } from "../kube-object-details";
import { StatefulSet } from "../../../common/k8s-api/endpoints"; 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 { PodDetailsList } from "../+workloads-pods/pod-details-list";
import { KubeObjectMeta } from "../kube-object-meta"; import type { Logger } from "../../../common/logger";
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
import logger from "../../../common/logger";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api"; import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable"; import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
import type { PodStore } from "../+workloads-pods/store"; import type { PodStore } from "../+workloads-pods/store";
import podStoreInjectable from "../+workloads-pods/store.injectable"; import podStoreInjectable from "../+workloads-pods/store.injectable";
import statefulSetStoreInjectable from "./store.injectable"; import statefulSetStoreInjectable from "./store.injectable";
import type { GetActiveClusterEntity } from "../../api/catalog/entity/get-active-cluster-entity.injectable"; import loggerInjectable from "../../../common/logger.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";
export interface StatefulSetDetailsProps extends KubeObjectDetailsProps<StatefulSet> { export interface StatefulSetDetailsProps extends KubeObjectDetailsProps<StatefulSet> {
} }
@ -40,39 +32,21 @@ interface Dependencies {
subscribeStores: SubscribeStores; subscribeStores: SubscribeStores;
podStore: PodStore; podStore: PodStore;
statefulSetStore: StatefulSetStore; statefulSetStore: StatefulSetStore;
getActiveClusterEntity: GetActiveClusterEntity; logger: Logger;
requestPodMetricsForStatefulSets: RequestPodMetricsForStatefulSets;
} }
@observer @observer
class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsProps & Dependencies> { class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsProps & Dependencies> {
@observable metrics: StatefulSetPodMetricData | null = null;
constructor(props: StatefulSetDetailsProps & Dependencies) {
super(props);
makeObservable(this);
}
componentDidMount() { componentDidMount() {
disposeOnUnmount(this, [ disposeOnUnmount(this, [
reaction(() => this.props.object, () => {
this.metrics = null;
}),
this.props.subscribeStores([ this.props.subscribeStores([
this.props.podStore, this.props.podStore,
]), ]),
]); ]);
} }
loadMetrics = async () => {
const { object: statefulSet, requestPodMetricsForStatefulSets } = this.props;
this.metrics = await requestPodMetricsForStatefulSets([statefulSet], statefulSet.getNs());
};
render() { render() {
const { object: statefulSet, podStore, statefulSetStore, getActiveClusterEntity } = this.props; const { object: statefulSet, statefulSetStore, logger } = this.props;
if (!statefulSet) { if (!statefulSet) {
return null; return null;
@ -88,21 +62,9 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
const selectors = statefulSet.getSelectors(); const selectors = statefulSet.getSelectors();
const nodeSelector = statefulSet.getNodeSelectors(); const nodeSelector = statefulSet.getNodeSelectors();
const childPods = statefulSetStore.getChildPods(statefulSet); const childPods = statefulSetStore.getChildPods(statefulSet);
const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.StatefulSet);
return ( return (
<div className="StatefulSetDetails"> <div className="StatefulSetDetails">
{!isMetricHidden && podStore.isLoaded && (
<ResourceMetrics
loader={this.loadMetrics}
tabs={podMetricTabs}
object={statefulSet}
metrics={this.metrics}
>
<PodCharts/>
</ResourceMetrics>
)}
<KubeObjectMeta object={statefulSet}/>
{selectors.length && ( {selectors.length && (
<DrawerItem name="Selector" labelsOnly> <DrawerItem name="Selector" labelsOnly>
{ {
@ -131,7 +93,6 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
<DrawerItem name="Pod Status" className="pod-status"> <DrawerItem name="Pod Status" className="pod-status">
<PodDetailsStatuses pods={childPods}/> <PodDetailsStatuses pods={childPods}/>
</DrawerItem> </DrawerItem>
<ResourceMetricsText metrics={this.metrics}/>
<PodDetailsList pods={childPods} owner={statefulSet}/> <PodDetailsList pods={childPods} owner={statefulSet}/>
</div> </div>
); );
@ -144,8 +105,7 @@ export const StatefulSetDetails = withInjectables<Dependencies, StatefulSetDetai
subscribeStores: di.inject(subscribeStoresInjectable), subscribeStores: di.inject(subscribeStoresInjectable),
podStore: di.inject(podStoreInjectable), podStore: di.inject(podStoreInjectable),
statefulSetStore: di.inject(statefulSetStoreInjectable), statefulSetStore: di.inject(statefulSetStoreInjectable),
getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable), logger: di.inject(loggerInjectable),
requestPodMetricsForStatefulSets: di.inject(requestPodMetricsForStatefulSetsInjectable),
}), }),
}); });

116
src/renderer/components/+workloads-statefulsets/statefulsets.tsx
View File

@ -13,13 +13,11 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { StatefulSetStore } from "./store"; import type { StatefulSetStore } from "./store";
import type { PodStore } from "../+workloads-pods/store";
import type { EventStore } from "../+events/store"; import type { EventStore } from "../+events/store";
import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import eventStoreInjectable from "../+events/store.injectable"; import eventStoreInjectable from "../+events/store.injectable";
import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
import podStoreInjectable from "../+workloads-pods/store.injectable";
import statefulSetStoreInjectable from "./store.injectable"; import statefulSetStoreInjectable from "./store.injectable";
import { prevDefault } from "../../utils"; import { prevDefault } from "../../utils";
@ -33,79 +31,73 @@ enum columnId {
interface Dependencies { interface Dependencies {
statefulSetStore: StatefulSetStore; statefulSetStore: StatefulSetStore;
podStore: PodStore;
eventStore: EventStore; eventStore: EventStore;
filterByNamespace: FilterByNamespace; filterByNamespace: FilterByNamespace;
} }
@observer const renderPodCounts = (statefulSet: StatefulSet) => {
class NonInjectedStatefulSets extends React.Component<Dependencies> { const { readyReplicas, currentReplicas } = statefulSet.status ?? {};
renderPods(statefulSet: StatefulSet) {
const { readyReplicas, currentReplicas } = statefulSet.status ?? {};
return `${readyReplicas || 0}/${currentReplicas || 0}`; return `${readyReplicas || 0}/${currentReplicas || 0}`;
} };
render() { const NonInjectedStatefulSets = observer((props: Dependencies) => {
const { const {
eventStore, eventStore,
filterByNamespace, filterByNamespace,
podStore, statefulSetStore,
statefulSetStore, } = props;
} = this.props;
return ( return (
<SiblingsInTabLayout> <SiblingsInTabLayout>
<KubeObjectListLayout <KubeObjectListLayout
isConfigurable isConfigurable
tableId="workload_statefulsets" tableId="workload_statefulsets"
className="StatefulSets" className="StatefulSets"
store={statefulSetStore} store={statefulSetStore}
dependentStores={[podStore, eventStore]} // status icon component uses event store, details component uses podStore dependentStores={[eventStore]}
sortingCallbacks={{ sortingCallbacks={{
[columnId.name]: statefulSet => statefulSet.getName(), [columnId.name]: statefulSet => statefulSet.getName(),
[columnId.namespace]: statefulSet => statefulSet.getNs(), [columnId.namespace]: statefulSet => statefulSet.getNs(),
[columnId.age]: statefulSet => -statefulSet.getCreationTimestamp(), [columnId.age]: statefulSet => -statefulSet.getCreationTimestamp(),
[columnId.replicas]: statefulSet => statefulSet.getReplicas(), [columnId.replicas]: statefulSet => statefulSet.getReplicas(),
}} }}
searchFilters={[ searchFilters={[
statefulSet => statefulSet.getSearchFields(), statefulSet => statefulSet.getSearchFields(),
]} ]}
renderHeaderTitle="Stateful Sets" renderHeaderTitle="Stateful Sets"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
{ title: "Pods", className: "pods", id: columnId.pods }, { title: "Pods", className: "pods", id: columnId.pods },
{ title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas }, { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
{ className: "warning", showWithColumn: columnId.replicas }, { className: "warning", showWithColumn: columnId.replicas },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]} ]}
renderTableContents={statefulSet => [ renderTableContents={statefulSet => [
statefulSet.getName(), statefulSet.getName(),
<a <a
key="namespace" key="namespace"
className="filterNamespace" className="filterNamespace"
onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))} onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))}
> >
{statefulSet.getNs()} {statefulSet.getNs()}
</a>, </a>,
this.renderPods(statefulSet), renderPodCounts(statefulSet),
statefulSet.getReplicas(), statefulSet.getReplicas(),
<KubeObjectStatusIcon key="icon" object={statefulSet} />, <KubeObjectStatusIcon key="icon" object={statefulSet} />,
<KubeObjectAge key="age" object={statefulSet} />, <KubeObjectAge key="age" object={statefulSet} />,
]} ]}
/> />
</SiblingsInTabLayout> </SiblingsInTabLayout>
); );
} });
}
export const StatefulSets = withInjectables<Dependencies>(NonInjectedStatefulSets, { export const StatefulSets = withInjectables<Dependencies>(NonInjectedStatefulSets, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, ...props,
eventStore: di.inject(eventStoreInjectable), eventStore: di.inject(eventStoreInjectable),
filterByNamespace: di.inject(filterByNamespaceInjectable), filterByNamespace: di.inject(filterByNamespaceInjectable),
podStore: di.inject(podStoreInjectable),
statefulSetStore: di.inject(statefulSetStoreInjectable), statefulSetStore: di.inject(statefulSetStoreInjectable),
}), }),
}); });