-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add metrics Feature #7507
Add metrics Feature #7507
Changes from 4 commits
66f3cc8
be0028c
03a87f9
4401b17
fdff10a
8adebb6
ecd8af3
21df918
275a9f7
669e641
d439252
0339870
e725e41
d13c5fa
7e06047
afd64df
8e4774e
07b4e30
a8fd71e
e0040e1
9ff084a
fc463b7
1631184
a1b2f08
f858637
0e0b54b
0101d6a
5e6e6c0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/** | ||
* Copyright (c) OpenLens Authors. All rights reserved. | ||
* Licensed under MIT License. See LICENSE in root directory for more information. | ||
*/ | ||
import { getFeature } from "@k8slens/feature-core"; | ||
import { clusterOverviewUIBlockInjectionToken, deploymentDetailsMetricsInjectionToken, podDetailsContainerMetricsInjectionToken, podDetailsMetricsInjectionToken } from "@k8slens/metrics"; | ||
import { getInjectable } from "@ogre-tools/injectable"; | ||
import { ClusterMetrics } from "../../renderer/components/+cluster/cluster-metrics"; | ||
import { ClusterPieCharts } from "../../renderer/components/+cluster/cluster-pie-charts"; | ||
import { DeploymentMetricsDetailsComponent } from "../../renderer/components/+workloads-deployments/metrics-details-component"; | ||
import { PodDetailsContainerMetrics } from "../../renderer/components/+workloads-pods/pod-details-container-metrics"; | ||
import PodMetricsDetailsComponent from "../../renderer/components/+workloads-pods/pod-metrics-details-component"; | ||
|
||
const clusterPieChartsClusterOverviewInjectable = getInjectable({ | ||
id: "cluster-pie-charts-cluster-overview", | ||
|
||
instantiate: () => ({ | ||
id: "cluster-pie-charts-cluster-overview", | ||
Component: ClusterPieCharts, | ||
orderNumber: 2, | ||
}), | ||
|
||
injectionToken: clusterOverviewUIBlockInjectionToken, | ||
}); | ||
|
||
const clusterMetricsOverviewBlockInjectable = getInjectable({ | ||
id: "cluster-metrics-overview-block", | ||
|
||
instantiate: () => ({ | ||
id: "cluster-metrics-overview-block", | ||
Component: ClusterMetrics, | ||
orderNumber: 1, | ||
}), | ||
|
||
injectionToken: clusterOverviewUIBlockInjectionToken, | ||
}); | ||
|
||
const podDetailsMetricsInjectable = getInjectable({ | ||
id: "pod-details-metrics-injectable", | ||
instantiate: () => ({ | ||
id: "pod-details-metrics", | ||
Component: PodMetricsDetailsComponent, | ||
}), | ||
injectionToken: podDetailsMetricsInjectionToken, | ||
}); | ||
|
||
const deploymentDetailsMetricsInjectable = getInjectable({ | ||
id: "deployment-details-metrics-injectable", | ||
instantiate: () => ({ | ||
id: "deployment-details-metrics", | ||
Component: DeploymentMetricsDetailsComponent, | ||
}), | ||
injectionToken: deploymentDetailsMetricsInjectionToken, | ||
}); | ||
|
||
console.log(deploymentDetailsMetricsInjectable); | ||
|
||
const podDetailsContainerMetricsInjectable = getInjectable({ | ||
id: "pod-details-container-metrics-injectable", | ||
instantiate: () => ({ | ||
id: "pod-details-container-metrics", | ||
Component: PodDetailsContainerMetrics, | ||
}), | ||
injectionToken: podDetailsContainerMetricsInjectionToken, | ||
}); | ||
|
||
export const metricsFeature = getFeature({ | ||
id: "core-metrics-feature", | ||
|
||
register: (di) => { | ||
di.register(clusterPieChartsClusterOverviewInjectable); | ||
di.register(clusterMetricsOverviewBlockInjectable); | ||
|
||
di.register(podDetailsMetricsInjectable); | ||
di.register(podDetailsContainerMetricsInjectable); | ||
di.register(deploymentDetailsMetricsInjectable); | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,9 +15,7 @@ import { interval } from "@k8slens/utilities"; | |
import { TabLayout } from "../layout/tab-layout"; | ||
import { Spinner } from "../spinner"; | ||
import { ClusterIssues } from "./cluster-issues"; | ||
import { ClusterMetrics } from "./cluster-metrics"; | ||
import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store"; | ||
import { ClusterPieCharts } from "./cluster-pie-charts"; | ||
import { ClusterMetricsResourceType } from "../../../common/cluster-types"; | ||
import type { EventStore } from "../+events/store"; | ||
import { withInjectables } from "@ogre-tools/injectable-react"; | ||
|
@@ -28,6 +26,9 @@ import podStoreInjectable from "../+workloads-pods/store.injectable"; | |
import eventStoreInjectable from "../+events/store.injectable"; | ||
import nodeStoreInjectable from "../+nodes/store.injectable"; | ||
import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable"; | ||
import type { ClusterOverviewUIBlock } from "@k8slens/metrics"; | ||
import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics"; | ||
import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable"; | ||
|
||
interface Dependencies { | ||
subscribeStores: SubscribeStores; | ||
|
@@ -36,6 +37,7 @@ interface Dependencies { | |
eventStore: EventStore; | ||
nodeStore: NodeStore; | ||
clusterMetricsAreVisible: IComputedValue<boolean>; | ||
uiBlocks: ClusterOverviewUIBlock[]; | ||
} | ||
|
||
@observer | ||
|
@@ -76,8 +78,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> { | |
|
||
return ( | ||
<> | ||
<ClusterMetrics/> | ||
<ClusterPieCharts/> | ||
{orderByOrderNumber(this.props.uiBlocks).map((block) => ( | ||
<block.Component key={block.id} /> | ||
))} | ||
</> | ||
); | ||
} | ||
|
@@ -118,5 +121,6 @@ export const ClusterOverview = withInjectables<Dependencies>(NonInjectedClusterO | |
podStore: di.inject(podStoreInjectable), | ||
eventStore: di.inject(eventStoreInjectable), | ||
nodeStore: di.inject(nodeStoreInjectable), | ||
uiBlocks: di.injectMany(clusterOverviewUIBlockInjectionToken), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here we should use This works at the moment because registration of the Feature is happening before anything is rendered, but it's good practice to always support runtime registrations (less work in the future when we enable possibility to register Features through runtime extensions) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. good call, fixed |
||
}), | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/** | ||
* Copyright (c) OpenLens Authors. All rights reserved. | ||
* Licensed under MIT License. See LICENSE in root directory for more information. | ||
*/ | ||
import React from "react"; | ||
import { DrawerTitle } from "../../../drawer"; | ||
import { PodDetailsContainer } from "../../pod-details-container"; | ||
import type { Pod } from "../../../../../common/k8s-api/endpoints"; | ||
import { observer } from "mobx-react"; | ||
|
||
interface PodDetailsContainersProps { | ||
pod: Pod; | ||
} | ||
|
||
const PodDetailsContainers = observer(({ pod }: PodDetailsContainersProps) => { | ||
const containers = pod.getContainers(); | ||
|
||
return ( | ||
<> | ||
<DrawerTitle>Containers</DrawerTitle> | ||
{containers.map(container => ( | ||
<PodDetailsContainer | ||
key={container.name} | ||
pod={pod} | ||
container={container} | ||
/> | ||
))} | ||
</> | ||
); | ||
}); | ||
|
||
export { PodDetailsContainers }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/** | ||
* Copyright (c) OpenLens Authors. All rights reserved. | ||
* Licensed under MIT License. See LICENSE in root directory for more information. | ||
*/ | ||
import React from "react"; | ||
import { DrawerTitle } from "../../../drawer"; | ||
import { PodDetailsContainer } from "../../pod-details-container"; | ||
import type { Pod } from "../../../../../common/k8s-api/endpoints"; | ||
import { observer } from "mobx-react"; | ||
|
||
interface PodDetailsContainersProps { | ||
pod: Pod; | ||
} | ||
|
||
const NonInjectedPodDetailsInitContainers = observer(({ pod }: PodDetailsContainersProps) => { | ||
const initContainers = pod.getInitContainers(); | ||
|
||
if (initContainers.length === 0) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<> | ||
<DrawerTitle>Init Containers</DrawerTitle> | ||
{initContainers.map(container => ( | ||
<PodDetailsContainer | ||
key={container.name} | ||
pod={pod} | ||
container={container} | ||
/> | ||
))} | ||
</> | ||
); | ||
}); | ||
|
||
const PodDetailsInitContainers = NonInjectedPodDetailsInitContainers; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need for 2 components since we're not injecting anything here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. good catch, fixed |
||
|
||
export { PodDetailsInitContainers }; | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No action required, this is also possible: