mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Clear the query page when navigating away from it

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-09-04 21:41:27 +02:00
parent c73c3e24d7
commit 53affc64db
1 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/ui/mantine-ui/src/pages/query/QueryPage.tsx
View file

@ -5,7 +5,11 @@ import {
IconPlus, IconPlus,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useAppDispatch, useAppSelector } from "../../state/hooks"; import { useAppDispatch, useAppSelector } from "../../state/hooks";
import { addPanel, setPanels } from "../../state/queryPageSlice"; import {
addPanel,
newDefaultPanel,
setPanels,
} from "../../state/queryPageSlice";
import Panel from "./QueryPanel"; import Panel from "./QueryPanel";
import { LabelValuesResult } from "../../api/responseTypes/labelValues"; import { LabelValuesResult } from "../../api/responseTypes/labelValues";
import { useAPIQuery } from "../../api/api"; import { useAPIQuery } from "../../api/api";
@ -19,6 +23,7 @@ export default function QueryPage() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [timeDelta, setTimeDelta] = useState(0); const [timeDelta, setTimeDelta] = useState(0);
// Update the panels whenever the URL params change.
useEffect(() => { useEffect(() => {
const handleURLChange = () => { const handleURLChange = () => {
const panels = decodePanelOptionsFromURLParams(window.location.search); const panels = decodePanelOptionsFromURLParams(window.location.search);
@ -36,6 +41,13 @@ export default function QueryPage() {
}; };
}, [dispatch]); }, [dispatch]);
// Clear the query page when navigating away from it.
useEffect(() => {
return () => {
dispatch(setPanels([newDefaultPanel()]));
};
}, [dispatch]);
const { data: metricNamesResult, error: metricNamesError } = const { data: metricNamesResult, error: metricNamesError } =
useAPIQuery<LabelValuesResult>({ useAPIQuery<LabelValuesResult>({
path: "/label/__name__/values", path: "/label/__name__/values",
@ -50,7 +62,10 @@ export default function QueryPage() {
}); });
useEffect(() => { useEffect(() => {
if (timeResult) { if (!timeResult) {
return;
}
if (timeResult.data.resultType !== "scalar") { if (timeResult.data.resultType !== "scalar") {
throw new Error("Unexpected result type from time query"); throw new Error("Unexpected result type from time query");
} }
@ -58,7 +73,6 @@ export default function QueryPage() {
const browserTime = new Date().getTime() / 1000; const browserTime = new Date().getTime() / 1000;
const serverTime = timeResult.data.result[0]; const serverTime = timeResult.data.result[0];
setTimeDelta(Math.abs(browserTime - serverTime)); setTimeDelta(Math.abs(browserTime - serverTime));
}
}, [timeResult]); }, [timeResult]);
return ( return (