Merge pull request #688 from MuhammadKhalilzadeh/FE-Maintenance-Window-functionality

Marshal data, logging it, creating post req, send to BE

Client/package-lock.json

@@ -18,7 +18,7 @@
         "@mui/x-data-grid": "7.3.2",
         "@mui/x-date-pickers": "7.3.2",
         "@reduxjs/toolkit": "2.2.5",
-        "axios": "1.7.4",
+        "axios": "^1.7.4",
         "chart.js": "^4.4.3",
         "dayjs": "1.11.11",
         "joi": "17.13.1",

Client/package.json

@@ -20,7 +20,7 @@
     "@mui/x-data-grid": "7.3.2",
     "@mui/x-date-pickers": "7.3.2",
     "@reduxjs/toolkit": "2.2.5",
-    "axios": "1.7.4",
+    "axios": "^1.7.4",
     "chart.js": "^4.4.3",
     "dayjs": "1.11.11",
     "joi": "17.13.1",

Client/src/Components/Inputs/Field/index.jsx

@@ -181,7 +181,14 @@ const Field = forwardRef(
 Field.displayName = "Field";
 
 Field.propTypes = {
-  type: PropTypes.oneOf(["text", "password", "url", "email", "description"]),
+  type: PropTypes.oneOf([
+    "text",
+    "password",
+    "url",
+    "email",
+    "description",
+    "number",
+  ]),
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
   https: PropTypes.bool,

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",
@@ -62,6 +65,7 @@ const CreateNewMaintenanceWindow = () => {
     friendlyName: "",
     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,
+      friendlyName: values.friendlyName,
+      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")}
@@ -144,6 +185,7 @@ const CreateNewMaintenanceWindow = () => {
           placeholder="Maintanence at __ : __ for ___ minutes"
           value={values.friendlyName}
           onChange={(e) => handleChange(e, "friendlyName")}
+          error={errors.friendlyName}
         />
       ),
     },
@@ -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/Validation/validation.js

@@ -111,4 +111,43 @@ const imageValidation = joi.object({
     }),
 });
 
-export { credentials, imageValidation, monitorValidation };
+const maintenanceWindowValidation = joi.object({
+  repeat: joi.number().valid(1, 2, 3).required().messages({
+    "number.base": "Repeat must be a number.",
+    "any.only": "Repeat must be one of [1, 2, 3].",
+    "any.required": "Repeat is required.",
+  }),
+  date: joi.date().required().messages({
+    "date.base": "Date must be a valid date.",
+    "any.required": "Date is required.",
+  }),
+  startTime: joi.string().required().messages({
+    "string.base": "Start time must be a valid time.",
+    "any.required": "Start time is required.",
+  }),
+  duration: joi.number().required().messages({
+    "number.empty": "duration is required.",
+    "number.base": "Duration must be a number.",
+    "any.required": "Duration is required.",
+  }),
+  unit: joi.string().valid("minutes", "hours", "days").required().messages({
+    "string.base": "Unit must be a string.",
+    "any.only": "Unit must be one of ['minutes', 'hours', 'days'].",
+    "any.required": "Unit is required.",
+  }),
+  friendlyName: joi.string().max(50).required().messages({
+    "string.empty": "Friendly name is required.",
+    "string.max": "Friendly name must be less than 50 characters long",
+  }),
+  addMonitors: joi.string().max(50).required().messages({
+    "string.empty": "Add monitors is required.",
+    "string.max": "Add monitors must be less than 50 characters long",
+  }),
+});
+
+export {
+  credentials,
+  imageValidation,
+  monitorValidation,
+  maintenanceWindowValidation,
+};