Skip to content

Commit a1eb6d1

Browse files
vlasov-yvlasov-y
committed
prometheus: Added basic authorization
Signed-off-by: Yurii Vlasov <[email protected]>
1 parent 0f5a1f6 commit a1eb6d1

File tree

14 files changed

+1112
-532
lines changed

14 files changed

+1112
-532
lines changed

‎prometheus/package-lock.json

Lines changed: 763 additions & 451 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎prometheus/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
"@kinvolk/headlamp-plugin": "^0.9.2"
3434
},
3535
"dependencies": {
36+
"@iconify/react": "^5.2.0",
37+
"@storybook/react": "^8.4.7",
3638
"recharts": "^2.7.3",
3739
"use-between": "^1.3.5"
3840
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { alpha, useTheme } from '@mui/material';
22
import { blue } from '@mui/material/colors';
33
import { fetchMetrics } from '../../../request';
4-
import { createTickTimestampFormatter, dataProcessor } from '../../../util';
4+
import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
55
import Chart from '../Chart/Chart';
66
import { CustomTooltip } from '../common';
77

@@ -15,7 +15,7 @@ import { CustomTooltip } from '../common';
1515
*/
1616
interface CPUChartProps {
1717
query: string;
18-
prometheusPrefix: string;
18+
prometheusEndpoint: PrometheusEndpoint;
1919
interval: string;
2020
autoRefresh: boolean;
2121
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
XAxis,
1212
YAxis,
1313
} from 'recharts';
14-
import { getTimeRange } from '../../../util';
14+
import { getTimeRange, PrometheusEndpoint } from '../../../util';
1515

1616
/**
1717
* Props for the Chart component.
@@ -40,7 +40,7 @@ export interface ChartProps {
4040
}>;
4141
fetchMetrics: (query: object) => Promise<any>;
4242
interval: string;
43-
prometheusPrefix: string;
43+
prometheusEndpoint: PrometheusEndpoint;
4444
autoRefresh: boolean;
4545
xAxisProps: {
4646
[key: string]: any;
@@ -85,7 +85,7 @@ export default function Chart(props: ChartProps) {
8585
var response;
8686
try {
8787
response = await fetchMetrics({
88-
prefix: props.prometheusPrefix,
88+
endpoint: props.prometheusEndpoint,
8989
query: plot.query,
9090
from: from,
9191
to: to,

‎prometheus/src/components/Chart/Chart/chart.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ const Template: Story<ChartProps> = () => {
339339
autoRefresh={false}
340340
xAxisProps={XTickProps}
341341
yAxisProps={YTickProps}
342-
prometheusPrefix="/api/v1/namespaces/test/proxy"
342+
prometheusEndpoint={{prefix: "/api/v1/namespaces/test/proxy"}}
343343
fetchMetrics={({}) => {
344344
return Promise.resolve(mockData);
345345
}}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useTheme } from '@mui/material';
22
import { fetchMetrics } from '../../../request';
3-
import { createTickTimestampFormatter, dataProcessor } from '../../../util';
3+
import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
44
import { formatBytes } from '../../../util';
55
import Chart from '../Chart/Chart';
66
import { CustomTooltipFormatBytes } from '../common';
@@ -18,7 +18,7 @@ interface DiskChartProps {
1818
usageQuery: string;
1919
capacityQuery: string;
2020
interval: string;
21-
prometheusPrefix: string;
21+
prometheusEndpoint: PrometheusEndpoint;
2222
autoRefresh: boolean;
2323
}
2424

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useCluster } from '@kinvolk/headlamp-plugin/lib/lib/k8s';
44
import { Box, Icon, IconButton } from '@mui/material';
55
import Alert from '@mui/material/Alert';
66
import { useEffect, useState } from 'react';
7-
import { getConfigStore, getPrometheusInterval, getPrometheusPrefix } from '../../../util';
7+
import { getConfigStore, getPrometheusInterval, getPrometheusEndpoint, PrometheusEndpoint } from '../../../util';
88
import { PrometheusNotFoundBanner } from '../common';
99
import { DiskChart } from '../DiskChart/DiskChart';
1010

@@ -32,7 +32,7 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
3232
const clusterConfig = configStore.useConfig();
3333

3434
const [refresh, setRefresh] = useState<boolean>(true);
35-
const [prometheusPrefix, setPrometheusPrefix] = useState<string | null>(null);
35+
const [prometheusEndpoint, setPrometheusEndpoint] = useState<PrometheusEndpoint | null>(null);
3636
const [state, setState] = useState<prometheusState>(prometheusState.LOADING);
3737
const [isVisible, setIsVisible] = useState<boolean>(false);
3838

@@ -45,16 +45,16 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
4545

4646
if (!isEnabled) {
4747
setState(prometheusState.UNKNOWN);
48-
setPrometheusPrefix(null);
48+
setPrometheusEndpoint(null);
4949
return;
5050
}
5151

5252
setState(prometheusState.LOADING);
5353
(async () => {
5454
try {
55-
const prefix = await getPrometheusPrefix(cluster);
56-
if (prefix) {
57-
setPrometheusPrefix(prefix);
55+
const endpoint = await getPrometheusEndpoint(cluster);
56+
if (endpoint) {
57+
setPrometheusEndpoint(endpoint);
5858
setState(prometheusState.INSTALLED);
5959
} else {
6060
setState(prometheusState.UNKNOWN);
@@ -111,7 +111,7 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
111111
capacityQuery={props.capacityQuery}
112112
interval={interval}
113113
autoRefresh={refresh}
114-
prometheusPrefix={prometheusPrefix}
114+
prometheusEndpoint={prometheusEndpoint}
115115
/>
116116
</Box>
117117
) : state === prometheusState.LOADING ? (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { alpha, useTheme } from '@mui/material';
22
import { orange, purple } from '@mui/material/colors';
33
import { fetchMetrics } from '../../../request';
4-
import { createTickTimestampFormatter, dataProcessor } from '../../../util';
4+
import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
55
import { formatBytes } from '../../../util';
66
import Chart from '../Chart/Chart';
77
import { CustomTooltipFormatBytes } from '../common';
@@ -19,7 +19,7 @@ interface FilesystemChartProps {
1919
readQuery: string;
2020
writeQuery: string;
2121
interval: string;
22-
prometheusPrefix: string;
22+
prometheusEndpoint: PrometheusEndpoint;
2323
autoRefresh: boolean;
2424
}
2525

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@mui/material';
1414
import Alert from '@mui/material/Alert';
1515
import { useEffect, useState } from 'react';
16-
import { getConfigStore, getPrometheusInterval, getPrometheusPrefix } from '../../../util';
16+
import { getConfigStore, getPrometheusInterval, getPrometheusEndpoint as getPrometheusEndpoint, PrometheusEndpoint } from '../../../util';
1717
import { PrometheusNotFoundBanner } from '../common';
1818
import { CPUChart } from '../CPUChart/CPUChart';
1919
import { FilesystemChart } from '../FilesystemChart/FilesystemChart';
@@ -50,7 +50,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
5050
const [chartVariant, setChartVariant] = useState<string>('cpu');
5151
const [refresh, setRefresh] = useState<boolean>(true);
5252
const [state, setState] = useState<prometheusState>(prometheusState.LOADING);
53-
const [prometheusPrefix, setPrometheusPrefix] = useState<string | null>(null);
53+
const [prometheusEndpoint, setPrometheusEndpoint] = useState<PrometheusEndpoint | null>(null);
5454
const [isVisible, setIsVisible] = useState<boolean>(false);
5555
const cluster = useCluster();
5656
const configStore = getConfigStore();
@@ -66,16 +66,16 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
6666

6767
if (!isEnabled) {
6868
setState(prometheusState.UNKNOWN);
69-
setPrometheusPrefix(null);
69+
setPrometheusEndpoint(null);
7070
return;
7171
}
7272

7373
setState(prometheusState.LOADING);
7474
(async () => {
7575
try {
76-
const prefix = await getPrometheusPrefix(cluster);
77-
if (prefix) {
78-
setPrometheusPrefix(prefix);
76+
const endpoint = await getPrometheusEndpoint(cluster);
77+
if (endpoint) {
78+
setPrometheusEndpoint(endpoint);
7979
setState(prometheusState.INSTALLED);
8080
} else {
8181
setState(prometheusState.UNKNOWN);
@@ -166,16 +166,16 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
166166
<CPUChart
167167
query={props.cpuQuery}
168168
autoRefresh={refresh}
169-
prometheusPrefix={prometheusPrefix}
170169
interval={timespan}
170+
prometheusEndpoint={prometheusEndpoint}
171171
/>
172172
)}
173173
{chartVariant === 'memory' && (
174174
<MemoryChart
175175
query={props.memoryQuery}
176176
autoRefresh={refresh}
177-
prometheusPrefix={prometheusPrefix}
178177
interval={timespan}
178+
prometheusEndpoint={prometheusEndpoint}
179179
/>
180180
)}
181181
{chartVariant === 'network' && (
@@ -184,7 +184,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
184184
txQuery={props.networkTxQuery}
185185
autoRefresh={refresh}
186186
interval={timespan}
187-
prometheusPrefix={prometheusPrefix}
187+
prometheusEndpoint={prometheusEndpoint}
188188
/>
189189
)}
190190
{chartVariant === 'filesystem' && (
@@ -193,7 +193,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
193193
writeQuery={props.filesystemWriteQuery}
194194
autoRefresh={refresh}
195195
interval={timespan}
196-
prometheusPrefix={prometheusPrefix}
196+
prometheusEndpoint={prometheusEndpoint}
197197
/>
198198
)}
199199
</Box>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { alpha, useTheme } from '@mui/material';
22
import { blue } from '@mui/material/colors';
33
import { fetchMetrics } from '../../../request';
4-
import { createTickTimestampFormatter, dataProcessor } from '../../../util';
4+
import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
55
import { formatBytes } from '../../../util';
66
import Chart from '../Chart/Chart';
77
import { CustomTooltipFormatBytes } from '../common';
@@ -16,7 +16,7 @@ import { CustomTooltipFormatBytes } from '../common';
1616
*/
1717
interface MemoryChartProps {
1818
query: string;
19-
prometheusPrefix: string;
19+
prometheusEndpoint: PrometheusEndpoint;
2020
interval: string;
2121
autoRefresh: boolean;
2222
}

0 commit comments

Comments
 (0)