mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Refactor kube detail components and add KubeEvents automatically to all custom resources (#6468)
* Support Events on CustomResourece details panel Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove unnecessary check Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy KubeObjectMeta use from non-metrics details Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change orderNumber of default KubeMetaDetails Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove last use of legacy global getActiveClusterEntity Signed-off-by: Sebastian Malton <sebastian@malton.name> * Refactor ResourceMetrics to use IAsyncComputed - Introduce first use for namespace metrics Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce metrics details item for Ingress Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacyStore for nodes Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacyStore for ingresses Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace NodeMetrics in details with injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change namespace metrics details to use more injectables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change ingress metrics details to use more injectables Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change PersistentVolumeClaim metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change DaemonSet metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change Deployment metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Change Job metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert Pod metrics to be injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ReplicaSet metrics details injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make StatefulSet metrics component injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Introduce fix for metrics components visible on all details Signed-off-by: Sebastian Malton <sebastian@malton.name> * Use the new and correct enabled check Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy global for daemonSetStore Signed-off-by: Sebastian Malton <sebastian@malton.name> * Switch components to be static to help with React performance Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove legacy store of CronJobs Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make DeploymentReplicaSets injectable to fix build error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix up remove dead code Signed-off-by: Sebastian Malton <sebastian@malton.name> * Allow use of ResourceMetrics without IAsyncComputed Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix metrics not updating correctly Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots because moving KubeObjectMeta out of CustomResourceDetails Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update more snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test failures due to newer dep versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type errors from new asyncComputed Signed-off-by: Sebastian Malton <sebastian@malton.name> Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton authored and 
GitHub committed
1 parent
d05189d008
commit
83d2b12cca
118 files changed
+1664
-1440
No files matched your search
+52
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 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 { type IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
|
||||
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 type { StatefulSetPodMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-pod-metrics-for-stateful-sets.injectable";
|
||||
import metricsDetailsComponentEnabledInjectable from "../../api/catalog/entity/metrics-details-component-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";
|
||||
|
||||
interface Dependencies {
|
||||
metrics: IAsyncComputed<StatefulSetPodMetricData>;
|
||||
}
|
||||
|
||||
const NonInjectedStatefulSetMetricsDetailsComponent = ({
|
||||
object,
|
||||
metrics,
|
||||
}: KubeObjectDetailsProps<StatefulSet> & Dependencies) => (
|
||||
<ResourceMetrics
|
||||
tabs={podMetricTabs}
|
||||
object={object}
|
||||
metrics={metrics}
|
||||
>
|
||||
<PodCharts />
|
||||
</ResourceMetrics>
|
||||
);
|
||||
|
||||
const StatefulSetMetricsDetailsComponent = withInjectables<Dependencies, KubeObjectDetailsProps<StatefulSet>>(NonInjectedStatefulSetMetricsDetailsComponent, {
|
||||
getProps: (di, props) => ({
|
||||
metrics: di.inject(statefulSetMetricsInjectable, props.object),
|
||||
...props,
|
||||
}),
|
||||
});
|
||||
|
||||
const statefulSetMetricsDetailsComponentInjectable = getInjectable({
|
||||
id: "stateful-set-metrics-details-component",
|
||||
instantiate: (di) => ({
|
||||
Component: StatefulSetMetricsDetailsComponent,
|
||||
enabled: di.inject(metricsDetailsComponentEnabledInjectable, ClusterMetricsResourceType.StatefulSet),
|
||||
orderNumber: -1,
|
||||
}),
|
||||
injectionToken: kubeObjectDetailItemInjectionToken,
|
||||
});
|
||||
|
||||
export default statefulSetMetricsDetailsComponentInjectable;
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 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({
|
||||
getValueFromObservedPromise: async () => {
|
||||
now(60 * 1000);
|
||||
|
||||
return requestPodMetricsForStatefulSets([statefulSet], statefulSet.getNs());
|
||||
},
|
||||
});
|
||||
},
|
||||
lifecycle: lifecycleEnum.keyedSingleton({
|
||||
getInstanceKey: (di, statefulSet: StatefulSet) => statefulSet.getId(),
|
||||
}),
|
||||
});
|
||||
|
||||
export default statefulSetMetricsInjectable;
|
||||
@@ -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<StatefulSet> {
|
||||
}
|
||||
@@ -40,39 +32,21 @@ interface Dependencies {
|
||||
subscribeStores: SubscribeStores;
|
||||
podStore: PodStore;
|
||||
statefulSetStore: StatefulSetStore;
|
||||
getActiveClusterEntity: GetActiveClusterEntity;
|
||||
requestPodMetricsForStatefulSets: RequestPodMetricsForStatefulSets;
|
||||
logger: Logger;
|
||||
}
|
||||
|
||||
@observer
|
||||
class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsProps & Dependencies> {
|
||||
@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<StatefulSetDetailsPr
|
||||
const selectors = statefulSet.getSelectors();
|
||||
const nodeSelector = statefulSet.getNodeSelectors();
|
||||
const childPods = statefulSetStore.getChildPods(statefulSet);
|
||||
const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.StatefulSet);
|
||||
|
||||
return (
|
||||
<div className="StatefulSetDetails">
|
||||
{!isMetricHidden && podStore.isLoaded && (
|
||||
<ResourceMetrics
|
||||
loader={this.loadMetrics}
|
||||
tabs={podMetricTabs}
|
||||
object={statefulSet}
|
||||
metrics={this.metrics}
|
||||
>
|
||||
<PodCharts/>
|
||||
</ResourceMetrics>
|
||||
)}
|
||||
<KubeObjectMeta object={statefulSet}/>
|
||||
{selectors.length && (
|
||||
<DrawerItem name="Selector" labelsOnly>
|
||||
{
|
||||
@@ -131,7 +93,6 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
|
||||
<DrawerItem name="Pod Status" className="pod-status">
|
||||
<PodDetailsStatuses pods={childPods}/>
|
||||
</DrawerItem>
|
||||
<ResourceMetricsText metrics={this.metrics}/>
|
||||
<PodDetailsList pods={childPods} owner={statefulSet}/>
|
||||
</div>
|
||||
);
|
||||
@@ -144,8 +105,7 @@ export const StatefulSetDetails = withInjectables<Dependencies, StatefulSetDetai
|
||||
subscribeStores: di.inject(subscribeStoresInjectable),
|
||||
podStore: di.inject(podStoreInjectable),
|
||||
statefulSetStore: di.inject(statefulSetStoreInjectable),
|
||||
getActiveClusterEntity: di.inject(getActiveClusterEntityInjectable),
|
||||
requestPodMetricsForStatefulSets: di.inject(requestPodMetricsForStatefulSetsInjectable),
|
||||
logger: di.inject(loggerInjectable),
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -13,13 +13,11 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
|
||||
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
|
||||
import { KubeObjectAge } from "../kube-object/age";
|
||||
import type { StatefulSetStore } from "./store";
|
||||
import type { PodStore } from "../+workloads-pods/store";
|
||||
import type { EventStore } from "../+events/store";
|
||||
import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import eventStoreInjectable from "../+events/store.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 { prevDefault } from "../../utils";
|
||||
|
||||
@@ -33,79 +31,73 @@ enum columnId {
|
||||
|
||||
interface Dependencies {
|
||||
statefulSetStore: StatefulSetStore;
|
||||
podStore: PodStore;
|
||||
eventStore: EventStore;
|
||||
filterByNamespace: FilterByNamespace;
|
||||
}
|
||||
|
||||
@observer
|
||||
class NonInjectedStatefulSets extends React.Component<Dependencies> {
|
||||
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 (
|
||||
<SiblingsInTabLayout>
|
||||
<KubeObjectListLayout
|
||||
isConfigurable
|
||||
tableId="workload_statefulsets"
|
||||
className="StatefulSets"
|
||||
store={statefulSetStore}
|
||||
dependentStores={[podStore, eventStore]} // status icon component uses event store, details component uses podStore
|
||||
sortingCallbacks={{
|
||||
[columnId.name]: statefulSet => 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(),
|
||||
<a
|
||||
key="namespace"
|
||||
className="filterNamespace"
|
||||
onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))}
|
||||
>
|
||||
{statefulSet.getNs()}
|
||||
</a>,
|
||||
this.renderPods(statefulSet),
|
||||
statefulSet.getReplicas(),
|
||||
<KubeObjectStatusIcon key="icon" object={statefulSet} />,
|
||||
<KubeObjectAge key="age" object={statefulSet} />,
|
||||
]}
|
||||
/>
|
||||
</SiblingsInTabLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<SiblingsInTabLayout>
|
||||
<KubeObjectListLayout
|
||||
isConfigurable
|
||||
tableId="workload_statefulsets"
|
||||
className="StatefulSets"
|
||||
store={statefulSetStore}
|
||||
dependentStores={[eventStore]}
|
||||
sortingCallbacks={{
|
||||
[columnId.name]: statefulSet => 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(),
|
||||
<a
|
||||
key="namespace"
|
||||
className="filterNamespace"
|
||||
onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))}
|
||||
>
|
||||
{statefulSet.getNs()}
|
||||
</a>,
|
||||
renderPodCounts(statefulSet),
|
||||
statefulSet.getReplicas(),
|
||||
<KubeObjectStatusIcon key="icon" object={statefulSet} />,
|
||||
<KubeObjectAge key="age" object={statefulSet} />,
|
||||
]}
|
||||
/>
|
||||
</SiblingsInTabLayout>
|
||||
);
|
||||
});
|
||||
|
||||
export const StatefulSets = withInjectables<Dependencies>(NonInjectedStatefulSets, {
|
||||
getProps: (di, props) => ({
|
||||
...props,
|
||||
eventStore: di.inject(eventStoreInjectable),
|
||||
filterByNamespace: di.inject(filterByNamespaceInjectable),
|
||||
podStore: di.inject(podStoreInjectable),
|
||||
statefulSetStore: di.inject(statefulSetStoreInjectable),
|
||||
}),
|
||||
});
|
||||
Reference in new issue
Block a user