Merge pull request #508 from bluewave-labs/feat/create-monitor-notifications

Add monitor notifications to state

Client/src/Pages/Auth/index.css

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

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

@@ -18,7 +18,8 @@
 .create-monitor p.MuiTypography-root {
   color: var(--env-var-color-2);
 }
-.create-monitor h6.MuiTypography-root {
+.create-monitor h6.MuiTypography-root,
+.create-monitor .MuiBox-root .field + p.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
   opacity: 0.8;
 }

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

@@ -12,6 +12,7 @@ import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
+import { createToast } from "../../../Utils/toastUtils";
 
 const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -20,86 +21,88 @@ const CreateMonitor = () => {
   const navigate = useNavigate();
   const theme = useTheme();
 
+  const idMap = {
+    "monitor-url": "url",
+    "monitor-name": "name",
+    "monitor-checks-http": "type",
+    "monitor-checks-ping": "type",
+    "notify-email-default": "notification-email",
+  };
+
+  const [monitor, setMonitor] = useState({
+    url: "",
+    name: "",
+    type: "",
+    notifications: [],
+    interval: 1,
+  });
+  const [https, setHttps] = useState(true);
   const [errors, setErrors] = useState({});
 
-  //General Settings Form
-  const [generalSettings, setGeneralSettings] = useState({ url: "", name: "" });
-  //Checks Form
-  const [checks, setChecks] = useState({
-    type: "",
-    //  port: ""
-  });
-  //Incidents Form
-  // const [notifications, setNotifications] = useState({
-  //   viaSms: false,
-  //   viaEmail: false,
-  //   viaOther: false,
-  //   email: "",
-  // });
-  //Advanced Settings Form
-  const [advancedSettings, setAdvancedSettings] = useState({
-    interval: 1,
-    // retries: "",
-    // codes: "",
-    // redirects: "",
-  });
-  //Proxy Settings Form
-  // const [proxy, setProxy] = useState({
-  //   enabled: false,
-  //   protocol: "",
-  //   address: "",
-  //   proxy_port: "",
-  // });
+  const handleChange = (event, name) => {
+    const { value, id } = event.target;
+    if (!name) name = idMap[id];
 
-  const handleChange = (event, id, setState, checkbox) => {
-    const { value } = event.target;
-    setState((prev) => ({
-      ...prev,
-      [id]: checkbox ? true : value,
-    }));
+    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 {
+      setMonitor((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
 
-    const validation = monitorValidation.validate(
-      { [id]: value },
-      { abortEarly: false }
-    );
+      const { error } = monitorValidation.validate(
+        { [name]: value },
+        { abortEarly: false }
+      );
 
-    setErrors((prev) => {
-      const updatedErrors = { ...prev };
-
-      if (validation.error) {
-        updatedErrors[id] = validation.error.details[0].message;
-      } else {
-        delete updatedErrors[id];
-      }
-      return updatedErrors;
-    });
+      setErrors((prev) => {
+        const updatedErrors = { ...prev };
+        if (error) updatedErrors[name] = error.details[0].message;
+        else delete updatedErrors[name];
+        return updatedErrors;
+      });
+    }
   };
-  // const handleCheck = (id, setState) => {
-  //   setState((prev) => ({
-  //     ...prev,
-  //     [id]: !prev[id],
-  //   }));
-  // };
 
   const handleCreateMonitor = async (event) => {
     event.preventDefault();
     //obj to submit
-    let monitor = {
+    let form = {
       url:
         //preprending protocol for url
-        checks.type === "http" || checks.type === "https"
-          ? `${checks.type}://` + generalSettings.url
-          : generalSettings.url,
-      name:
-        generalSettings.name === ""
-          ? generalSettings.url
-          : generalSettings.name,
-      //there is no separate monitor type for https since the operations for the two protocols are identical
-      //however the URL does need the correct prepend hence https is still being tracked but overwritten when prepping the monitor obj
-      type: checks.type === "https" ? "http" : checks.type,
+        monitor.type === "http"
+          ? `http${https ? "s" : ""}://` + monitor.url
+          : monitor.url,
+      name: monitor.name === "" ? monitor.url : monitor.name,
+      type: monitor.type,
+      interval: monitor.interval * MS_PER_MINUTE,
     };
 
-    const { error } = monitorValidation.validate(monitor, {
+    const { error } = monitorValidation.validate(form, {
       abortEarly: false,
     });
 
@@ -109,29 +112,27 @@ const CreateMonitor = () => {
         newErrors[err.path[0]] = err.message;
       });
       setErrors(newErrors);
+      createToast({ body: "Error validation data." });
     } else {
-      monitor = {
-        ...monitor,
-        description: monitor.name,
+      form = {
+        ...form,
+        description: form.name,
         userId: user._id,
-        // ...advancedSettings
-        interval: advancedSettings.interval * MS_PER_MINUTE,
+        notifications: monitor.notifications,
       };
-      try {
-        const action = await dispatch(
-          createUptimeMonitor({ authToken, monitor })
-        );
-        if (action.meta.requestStatus === "fulfilled") {
-          navigate("/monitors");
-        }
-      } catch (error) {
-        alert(error);
+      const action = await dispatch(
+        createUptimeMonitor({ authToken, monitor: form })
+      );
+      if (action.meta.requestStatus === "fulfilled") {
+        createToast({ body: "Monitor created successfully!" });
+        navigate("/monitors");
+      } else {
+        createToast({ body: "Failed to create monitor." });
       }
     }
   };
 
   //select values
-  // const ports = ["Port 1", "Port 2", "Port 3"];
   const frequencies = [
     { _id: 1, name: "1 minute" },
     { _id: 2, name: "2 minutes" },
@@ -175,19 +176,13 @@ const CreateMonitor = () => {
           </Box>
           <Stack gap={theme.gap.xl}>
             <Field
-              type={
-                checks.type === "http" || checks.type === "https"
-                  ? "url"
-                  : "text"
-              }
+              type={monitor.type === "http" ? "url" : "text"}
               id="monitor-url"
               label="URL to monitor"
-              https={checks.type === "https"}
+              https={https}
               placeholder="google.com"
-              value={generalSettings.url}
-              onChange={(event) =>
-                handleChange(event, "url", setGeneralSettings)
-              }
+              value={monitor.url}
+              onChange={handleChange}
               error={errors["url"]}
             />
             <Field
@@ -196,10 +191,8 @@ const CreateMonitor = () => {
               label="Friendly name"
               isOptional={true}
               placeholder="Google"
-              value={generalSettings.name}
-              onChange={(event) =>
-                handleChange(event, "name", setGeneralSettings)
-              }
+              value={monitor.name}
+              onChange={handleChange}
               error={errors["name"]}
             />
           </Stack>
@@ -219,33 +212,27 @@ const CreateMonitor = () => {
                 desc="Use HTTP(s) to monitor your website or API endpoint."
                 size="small"
                 value="http"
-                checked={checks.type === "http" || checks.type === "https"}
-                onChange={(event) => handleChange(event, "type", setChecks)}
+                checked={monitor.type === "http"}
+                onChange={(event) => handleChange(event)}
               />
-              {checks.type === "http" || checks.type === "https" ? (
+              {monitor.type === "http" ? (
                 <ButtonGroup sx={{ ml: "32px" }}>
                   <Button
                     level="secondary"
-                    label="HTTP"
-                    onClick={() =>
-                      setChecks((prev) => ({ ...prev, type: "http" }))
-                    }
+                    label="HTTPS"
+                    onClick={() => setHttps(true)}
                     sx={{
                       backgroundColor:
-                        checks.type === "http" &&
-                        theme.palette.otherColors.fillGray,
+                        https && theme.palette.otherColors.fillGray,
                     }}
                   />
                   <Button
                     level="secondary"
-                    label="HTTPS"
-                    onClick={() =>
-                      setChecks((prev) => ({ ...prev, type: "https" }))
-                    }
+                    label="HTTP"
+                    onClick={() => setHttps(false)}
                     sx={{
                       backgroundColor:
-                        checks.type === "https" &&
-                        theme.palette.otherColors.fillGray,
+                        !https && theme.palette.otherColors.fillGray,
                     }}
                   />
                 </ButtonGroup>
@@ -259,35 +246,9 @@ const CreateMonitor = () => {
               desc="Check whether your server is available or not."
               size="small"
               value="ping"
-              checked={checks.type === "ping"}
-              onChange={(event) => handleChange(event, "type", setChecks)}
+              checked={monitor.type === "ping"}
+              onChange={(event) => handleChange(event)}
             />
-            {/* TODO */}
-            {/* <RadioButton
-              id="monitor-checks-port"
-              title="Port monitoring"
-              desc="Monitor a specific service on your server."
-              value="port"
-              checked={checks.type === "port"}
-              onChange={(event) => handleChange(event, "type", setChecks)}
-            />
-            <div className="monitors-dropdown-holder">
-              <Select
-                id="monitor-ports"
-                value={checks.port || "placeholder"}
-                inputProps={{ id: "monitor-ports-select" }}
-                onChange={(event) => handleChange(event, "port", setChecks)}
-              >
-                <MenuItem id="port-placeholder" value="placeholder">
-                  Select a port to check
-                </MenuItem>
-                {ports.map((port, index) => (
-                  <MenuItem key={`port-${index}`} value={port}>
-                    {port}
-                  </MenuItem>
-                ))}
-              </Select>
-            </div> */}
             <Box className="error-container">
               {errors["type"] ? (
                 <Typography component="p" className="input-error">
@@ -299,36 +260,62 @@ const CreateMonitor = () => {
             </Box>
           </Stack>
         </Stack>
-
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Incident notifications</Typography>
             <Typography component="p" mt={theme.gap.small}>
-              When there is an incident, notify users
+              When there is an incident, notify users.
             </Typography>
           </Box>
-          <Stack gap={theme.gap.large}>
+          <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)" />
+            <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"
+              )}
+              value={user?.email}
+              onChange={(event) => handleChange(event)}
             />
             <Checkbox
               id="notify-email"
-              label="Also notify via email to the following addresses:"
-            />
-            <Field
-              id="notify-email-list"
-              type="text"
-              label="You can separate multiple emails with a comma"
-              placeholder="name@gmail.com"
+              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">
           <Box>
             <Typography component="h2">Advanced settings</Typography>
@@ -337,10 +324,8 @@ const CreateMonitor = () => {
             <Select
               id="monitor-interval"
               label="Check frequency"
-              value={advancedSettings.interval || 1}
-              onChange={(event) =>
-                handleChange(event, "interval", setAdvancedSettings)
-              }
+              value={monitor.interval || 1}
+              onChange={(event) => handleChange(event, "interval")}
               items={frequencies}
             />
             {/* TODO */}

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

@@ -39,7 +39,7 @@
   min-width: 100px;
   border: solid 1px;
   border-radius: var(--env-var-radius-1);
-  padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+  padding: var(--env-var-spacing-1) 18px;
   background-color: var(--env-var-color-8);
 }
 .monitor-details .stat-box:not(:first-of-type) {

Client/src/Pages/Monitors/index.jsx

@@ -111,7 +111,12 @@ const Monitors = () => {
           ),
         },
         { id: idx + 2, data: <ResponseTimeChart checks={reversedChecks} /> },
-        { id: idx + 3, data: monitor.type },
+        {
+          id: idx + 3,
+          data: (
+            <span style={{ textTransform: "uppercase" }}>{monitor.type}</span>
+          ),
+        },
         { id: idx + 4, data: "TODO" },
       ],
     };

Client/src/Pages/Settings/index.css

@@ -29,6 +29,7 @@
   padding-bottom: 60px;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
+  background-color: var(--env-var-color-8);
 }
 .settings .config-box .MuiBox-root,
 .settings .config-box .MuiStack-root {
@@ -39,4 +40,4 @@
   display: flex;
   flex-direction: column;
   gap: var(--env-var-spacing-4);
-}
+}