From 53affc64dbb08967399eba1705648769a5c8d3f4 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Wed, 4 Sep 2024 21:41:27 +0200
Subject: [PATCH] Clear the query page when navigating away from it

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../mantine-ui/src/pages/query/QueryPage.tsx  | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

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