From 680be0e468751b447113c4c8be16ed466d420aec Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Tue, 26 Nov 2024 16:38:49 +0000
Subject: [PATCH] Add conditional fetching of aggregated results in MetricView
 based on hideQueryElements prop

---
 .../src/Components/Metrics/MetricView.tsx     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/Dashboard/src/Components/Metrics/MetricView.tsx b/Dashboard/src/Components/Metrics/MetricView.tsx
index c0b3e03b3e..6bd05935c4 100644
--- a/Dashboard/src/Components/Metrics/MetricView.tsx
+++ b/Dashboard/src/Components/Metrics/MetricView.tsx
@@ -145,6 +145,20 @@ const MetricView: FunctionComponent<ComponentProps> = (
     setCharts(getCharts());
   }, []);
 
+  useEffect(() => {
+    if (
+      props.hideQueryElements &&
+      metricViewData &&
+      metricViewData.startAndEndDate &&
+      metricViewData.startAndEndDate.startValue &&
+      metricViewData.startAndEndDate.endValue
+    ) {
+      fetchAggregatedResults().catch((err: Error) => {
+        setMetricResultsError(API.getFriendlyErrorMessage(err as Error));
+      });
+    }
+  }, [metricViewData]);
+
   const [metricResults, setMetricResults] = useState<Array<AggregatedResult>>(
     [],
   );
@@ -502,20 +516,6 @@ const MetricView: FunctionComponent<ComponentProps> = (
                     ...metricViewData,
                     startAndEndDate: startAndEndDate,
                   });
-
-                  // if hideQueryElements is true then we should fetch the results immediately because apply button is hidden
-                  if (
-                    props.hideQueryElements &&
-                    startAndEndDate &&
-                    startAndEndDate.startValue &&
-                    startAndEndDate.endValue
-                  ) {
-                    fetchAggregatedResults().catch((err: Error) => {
-                      setMetricResultsError(
-                        API.getFriendlyErrorMessage(err as Error),
-                      );
-                    });
-                  }
                 }}
               />
             </div>