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

Change Job metrics to be injectable

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-10-24 16:01:34 -04:00
parent 8c032ce704
commit 4264ba0990
5 changed files with 123 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable.ts
View File

@ -24,7 +24,7 @@ const requestPodMetricsForJobsInjectable = getInjectable({
instantiate: (di): RequestPodMetricsForJobs => { instantiate: (di): RequestPodMetricsForJobs => {
const requestMetrics = di.inject(requestMetricsInjectable); const requestMetrics = di.inject(requestMetricsInjectable);
return (jobs, namespace, selector) => { return (jobs, namespace, selector = "") => {
const podSelector = jobs.map(job => `${job.getName()}-[[:alnum:]]{5}`).join("|"); const podSelector = jobs.map(job => `${job.getName()}-[[:alnum:]]{5}`).join("|");
const opts = { category: "pods", pods: podSelector, namespace, selector }; const opts = { category: "pods", pods: podSelector, namespace, selector };

48
src/renderer/components/+workloads-jobs/job-details.tsx
View File

@ -17,22 +17,14 @@ import type { JobStore } from "./store";
import type { KubeObjectDetailsProps } from "../kube-object-details"; import type { KubeObjectDetailsProps } from "../kube-object-details";
import { Job } from "../../../common/k8s-api/endpoints"; import { Job } from "../../../common/k8s-api/endpoints";
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 { makeObservable, observable, reaction } from "mobx";
import { podMetricTabs, PodCharts } from "../+workloads-pods/pod-charts";
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
import { ResourceMetrics } from "../resource-metrics";
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 jobStoreInjectable from "./store.injectable"; import jobStoreInjectable 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 { JobPodMetricData, RequestPodMetricsForJobs } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
import requestPodMetricsForJobsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
export interface JobDetailsProps extends KubeObjectDetailsProps<Job> { export interface JobDetailsProps extends KubeObjectDetailsProps<Job> {
} }
@ -41,38 +33,21 @@ interface Dependencies {
subscribeStores: SubscribeStores; subscribeStores: SubscribeStores;
podStore: PodStore; podStore: PodStore;
jobStore: JobStore; jobStore: JobStore;
getActiveClusterEntity: GetActiveClusterEntity; logger: Logger;
requestPodMetricsForJobs: RequestPodMetricsForJobs;
} }
@observer @observer
class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependencies> { class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependencies> {
@observable metrics: JobPodMetricData | null = null;
constructor(props: JobDetailsProps & 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: job, requestPodMetricsForJobs } = this.props;
this.metrics = await requestPodMetricsForJobs([job], job.getNs(), "");
};
render() { render() {
const { object: job, jobStore, getActiveClusterEntity } = this.props; const { object: job, jobStore, logger } = this.props;
if (!job) { if (!job) {
return null; return null;
@ -89,21 +64,9 @@ class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependenci
const images = job.getImages(); const images = job.getImages();
const childPods = jobStore.getChildPods(job); const childPods = jobStore.getChildPods(job);
const condition = job.getCondition(); const condition = job.getCondition();
const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Job);
return ( return (
<div className="JobDetails"> <div className="JobDetails">
{!isMetricHidden && (
<ResourceMetrics
loader={this.loadMetrics}
tabs={podMetricTabs}
object={job}
metrics={this.metrics}
>
<PodCharts />
</ResourceMetrics>
)}
<KubeObjectMeta object={job}/>
<DrawerItem name="Selector" labelsOnly> <DrawerItem name="Selector" labelsOnly>
{ {
Object.keys(selectors).map(label => <Badge key={label} label={label}/>) Object.keys(selectors).map(label => <Badge key={label} label={label}/>)
@ -161,8 +124,7 @@ export const JobDetails = withInjectables<Dependencies, JobDetailsProps>(NonInje
subscribeStores: di.inject(subscribeStoresInjectable), subscribeStores: di.inject(subscribeStoresInjectable),
podStore: di.inject(podStoreInjectable), podStore: di.inject(podStoreInjectable),
jobStore: di.inject(jobStoreInjectable), jobStore: di.inject(jobStoreInjectable),
getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable), logger: di.inject(loggerInjectable),
requestPodMetricsForJobs: di.inject(requestPodMetricsForJobsInjectable),
}), }),
}); });

115
src/renderer/components/+workloads-jobs/jobs.tsx
View File

@ -35,67 +35,64 @@ interface Dependencies {
filterByNamespace: FilterByNamespace; filterByNamespace: FilterByNamespace;
} }
@observer const NonInjectedJobs = observer((props: Dependencies) => {
class NonInjectedJobs extends React.Component<Dependencies> { const {
render() { eventStore,
const { filterByNamespace,
eventStore, jobStore,
filterByNamespace, } = props;
jobStore,
} = this.props;
return ( return (
<SiblingsInTabLayout> <SiblingsInTabLayout>
<KubeObjectListLayout <KubeObjectListLayout
isConfigurable isConfigurable
tableId="workload_jobs" tableId="workload_jobs"
className="Jobs" className="Jobs"
store={jobStore} store={jobStore}
dependentStores={[eventStore]} // status icon component uses event store dependentStores={[eventStore]} // status icon component uses event store
sortingCallbacks={{ sortingCallbacks={{
[columnId.name]: job => job.getName(), [columnId.name]: job => job.getName(),
[columnId.namespace]: job => job.getNs(), [columnId.namespace]: job => job.getNs(),
[columnId.conditions]: job => job.getCondition()?.type, [columnId.conditions]: job => job.getCondition()?.type,
[columnId.age]: job => -job.getCreationTimestamp(), [columnId.age]: job => -job.getCreationTimestamp(),
}} }}
searchFilters={[ searchFilters={[
job => job.getSearchFields(), job => job.getSearchFields(),
]} ]}
renderHeaderTitle="Jobs" renderHeaderTitle="Jobs"
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: "Completions", className: "completions", id: columnId.completions }, { title: "Completions", className: "completions", id: columnId.completions },
{ className: "warning", showWithColumn: columnId.completions }, { className: "warning", showWithColumn: columnId.completions },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
{ title: "Conditions", className: "conditions", sortBy: columnId.conditions, id: columnId.conditions }, { title: "Conditions", className: "conditions", sortBy: columnId.conditions, id: columnId.conditions },
]} ]}
renderTableContents={job => { renderTableContents={job => {
const condition = job.getCondition(); const condition = job.getCondition();
return [ return [
job.getName(), job.getName(),
<a <a
key="namespace" key="namespace"
className="filterNamespace" className="filterNamespace"
onClick={prevDefault(() => filterByNamespace(job.getNs()))} onClick={prevDefault(() => filterByNamespace(job.getNs()))}
> >
{job.getNs()} {job.getNs()}
</a>, </a>,
`${job.getCompletions()} / ${job.getDesiredCompletions()}`, `${job.getCompletions()} / ${job.getDesiredCompletions()}`,
<KubeObjectStatusIcon key="icon" object={job} />, <KubeObjectStatusIcon key="icon" object={job} />,
<KubeObjectAge key="age" object={job} />, <KubeObjectAge key="age" object={job} />,
condition && { condition && {
title: condition.type, title: condition.type,
className: kebabCase(condition.type), className: kebabCase(condition.type),
}, },
]; ];
}} }}
/> />
</SiblingsInTabLayout> </SiblingsInTabLayout>
); );
} });
}
export const Jobs = withInjectables<Dependencies>(NonInjectedJobs, { export const Jobs = withInjectables<Dependencies>(NonInjectedJobs, {
getProps: (di, props) => ({ getProps: (di, props) => ({

34
src/renderer/components/+workloads-jobs/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 { Job } 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 jobMetricsInjectable from "./metrics.injectable";
const jobMetricsDetailsComponentInjectable = getInjectable({
id: "job-metrics-details-component",
instantiate: (di) => ({
Component: ({ object }: KubeObjectDetailsProps<Job>) => (
<ResourceMetrics
tabs={podMetricTabs}
object={object}
metrics={di.inject(jobMetricsInjectable, object)}
>
<PodCharts />
</ResourceMetrics>
),
enabled: di.inject(enabledMetricsInjectable, ClusterMetricsResourceType.Job),
orderNumber: -1,
}),
injectionToken: kubeObjectDetailItemInjectionToken,
});
export default jobMetricsDetailsComponentInjectable;

27
src/renderer/components/+workloads-jobs/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 { Job } from "../../../common/k8s-api/endpoints";
import requestPodMetricsForJobsInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-jobs.injectable";
const jobMetricsInjectable = getInjectable({
id: "job-metrics",
instantiate: (di, job) => {
const requestPodMetricsForJobs = di.inject(requestPodMetricsForJobsInjectable);
return asyncComputed(() => {
now(60 * 1000);
return requestPodMetricsForJobs([job], job.getNs());
});
},
lifecycle: lifecycleEnum.keyedSingleton({
getInstanceKey: (di, job: Job) => job.getId(),
}),
});
export default jobMetricsInjectable;