diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 53bcb2c27..cad8a4ebd 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -24,6 +24,7 @@ import withAdminCheck from "./HOC/withAdminCheck"; import Configure from "./Pages/Monitors/Configure"; import PageSpeed from "./Pages/PageSpeed"; import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed"; +import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow"; import PageSpeedDetails from "./Pages/PageSpeed/Details"; function App() { @@ -70,6 +71,10 @@ function App() { path="maintenance" element={} /> + } + /> } diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 2a580d512..3f89de700 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -135,7 +135,9 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => { {displayData.map((row) => { return ( diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx index d76abc196..063ce3b16 100644 --- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx +++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx @@ -8,7 +8,12 @@ const ResponseTimeChart = ({ checks = [] }) => { return (
- + {normalizedChecks.map((check, index) => ( { const handleNewPasswordRejected = (state, action) => { state.isLoading = false; state.success = false; - state.msg = action.payload - ? action.payload.msg - : "Failed to reset password."; + state.msg = action.payload ? action.payload.msg : "Failed to reset password."; }; const authSlice = createSlice({ diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js index 05c182f5f..52a02cd55 100644 --- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js +++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js @@ -77,9 +77,9 @@ export const updateUptimeMonitor = createAsyncThunk( name: monitor.name, description: monitor.description, interval: monitor.interval, - notifications: monitor.notifications + notifications: monitor.notifications, }; - const res = await axiosInstance.post( + const res = await axiosInstance.put( `/monitors/edit/${monitor._id}`, updatedFields, { @@ -104,16 +104,12 @@ export const deleteUptimeMonitor = createAsyncThunk( async (data, thunkApi) => { try { const { authToken, monitor } = data; - const res = await axiosInstance.post( - `/monitors/delete/${monitor._id}`, - {}, - { - headers: { - Authorization: `Bearer ${authToken}`, - "Content-Type": "application/json", - }, - } - ); + const res = await axiosInstance.delete(`/monitors/${monitor._id}`, { + headers: { + Authorization: `Bearer ${authToken}`, + "Content-Type": "application/json", + }, + }); return res.data; } catch (error) { if (error.response && error.response.data) { diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css new file mode 100644 index 000000000..a799bf0af --- /dev/null +++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css @@ -0,0 +1,21 @@ +.maintenance-options > .MuiStack-root > .MuiStack-root.select-wrapper { + width: 380px; +} + +.date-picker .MuiOutlinedInput-root, +.time-picker .MuiOutlinedInput-root { + height: 34px; + font-size: var(--env-var-font-size-medium); +} + +.date-picker .MuiOutlinedInput-root { + width: 140px; +} + +.time-picker .MuiOutlinedInput-root { + width: 90px; +} + +.MuiInputAdornment-outlined .MuiIconButton-root svg { + width: 20px; +} diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx new file mode 100644 index 000000000..aea012e2c --- /dev/null +++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx @@ -0,0 +1,151 @@ +import { Box, Stack, Typography } from "@mui/material"; +import "./index.css"; +import React, { useState } from "react"; +import Button from "../../../Components/Button"; +import Back from "../../../assets/icons/left-arrow.svg?react"; +import Select from "../../../Components/Inputs/Select"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +import dayjs from "dayjs"; +import { DatePicker } from "@mui/x-date-pickers/DatePicker"; +import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker"; + +const directory = { + title: "Create a maintenance window", + description: "Your pings won’t be sent in this time frame.", +}; + +const repeatOptions = [ + { _id: 1, name: "Don't repeat" }, + { _id: 2, name: "Repeat daily" }, + { _id: 3, name: "Repeat weekly" }, +]; + +const configOptionTitle = (title, description) => { + return ( + + + {title} + + {description && ( + + {description} + + )} + + ); +}; + +const CreateNewMaintenanceWindow = () => { + const [values, setValues] = useState({ + repeat: 1, + }); + + const handleChange = (event, name) => { + const { value } = event.target; + setValues((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const configOptions = [ + { + title: "Repeat", + component: ( +