Merge pull request #749 from bluewave-labs/feat/pause-monitors

Add pause routes and controller, implement functionality

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, monitorId } = data;
+      const res = await networkService.pauseMonitorById(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);
+    }
+  }
+);
+
 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";
       });
   },
 });

Client/src/Pages/Monitors/Configure/index.jsx

@@ -2,12 +2,14 @@ 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";
 import {
   updateUptimeMonitor,
+  pauseUptimeMonitor,
+  getUptimeMonitorById,
   getUptimeMonitorsByTeamId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
@@ -19,7 +21,8 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 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.
  *
@@ -34,54 +37,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
@@ -92,7 +47,7 @@ const Configure = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const { user, authToken } = useSelector((state) => state.auth);
-  const { monitors } = useSelector((state) => state.uptimeMonitors);
+  const { isLoading } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState({});
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
@@ -106,15 +61,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 +135,23 @@ const Configure = () => {
     }
   };
 
+  const handlePause = async () => {
+    try {
+      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) => {
     event.preventDefault();
     const action = await dispatch(
@@ -206,11 +188,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 ? (
+      {Object.keys(monitor).length === 0 ? (
         <SkeletonLayout />
       ) : (
         <>
@@ -262,9 +242,10 @@ const Configure = () => {
                   ml: "auto",
                 }}
               >
-                <Button
+                <ButtonSpinner
+                  isLoading={isLoading}
                   level="tertiary"
-                  label="Pause"
+                  label={monitor?.isActive ? "Pause" : "Resume"}
                   animate="rotate180"
                   img={<PauseCircleOutlineIcon />}
                   sx={{
@@ -276,8 +257,10 @@ const Configure = () => {
                       mr: theme.gap.xs,
                     },
                   }}
+                  onClick={handlePause}
                 />
-                <Button
+                <ButtonSpinner
+                  isLoading={isLoading}
                   level="error"
                   label="Remove"
                   sx={{
@@ -404,7 +387,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 }}

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;

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}

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,28 @@ 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",
+        },
+      }
+    );
+  }
 
   /**
    * ************************************