From 13dddab5e57871d2e0d583dd6da982f4ed6e4827 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Wed, 30 Oct 2024 11:56:28 +0000
Subject: [PATCH] Refactor MonitorTestForm component to adjust margins and
 spacing

---
 .../Components/Form/Monitor/MonitorStep.tsx   | 19 +++++++----
 .../Components/Form/Monitor/MonitorTest.tsx   |  5 +--
 Dashboard/src/Pages/Monitor/View/Criteria.tsx | 32 +++++++++++++++++++
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
index e8c2325eb57..101fd19827f 100644
--- a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
+++ b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
@@ -15,7 +15,10 @@ import MonitorType from "Common/Types/Monitor/MonitorType";
 import BrowserType from "Common/Types/Monitor/SyntheticMonitors/BrowserType";
 import Port from "Common/Types/Port";
 import ScreenSizeType from "Common/Types/ScreenSizeType";
-import Button, { ButtonStyleType } from "Common/UI/Components/Button/Button";
+import Button, {
+  ButtonSize,
+  ButtonStyleType,
+} from "Common/UI/Components/Button/Button";
 import CheckBoxList, {
   CategoryCheckboxValue,
   enumToCategoryCheckboxOption,
@@ -708,12 +711,14 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
       )}
 
       {/** Monitor Test Form */}
-
-      <MonitorTestForm
-        monitorSteps={props.allMonitorSteps}
-        monitorType={props.monitorType}
-        probes={props.probes}
-      />
+      <div className="mt-5 mb-2">
+        <MonitorTestForm
+          monitorSteps={props.allMonitorSteps}
+          monitorType={props.monitorType}
+          probes={props.probes}
+          buttonSize={ButtonSize.Small}
+        />
+      </div>
 
       {/** Monitoring Critera Form */}
 
diff --git a/Dashboard/src/Components/Form/Monitor/MonitorTest.tsx b/Dashboard/src/Components/Form/Monitor/MonitorTest.tsx
index 5f8f78bfed0..4429bc33600 100644
--- a/Dashboard/src/Components/Form/Monitor/MonitorTest.tsx
+++ b/Dashboard/src/Components/Form/Monitor/MonitorTest.tsx
@@ -29,6 +29,7 @@ export interface ComponentProps {
   monitorSteps: MonitorSteps;
   monitorType: MonitorType;
   probes: Array<Probe>;
+  buttonSize: ButtonSize;
 }
 
 const MonitorTestForm: FunctionComponent<ComponentProps> = (
@@ -121,10 +122,10 @@ const MonitorTestForm: FunctionComponent<ComponentProps> = (
 
   return (
     <div>
-      <div className="-ml-3 mt-5 mb-2">
+      <div className="-ml-3 mr-2">
         <Button
           buttonStyle={ButtonStyleType.NORMAL}
-          buttonSize={ButtonSize.Small}
+          buttonSize={props.buttonSize}
           title="Test Monitor"
           icon={IconProp.Play}
           onClick={() => {
diff --git a/Dashboard/src/Pages/Monitor/View/Criteria.tsx b/Dashboard/src/Pages/Monitor/View/Criteria.tsx
index 815818978d9..4c24547578d 100644
--- a/Dashboard/src/Pages/Monitor/View/Criteria.tsx
+++ b/Dashboard/src/Pages/Monitor/View/Criteria.tsx
@@ -30,6 +30,10 @@ import React, {
   useState,
 } from "react";
 import { useAsyncEffect } from "use-async-effect";
+import MonitorTestForm from "../../../Components/Form/Monitor/MonitorTest";
+import Probe from "Common/Models/DatabaseModels/Probe";
+import ProbeUtil from "../../../Utils/Probe";
+import { ButtonSize } from "Common/UI/Components/Button/Button";
 
 const MonitorCriteria: FunctionComponent<
   PageComponentProps
@@ -40,6 +44,8 @@ const MonitorCriteria: FunctionComponent<
 
   const [error, setError] = useState<string>("");
 
+  const [probes, setProbes] = useState<Array<Probe>>([]);
+
   const fetchItem: PromiseVoidFunction = async (): Promise<void> => {
     // get item.
     setIsLoading(true);
@@ -60,6 +66,10 @@ const MonitorCriteria: FunctionComponent<
         return;
       }
 
+      const probes: Array<Probe> = await ProbeUtil.getAllProbes();
+
+      setProbes(probes);
+
       setMonitorType(item.monitorType);
     } catch (err) {
       setError(API.getFriendlyMessage(err));
@@ -71,6 +81,10 @@ const MonitorCriteria: FunctionComponent<
     undefined,
   );
 
+  const [monitorSteps, setMonitorSteps] = useState<
+    MonitorStepsType | undefined
+  >(undefined);
+
   useAsyncEffect(async () => {
     // fetch the model
     await fetchItem();
@@ -108,6 +122,16 @@ const MonitorCriteria: FunctionComponent<
         cardProps={{
           title: "Monitoring Criteria",
           description: "Here is the criteria we use to monitor this resource.",
+          rightElement: monitorSteps ? (
+            <MonitorTestForm
+              buttonSize={ButtonSize.Normal}
+              monitorSteps={monitorSteps}
+              monitorType={monitorType}
+              probes={probes}
+            />
+          ) : (
+            <></>
+          ),
         }}
         createEditModalWidth={ModalWidth.Large}
         isEditable={true}
@@ -143,10 +167,18 @@ const MonitorCriteria: FunctionComponent<
             },
           },
         ]}
+        onSaveSuccess={async (item: Monitor) => {
+          setMonitorSteps(item.monitorSteps);
+        }}
         modelDetailProps={{
           showDetailsInNumberOfColumns: 1,
           modelType: Monitor,
           id: "model-detail-monitors",
+          onItemLoaded: (monitor: Monitor) => {
+            if (!monitorSteps) {
+              setMonitorSteps(monitor.monitorSteps);
+            }
+          },
           fields: [
             {
               field: {