Purged outdated code
This commit is contained in:
Daniel Cojocea committed
1 parent
637641f44f
commit
91a2a72bf2
5 files changed
+24
-334
No files matched your search
+2
-2
@@ -25,7 +25,7 @@ import withAdminProp from "./HOC/withAdminProp";
|
||||
import Configure from "./Pages/Monitors/Configure";
|
||||
import PageSpeed from "./Pages/PageSpeed";
|
||||
import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
|
||||
import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
|
||||
import CreateMaintenance from "./Pages/Maintenance/CreateMaintenance";
|
||||
import PageSpeedDetails from "./Pages/PageSpeed/Details";
|
||||
import PageSpeedConfigure from "./Pages/PageSpeed/Configure";
|
||||
import { ThemeProvider } from "@emotion/react";
|
||||
@@ -89,7 +89,7 @@ function App() {
|
||||
/>
|
||||
<Route
|
||||
path="/maintenance/create"
|
||||
element={<CreateNewMaintenanceWindow />}
|
||||
element={<CreateMaintenance />}
|
||||
/>
|
||||
<Route
|
||||
path="settings"
|
||||
|
||||
File renamed without changes.
@@ -0,0 +1,22 @@
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useState } from "react";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
|
||||
import { maintenanceWindowValidation } from "../../../Validation/validation";
|
||||
import { logger } from "../../../Utils/Logger";
|
||||
import { createToast } from "../../../Utils/toastUtils";
|
||||
import Select from "../../../Components/Inputs/Select";
|
||||
import dayjs from "dayjs";
|
||||
import Field from "../../../Components/Inputs/Field";
|
||||
import "./index.css";
|
||||
|
||||
const CreateMaintenance = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return <Box className="create-maintenance"></Box>;
|
||||
};
|
||||
|
||||
export default CreateMaintenance;
|
||||
@@ -1,298 +0,0 @@
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import "./index.css";
|
||||
import { useState } from "react";
|
||||
import Back from "../../../assets/icons/left-arrow-long.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";
|
||||
import Field from "../../../Components/Inputs/Field";
|
||||
import { maintenanceWindowValidation } from "../../../Validation/validation";
|
||||
import { logger } from "../../../Utils/Logger";
|
||||
import { createToast } from "../../../Utils/toastUtils";
|
||||
import { useTheme } from "@emotion/react";
|
||||
|
||||
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 (
|
||||
<Stack width="40%" gap={1}>
|
||||
<Typography
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "var(--env-var-font-size-medium)",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
{description && (
|
||||
<Typography
|
||||
style={{
|
||||
fontSize: "var(--env-var-font-size-small)",
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const durationOptions = [
|
||||
{ _id: "minutes", name: "minutes" },
|
||||
{ _id: "hours", name: "hours" },
|
||||
{ _id: "days", name: "days" },
|
||||
];
|
||||
|
||||
const CreateNewMaintenanceWindow = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
const [values, setValues] = useState({
|
||||
repeat: 1,
|
||||
date: dayjs(),
|
||||
startTime: dayjs(),
|
||||
duration: "60",
|
||||
unit: "minutes",
|
||||
displayName: "",
|
||||
AddMonitors: "",
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
const handleChange = (event, name) => {
|
||||
const { value } = event.target;
|
||||
setValues((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
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",
|
||||
component: (
|
||||
<Select
|
||||
onChange={(e) => handleChange(e, "repeat")}
|
||||
id="repeat-mode"
|
||||
items={repeatOptions}
|
||||
value={values.repeat}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Date",
|
||||
component: (
|
||||
<LocalizationProvider
|
||||
className="date-localization-provider"
|
||||
dateAdapter={AdapterDayjs}
|
||||
>
|
||||
<DatePicker
|
||||
className="date-picker"
|
||||
defaultValue={values.date}
|
||||
onChange={(date) =>
|
||||
handleChange({ target: { value: date } }, "date")
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Start time",
|
||||
component: (
|
||||
<LocalizationProvider
|
||||
className="time-localization-provider"
|
||||
dateAdapter={AdapterDayjs}
|
||||
>
|
||||
<MobileTimePicker
|
||||
className="time-picker"
|
||||
defaultValue={values.startTime}
|
||||
onChange={(time) =>
|
||||
handleChange({ target: { value: time } }, "startTime")
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Duration",
|
||||
component: (
|
||||
<Stack
|
||||
className="duration-config"
|
||||
gap={theme.spacing(5)}
|
||||
direction="row"
|
||||
>
|
||||
<Field
|
||||
id="duration-value"
|
||||
placeholder="60"
|
||||
onChange={(e) => handleChange(e, "duration")}
|
||||
value={values.duration}
|
||||
error={errors.duration}
|
||||
type="number"
|
||||
/>
|
||||
<Select
|
||||
onChange={(e) => handleChange(e, "unit")}
|
||||
id="duration-unit"
|
||||
items={durationOptions}
|
||||
value={values.unit}
|
||||
/>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Display name",
|
||||
component: (
|
||||
<Field
|
||||
id="display-name"
|
||||
placeholder="Maintanence at __ : __ for ___ minutes"
|
||||
value={values.displayName}
|
||||
onChange={(e) => handleChange(e, "displayName")}
|
||||
error={errors.displayName}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Add monitors",
|
||||
component: (
|
||||
<Stack
|
||||
className="add-monitors-fields"
|
||||
sx={{ width: "60%", maxWidth: "380px" }}
|
||||
gap={theme.spacing(5)}
|
||||
>
|
||||
<Field
|
||||
id="add-monitors"
|
||||
placeholder="Start typing to search for current monitors"
|
||||
value={values.AddMonitors}
|
||||
onChange={(e) => handleChange(e, "AddMonitors")}
|
||||
error={errors.addMonitors}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
width: "fit-content",
|
||||
fontSize: "var(--env-var-font-size-small)",
|
||||
borderBottom: `1px dashed ${theme.palette.primary.main}`,
|
||||
paddingBottom: "4px",
|
||||
}}
|
||||
>
|
||||
Add all monitors to this maintenance window
|
||||
</Typography>
|
||||
</Stack>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="create-maintenance-window">
|
||||
<Stack gap={theme.spacing(10)}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
width: "100px",
|
||||
height: "30px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<Back />
|
||||
Back
|
||||
</Button>
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "var(--env-var-font-size-large)",
|
||||
fontWeight: 600,
|
||||
color: theme.palette.text.secondary,
|
||||
}}
|
||||
>
|
||||
{directory.title}
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ fontSize: "var(--env-var-font-size-medium)" }}>
|
||||
{directory.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack
|
||||
className="maintenance-options"
|
||||
gap={theme.spacing(20)}
|
||||
paddingY={theme.spacing(15)}
|
||||
paddingX={theme.spacing(20)}
|
||||
sx={{
|
||||
border: 1,
|
||||
borderColor: theme.palette.border.light,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.background.main,
|
||||
}}
|
||||
>
|
||||
{configOptions.map((item, index) => (
|
||||
<Stack key={index} display="-webkit-inline-box">
|
||||
{item.title && configOptionTitle(item.title, item.description)}
|
||||
{item.component && item.component}
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack justifyContent="end" direction="row" marginTop={3}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
sx={{
|
||||
"&:hover": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" onClick={handleSubmit}>
|
||||
Create
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateNewMaintenanceWindow;
|
||||
@@ -1,34 +0,0 @@
|
||||
.create-monitor p.MuiTypography-root,
|
||||
.create-monitor button.MuiButtonBase-root {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.create-monitor button.MuiButtonBase-root {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.create-monitor .error-container {
|
||||
position: relative;
|
||||
}
|
||||
.create-monitor .error-container p.MuiTypography-root.input-error {
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
|
||||
position: relative;
|
||||
}
|
||||
.create-monitor span.MuiTypography-root.input-error {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.create-monitor .MuiStack-root .MuiButtonGroup-root button {
|
||||
font-size: var(--env-var-font-size-small);
|
||||
height: 28px;
|
||||
padding: 8px;
|
||||
}
|
||||
Reference in new issue
Block a user