From bb396f7cfde4bb687012f077a7a8c84b33e90036 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 28 Aug 2024 10:53:02 -0700
Subject: [PATCH 01/11] Add check for monitor type to abort certificate check
 if not http type

---
 Client/src/Pages/Monitors/Details/index.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 019aa7845..edcccf8e4 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -142,6 +142,9 @@ const DetailsPage = ({ isAdmin }) => {
 
   useEffect(() => {
     const fetchCertificate = async () => {
+      if (monitor?.type !== "http") {
+        return;
+      }
       try {
         const res = await networkService.getCertificateExpiry(
           authToken,
@@ -153,7 +156,7 @@ const DetailsPage = ({ isAdmin }) => {
       }
     };
     fetchCertificate();
-  }, [authToken, monitorId]);
+  }, [authToken, monitorId, monitor]);
 
   const theme = useTheme();
   let loading = Object.keys(monitor).length === 0;

From e6ecf3be9d01bb22bcd1f8d44ebd6f8d0fe09426 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 28 Aug 2024 12:09:45 -0700
Subject: [PATCH 02/11] Add superadmin to admin group in team panel

---
 Client/src/Components/TabPanels/Account/TeamPanel.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index aa218e721..0b19dadcd 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -73,7 +73,14 @@ const TeamPanel = () => {
   useEffect(() => {
     let team = members;
     if (filter !== "all")
-      team = members.filter((member) => member.role.includes(filter));
+      team = members.filter((member) => {
+        if (filter === "admin") {
+          return (
+            member.role.includes("admin") || member.role.includes("superadmin")
+          );
+        }
+        return member.role.includes(filter);
+      });
 
     const data = {
       cols: [

From 8e87da3a2063aac540c77a5776abb593bc8f2854 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 28 Aug 2024 12:20:43 -0700
Subject: [PATCH 03/11] Added status code column and values to the incident
 table and monitor details table

---
 Client/src/Pages/Incidents/IncidentTable/index.jsx          | 6 +++++-
 Client/src/Pages/Monitors/Details/PaginationTable/index.jsx | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index ae633c4dd..bc9944968 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -139,6 +139,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
                   <TableCell>Monitor Name</TableCell>
                   <TableCell>Status</TableCell>
                   <TableCell>Date & Time</TableCell>
+                  <TableCell>Status Code</TableCell>
                   <TableCell>Message</TableCell>
                 </TableRow>
               </TableHead>
@@ -159,7 +160,10 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
                       <TableCell>
                         {new Date(check.createdAt).toLocaleString()}
                       </TableCell>
-                      <TableCell>{check.statusCode}</TableCell>
+                      <TableCell>
+                        {check.statusCode ? check.statusCode : "N/A"}
+                      </TableCell>
+                      <TableCell>{check.message}</TableCell>
                     </TableRow>
                   );
                 })}
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index ad8248ab0..8900aba2a 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -108,6 +108,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
             <TableRow>
               <TableCell>Status</TableCell>
               <TableCell>Date & Time</TableCell>
+              <TableCell>Status Code</TableCell>
               <TableCell>Message</TableCell>
             </TableRow>
           </TableHead>
@@ -127,7 +128,10 @@ const PaginationTable = ({ monitorId, dateRange }) => {
                   <TableCell>
                     {new Date(check.createdAt).toLocaleString()}
                   </TableCell>
-                  <TableCell>{check.statusCode}</TableCell>
+                  <TableCell>
+                    {check.statusCode ? check.statusCode : "N/A"}
+                  </TableCell>
+                  <TableCell>{check.message}</TableCell>
                 </TableRow>
               );
             })}

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 04/11] 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 05/11] 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 06/11] 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 07/11] 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 08/11] 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 09/11] 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 10/11] 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 />
       ) : (
         <>

From 43dff00cd6510493a1a3c649a46e47e58ebd6add Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Aug 2024 12:58:32 -0700
Subject: [PATCH 11/11] Use axios directly for fetching file

---
 Client/src/Features/Auth/authSlice.js | 4 ++--
 Client/src/Utils/NetworkService.js    | 1 -
 Server/db/mongo/modules/userModule.js | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index fa1f0471e..f12758715 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -1,6 +1,7 @@
 import { networkService } from "../../main";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
+import axios from "axios";
 
 const initialState = {
   isLoading: false,
@@ -57,9 +58,8 @@ export const update = createAsyncThunk(
       form.password && fd.append("password", form.password);
       form.newPassword && fd.append("newPassword", form.newPassword);
       if (form.file && form.file !== "") {
-        const imageResult = await networkService.get(form.file, {
+        const imageResult = await axios.get(form.file, {
           responseType: "blob",
-          baseURL: "",
         });
         fd.append("profileImage", imageResult.data);
       }
diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index c375fade4..b6e8f9a0b 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -226,7 +226,6 @@ class NetworkService {
     return this.axiosInstance.put(`/auth/user/${userId}`, form, {
       headers: {
         Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
       },
     });
   }
diff --git a/Server/db/mongo/modules/userModule.js b/Server/db/mongo/modules/userModule.js
index d29c1889b..1a5c19f36 100644
--- a/Server/db/mongo/modules/userModule.js
+++ b/Server/db/mongo/modules/userModule.js
@@ -89,7 +89,6 @@ const getUserByEmail = async (email) => {
 
 const updateUser = async (req, res) => {
   const candidateUserId = req.params.userId;
-
   try {
     const candidateUser = { ...req.body };
     // ******************************************