Merge remote-tracking branch 'upstream/develop' into feat/fe/monitor-refactor

Client/src/Pages/Incidents/index.jsx

@@ -57,7 +57,6 @@ const Incidents = () => {
         null,
         null
       );
-      console.log(res);
       // Reduce to a lookup object for 0(1) lookup
       if (res.data && res.data.data.length > 0) {
         const monitorLookup = res.data.data.reduce((acc, monitor) => {

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css

@@ -23,7 +23,7 @@
 }
 
 .duration-config .field-text .MuiTextField-root,
-.duration-config .field {
+.maintenance-options .duration-config .field {
   width: 70px;
   min-width: 70px;
   max-width: 70px;

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx

@@ -10,6 +10,9 @@ import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
 import Field from "../../../Components/Inputs/Field";
+import { maintenanceWindowValidation } from "../../../Validation/validation";
+import { logger } from "../../../Utils/Logger";
+import { createToast } from "../../../Utils/toastUtils";
 
 const directory = {
   title: "Create a maintenance window",
@@ -59,9 +62,10 @@ const CreateNewMaintenanceWindow = () => {
     startTime: dayjs(),
     duration: "60",
     unit: "minutes",
-    friendlyName: "",
+    displayName: "",
     AddMonitors: "",
   });
+  const [errors, setErrors] = useState({});
 
   const handleChange = (event, name) => {
     const { value } = event.target;
@@ -71,6 +75,41 @@ const CreateNewMaintenanceWindow = () => {
     }));
   };
 
+  const handleSubmit = async () => {
+    const data = {
+      repeat: values.repeat,
+      date: values.date.format("YYYY-MM-DD"),
+      startTime: values.startTime.format("HH:mm"),
+      duration: values.duration,
+      unit: values.unit,
+      displayName: values.displayName,
+      addMonitors: values.AddMonitors,
+    };
+
+    const { error } = maintenanceWindowValidation.validate(data, {
+      abortEarly: false,
+    });
+    logger.log("error: ", error);
+    if (!error || error.details.length === 0) {
+      setErrors({});
+    } else {
+      const newErrors = {};
+      error.details.forEach((err) => {
+        newErrors[err.path[0]] = err.message;
+      });
+      setErrors(newErrors);
+      createToast({
+        body:
+          error.details && error.details.length > 0
+            ? error.details[0].message
+            : "Error validating data",
+      });
+      logger.error("Validation errors:", error.details);
+    }
+
+    logger.log("Submitting data: ", data);
+  };
+
   const configOptions = [
     {
       title: "Repeat",
@@ -126,6 +165,8 @@ const CreateNewMaintenanceWindow = () => {
             placeholder="60"
             onChange={(e) => handleChange(e, "duration")}
             value={values.duration}
+            error={errors.duration}
+            type="number"
           />
           <Select
             onChange={(e) => handleChange(e, "unit")}
@@ -137,13 +178,14 @@ const CreateNewMaintenanceWindow = () => {
       ),
     },
     {
-      title: "Friendly name",
+      title: "Display name",
       component: (
         <Field
-          id="friendly-name"
+          id="display-name"
           placeholder="Maintanence at __ : __ for ___ minutes"
-          value={values.friendlyName}
-          onChange={(e) => handleChange(e, "friendlyName")}
+          value={values.displayName}
+          onChange={(e) => handleChange(e, "displayName")}
+          error={errors.displayName}
         />
       ),
     },
@@ -160,6 +202,7 @@ const CreateNewMaintenanceWindow = () => {
             placeholder="Start typing to search for current monitors"
             value={values.AddMonitors}
             onChange={(e) => handleChange(e, "AddMonitors")}
+            error={errors.addMonitors}
           />
           <Typography
             sx={{
@@ -246,6 +289,7 @@ const CreateNewMaintenanceWindow = () => {
             }}
             level="primary"
             label="Create"
+            onClick={handleSubmit}
           />
         </Stack>
       </Stack>

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

@@ -314,7 +314,7 @@ const Configure = () => {
                 <Field
                   type="text"
                   id="monitor-name"
-                  label="Friendly name"
+                  label="Display name"
                   isOptional={true}
                   placeholder="Google"
                   value={monitor?.name || ""}

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

@@ -1,13 +1,11 @@
 .create-monitor h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
   color: var(--env-var-color-1);
-}
-.create-monitor h1.MuiTypography-root,
-.create-monitor h2.MuiTypography-root {
-  font-weight: 600;
+  font-weight: 500;
 }
 .create-monitor h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
+  font-weight: 600;
 }
 .create-monitor p.MuiTypography-root,
 .create-monitor button.MuiButtonBase-root {

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

@@ -122,7 +122,6 @@ const CreateMonitor = () => {
         userId: user._id,
         notifications: monitor.notifications,
       };
-      console.log(form);
       const action = await dispatch(
         createUptimeMonitor({ authToken, monitor: form })
       );
@@ -159,9 +158,20 @@ const CreateMonitor = () => {
         noValidate
         spellCheck="false"
         gap={theme.gap.large}
-        mt={theme.gap.mlplus}
+        mt={theme.gap.medium}
       >
-        <Typography component="h1">Create new monitor</Typography>
+        <Typography component="h1">
+          <Typography
+            component="span"
+            fontSize="inherit"
+            color={theme.palette.otherColors.bluishGray}
+          >
+            Create your{" "}
+          </Typography>
+          <Typography component="span" fontSize="inherit" fontWeight="inherit">
+            monitor
+          </Typography>
+        </Typography>
         <Stack className="config-box">
           <Box>
             <Typography component="h2">General settings</Typography>
@@ -184,7 +194,7 @@ const CreateMonitor = () => {
             <Field
               type="text"
               id="monitor-name"
-              label="Friendly name"
+              label="Display name"
               isOptional={true}
               placeholder="Google"
               value={monitor.name}
@@ -391,9 +401,9 @@ const CreateMonitor = () => {
       /> */}
         <Stack direction="row" justifyContent="flex-end">
           <Button
-            id="create-new-monitor-btn"
+            id="create-monitor-btn"
             level="primary"
-            label="Create new monitor"
+            label="Create monitor"
             onClick={handleCreateMonitor}
             disabled={Object.keys(errors).length !== 0 && true}
           />

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

@@ -1,18 +1,20 @@
-.monitors h1.MuiTypography-root,
-.monitors h2.MuiTypography-root {
-  color: var(--env-var-color-1);
-  font-weight: 600;
-}
 .monitors h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
+  color: var(--env-var-color-1);
+  font-weight: 500;
 }
 .monitors h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-5);
+  font-weight: 500;
 }
 .monitors p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
 }
+.monitors h1.MuiTypography-root + p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium-plus);
+}
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium);
   height: var(--env-var-height-2);
@@ -31,7 +33,7 @@
   border-radius: 50%;
   font-size: var(--env-var-font-size-medium);
   font-weight: 500;
-  color: var(--env-var-color-5);
+  color: var(--env-var-color-1);
   margin-left: 10px;
   line-height: 0.8;
 }

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

@@ -223,7 +223,7 @@ const PageSpeedConfigure = () => {
             </Stack>
             <Stack gap={theme.gap.xl}>
               <Stack direction="row">
-                <Typography component="h3">Monitor friendly name</Typography>
+                <Typography component="h3">Monitor display name</Typography>
                 <Field
                   type="text"
                   id="monitor-name"

Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx

@@ -116,7 +116,7 @@ const CreatePageSpeed = () => {
         <Typography component="h1">Create pagespeed monitor</Typography>
         <Stack gap={theme.gap.xl}>
           <Stack direction="row">
-            <Typography component="h3">Monitor friendly name</Typography>
+            <Typography component="h3">Monitor display name</Typography>
             <Field
               type="text"
               id="monitor-name"