andoncloud-prometheus-widget 1.3.18 → 1.3.19

package/dist/index.js

@@ -1,19 +1,18 @@
 import { t as thumbnail_default } from "./thumbnail-B_DBfYD0.js";
 import { registerTranslations } from "andoncloud-sdk";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { generateTimeRange, getCurrentShift, getRecentShift, normalizeShifts, useGqlClients } from "andoncloud-dashboard-toolkit";
 import { BaseWidget } from "andoncloud-widget-base";
 import { useTranslation } from "react-i18next";
 import { Clear } from "@mui/icons-material";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Button, FormControl, FormHelperText, IconButton, InputLabel, MenuItem, Select, Stack, Tab, TextField } from "@mui/material";
+import { Alert, Box, Button, Divider, FormControl, FormHelperText, IconButton, InputLabel, MenuItem, Select, Stack, Tab, TextField, Typography } from "@mui/material";
 import { getIn } from "formik";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "chartjs-adapter-dayjs-4";
 import { Line } from "react-chartjs-2";
 import { CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, TimeScale, Tooltip } from "chart.js";
 import dayjs from "dayjs";
-import pick from "lodash.pick";
 import { PrometheusDriver } from "prometheus-query";
 import Color from "color";
 import { satisfies } from "compare-versions";
@@ -26,51 +25,73 @@ const resources = {
 		"addAnotherDisplayedQueryParameter": "Add another displayed query parameter",
 		"addAnotherQuery": "Add another query",
 		"advanced": "Advanced",
+		"credentialsHelper": "Credentials are optional. Fill in only if the instance requires authentication.",
 		"currentShift": "Current shift",
 		"customTitle": "Custom title",
 		"displayedQueryParameter": "Displayed query parameter",
+		"displayName": "PromQL chart",
 		"endpointUrl": "Endpoint URL",
+		"errorAuth": "Could not authenticate to Prometheus. Check the username and password in widget settings.",
+		"errorForbidden": "Authenticated, but the Prometheus user has no permission to read these metrics.",
+		"errorUnreachable": "Could not reach Prometheus at the configured URL.",
+		"insecureWarning": "Credentials will be sent over an unencrypted connection (HTTP). Use HTTPS to protect them.",
 		"name": "Name",
+		"password": "Password",
 		"period": "Period",
 		"previousShift": "Previous shift",
 		"query": "Query",
+		"removeParam": "Remove parameter",
+		"removeQuery": "Remove query",
+		"sectionAuthorization": "Authorization",
+		"sectionData": "Data",
 		"settings": "Settings",
 		"thisFieldIsRequired": "This field is required",
-		"xAxisUnit": "X axis unit",
-		"displayName": "PromQL chart",
-		"titleQueries_one": "{{count}} query",
-		"titleQueries_other": "{{count}} queries",
 		"titleCurrentShift": "current shift",
 		"titlePreviousShift": "previous shift",
+		"titleQueries_one": "{{count}} query",
+		"titleQueries_other": "{{count}} queries",
+		"username": "Username",
+		"xAxisUnit": "X axis unit",
 		"yAxisUnit": "Y axis unit"
 	} } },
 	pl: { translation: { prometheusWidget: {
 		"addAnotherDisplayedQueryParameter": "Dodaj kolejny wyświetlany parametr zapytania",
 		"addAnotherQuery": "Dodaj kolejne zapytanie",
 		"advanced": "Zaawansowane",
+		"credentialsHelper": "Dane autoryzacyjne są opcjonalne. Wypełnij tylko jeśli instancja wymaga uwierzytelniania.",
 		"currentShift": "Obecna zmiana",
 		"customTitle": "Własny tytuł",
 		"displayedQueryParameter": "Wyświetlany parametr zapytania",
+		"displayName": "Wykres PromQL",
 		"endpointUrl": "Adres URL",
+		"errorAuth": "Nie można uwierzytelnić się w Prometheusie. Sprawdź nazwę użytkownika i hasło w ustawieniach widgetu.",
+		"errorForbidden": "Uwierzytelnienie powiodło się, ale użytkownik Prometheusa nie ma uprawnień do tych metryk.",
+		"errorUnreachable": "Nie można połączyć się z Prometheusem pod skonfigurowanym adresem.",
+		"insecureWarning": "Dane logowania zostaną wysłane nieszyfrowanym połączeniem (HTTP). Użyj HTTPS, aby je chronić.",
 		"name": "Nazwa",
+		"password": "Hasło",
 		"period": "Okres",
 		"previousShift": "Poprzednia zmiana",
 		"query": "Zapytanie",
+		"removeParam": "Usuń parametr",
+		"removeQuery": "Usuń zapytanie",
+		"sectionAuthorization": "Autoryzacja",
+		"sectionData": "Dane",
 		"settings": "Ustawienia",
 		"thisFieldIsRequired": "To pole jest wymagane",
-		"xAxisUnit": "Jednostka osi X",
-		"displayName": "Wykres PromQL",
-		"titleQueries_one": "{{count}} zapytanie",
-		"titleQueries_few": "{{count}} zapytania",
-		"titleQueries_many": "{{count}} zapytań",
 		"titleCurrentShift": "obecna zmiana",
 		"titlePreviousShift": "poprzednia zmiana",
+		"titleQueries_few": "{{count}} zapytania",
+		"titleQueries_many": "{{count}} zapytań",
+		"titleQueries_one": "{{count}} zapytanie",
+		"username": "Nazwa użytkownika",
+		"xAxisUnit": "Jednostka osi X",
 		"yAxisUnit": "Jednostka osi Y"
 	} } }
 };
 //#endregion
 //#region src/version.ts
-const LIBRARY_VERSION = "1.3.18";
+const LIBRARY_VERSION = "1.3.19";
 //#endregion
 //#region src/types.ts
 let QueriesPeriod = /* @__PURE__ */ function(QueriesPeriod) {
@@ -79,14 +100,87 @@ let QueriesPeriod = /* @__PURE__ */ function(QueriesPeriod) {
 	return QueriesPeriod;
 }({});
 //#endregion
+//#region src/components/SettingsFormContent/utils.ts
+const isInsecureEndpoint = (url) => /^http:\/\//i.test(url);
+//#endregion
+//#region src/components/SettingsFormContent/styles.ts
+const styles = {
+	sectionDivider: {
+		marginTop: 3,
+		marginBottom: 1,
+		color: (theme) => theme.palette.text.primary,
+		fontWeight: 600,
+		letterSpacing: "0.08em",
+		textTransform: "uppercase",
+		fontSize: "0.75rem",
+		"&::before, &::after": { borderColor: "rgba(255, 255, 255, 0.15)" }
+	},
+	formControl: { marginTop: 2 },
+	addButton: { marginTop: 2 },
+	credentialsHelper: {
+		marginTop: 1,
+		color: (theme) => theme.palette.text.primary
+	}
+};
+//#endregion
+//#region src/components/SettingsFormContent/CredentialsFields/index.tsx
+const CredentialsFields = ({ formProps }) => {
+	const [passwordInput, setPasswordInput] = useState("");
+	const { t } = useTranslation();
+	const handlePasswordChange = (event) => {
+		setPasswordInput(event.target.value);
+		formProps.setFieldValue("password", event.target.value);
+	};
+	const showInsecureWarning = isInsecureEndpoint(formProps.values.endpointUrl);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(FormHelperText, {
+			sx: styles.credentialsHelper,
+			"data-testid": "prometheus.settings.credentials-helper",
+			children: t("prometheusWidget.credentialsHelper")
+		}),
+		/* @__PURE__ */ jsx(FormControl, {
+			sx: styles.formControl,
+			fullWidth: true,
+			children: /* @__PURE__ */ jsx(TextField, {
+				name: "username",
+				label: t("prometheusWidget.username"),
+				value: formProps.values.username || "",
+				onChange: formProps.handleChange,
+				onBlur: formProps.handleBlur,
+				"data-testid": "prometheus.settings.username",
+				fullWidth: true
+			})
+		}),
+		/* @__PURE__ */ jsx(FormControl, {
+			sx: styles.formControl,
+			fullWidth: true,
+			children: /* @__PURE__ */ jsx(TextField, {
+				name: "password",
+				type: "password",
+				label: t("prometheusWidget.password"),
+				value: passwordInput,
+				onChange: handlePasswordChange,
+				onBlur: formProps.handleBlur,
+				"data-testid": "prometheus.settings.password",
+				fullWidth: true
+			})
+		}),
+		showInsecureWarning && /* @__PURE__ */ jsx(Alert, {
+			severity: "warning",
+			sx: styles.formControl,
+			"data-testid": "prometheus.settings.insecure-warning",
+			children: t("prometheusWidget.insecureWarning")
+		})
+	] });
+};
+//#endregion
 //#region src/components/SettingsFormContent/index.tsx
+const emptyQueryItem = {
+	query: "",
+	displayName: ""
+};
 const SettingsFormContent = ({ formProps }) => {
 	const [selectedTab, setSelectedTab] = useState("settings");
-	const emptyQueryItem = {
-		query: "",
-		displayName: ""
-	};
-	const formControlStyles = { mt: 2 };
 	const { t } = useTranslation();
 	const setPrometheusQuery = (i, item) => {
 		const queries = [...formProps.values.prometheusQueries || [emptyQueryItem]];
@@ -121,7 +215,7 @@ const SettingsFormContent = ({ formProps }) => {
 	};
 	const mapPeriodToLabel = (period) => {
 		switch (period) {
-			case QueriesPeriod.PREVIOUS_SHIFT: return t("prometheusWidget.previousShift");
+			case "PREVIOUS_SHIFT": return t("prometheusWidget.previousShift");
 			default: return t("prometheusWidget.currentShift");
 		}
 	};
@@ -145,7 +239,7 @@ const SettingsFormContent = ({ formProps }) => {
 					mb: 2,
 					children: [
 						/* @__PURE__ */ jsx(FormControl, {
-							sx: formControlStyles,
+							sx: styles.formControl,
 							fullWidth: true,
 							children: /* @__PURE__ */ jsx(TextField, {
 								name: "endpointUrl",
@@ -159,8 +253,17 @@ const SettingsFormContent = ({ formProps }) => {
 								fullWidth: true
 							})
 						}),
+						/* @__PURE__ */ jsx(Divider, {
+							sx: styles.sectionDivider,
+							children: t("prometheusWidget.sectionAuthorization")
+						}),
+						/* @__PURE__ */ jsx(CredentialsFields, { formProps }),
+						/* @__PURE__ */ jsx(Divider, {
+							sx: styles.sectionDivider,
+							children: t("prometheusWidget.sectionData")
+						}),
 						/* @__PURE__ */ jsxs(FormControl, {
-							sx: formControlStyles,
+							sx: styles.formControl,
 							fullWidth: true,
 							children: [
 								/* @__PURE__ */ jsx(InputLabel, {
@@ -171,16 +274,16 @@ const SettingsFormContent = ({ formProps }) => {
 									variant: "outlined",
 									name: "queriesPeriod",
 									labelId: "queries-period-label",
-									value: formProps.values.queriesPeriod || QueriesPeriod.CURRENT_SHIFT,
+									value: formProps.values.queriesPeriod || "CURRENT_SHIFT",
 									onChange: formProps.handleChange,
 									onBlur: formProps.handleBlur,
 									error: formProps.touched.queriesPeriod && Boolean(formProps.errors.queriesPeriod),
 									"data-testid": "prometheus.settings.period-select",
 									fullWidth: true,
-									children: Object.keys(QueriesPeriod).map((key) => /* @__PURE__ */ jsx(MenuItem, {
-										value: QueriesPeriod[key],
-										children: mapPeriodToLabel(QueriesPeriod[key])
-									}, key))
+									children: Object.values(QueriesPeriod).map((value) => /* @__PURE__ */ jsx(MenuItem, {
+										value,
+										children: mapPeriodToLabel(value)
+									}, value))
 								}),
 								/* @__PURE__ */ jsx(FormHelperText, {
 									error: true,
@@ -189,7 +292,7 @@ const SettingsFormContent = ({ formProps }) => {
 							]
 						}),
 						(formProps.values.prometheusQueries || [emptyQueryItem]).map(({ query, displayName }, i) => /* @__PURE__ */ jsx(FormControl, {
-							sx: formControlStyles,
+							sx: styles.formControl,
 							fullWidth: true,
 							children: /* @__PURE__ */ jsxs(Stack, {
 								direction: "row",
@@ -221,6 +324,7 @@ const SettingsFormContent = ({ formProps }) => {
 									}),
 									/* @__PURE__ */ jsx(IconButton, {
 										color: "error",
+										"aria-label": t("prometheusWidget.removeQuery"),
 										onClick: () => removeQueryField(i),
 										"data-testid": `prometheus.settings.remove-query-${i}`,
 										children: /* @__PURE__ */ jsx(Clear, {})
@@ -231,13 +335,13 @@ const SettingsFormContent = ({ formProps }) => {
 						/* @__PURE__ */ jsx(Button, {
 							color: "secondary",
 							onClick: addQueryField,
-							sx: { mt: (theme) => theme.spacing(2) },
+							sx: styles.addButton,
 							"data-testid": "prometheus.settings.add-query",
 							fullWidth: true,
 							children: t("prometheusWidget.addAnotherQuery")
 						}),
 						(formProps.values.displayedQueryParams || [""]).map((param, i) => /* @__PURE__ */ jsx(FormControl, {
-							sx: formControlStyles,
+							sx: styles.formControl,
 							fullWidth: true,
 							children: /* @__PURE__ */ jsxs(Stack, {
 								direction: "row",
@@ -246,12 +350,13 @@ const SettingsFormContent = ({ formProps }) => {
 									label: t("prometheusWidget.displayedQueryParameter"),
 									value: param,
 									onChange: (e) => setDisplayedQueryParam(i, e.target.value),
-									error: formProps.touched.displayedQueryParams?.[i] && Boolean(getIn(formProps.errors, `displayedQueryParams.[${i}]`)),
-									helperText: formProps.touched.displayedQueryParams?.[i] && getIn(formProps.errors, `displayedQueryParams.[${i}]`),
+									error: Boolean(Array.isArray(formProps.touched.displayedQueryParams) && formProps.touched.displayedQueryParams[i] && getIn(formProps.errors, `displayedQueryParams.[${i}]`)),
+									helperText: Array.isArray(formProps.touched.displayedQueryParams) && formProps.touched.displayedQueryParams[i] ? getIn(formProps.errors, `displayedQueryParams.[${i}]`) : void 0,
 									"data-testid": `prometheus.settings.param-input-${i}`,
 									fullWidth: true
 								}), /* @__PURE__ */ jsx(IconButton, {
 									color: "error",
+									"aria-label": t("prometheusWidget.removeParam"),
 									onClick: () => removeDisplayedQueryParam(i),
 									"data-testid": `prometheus.settings.remove-param-${i}`,
 									children: /* @__PURE__ */ jsx(Clear, {})
@@ -261,13 +366,13 @@ const SettingsFormContent = ({ formProps }) => {
 						/* @__PURE__ */ jsx(Button, {
 							color: "secondary",
 							onClick: addDisplayedQueryParam,
-							sx: { mt: (theme) => theme.spacing(2) },
+							sx: styles.addButton,
 							"data-testid": "prometheus.settings.add-param",
 							fullWidth: true,
 							children: t("prometheusWidget.addAnotherDisplayedQueryParameter")
 						}),
 						/* @__PURE__ */ jsx(FormControl, {
-							sx: formControlStyles,
+							sx: styles.formControl,
 							fullWidth: true,
 							children: /* @__PURE__ */ jsx(TextField, {
 								name: "xAxisUnit",
@@ -282,7 +387,7 @@ const SettingsFormContent = ({ formProps }) => {
 							})
 						}),
 						/* @__PURE__ */ jsx(FormControl, {
-							sx: formControlStyles,
+							sx: styles.formControl,
 							fullWidth: true,
 							children: /* @__PURE__ */ jsx(TextField, {
 								name: "yAxisUnit",
@@ -315,13 +420,21 @@ const SettingsFormContent = ({ formProps }) => {
 };
 //#endregion
 //#region src/helpers.ts
+const classifyFetchError = (err) => {
+	const e = err;
+	const status = e?.httpStatus ?? e?.response?.status;
+	if (status === 401) return "auth";
+	if (status === 403) return "forbidden";
+	return "unreachable";
+};
+const pickKeys = (obj, keys) => Object.fromEntries(keys.filter((k) => k in obj).map((k) => [k, obj[k]]));
 const getQueriesTimeRange = (period, data) => {
 	const currentDate = dayjs();
 	const normalizedShifts = normalizeShifts(data?.shifts, currentDate);
 	const currentShift = getCurrentShift(currentDate, normalizedShifts);
 	const recentShift = getRecentShift(currentDate, normalizedShifts);
 	switch (period) {
-		case QueriesPeriod.CURRENT_SHIFT:
+		case "CURRENT_SHIFT":
 			if (currentShift) return {
 				startedAt: currentShift.startedAt.toDate(),
 				finishedAt: currentShift.finishedAt.toDate()
@@ -331,7 +444,7 @@ const getQueriesTimeRange = (period, data) => {
 				finishedAt: recentShift.finishedAt.toDate()
 			};
 			return null;
-		case QueriesPeriod.PREVIOUS_SHIFT:
+		case "PREVIOUS_SHIFT":
 			if (recentShift) return {
 				startedAt: recentShift.startedAt.toDate(),
 				finishedAt: recentShift.finishedAt.toDate()
@@ -341,6 +454,21 @@ const getQueriesTimeRange = (period, data) => {
 	}
 };
 //#endregion
+//#region src/components/PrometheusChart/constants.ts
+const COLORS = [
+	"#36A2EB",
+	"#FF6384",
+	"#4BC0C0",
+	"#FF9F40",
+	"#9966FF",
+	"#FFCD56",
+	"#C9CBCF",
+	"#7BC8A4",
+	"#E7E9ED",
+	"#FF6B6B"
+];
+const DEFAULT_FONT_COLOR = "rgba(255, 255, 255, 0.75)";
+//#endregion
 //#region src/components/PrometheusChart/GradientPlugin.ts
 const createGradient = (ctx, area) => {
 	return ctx.createLinearGradient(0, area.bottom, 0, area.top);
@@ -368,31 +496,49 @@ const GradientPlugin = {
 //#region src/components/PrometheusChart/index.tsx
 Chart.register(CategoryScale, LinearScale, TimeScale, PointElement, LineElement, Filler, Legend, Tooltip);
 Chart.defaults.font.size = 12;
-Chart.defaults.color = "rgba(255, 255, 255, 0.75)";
-const COLORS = [
-	"#36A2EB",
-	"#FF6384",
-	"#4BC0C0",
-	"#FF9F40",
-	"#9966FF",
-	"#FFCD56",
-	"#C9CBCF",
-	"#7BC8A4",
-	"#E7E9ED",
-	"#FF6B6B"
-];
+Chart.defaults.color = DEFAULT_FONT_COLOR;
+const errorTranslationKey = {
+	auth: "prometheusWidget.errorAuth",
+	forbidden: "prometheusWidget.errorForbidden",
+	unreachable: "prometheusWidget.errorUnreachable"
+};
+const errorMessageStyles = {
+	width: "100%",
+	height: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	textAlign: "center",
+	padding: 2
+};
 const PrometheusChart = ({ data, settings }) => {
 	const chart = useRef(null);
+	const hiddenSeriesRef = useRef({});
+	const fetchGenRef = useRef(0);
 	const [chartData, setChartData] = useState({
 		labels: [],
 		datasets: []
 	});
 	const [queriesTimeRange, setQueriesTimeRange] = useState(null);
 	const [timeLabels, setTimeLabels] = useState([]);
-	const hiddenSeriesRef = useRef({});
+	const [error, setError] = useState(null);
+	const driver = useMemo(() => {
+		const options = { endpoint: settings.endpointUrl };
+		if (settings.username && settings.password) options.auth = {
+			username: settings.username,
+			password: settings.password
+		};
+		return new PrometheusDriver(options);
+	}, [
+		settings.endpointUrl,
+		settings.username,
+		settings.password
+	]);
+	const { t } = useTranslation();
 	const fetchData = useCallback(async (timeRange) => {
 		if (!settings.endpointUrl || !settings.prometheusQueries?.length) return;
-		const driver = new PrometheusDriver({ endpoint: settings.endpointUrl });
+		fetchGenRef.current += 1;
+		const gen = fetchGenRef.current;
 		const start = new Date(timeRange.startedAt);
 		const end = timeRange.finishedAt ? new Date(timeRange.finishedAt) : /* @__PURE__ */ new Date();
 		const step = 30;
@@ -400,39 +546,51 @@ const PrometheusChart = ({ data, settings }) => {
 			const ds = chart.current.data.datasets[i];
 			if (ds.label) hiddenSeriesRef.current[ds.label] = !chart.current.isDatasetVisible(i);
 		}
-		const queries = settings.prometheusQueries.map(({ query }) => query);
-		const results = await Promise.all(queries.map((query) => driver.rangeQuery(query, start, end, step)));
-		let seriesIndex = 0;
-		setChartData({
-			labels: [],
-			datasets: results.flatMap((result, queryIndex) => result.result.map((serie) => {
-				const idx = seriesIndex++;
-				const queryConfig = settings.prometheusQueries[queryIndex];
-				const metricLabels = serie.metric.labels || {};
-				const filteredValues = Object.values(pick(metricLabels, settings.displayedQueryParams)).join(" - ");
-				let label;
-				if (queryConfig?.displayName) label = filteredValues ? `${queryConfig.displayName} - ${filteredValues}` : queryConfig.displayName;
-				else {
-					const metricName = serie.metric.name || queryConfig?.query || "";
-					label = filteredValues ? `${metricName} ${JSON.stringify(pick(metricLabels, settings.displayedQueryParams))}` : metricName;
-				}
-				return {
-					label,
-					data: serie.values.map((v) => ({
-						x: v.time,
-						y: v.value
-					})),
-					fill: true,
-					tension: .4,
-					borderColor: COLORS[idx % COLORS.length],
-					backgroundColor: COLORS[idx % COLORS.length],
-					borderWidth: 3,
-					pointRadius: 0,
-					hidden: hiddenSeriesRef.current[label] || false
-				};
-			}))
-		});
-	}, [settings.endpointUrl, settings.prometheusQueries]);
+		try {
+			const queries = settings.prometheusQueries.map(({ query }) => query);
+			const results = await Promise.all(queries.map((query) => driver.rangeQuery(query, start, end, step)));
+			if (gen !== fetchGenRef.current) return;
+			let seriesIndex = 0;
+			setChartData({
+				labels: [],
+				datasets: results.flatMap((result, queryIndex) => result.result.map((serie) => {
+					const idx = seriesIndex++;
+					const queryConfig = settings.prometheusQueries[queryIndex];
+					const metricLabels = serie.metric.labels || {};
+					const filteredValues = Object.values(pickKeys(metricLabels, settings.displayedQueryParams)).join(" - ");
+					let label;
+					if (queryConfig?.displayName) label = filteredValues ? `${queryConfig.displayName} - ${filteredValues}` : queryConfig.displayName;
+					else {
+						const metricName = serie.metric.name || queryConfig?.query || "";
+						label = filteredValues ? `${metricName} ${JSON.stringify(pickKeys(metricLabels, settings.displayedQueryParams))}` : metricName;
+					}
+					return {
+						label,
+						data: serie.values.map((v) => ({
+							x: v.time,
+							y: v.value
+						})),
+						fill: true,
+						tension: .4,
+						borderColor: COLORS[idx % COLORS.length],
+						backgroundColor: COLORS[idx % COLORS.length],
+						borderWidth: 3,
+						pointRadius: 0,
+						hidden: hiddenSeriesRef.current[label] || false
+					};
+				}))
+			});
+			setError(null);
+		} catch (err) {
+			if (gen !== fetchGenRef.current) return;
+			setError(classifyFetchError(err));
+		}
+	}, [
+		settings.endpointUrl,
+		settings.prometheusQueries,
+		settings.displayedQueryParams,
+		driver
+	]);
 	useEffect(() => {
 		if (queriesTimeRange) {
 			setTimeLabels(generateTimeRange(dayjs(queriesTimeRange.startedAt), dayjs(queriesTimeRange.finishedAt), "minutes", 15).map((d) => d.toDate()));
@@ -441,7 +599,7 @@ const PrometheusChart = ({ data, settings }) => {
 	}, [queriesTimeRange, fetchData]);
 	useEffect(() => {
 		setQueriesTimeRange(getQueriesTimeRange(settings.queriesPeriod, data));
-		if (settings?.queriesPeriod === QueriesPeriod.CURRENT_SHIFT) {
+		if (settings?.queriesPeriod === "CURRENT_SHIFT") {
 			const intervalId = setInterval(() => {
 				setQueriesTimeRange(getQueriesTimeRange(settings.queriesPeriod, data));
 			}, 3e4);
@@ -451,6 +609,15 @@ const PrometheusChart = ({ data, settings }) => {
 		}
 		return () => {};
 	}, [data, settings]);
+	if (error) return /* @__PURE__ */ jsx(Box, {
+		sx: errorMessageStyles,
+		"data-testid": `prometheus-widget.error.${error}`,
+		children: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			color: "text.primary",
+			children: t(errorTranslationKey[error])
+		})
+	});
 	return queriesTimeRange && /* @__PURE__ */ jsx(Line, {
 		ref: chart,
 		data: chartData,
@@ -506,13 +673,16 @@ const WidgetView = ({ data, settings }) => {
 };
 //#endregion
 //#region src/components/Widget/utils.ts
+const isLegacyQuery = (query) => typeof query === "string";
 const getSettingsFormProps = (t) => {
 	yup.setLocale({ mixed: { required: t("prometheusWidget.thisFieldIsRequired") } });
 	return {
 		initialValues: {
 			customTitle: "",
 			endpointUrl: "",
-			queriesPeriod: QueriesPeriod.CURRENT_SHIFT,
+			username: "",
+			password: "",
+			queriesPeriod: "CURRENT_SHIFT",
 			prometheusQueries: [],
 			displayedQueryParams: [],
 			xAxisUnit: "",
@@ -520,6 +690,8 @@ const getSettingsFormProps = (t) => {
 		},
 		validationSchema: yup.object({
 			endpointUrl: yup.string().required(),
+			username: yup.string(),
+			password: yup.string(),
 			queriesPeriod: yup.string().required(),
 			prometheusQueries: yup.array().of(yup.object().shape({
 				query: yup.string().required(),
@@ -528,22 +700,26 @@ const getSettingsFormProps = (t) => {
 			displayedQueryParams: yup.array().of(yup.string().required()),
 			xAxisUnit: yup.string().required(),
 			yAxisUnit: yup.string().required()
-		})
+		}),
+		onSubmit: () => {}
 	};
 };
 const migrateSettings = (settings) => {
-	if (!satisfies(settings.version || "1.0.0", ">=1.2.5")) return {
-		...settings,
-		prometheusQueries: settings.prometheusQueries.map((query) => ({
-			query,
-			displayName: ""
-		}))
-	};
+	if (!satisfies(settings.version || "1.0.0", ">=1.2.5")) {
+		const queries = settings.prometheusQueries;
+		return {
+			...settings,
+			prometheusQueries: queries.map((query) => isLegacyQuery(query) ? {
+				query,
+				displayName: ""
+			} : query)
+		};
+	}
 	return settings;
 };
 //#endregion
 //#region src/components/Widget/index.tsx
-const Widget = ({ url, wsUrl, lang, data, ...widgetProps }) => {
+const Widget = ({ url, wsUrl, lang, data, sidePanelOpened = false, updateSidePanelProps = () => {}, ...widgetProps }) => {
 	const { graphqlSdk, gqlWsClient } = useGqlClients({
 		url,
 		wsUrl,
@@ -558,10 +734,11 @@ const Widget = ({ url, wsUrl, lang, data, ...widgetProps }) => {
 	}, [data, graphqlSdk]);
 	return /* @__PURE__ */ jsx(BaseWidget, {
 		...widgetProps,
-		url,
 		lang,
 		locales: resources,
 		data: widgetData,
+		sidePanelOpened,
+		updateSidePanelProps,
 		gqlClients: {
 			graphqlSdk,
 			gqlWsClient