Merge branch 'develop' into 901-create-confirmation-dialogs-for-clear-all-stats-and-remove-all-monitors

Client/src/Pages/Monitors/Home/actionsMenu.jsx

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
 import {
   Button,
   IconButton,
@@ -14,6 +15,7 @@ import {
 } from "@mui/material";
 import {
   deleteUptimeMonitor,
+  pauseUptimeMonitor,
   getUptimeMonitorsByTeamId,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Settings from "../../../assets/icons/settings-bold.svg?react";
@@ -26,6 +28,8 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
   const dispatch = useDispatch();
   const theme = useTheme();
   const authState = useSelector((state) => state.auth);
+  const authToken = authState.authToken;
+  
 
   const handleRemove = async (event) => {
     event.preventDefault();
@@ -44,6 +48,24 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
     }
   };
 
+  const handlePause = async () => {
+    try {
+      const action = await dispatch(
+        pauseUptimeMonitor({ authToken, monitorId: monitor._id })
+      );
+      if (pauseUptimeMonitor.fulfilled.match(action)) {
+        updateCallback();
+        const state = action?.payload?.data.isActive === false ? "paused" : "resumed";
+        createToast({ body: `Monitor ${state} successfully.` });
+      } else {
+        throw new Error(action?.error?.message ?? "Failed to pause monitor.");
+      }
+    } catch (error) {
+      logger.error("Error pausing monitor:", monitor._id, error);
+      createToast({ body: "Failed to pause monitor." });
+    }
+  };
+
   const openMenu = (event, id, url) => {
     event.preventDefault();
     event.stopPropagation();
@@ -155,6 +177,17 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
             Clone
           </MenuItem>
         )}
+        {isAdmin && (
+          <MenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handlePause(e);
+            }}
+          >
+          {monitor?.isActive  === true ? "Pause" : "Resume"}
+
+        </MenuItem>
+        )}
         {isAdmin && (
           <MenuItem
             onClick={(e) => {
@@ -164,7 +197,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
           >
             Remove
           </MenuItem>
-        )}
+        )}     
       </Menu>
       <Modal
         aria-labelledby="modal-delete-monitor"
@@ -238,6 +271,7 @@ ActionsMenu.propTypes = {
     _id: PropTypes.string,
     url: PropTypes.string,
     type: PropTypes.string,
+    isActive: PropTypes.bool,
   }).isRequired,
   isAdmin: PropTypes.bool,
   updateCallback: PropTypes.func,

Client/src/Pages/Settings/index.jsx

@@ -15,7 +15,7 @@ import {
 import { update } from "../../Features/Auth/authSlice";
 import PropTypes from "prop-types";
 import LoadingButton from "@mui/lab/LoadingButton";
-import { setTimezone } from "../../Features/UI/uiSlice";
+import { setTimezone, setMode } from "../../Features/UI/uiSlice";
 import timezones from "../../Utils/timezones.json";
 import { useState } from "react";
 import { ConfigBox } from "./styled";
@@ -33,6 +33,7 @@ const Settings = ({ isAdmin }) => {
   const { isLoading } = useSelector((state) => state.uptimeMonitors);
   const { isLoading: authIsLoading } = useSelector((state) => state.auth);
   const { timezone } = useSelector((state) => state.ui);
+  const {mode} = useSelector((state) => state.ui);
   const [checksIsLoading, setChecksIsLoading] = useState(false);
   const [form, setForm] = useState({
     ttl: checkTTL ? (checkTTL / SECONDS_PER_DAY).toString() : 0,
@@ -188,6 +189,26 @@ const Settings = ({ isAdmin }) => {
             />
           </Stack>
         </ConfigBox>
+        <ConfigBox>
+          <Box>
+            <Typography component="h1">Appearance</Typography>
+            <Typography sx={{ mt: theme.spacing(2), mb: theme.spacing(2) }}>
+              Switch between light and dark mode.
+            </Typography>
+          </Box>
+          <Stack gap={theme.spacing(20)}>
+            <Select
+              id="theme-mode"
+              label="Theme Mode"
+              value={mode}
+              onChange={(e) => {
+                dispatch(setMode(e.target.value));
+              }}
+              items={[{_id:'light', name:'Light'},{_id:'dark', name:'Dark'}]}
+            >
+            </Select>
+          </Stack>
+        </ConfigBox>
         {isAdmin && (
           <ConfigBox>
             <Box>