Refactor MetricMonitorStepForm and MetricView to optimize state manag…

…ement and enhance data handling
OneUptime · Dec 12, 2024 · 9d1a2c4 · 9d1a2c4
1 parent cd58b72
commit 9d1a2c4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx b/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx
@@ -1,7 +1,7 @@
 import MonitorStepMetricMonitor, {
   MonitorStepMetricMonitorUtil,
 } from "Common/Types/Monitor/MonitorStepMetricMonitor";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import MetricView from "../../../Metrics/MetricView";
 import RollingTime from "Common/Types/RollingTime/RollingTime";
 import InBetween from "Common/Types/BaseDatabase/InBetween";
@@ -21,10 +21,24 @@ const MetricMonitorStepForm: FunctionComponent<ComponentProps> = (
   const monitorStepMetricMonitor: MonitorStepMetricMonitor =
     props.monitorStepMetricMonitor || MonitorStepMetricMonitorUtil.getDefault();
 
-  const startAndEndDate: InBetween<Date> =
-    RollingTimeUtil.convertToStartAndEndDate(
-      monitorStepMetricMonitor.rollingTime || RollingTime.Past1Minute,
+  const [startAndEndTime, setStartAndEndTime] =
+    React.useState<InBetween<Date> | null>(null);
+
+  useEffect(() => {
+    setStartAndEndTime(
+      RollingTimeUtil.convertToStartAndEndDate(
+        monitorStepMetricMonitor.rollingTime || RollingTime.Past1Minute,
+      ),
+    );
+  }, [monitorStepMetricMonitor.rollingTime]);
+
+  useEffect(() => {
+    setStartAndEndTime(
+      RollingTimeUtil.convertToStartAndEndDate(
+        monitorStepMetricMonitor.rollingTime || RollingTime.Past1Minute,
+      ),
     );
+  }, []);
 
   return (
     <div>
@@ -56,7 +70,7 @@ const MetricMonitorStepForm: FunctionComponent<ComponentProps> = (
       <MetricView
         hideStartAndEndDate={true}
         data={{
-          startAndEndDate: startAndEndDate,
+          startAndEndDate: startAndEndTime,
           queryConfigs: monitorStepMetricMonitor.metricViewConfig.queryConfigs,
           formulaConfigs:
             monitorStepMetricMonitor.metricViewConfig.formulaConfigs,

diff --git a/Dashboard/src/Components/Metrics/MetricView.tsx b/Dashboard/src/Components/Metrics/MetricView.tsx
@@ -33,6 +33,7 @@ import MetricUtil from "./Utils/Metrics";
 import MetricViewData from "./Types/MetricViewData";
 import MetricCharts from "./MetricCharts";
 import ConfirmModal from "Common/UI/Components/Modal/ConfirmModal";
+import JSONFunctions from "Common/Types/JSONFunctions";
 
 export interface ComponentProps {
   data: MetricViewData;
@@ -96,14 +97,23 @@ const MetricView: FunctionComponent<ComponentProps> = (
     [],
   );
 
+  const metricViewDataRef: React.MutableRefObject<MetricViewData> =
+    React.useRef(props.data);
+
   useEffect(() => {
     loadAllMetricsTypes().catch((err: Error) => {
       setPageError(API.getFriendlyErrorMessage(err as Error));
     });
   }, []);
 
   useEffect(() => {
+    const hasChanged: boolean = JSONFunctions.isJSONObjectDifferent(
+      metricViewDataRef.current,
+      props.data,
+    );
+
     if (
+      hasChanged &&
       props.data &&
       props.data.startAndEndDate &&
       props.data.startAndEndDate.startValue &&
@@ -115,6 +125,8 @@ const MetricView: FunctionComponent<ComponentProps> = (
       fetchAggregatedResults().catch((err: Error) => {
         setMetricResultsError(API.getFriendlyErrorMessage(err as Error));
       });
+
+      metricViewDataRef.current = props.data;
     }
   }, [props.data]);