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 ReplicaSet metrics details injectable

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

34
src/renderer/components/+workloads-replicasets/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 { 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<ReplicaSet>) => (
<ResourceMetrics
tabs={podMetricTabs}
object={object}
metrics={di.inject(replicaSetMetricsInjectable, object)}
>
<PodCharts />
</ResourceMetrics>
),
enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.ReplicaSet),
orderNumber: -1,
}),
injectionToken: kubeObjectDetailItemInjectionToken,
});
export default replicaSetMetricsDetailsComponentInjectable;

27
src/renderer/components/+workloads-replicasets/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 { 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;

51
src/renderer/components/+workloads-replicasets/replicaset-details.tsx
View File

@ -5,7 +5,6 @@
import "./replicaset-details.scss"; import "./replicaset-details.scss";
import React from "react"; import React from "react";
import { makeObservable, observable, reaction } from "mobx";
import { DrawerItem } from "../drawer"; import { DrawerItem } from "../drawer";
import { Badge } from "../badge"; import { Badge } from "../badge";
import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses"; 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 { disposeOnUnmount, observer } from "mobx-react";
import type { KubeObjectDetailsProps } from "../kube-object-details"; import type { KubeObjectDetailsProps } from "../kube-object-details";
import { ReplicaSet } from "../../../common/k8s-api/endpoints"; 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 { 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";
@ -27,10 +22,7 @@ import type { PodStore } from "../+workloads-pods/store";
import podStoreInjectable from "../+workloads-pods/store.injectable"; import podStoreInjectable from "../+workloads-pods/store.injectable";
import type { ReplicaSetStore } from "./store"; import type { ReplicaSetStore } from "./store";
import replicaSetStoreInjectable from "./store.injectable"; import replicaSetStoreInjectable 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 { 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";
export interface ReplicaSetDetailsProps extends KubeObjectDetailsProps<ReplicaSet> { export interface ReplicaSetDetailsProps extends KubeObjectDetailsProps<ReplicaSet> {
} }
@ -39,39 +31,20 @@ interface Dependencies {
subscribeStores: SubscribeStores; subscribeStores: SubscribeStores;
podStore: PodStore; podStore: PodStore;
replicaSetStore: ReplicaSetStore; replicaSetStore: ReplicaSetStore;
getActiveClusterEntity: GetActiveClusterEntity; logger: Logger;
requestPodMetricsForReplicaSets: RequestPodMetricsForReplicaSets;
} }
@observer @observer
class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProps & Dependencies> { class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProps & Dependencies> {
@observable metrics: ReplicaSetPodMetricData | null = null;
constructor(props: ReplicaSetDetailsProps & 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: replicaSet, requestPodMetricsForReplicaSets } = this.props;
this.metrics = await requestPodMetricsForReplicaSets([replicaSet], replicaSet.getNs());
};
render() { render() {
const { object: replicaSet, podStore, replicaSetStore, getActiveClusterEntity } = this.props; const { object: replicaSet, replicaSetStore, logger } = this.props;
if (!replicaSet) { if (!replicaSet) {
return null; return null;
@ -88,21 +61,9 @@ class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProp
const nodeSelector = replicaSet.getNodeSelectors(); const nodeSelector = replicaSet.getNodeSelectors();
const images = replicaSet.getImages(); const images = replicaSet.getImages();
const childPods = replicaSetStore.getChildPods(replicaSet); const childPods = replicaSetStore.getChildPods(replicaSet);
const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.ReplicaSet);
return ( return (
<div className="ReplicaSetDetails"> <div className="ReplicaSetDetails">
{!isMetricHidden && podStore.isLoaded && (
<ResourceMetrics
loader={this.loadMetrics}
tabs={podMetricTabs}
object={replicaSet}
metrics={this.metrics}
>
<PodCharts/>
</ResourceMetrics>
)}
<KubeObjectMeta object={replicaSet}/>
{selectors.length > 0 && ( {selectors.length > 0 && (
<DrawerItem name="Selector" labelsOnly> <DrawerItem name="Selector" labelsOnly>
{ {
@ -132,7 +93,6 @@ class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProp
<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={replicaSet}/> <PodDetailsList pods={childPods} owner={replicaSet}/>
</div> </div>
); );
@ -145,7 +105,6 @@ export const ReplicaSetDetails = withInjectables<Dependencies, ReplicaSetDetails
subscribeStores: di.inject(subscribeStoresInjectable), subscribeStores: di.inject(subscribeStoresInjectable),
podStore: di.inject(podStoreInjectable), podStore: di.inject(podStoreInjectable),
replicaSetStore: di.inject(replicaSetStoreInjectable), replicaSetStore: di.inject(replicaSetStoreInjectable),
getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable), logger: di.inject(loggerInjectable),
requestPodMetricsForReplicaSets: di.inject(requestPodMetricsForReplicaSetsInjectable),
}), }),
}); });

111
src/renderer/components/+workloads-replicasets/replicasets.tsx
View File

@ -35,64 +35,61 @@ interface Dependencies {
filterByNamespace: FilterByNamespace; filterByNamespace: FilterByNamespace;
} }
@observer const NonInjectedReplicaSets = observer((props: Dependencies) => {
class NonInjectedReplicaSets extends React.Component<Dependencies> { const {
render() { eventStore,
const { filterByNamespace,
eventStore, replicaSetStore,
filterByNamespace, } = props;
replicaSetStore,
} = this.props;
return ( return (
<SiblingsInTabLayout> <SiblingsInTabLayout>
<KubeObjectListLayout <KubeObjectListLayout
isConfigurable isConfigurable
tableId="workload_replicasets" tableId="workload_replicasets"
className="ReplicaSets" className="ReplicaSets"
store={replicaSetStore} store={replicaSetStore}
dependentStores={[eventStore]} // status icon component uses event store dependentStores={[eventStore]} // status icon component uses event store
sortingCallbacks={{ sortingCallbacks={{
[columnId.name]: replicaSet => replicaSet.getName(), [columnId.name]: replicaSet => replicaSet.getName(),
[columnId.namespace]: replicaSet => replicaSet.getNs(), [columnId.namespace]: replicaSet => replicaSet.getNs(),
[columnId.desired]: replicaSet => replicaSet.getDesired(), [columnId.desired]: replicaSet => replicaSet.getDesired(),
[columnId.current]: replicaSet => replicaSet.getCurrent(), [columnId.current]: replicaSet => replicaSet.getCurrent(),
[columnId.ready]: replicaSet => replicaSet.getReady(), [columnId.ready]: replicaSet => replicaSet.getReady(),
[columnId.age]: replicaSet => -replicaSet.getCreationTimestamp(), [columnId.age]: replicaSet => -replicaSet.getCreationTimestamp(),
}} }}
searchFilters={[ searchFilters={[
replicaSet => replicaSet.getSearchFields(), replicaSet => replicaSet.getSearchFields(),
]} ]}
renderHeaderTitle="Replica Sets" renderHeaderTitle="Replica Sets"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning", showWithColumn: columnId.name }, { className: "warning", showWithColumn: columnId.name },
{ title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
{ title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired }, { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired },
{ title: "Current", className: "current", sortBy: columnId.current, id: columnId.current }, { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current },
{ title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready }, { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]} ]}
renderTableContents={replicaSet => [ renderTableContents={replicaSet => [
replicaSet.getName(), replicaSet.getName(),
<KubeObjectStatusIcon key="icon" object={replicaSet} />, <KubeObjectStatusIcon key="icon" object={replicaSet} />,
<a <a
key="namespace" key="namespace"
className="filterNamespace" className="filterNamespace"
onClick={prevDefault(() => filterByNamespace(replicaSet.getNs()))} onClick={prevDefault(() => filterByNamespace(replicaSet.getNs()))}
> >
{replicaSet.getNs()} {replicaSet.getNs()}
</a>, </a>,
replicaSet.getDesired(), replicaSet.getDesired(),
replicaSet.getCurrent(), replicaSet.getCurrent(),
replicaSet.getReady(), replicaSet.getReady(),
<KubeObjectAge key="age" object={replicaSet} />, <KubeObjectAge key="age" object={replicaSet} />,
]} ]}
/> />
</SiblingsInTabLayout> </SiblingsInTabLayout>
); );
} });
}
export const ReplicaSets = withInjectables<Dependencies>(NonInjectedReplicaSets, { export const ReplicaSets = withInjectables<Dependencies>(NonInjectedReplicaSets, {
getProps: (di, props) => ({ getProps: (di, props) => ({