From 17174ebe14ace4e6a2a2cb6f2f9a4b17bed68860 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 28 Aug 2024 15:21:59 -0700
Subject: [PATCH 1/7] Add pause routes and controller, implement functionality

---
 Client/src/Pages/Monitors/Configure/index.jsx |  2 +-
 Client/src/Pages/Monitors/Home/index.jsx      | 23 +++++++----
 Server/controllers/monitorController.js       | 41 ++++++++++++++++++-
 Server/db/mongo/modules/monitorModule.js      |  6 +--
 Server/routes/monitorRoute.js                 |  7 ++++
 Server/utils/messages.js                      |  2 +
 Server/validation/joi.js                      |  5 +++
 7 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 20bd551cc..7a86d50ce 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -264,7 +264,7 @@ const Configure = () => {
               >
                 <Button
                   level="tertiary"
-                  label="Pause"
+                  label={monitor?.isActive ? "Pause" : "Resume"}
                   animate="rotate180"
                   img={<PauseCircleOutlineIcon />}
                   sx={{
diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index 91ecad3d9..787407edf 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -24,11 +24,20 @@ const Monitors = ({ isAdmin }) => {
     dispatch(getUptimeMonitorsByTeamId(authState.authToken));
   }, [authState.authToken, dispatch]);
 
-  const up = monitorState.monitors.reduce((acc, cur) => {
-    return cur.status === true ? acc + 1 : acc;
-  }, 0);
+  const monitorStats = monitorState.monitors.reduce(
+    (acc, monitor) => {
+      if (monitor.isActive === false) {
+        acc["paused"] += 1;
+      } else if (monitor.status === true) {
+        acc["up"] += 1;
+      } else {
+        acc["down"] += 1;
+      }
+      return acc;
+    },
+    { paused: 0, up: 0, down: 0 }
+  );
 
-  const down = monitorState.monitors.length - up;
   const data = buildData(monitorState.monitors, isAdmin, navigate);
 
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
@@ -73,9 +82,9 @@ const Monitors = ({ isAdmin }) => {
                 direction="row"
                 justifyContent="space-between"
               >
-                <StatusBox title="up" value={up} />
-                <StatusBox title="down" value={down} />
-                <StatusBox title="paused" value={0} />
+                <StatusBox title="up" value={monitorStats.up} />
+                <StatusBox title="down" value={monitorStats.down} />
+                <StatusBox title="paused" value={monitorStats.paused} />
               </Stack>
               <Box
                 flex={1}
diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index c3fe37955..8ad4d0f63 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -5,6 +5,7 @@ const {
   createMonitorBodyValidation,
   editMonitorBodyValidation,
   getMonitorsByTeamIdQueryValidation,
+  pauseMonitorParamValidation,
 } = require("../validation/joi");
 
 const sslChecker = require("ssl-checker");
@@ -309,7 +310,7 @@ const editMonitor = async (req, res, next) => {
     // Get notifications from the request body
     const notifications = req.body.notifications;
 
-    const editedMonitor = await req.db.editMonitor(req, res);
+    const editedMonitor = await req.db.editMonitor(monitorId, req.body);
 
     await req.db.deleteNotificationsByMonitorId(editedMonitor._id);
 
@@ -337,6 +338,43 @@ const editMonitor = async (req, res, next) => {
   }
 };
 
+const pauseMonitor = async (req, res, next) => {
+  try {
+    await pauseMonitorParamValidation.validateAsync(req.params);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+  }
+
+  try {
+    const monitor = await req.db.getMonitorById(req.params.monitorId);
+    if (monitor.isActive) {
+      await req.jobQueue.deleteJob(monitor);
+    } else {
+      await req.jobQueue.addJob(monitor._id, monitor);
+    }
+    monitor.isActive = !monitor.isActive;
+    const updatedMonitor = await req.db.editMonitor(
+      req.params.monitorId,
+      monitor
+    );
+    return res.status(200).json({
+      success: true,
+      msg: updatedMonitor.isActive
+        ? successMessages.MONITOR_RESUME
+        : successMessages.MONITOR_PAUSE,
+      data: updatedMonitor,
+    });
+  } catch (error) {
+    error.service = SERVICE_NAME;
+    error.method = "pauseMonitor";
+    next(error);
+  }
+};
+
 module.exports = {
   getAllMonitors,
   getMonitorStatsById,
@@ -347,4 +385,5 @@ module.exports = {
   deleteMonitor,
   deleteAllMonitors,
   editMonitor,
+  pauseMonitor,
 };
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 9dda77007..7a86f1891 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -15,7 +15,7 @@ const { NormalizeData } = require("../../../utils/dataUtils");
  */
 const getAllMonitors = async (req, res) => {
   try {
-    const monitors = await Monitor.find({ isActive: true });
+    const monitors = await Monitor.find();
     return monitors;
   } catch (error) {
     throw error;
@@ -431,9 +431,7 @@ const deleteMonitorsByUserId = async (userId) => {
  * @returns {Promise<Monitor>}
  * @throws {Error}
  */
-const editMonitor = async (req, res) => {
-  const candidateId = req.params.monitorId;
-  const candidateMonitor = req.body;
+const editMonitor = async (candidateId, candidateMonitor) => {
   candidateMonitor.notifications = undefined;
 
   try {
diff --git a/Server/routes/monitorRoute.js b/Server/routes/monitorRoute.js
index e08c43b7d..ee1c08488 100644
--- a/Server/routes/monitorRoute.js
+++ b/Server/routes/monitorRoute.js
@@ -31,4 +31,11 @@ router.delete(
   isAllowed(["superadmin"]),
   monitorController.deleteAllMonitors
 );
+
+router.post(
+  "/pause/:monitorId",
+  isAllowed(["admin", "superadmin"]),
+  monitorController.pauseMonitor
+);
+
 module.exports = router;
diff --git a/Server/utils/messages.js b/Server/utils/messages.js
index d7de90caf..53a8f689f 100644
--- a/Server/utils/messages.js
+++ b/Server/utils/messages.js
@@ -87,6 +87,8 @@ const successMessages = {
   //Job Queue
   JOB_QUEUE_DELETE_JOB: "Job removed successfully",
   JOB_QUEUE_OBLITERATE: "Queue OBLITERATED!!!",
+  JOB_QUEUE_PAUSE_JOB: "Job paused successfully",
+  JOB_QUEUE_RESUME_JOB: "Job resumed successfully",
 
   //Maintenance Window Controller
   MAINTENANCE_WINDOW_CREATE: "Maintenance Window created successfully",
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 714eff5cf..2a7ff173d 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -197,6 +197,10 @@ const editMonitorBodyValidation = joi.object({
   notifications: joi.array().items(joi.object()),
 });
 
+const pauseMonitorParamValidation = joi.object({
+  monitorId: joi.string().required(),
+});
+
 //****************************************
 // Alerts
 //****************************************
@@ -350,6 +354,7 @@ module.exports = {
   getMonitorsByTeamIdValidation,
   getMonitorsByTeamIdQueryValidation,
   editMonitorBodyValidation,
+  pauseMonitorParamValidation,
   editUserParamValidation,
   editUserBodyValidation,
   createAlertParamValidation,

From d4ed7f3f7a8dfb26b5d4fb6985b85a316cd4b5c5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 28 Aug 2024 20:07:22 -0700
Subject: [PATCH 2/7] Add thunks for getting single monitor and
 pausing/resuming single monitor

---
 .../UptimeMonitors/uptimeMonitorsSlice.js     | 77 ++++++++++++++++++-
 Client/src/Pages/Monitors/Configure/index.jsx | 37 ++++++---
 Client/src/Utils/NetworkService.js            | 39 ++++++++++
 Server/controllers/monitorController.js       |  2 +-
 4 files changed, 143 insertions(+), 12 deletions(-)

diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 237d9d3dc..0fd70c6b6 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -28,6 +28,26 @@ export const createUptimeMonitor = createAsyncThunk(
   }
 );
 
+export const getUptimeMonitorById = createAsyncThunk(
+  "monitors/getMonitorById",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitorId } = data;
+      const res = await networkService.getMonitorByid(authToken, monitorId);
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      const payload = {
+        status: false,
+        msg: error.message ? error.message : "Unknown error",
+      };
+      return thunkApi.rejectWithValue(payload);
+    }
+  }
+);
+
 export const getUptimeMonitorsByTeamId = createAsyncThunk(
   "montiors/getMonitorsByTeamId",
   async (token, thunkApi) => {
@@ -109,6 +129,26 @@ export const deleteUptimeMonitor = createAsyncThunk(
   }
 );
 
+export const pauseUptimeMonitor = createAsyncThunk(
+  "monitors/pauseMonitor",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitor } = data;
+      const res = await networkService.pauseMonitorById(authToken, monitor._id);
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      const payload = {
+        status: false,
+        msg: error.message ? error.message : "Unknown error",
+      };
+      return thunkApi.rejectWithValue(payload);
+    }
+  }
+);
+
 const uptimeMonitorsSlice = createSlice({
   name: "uptimeMonitors",
   initialState,
@@ -160,7 +200,24 @@ const uptimeMonitorsSlice = createSlice({
           ? action.payload.msg
           : "Failed to create uptime monitor";
       })
-
+      // *****************************************************
+      // Get Monitor By Id
+      // *****************************************************
+      .addCase(getUptimeMonitorById.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(getUptimeMonitorById.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(getUptimeMonitorById.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to pause uptime monitor";
+      })
       // *****************************************************
       // update Monitor
       // *****************************************************
@@ -197,6 +254,24 @@ const uptimeMonitorsSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Failed to delete uptime monitor";
+      })
+      // *****************************************************
+      // Pause Monitor
+      // *****************************************************
+      .addCase(pauseUptimeMonitor.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(pauseUptimeMonitor.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(pauseUptimeMonitor.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to pause uptime monitor";
       });
   },
 });
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 7a86d50ce..a548ef56f 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -8,6 +8,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import {
   updateUptimeMonitor,
+  getUptimeMonitorById,
   getUptimeMonitorsByTeamId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
@@ -19,6 +20,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
+import { networkService } from "../../../main";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -92,7 +94,6 @@ const Configure = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const { user, authToken } = useSelector((state) => state.auth);
-  const { monitors } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
@@ -106,15 +107,25 @@ const Configure = () => {
   };
 
   useEffect(() => {
-    const data = monitors.find((monitor) => monitor._id === monitorId);
-    if (!data) {
-      logger.error("Error fetching monitor of id: " + monitorId);
-      navigate("/not-found", { replace: true });
-    }
-    setMonitor({
-      ...data,
-    });
-  }, [monitorId, authToken, monitors, navigate]);
+    const fetchMonitor = async () => {
+      try {
+        const action = await dispatch(
+          getUptimeMonitorById({ authToken, monitorId })
+        );
+
+        if (getUptimeMonitorById.fulfilled.match(action)) {
+          const monitor = action.payload.data;
+          setMonitor(monitor);
+        } else if (getUptimeMonitorById.rejected.match(action)) {
+          throw new Error(action.error.message);
+        }
+      } catch (error) {
+        logger.error("Error fetching monitor of id: " + monitorId);
+        navigate("/not-found", { replace: true });
+      }
+    };
+    fetchMonitor();
+  }, [monitorId, authToken, navigate]);
 
   const handleChange = (event, name) => {
     let { value, id } = event.target;
@@ -170,6 +181,11 @@ const Configure = () => {
     }
   };
 
+  const handlePause = async () => {
+    try {
+    } catch (error) {}
+  };
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     const action = await dispatch(
@@ -276,6 +292,7 @@ const Configure = () => {
                       mr: theme.gap.xs,
                     },
                   }}
+                  onClick={handlePause}
                 />
                 <Button
                   level="error"
diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index c375fade4..b85037118 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -17,6 +17,27 @@ class NetworkService {
     );
   }
 
+  /**
+   *
+   * ************************************
+   * Create a new monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The monitor ID to be sent in the param.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   */
+
+  async getMonitorByid(authToken, monitorId) {
+    return this.axiosInstance.get(`/monitors/${monitorId}`, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
   /**
    *
    * ************************************
@@ -163,6 +184,24 @@ class NetworkService {
       },
     });
   }
+  /**
+   * ************************************
+   * Pauses a single monitor by its ID
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor to be paused.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   */
+  async pauseMonitorById(authToken, monitorId) {
+    return this.axiosInstance.post(`/monitors/pause/${monitorId}`, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
 
   /**
    * ************************************
diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 8ad4d0f63..e7147b1cc 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -124,7 +124,7 @@ const getMonitorById = async (req, res, next) => {
   }
 
   try {
-    const monitor = await req.db.getMonitorById(req, res);
+    const monitor = await req.db.getMonitorById(req.params.monitorId);
     if (!monitor) {
       const error = new Error(errorMessages.MONITOR_GET_BY_ID);
       error.status = 404;

From 68ad1f60881b6eda6644231ae52327391ed5b97e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 28 Aug 2024 23:09:05 -0700
Subject: [PATCH 3/7] add loading state

---
 Client/src/Pages/Monitors/Configure/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index a548ef56f..2d2ca2a41 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -94,6 +94,7 @@ const Configure = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const { user, authToken } = useSelector((state) => state.auth);
+  const { isLoading } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();

From 54b2da9d3bbf25555be720b81064246da5d07cfa Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Aug 2024 11:58:51 -0700
Subject: [PATCH 4/7] refactor out skeleton

---
 Client/src/Pages/Monitors/Configure/index.jsx | 53 +------------------
 .../src/Pages/Monitors/Configure/skeleton.jsx | 52 ++++++++++++++++++
 2 files changed, 54 insertions(+), 51 deletions(-)
 create mode 100644 Client/src/Pages/Monitors/Configure/skeleton.jsx

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 2d2ca2a41..d05f2b194 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -2,7 +2,7 @@ import { useNavigate, useParams } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Modal, Stack, Typography } from "@mui/material";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
@@ -20,8 +20,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
-import { networkService } from "../../../main";
-
+import SkeletonLayout from "./skeleton";
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -36,54 +35,6 @@ const parseUrl = (url) => {
   }
 };
 
-/**
- * Renders a skeleton layout.
- *
- * @returns {JSX.Element}
- */
-const SkeletonLayout = () => {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Skeleton variant="rounded" width="15%" height={34} />
-      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          <Skeleton
-            variant="circular"
-            style={{ minWidth: 24, minHeight: 24 }}
-          />
-          <Box width="80%">
-            <Skeleton
-              variant="rounded"
-              width="50%"
-              height={24}
-              sx={{ mb: theme.gap.small }}
-            />
-            <Skeleton variant="rounded" width="50%" height={18} />
-          </Box>
-          <Stack
-            direction="row"
-            gap={theme.gap.medium}
-            sx={{
-              ml: "auto",
-              alignSelf: "flex-end",
-            }}
-          >
-            <Skeleton variant="rounded" width={150} height={34} />
-          </Stack>
-        </Stack>
-        <Skeleton variant="rounded" width="100%" height={200} />
-        <Skeleton variant="rounded" width="100%" height={200} />
-        <Skeleton variant="rounded" width="100%" height={200} />
-        <Stack direction="row" justifyContent="flex-end">
-          <Skeleton variant="rounded" width="15%" height={34} />
-        </Stack>
-      </Stack>
-    </>
-  );
-};
-
 /**
  * Configure page displays monitor configurations and allows for editing actions.
  * @component
diff --git a/Client/src/Pages/Monitors/Configure/skeleton.jsx b/Client/src/Pages/Monitors/Configure/skeleton.jsx
new file mode 100644
index 000000000..e8ac0d55d
--- /dev/null
+++ b/Client/src/Pages/Monitors/Configure/skeleton.jsx
@@ -0,0 +1,52 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Renders a skeleton layout.
+ *
+ * @returns {JSX.Element}
+ */
+const SkeletonLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Skeleton variant="rounded" width="15%" height={34} />
+      <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          <Skeleton
+            variant="circular"
+            style={{ minWidth: 24, minHeight: 24 }}
+          />
+          <Box width="80%">
+            <Skeleton
+              variant="rounded"
+              width="50%"
+              height={24}
+              sx={{ mb: theme.gap.small }}
+            />
+            <Skeleton variant="rounded" width="50%" height={18} />
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.gap.medium}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Skeleton variant="rounded" width={150} height={34} />
+          </Stack>
+        </Stack>
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Skeleton variant="rounded" width="100%" height={200} />
+        <Stack direction="row" justifyContent="flex-end">
+          <Skeleton variant="rounded" width="15%" height={34} />
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default SkeletonLayout;

From 49eded1508f06a145bb341974a8d14a309cce33f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Aug 2024 12:06:37 -0700
Subject: [PATCH 5/7] Refactor buttons to buttonspinners, add loading state

---
 Client/src/Pages/Monitors/Configure/index.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index d05f2b194..13d4021f4 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -21,6 +21,7 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import "./index.css";
 import SkeletonLayout from "./skeleton";
+import ButtonSpinner from "../../../Components/ButtonSpinner";
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -174,11 +175,9 @@ const Configure = () => {
   const parsedUrl = parseUrl(monitor?.url);
   const protocol = parsedUrl?.protocol?.replace(":", "") || "";
 
-  let loading = Object.keys(monitor).length === 0;
-
   return (
     <Stack className="configure-monitor" gap={theme.gap.large}>
-      {loading ? (
+      {false ? (
         <SkeletonLayout />
       ) : (
         <>
@@ -230,7 +229,8 @@ const Configure = () => {
                   ml: "auto",
                 }}
               >
-                <Button
+                <ButtonSpinner
+                  isLoading={isLoading}
                   level="tertiary"
                   label={monitor?.isActive ? "Pause" : "Resume"}
                   animate="rotate180"
@@ -246,7 +246,8 @@ const Configure = () => {
                   }}
                   onClick={handlePause}
                 />
-                <Button
+                <ButtonSpinner
+                  isLoading={isLoading}
                   level="error"
                   label="Remove"
                   sx={{
@@ -373,7 +374,8 @@ const Configure = () => {
               </Stack>
             </Stack>
             <Stack direction="row" justifyContent="flex-end" mt="auto">
-              <Button
+              <ButtonSpinner
+                isLoading={isLoading}
                 level="primary"
                 label="Save"
                 sx={{ px: theme.gap.large }}

From 4d781631215c3dd56ddd3205cb56ce74bd328a1d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Aug 2024 12:17:37 -0700
Subject: [PATCH 6/7] Implement pausing

---
 .../UptimeMonitors/uptimeMonitorsSlice.js        |  4 ++--
 Client/src/Pages/Monitors/Configure/index.jsx    | 15 ++++++++++++++-
 Client/src/Utils/NetworkService.js               | 16 ++++++++++------
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 0fd70c6b6..79af537e0 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -133,8 +133,8 @@ export const pauseUptimeMonitor = createAsyncThunk(
   "monitors/pauseMonitor",
   async (data, thunkApi) => {
     try {
-      const { authToken, monitor } = data;
-      const res = await networkService.pauseMonitorById(authToken, monitor._id);
+      const { authToken, monitorId } = data;
+      const res = await networkService.pauseMonitorById(authToken, monitorId);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 13d4021f4..0fe54116a 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -8,6 +8,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import {
   updateUptimeMonitor,
+  pauseUptimeMonitor,
   getUptimeMonitorById,
   getUptimeMonitorsByTeamId,
   deleteUptimeMonitor,
@@ -136,7 +137,19 @@ const Configure = () => {
 
   const handlePause = async () => {
     try {
-    } catch (error) {}
+      const action = await dispatch(
+        pauseUptimeMonitor({ authToken, monitorId })
+      );
+      if (pauseUptimeMonitor.fulfilled.match(action)) {
+        const monitor = action.payload.data;
+        setMonitor(monitor);
+      } else if (pauseUptimeMonitor.rejected.match(action)) {
+        throw new Error(action.error.message);
+      }
+    } catch (error) {
+      logger.error("Error pausing monitor: " + monitorId);
+      createToast({ body: "Failed to pause monitor" });
+    }
   };
 
   const handleSubmit = async (event) => {
diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index b85037118..26825401d 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -195,12 +195,16 @@ class NetworkService {
    * @returns {Promise<AxiosResponse>} The response from the axios POST request.
    */
   async pauseMonitorById(authToken, monitorId) {
-    return this.axiosInstance.post(`/monitors/pause/${monitorId}`, {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-    });
+    return this.axiosInstance.post(
+      `/monitors/pause/${monitorId}`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+          "Content-Type": "application/json",
+        },
+      }
+    );
   }
 
   /**

From e7bdb44fab9dd958fa722fc8a8abccade48e3355 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Aug 2024 12:32:00 -0700
Subject: [PATCH 7/7] use monitor data for skeleton state

---
 Client/src/Pages/Monitors/Configure/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 0fe54116a..15f86fd93 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -190,7 +190,7 @@ const Configure = () => {
 
   return (
     <Stack className="configure-monitor" gap={theme.gap.large}>
-      {false ? (
+      {Object.keys(monitor).length === 0 ? (
         <SkeletonLayout />
       ) : (
         <>