Merge pull request #517 from bluewave-labs/feat/configure-monitor-notifications

Configure monitor notifications

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -77,6 +77,7 @@ export const updateUptimeMonitor = createAsyncThunk(
         name: monitor.name,
         description: monitor.description,
         interval: monitor.interval,
+        notifications: monitor.notifications
       };
       const res = await axiosInstance.post(
         `/monitors/edit/${monitor._id}`,

Client/src/Pages/Account/index.css

@@ -31,6 +31,9 @@
 .account .MuiButtonGroup-root button {
   border-color: var(--env-var-color-16);
 }
+.account button{
+  height: 34px;
+}
 .account [class$="-form"] {
   width: inherit;
 }

Client/src/Pages/Auth/index.css

@@ -103,7 +103,7 @@
 /* ///// */
 .login-page
   .MuiStack-root:not(:has(> .MuiButtonBase-root))
-  span:not(.MuiTypography-root) {
+  span:not(.MuiTypography-root):not(.field-required) {
   color: var(--env-var-color-3);
   cursor: pointer;
   font-weight: 600;

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

@@ -12,6 +12,9 @@
 .configure-monitor .MuiSelect-select {
   color: var(--env-var-color-5);
 }
+.configure-monitor .MuiModal-root h2.MuiTypography-root {
+  color: var(--env-var-color-1);
+}
 .configure-monitor p.MuiTypography-root,
 .configure-monitor .MuiSelect-select {
   font-size: var(--env-var-font-size-medium);
@@ -51,6 +54,9 @@
   position: absolute;
   top: 100%;
 }
+.configure-monitor .MuiInputBase-root:has(> .Mui-disabled) {
+  background-color: var(--env-var-color-13);
+}
 
 .MuiInputBase-root:has(#monitor-interval) {
   height: 34px;

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

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Modal, Stack, Typography } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
@@ -20,6 +20,8 @@ import {
   getUptimeMonitorsByUserId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import Checkbox from "../../../Components/Inputs/Checkbox";
+
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -55,7 +57,7 @@ const Configure = () => {
   const navigate = useNavigate();
   const theme = useTheme();
   const dispatch = useDispatch();
-  const { authToken } = useSelector((state) => state.auth);
+  const { user, authToken } = useSelector((state) => state.auth);
   const { monitors } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState();
   const [duration, setDuration] = useState(0);
@@ -67,6 +69,7 @@ const Configure = () => {
     "monitor-name": "name",
     "monitor-checks-http": "type",
     "monitor-checks-ping": "type",
+    "notify-email-default": "notification-email",
   };
 
   useEffect(() => {
@@ -80,27 +83,55 @@ const Configure = () => {
   const handleChange = (event, name) => {
     let { value, id } = event.target;
     if (!name) name = idMap[id];
-    if (name === "interval") {
-      value = value * MS_PER_MINUTE;
+
+    if (name.includes("notification-")) {
+      name = name.replace("notification-", "");
+      let hasNotif = monitor.notifications.some(
+        (notification) => notification.type === name
+      );
+      setMonitor((prev) => {
+        const notifs = [...prev.notifications];
+        if (hasNotif) {
+          return {
+            ...prev,
+            notifications: notifs.filter((notif) => notif.type !== name),
+          };
+        } else {
+          return {
+            ...prev,
+            notifications: [
+              ...notifs,
+              name === "email"
+                ? { type: name, address: value }
+                : // TODO - phone number
+                  { type: name, phone: value },
+            ],
+          };
+        }
+      });
+    } else {
+      if (name === "interval") {
+        value = value * MS_PER_MINUTE;
+      }
+      setMonitor((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+
+      const validation = monitorValidation.validate(
+        { [name]: value },
+        { abortEarly: false }
+      );
+
+      setErrors((prev) => {
+        const updatedErrors = { ...prev };
+
+        if (validation.error)
+          updatedErrors[name] = validation.error.details[0].message;
+        else delete updatedErrors[name];
+        return updatedErrors;
+      });
     }
-    setMonitor((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-
-    const validation = monitorValidation.validate(
-      { [name]: value },
-      { abortEarly: false }
-    );
-
-    setErrors((prev) => {
-      const updatedErrors = { ...prev };
-
-      if (validation.error)
-        updatedErrors[name] = validation.error.details[0].message;
-      else delete updatedErrors[name];
-      return updatedErrors;
-    });
   };
 
   const handleSubmit = async (event) => {
@@ -116,9 +147,9 @@ const Configure = () => {
     }
   };
 
-  const hanldeRemove = async (event) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleRemove = async (event) => {
     event.preventDefault();
-    // TODO add confirm
     const action = await dispatch(deleteUptimeMonitor({ authToken, monitor }));
     if (action.meta.requestStatus === "fulfilled") {
       navigate("/monitors");
@@ -139,6 +170,8 @@ const Configure = () => {
   const parsedUrl = parseUrl(monitor?.url);
   const protocol = parsedUrl?.protocol?.replace(":", "") || "";
 
+  var lastChecked = formatDurationRounded(getLastChecked(monitor?.checks));
+
   return (
     <Box className="configure-monitor">
       <Button
@@ -161,10 +194,18 @@ const Configure = () => {
         <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
           {monitor?.status ? <GreenCheck /> : <RedCheck />}
           <Box>
-            <Typography component="h1" sx={{ lineHeight: 1 }}>
-              {parsedUrl?.host || "..."}
-            </Typography>
-            <Typography mt={theme.gap.small}>
+            {parsedUrl?.host ? (
+              <Typography
+                component="h1"
+                mb={theme.gap.small}
+                sx={{ lineHeight: 1 }}
+              >
+                {parsedUrl.host || "..."}
+              </Typography>
+            ) : (
+              ""
+            )}
+            <Typography lineHeight={parsedUrl?.host ? 1 : theme.gap.large}>
               <Typography
                 component="span"
                 sx={{
@@ -175,8 +216,8 @@ const Configure = () => {
               >
                 Your site is {monitor?.status ? "up" : "down"}.
               </Typography>{" "}
-              Checking every {duration}. Last time checked{" "}
-              {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
+              Checking every {duration}.{" "}
+              {lastChecked ? `Last time checked ${lastChecked} ago.` : ""}
             </Typography>
           </Box>
           <Stack
@@ -208,7 +249,7 @@ const Configure = () => {
                 boxShadow: "none",
                 px: theme.gap.ml,
               }}
-              onClick={hanldeRemove}
+              onClick={() => setIsOpen(true)}
             />
           </Stack>
         </Stack>
@@ -248,6 +289,69 @@ const Configure = () => {
             />
           </Stack>
         </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">Incident notifications</Typography>
+            <Typography component="p" mt={theme.gap.small}>
+              When there is an incident, notify users.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.medium}>
+            <Typography component="p" mt={theme.gap.small}>
+              When there is a new incident,
+            </Typography>
+            <Checkbox
+              id="notify-sms"
+              label="Notify via SMS (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => console.log("disabled")}
+              isDisabled={true}
+            />
+            <Checkbox
+              id="notify-email-default"
+              label={`Notify via email (to ${user.email})`}
+              isChecked={
+                monitor?.notifications?.some(
+                  (notification) => notification.type === "email"
+                ) || false
+              }
+              value={user?.email}
+              onChange={(event) => handleChange(event)}
+            />
+            <Checkbox
+              id="notify-email"
+              label="Also notify via email to multiple addresses (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => console.log("disabled")}
+              isDisabled={true}
+            />
+            {monitor?.notifications?.some(
+              (notification) => notification.type === "emails"
+            ) ? (
+              <Box mx={`calc(${theme.gap.ml} * 2)`}>
+                <Field
+                  id="notify-email-list"
+                  type="text"
+                  placeholder="name@gmail.com"
+                  value=""
+                  onChange={() => console.log("disabled")}
+                />
+                <Typography mt={theme.gap.small}>
+                  You can separate multiple emails with a comma
+                </Typography>
+              </Box>
+            ) : (
+              ""
+            )}
+          </Stack>
+        </Stack>
         <Stack
           className="config-box"
           direction="row"
@@ -271,11 +375,57 @@ const Configure = () => {
           <Button
             level="primary"
             label="Save"
-            sx={{ px: theme.gap.ml }}
+            sx={{ px: theme.gap.large }}
             onClick={handleSubmit}
           />
         </Stack>
       </form>
+      <Modal
+        aria-labelledby="modal-delete-monitor"
+        aria-describedby="delete-monitor-confirmation"
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        disablePortal
+      >
+        <Stack
+          gap={theme.gap.xs}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-delete-monitor" component="h2">
+            Really delete this monitor?
+          </Typography>
+          <Typography id="delete-monitor-confirmation">
+            Once deleted, this monitor cannot be retrieved back.
+          </Typography>
+          <Stack
+            direction="row"
+            gap={theme.gap.small}
+            mt={theme.gap.large}
+            justifyContent="flex-end"
+          >
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => setIsOpen(false)}
+            />
+            <Button level="error" label="Delete" onClick={handleRemove} />
+          </Stack>
+        </Stack>
+      </Modal>
     </Box>
   );
 };

Client/src/Pages/Settings/index.jsx

@@ -110,7 +110,7 @@ const Settings = () => {
           </Box>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
-          <Button level="primary" label="Save" />
+          <Button level="primary" label="Save" sx={{ px: theme.gap.large }} />
         </Stack>
       </form>
     </Box>

Server/validation/joi.js

@@ -160,6 +160,7 @@ const editMonitorBodyValidation = joi.object({
   name: joi.string(),
   description: joi.string(),
   interval: joi.number(),
+  notifications: joi.array().items(joi.object()),
 });
 
 //****************************************