Skip to content

Commit fdf8319

Browse files
SinghaAnirban005SinghaAnirban005
committed
karpenter: Add Chart for PendingPods
Signed-off-by: SinghaAnirban005 <[email protected]>
1 parent 49df66d commit fdf8319

File tree

8 files changed

+136
-73
lines changed

8 files changed

+136
-73
lines changed

‎prometheus/src/components/Chart/KarpenterChart/KarpenterChart.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import MenuItem from '@mui/material/MenuItem';
99
import Paper from '@mui/material/Paper';
1010
import Select from '@mui/material/Select';
1111
import { useTheme } from '@mui/material/styles';
12+
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
1213
import { useEffect, useState } from 'react';
1314
import {
1415
getConfigStore,
@@ -17,9 +18,8 @@ import {
1718
getPrometheusResolution,
1819
getPrometheusSubPath,
1920
} from '../../../util';
20-
import { PrometheusNotFoundBanner } from '../common';
2121
import { createTickTimestampFormatter } from '../../../util';
22-
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
22+
import { PrometheusNotFoundBanner } from '../common';
2323
import { CustomToggleButton } from '../GenericMetricsChart/GenericMetricsChart';
2424

2525
interface ChartConfig {
@@ -248,4 +248,4 @@ export function KarpenterChart(props: KarpenterChartProps) {
248248
</Paper>
249249
</SectionBox>
250250
);
251-
}
251+
}

‎prometheus/src/components/Chart/KarpenterDisruptionChart/KarpenterDisruptionChart.tsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Chart from "../Chart/Chart";
2-
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
3-
import { alpha, useTheme } from '@mui/material/styles';
41
import { green } from '@mui/material/colors';
5-
import { fetchMetrics } from "../../../request";
2+
import { alpha, useTheme } from '@mui/material/styles';
3+
import { fetchMetrics } from '../../../request';
4+
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
5+
import Chart from '../Chart/Chart';
66

77
interface KarpenterDisruptionChartProps {
88
refresh: boolean;
@@ -11,11 +11,10 @@ interface KarpenterDisruptionChartProps {
1111
subPath: string;
1212
activeNodesQuery: string;
1313
timespan: string;
14-
NodePoolTooltip
14+
NodePoolTooltip;
1515
}
1616

1717
export const KarpenterDisruptionChart = (props: KarpenterDisruptionChartProps) => {
18-
1918
const xTickFormatter = createTickTimestampFormatter(props.timespan);
2019
const theme = useTheme();
2120

@@ -29,26 +28,25 @@ export const KarpenterDisruptionChart = (props: KarpenterDisruptionChartProps) =
2928
},
3029
];
3130

32-
3331
const xAxisProps = {
34-
dataKey: 'timestamp',
35-
tickLine: false,
36-
tick: props => {
37-
const value = xTickFormatter(props.payload.value);
38-
return (
39-
value !== '' && (
40-
<g
41-
transform={`translate(${props.x},${props.y})`}
42-
fill={theme.palette.chartStyles.labelColor}
43-
>
44-
<text x={0} y={10} dy={0} textAnchor="middle">
45-
{value}
46-
</text>
47-
</g>
48-
)
49-
);
50-
},
51-
}
32+
dataKey: 'timestamp',
33+
tickLine: false,
34+
tick: props => {
35+
const value = xTickFormatter(props.payload.value);
36+
return (
37+
value !== '' && (
38+
<g
39+
transform={`translate(${props.x},${props.y})`}
40+
fill={theme.palette.chartStyles.labelColor}
41+
>
42+
<text x={0} y={10} dy={0} textAnchor="middle">
43+
{value}
44+
</text>
45+
</g>
46+
)
47+
);
48+
},
49+
};
5250

5351
return (
5452
<Chart
@@ -64,4 +62,4 @@ export const KarpenterDisruptionChart = (props: KarpenterDisruptionChartProps) =
6462
subPath={props.subPath}
6563
/>
6664
);
67-
};
65+
};

‎prometheus/src/components/Chart/KarpenterNodeClaimCreationChart/KarpenterNodeClaimCreationChart.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Chart from "../Chart/Chart";
2-
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
3-
import { alpha, useTheme } from '@mui/material/styles';
41
import { green } from '@mui/material/colors';
5-
import { fetchMetrics } from "../../../request";
2+
import { alpha, useTheme } from '@mui/material/styles';
3+
import { fetchMetrics } from '../../../request';
4+
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
5+
import Chart from '../Chart/Chart';
66

77
interface NodeClaimCreationChartProps {
88
refresh: boolean;
@@ -11,21 +11,21 @@ interface NodeClaimCreationChartProps {
1111
subPath: string;
1212
nodeClaimCreationQuery: string;
1313
timespan: string;
14-
NodePoolTooltip
14+
NodePoolTooltip;
1515
}
1616

1717
export const NodeClaimCreationChart = (props: NodeClaimCreationChartProps) => {
1818
const xTickFormatter = createTickTimestampFormatter(props.timespan);
1919
const theme = useTheme();
20-
20+
2121
const plots = [
2222
{
2323
query: props.nodeClaimCreationQuery,
2424
name: 'NodeClaim Creation Rate',
2525
strokeColor: alpha(green[600], 0.8),
2626
fillColor: alpha(green[400], 0.1),
2727
dataProcessor: createDataProcessor(0),
28-
}
28+
},
2929
];
3030

3131
const xAxisProps = {
@@ -70,4 +70,4 @@ export const NodeClaimCreationChart = (props: NodeClaimCreationChartProps) => {
7070
subPath={props.subPath}
7171
/>
7272
);
73-
};
73+
};

‎prometheus/src/components/Chart/KarpenterNodeClaimProvisionChart/KarpenterNodeClaimProvisionChart.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Chart from "../Chart/Chart";
2-
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
3-
import { alpha, useTheme } from '@mui/material/styles';
41
import { orange } from '@mui/material/colors';
5-
import { fetchMetrics } from "../../../request";
2+
import { alpha, useTheme } from '@mui/material/styles';
3+
import { fetchMetrics } from '../../../request';
4+
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
5+
import Chart from '../Chart/Chart';
66

7-
interface KarpenterNodeClaimsProvisionChart {
7+
interface KarpenterNodeClaimsProvisionChartProps {
88
refresh: boolean;
99
prometheusPrefix: string;
1010
resolution: string;
@@ -14,8 +14,9 @@ interface KarpenterNodeClaimsProvisionChart {
1414
NodePoolTooltip;
1515
}
1616

17-
export const KarpenterNodeClaimsProvisionChart = (props: KarpenterNodeClaimsProvisionChart) => {
18-
17+
export const KarpenterNodeClaimsProvisionChart = (
18+
props: KarpenterNodeClaimsProvisionChartProps
19+
) => {
1920
const xTickFormatter = createTickTimestampFormatter(props.timespan);
2021
const theme = useTheme();
2122

@@ -26,7 +27,7 @@ export const KarpenterNodeClaimsProvisionChart = (props: KarpenterNodeClaimsProv
2627
strokeColor: alpha(orange[600], 0.8),
2728
fillColor: alpha(orange[400], 0.1),
2829
dataProcessor: createDataProcessor(0),
29-
}
30+
},
3031
];
3132

3233
const xAxisProps = {
@@ -36,7 +37,10 @@ export const KarpenterNodeClaimsProvisionChart = (props: KarpenterNodeClaimsProv
3637
const value = xTickFormatter(tickProps.payload.value);
3738
if (!value) return null;
3839
return (
39-
<g transform={`translate(${tickProps.x},${tickProps.y})`} fill={theme.palette.chartStyles.labelColor}>
40+
<g
41+
transform={`translate(${tickProps.x},${tickProps.y})`}
42+
fill={theme.palette.chartStyles.labelColor}
43+
>
4044
<text x={0} y={10} dy={0} textAnchor="middle">
4145
{value}
4246
</text>

‎prometheus/src/components/Chart/KarpenterNodePoolResourceChart/KarpenterNodePoolResourceChart.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Chart from "../Chart/Chart";
2-
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
3-
import { alpha, useTheme } from '@mui/material/styles';
41
import { blue, red } from '@mui/material/colors';
5-
import { fetchMetrics } from "../../../request";
2+
import { alpha, useTheme } from '@mui/material/styles';
3+
import { fetchMetrics } from '../../../request';
4+
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
5+
import Chart from '../Chart/Chart';
66

77
interface KarpenterNodePoolResourceChartProps {
88
refresh: boolean;
@@ -12,11 +12,10 @@ interface KarpenterNodePoolResourceChartProps {
1212
usageQuery: string;
1313
limitQuery: string;
1414
timespan: string;
15-
NodePoolTooltip
15+
NodePoolTooltip;
1616
}
1717

1818
export const KarpenterNodePoolResourceChart = (props: KarpenterNodePoolResourceChartProps) => {
19-
2019
const xTickFormatter = createTickTimestampFormatter(props.timespan);
2120
const theme = useTheme();
2221

@@ -34,7 +33,7 @@ export const KarpenterNodePoolResourceChart = (props: KarpenterNodePoolResourceC
3433
strokeColor: alpha(red[600], 0.8),
3534
fillColor: alpha(red[400], 0.1),
3635
dataProcessor: createDataProcessor(0),
37-
}
36+
},
3837
];
3938

4039
const xAxisProps = {
@@ -43,7 +42,7 @@ export const KarpenterNodePoolResourceChart = (props: KarpenterNodePoolResourceC
4342
tick: (tickProps: any) => {
4443
const value = xTickFormatter(tickProps.payload.value);
4544
if (!value) return null;
46-
45+
4746
return (
4847
<g
4948
transform={`translate(${tickProps.x},${tickProps.y})`}
@@ -71,4 +70,4 @@ export const KarpenterNodePoolResourceChart = (props: KarpenterNodePoolResourceC
7170
subPath={props.subPath}
7271
/>
7372
);
74-
};
73+
};

‎prometheus/src/components/Chart/KarpenterPendingPods/KarpenterPendingPods.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { green } from '@mui/material/colors';
2+
import { alpha, useTheme } from '@mui/material/styles';
3+
import { fetchMetrics } from '../../../request';
4+
import { createDataProcessor, createTickTimestampFormatter } from '../../../util';
5+
import Chart from '../Chart/Chart';
6+
7+
interface KarpenterPendingPodsProps {
8+
refresh: boolean;
9+
prometheusPrefix: string;
10+
resolution: string;
11+
subPath: string;
12+
pendingPodsQuery: string;
13+
timespan: string;
14+
NodePoolTooltip;
15+
}
16+
17+
export const KarpenterPendingPods = (props: KarpenterPendingPodsProps) => {
18+
const xTickFormatter = createTickTimestampFormatter(props.timespan);
19+
const theme = useTheme();
20+
21+
const plots = [
22+
{
23+
query: props.pendingPodsQuery,
24+
name: 'Pending Pods',
25+
strokeColor: alpha(green[600], 0.8),
26+
fillColor: alpha(green[400], 0.1),
27+
dataProcessor: createDataProcessor(0),
28+
},
29+
];
30+
31+
const xAxisProps = {
32+
dataKey: 'timestamp',
33+
tickLine: false,
34+
tick: props => {
35+
const value = xTickFormatter(props.payload.value);
36+
return (
37+
value !== '' && (
38+
<g
39+
transform={`translate(${props.x},${props.y})`}
40+
fill={theme.palette.chartStyles.labelColor}
41+
>
42+
<text x={0} y={10} dy={0} textAnchor="middle">
43+
{value}
44+
</text>
45+
</g>
46+
)
47+
);
48+
},
49+
};
50+
51+
return (
52+
<Chart
53+
plots={plots}
54+
xAxisProps={xAxisProps}
55+
yAxisProps={{ domain: [0, 'auto'], width: 60 }}
56+
CustomTooltip={props.NodePoolTooltip}
57+
fetchMetrics={fetchMetrics}
58+
autoRefresh={props.refresh}
59+
prometheusPrefix={props.prometheusPrefix}
60+
interval={props.timespan}
61+
resolution={props.resolution}
62+
subPath={props.subPath}
63+
/>
64+
);
65+
};

‎prometheus/src/index.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import {
55
registerDetailsViewSectionsProcessor,
66
registerPluginSettings,
77
} from '@kinvolk/headlamp-plugin/lib';
8+
import { KarpenterChart } from '../src/components/Chart/KarpenterChart/KarpenterChart';
89
import { DiskMetricsChart } from './components/Chart/DiskMetricsChart/DiskMetricsChart';
910
import { GenericMetricsChart } from './components/Chart/GenericMetricsChart/GenericMetricsChart';
1011
import { KedaChart } from './components/Chart/KedaChart/KedaChart';
1112
import { Settings } from './components/Settings/Settings';
1213
import { VisibilityButton } from './components/VisibilityButton/VisibilityButton';
1314
import { ChartEnabledKinds, PLUGIN_NAME } from './util';
14-
import { KarpenterChart } from "../src/components/Chart/KarpenterChart/KarpenterChart"
15-
import { getNodePoolChartConfigs, getNodeClaimChartConfigs } from './util';
15+
import { getNodeClaimChartConfigs, getNodePoolChartConfigs } from './util';
1616

1717
function PrometheusMetrics(resource: DetailsViewSectionProps) {
1818
if (resource.kind === 'Pod' || resource.kind === 'Job' || resource.kind === 'CronJob') {
@@ -88,20 +88,15 @@ function PrometheusMetrics(resource: DetailsViewSectionProps) {
8888
}
8989

9090
if (resource.kind === 'NodePool') {
91-
const name = resource.jsonData.metadata.name;
91+
const name = resource.jsonData.metadata.name;
9292

93-
return (
94-
<KarpenterChart
95-
chartConfigs={getNodePoolChartConfigs(name)}
96-
defaultChart="usage"
97-
/>
98-
);
99-
}
93+
return <KarpenterChart chartConfigs={getNodePoolChartConfigs(name)} defaultChart="usage" />;
94+
}
10095

101-
if (resource.kind === 'NodeClaim') {
96+
if (resource.kind === 'NodeClaim') {
10297
const name = resource.jsonData.metadata.name;
10398

104-
const nodepool = resource.jsonData.metadata.labels['karpenter.sh/nodepool']
99+
const nodepool = resource.jsonData.metadata.labels['karpenter.sh/nodepool'];
105100

106101
return (
107102
<KarpenterChart

‎prometheus/src/util.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { ConfigStore } from '@kinvolk/headlamp-plugin/lib';
2-
import { isPrometheusInstalled, KubernetesType } from './request';
3-
import { KarpenterNodePoolResourceChart } from './components/Chart/NodePoolChart/NodePoolChart';
42
import { KarpenterDisruptionChart } from './components/Chart/KarpenterDisruptionChart/KarpenterDisruptionChart';
5-
import { KarpenterPendingPods } from './components/Chart/KarpenterPendingPods/KarpenterPendingPods';
63
import { NodeClaimCreationChart } from './components/Chart/KarpenterNodeClaimCreationChart/KarpenterNodeClaimCreationChart';
74
import { KarpenterNodeClaimsProvisionChart } from './components/Chart/KarpenterNodeClaimProvisionChart/KarpenterNodeClaimProvisionChart';
5+
import { KarpenterNodePoolResourceChart } from './components/Chart/KarpenterNodePoolResourceChart/KarpenterNodePoolResourceChart';
6+
import { KarpenterPendingPods } from './components/Chart/KarpenterPendingPods/KarpenterPendingPods';
7+
import { isPrometheusInstalled, KubernetesType } from './request';
88

99
export const PLUGIN_NAME = 'prometheus';
1010

@@ -166,7 +166,7 @@ export const ChartEnabledKinds = [
166166
'ScaledObject',
167167
'ScaledJob',
168168
'NodePool',
169-
'NodeClaim'
169+
'NodeClaim',
170170
];
171171

172172
/**
@@ -415,7 +415,9 @@ export const getNodeClaimChartConfigs = (name: string, nodepool?: string) => [
415415
label: 'Creation Rate',
416416
icon: 'mdi:chart-line-variant',
417417
queries: {
418-
nodeClaimCreationQuery: `sum(rate(karpenter_nodeclaims_created_total{nodepool="${nodepool || 'all'}"}[5m]))`,
418+
nodeClaimCreationQuery: `sum(rate(karpenter_nodeclaims_created_total{nodepool="${
419+
nodepool || 'all'
420+
}"}[5m]))`,
419421
},
420422
component: NodeClaimCreationChart,
421423
},
@@ -429,4 +431,4 @@ avg(rate(operator_nodeclaim_status_condition_transition_seconds_count[5m]))`,
429431
},
430432
component: KarpenterNodeClaimsProvisionChart,
431433
},
432-
];
434+
];

0 commit comments

Comments
 (0)