diff --git a/client/src/Pages/PageSpeed/Configure/index.css b/client/src/Pages/PageSpeed/Configure/index.css deleted file mode 100644 index 89a7c3466..000000000 --- a/client/src/Pages/PageSpeed/Configure/index.css +++ /dev/null @@ -1,9 +0,0 @@ -.configure-pagespeed button { - height: var(--env-var-height-2); -} - -.configure-pagespeed .field, -.configure-pagespeed .section-disabled, -.configure-pagespeed .select-wrapper { - flex: 1; -} diff --git a/client/src/Pages/PageSpeed/Configure/index.jsx b/client/src/Pages/PageSpeed/Configure/index.jsx deleted file mode 100644 index 71e1e111e..000000000 --- a/client/src/Pages/PageSpeed/Configure/index.jsx +++ /dev/null @@ -1,351 +0,0 @@ -// Components -import { Box, Stack, Tooltip, Typography, Button } from "@mui/material"; -import ConfigBox from "../../../Components/ConfigBox"; -import Select from "../../../Components/Inputs/Select"; -import TextInput from "../../../Components/Inputs/TextInput"; -import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; -import Breadcrumbs from "../../../Components/Breadcrumbs"; -import PulseDot from "../../../Components/Animated/PulseDot"; -import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded"; -import SkeletonLayout from "./skeleton"; -import NotificationsConfig from "../../../Components/NotificationConfig"; -import Dialog from "../../../Components/Dialog"; - -// Utils -import { useState } from "react"; -import { useTheme } from "@emotion/react"; -import { useParams } from "react-router"; -import { monitorValidation } from "../../../Validation/validation"; -import { useTranslation } from "react-i18next"; -import { useMonitorUtils } from "../../../Hooks/useMonitorUtils"; -import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications"; -import { - useFetchMonitorById, - useDeleteMonitor, - useUpdateMonitor, - usePauseMonitor, -} from "../../../Hooks/monitorHooks"; -const PageSpeedConfigure = () => { - // Redux state - - // Local state - const [monitor, setMonitor] = useState({}); - const [errors, setErrors] = useState({}); - const [isOpen, setIsOpen] = useState(false); - const [updateTrigger, setUpdateTrigger] = useState(false); - - // Utils - const theme = useTheme(); - const { t } = useTranslation(); - const MS_PER_MINUTE = 60000; - const { monitorId } = useParams(); - const { statusColor, pagespeedStatusMsg, determineState } = useMonitorUtils(); - - const [notifications, notificationsAreLoading, notificationsError] = - useGetNotificationsByTeamId(); - - const [isLoading] = useFetchMonitorById({ monitorId, setMonitor, updateTrigger }); - const [deleteMonitor, isDeleting] = useDeleteMonitor(); - const [updateMonitor, isUpdating] = useUpdateMonitor(); - const [pauseMonitor, isPausing] = usePauseMonitor(); - - const frequencies = [ - { _id: 3, name: "3 minutes" }, - { _id: 5, name: "5 minutes" }, - { _id: 10, name: "10 minutes" }, - { _id: 20, name: "20 minutes" }, - { _id: 60, name: "1 hour" }, - { _id: 1440, name: "1 day" }, - { _id: 10080, name: "1 week" }, - ]; - - // Handlers - const triggerUpdate = () => { - setUpdateTrigger(!updateTrigger); - }; - - const onChange = (event) => { - let { value, name } = event.target; - - if (name === "interval") { - value = value * MS_PER_MINUTE; - } - setMonitor((prev) => ({ - ...prev, - [name]: value, - })); - - const validation = monitorValidation.validate( - { [name]: value }, - { abortEarly: false } - ); - - setErrors((prev) => { - const updatedErrors = { ...prev }; - - if (validation.error) updatedErrors[name] = validation.error.details[0].message; - else delete updatedErrors[name]; - return updatedErrors; - }); - }; - - const handlePause = async () => { - await pauseMonitor({ monitorId, triggerUpdate }); - }; - - const onSubmit = async (event) => { - event.preventDefault(); - await updateMonitor({ monitor, redirect: "/pagespeed" }); - }; - - const handleRemove = async (event) => { - event.preventDefault(); - await deleteMonitor({ monitor, redirect: "/pagespeed" }); - }; - - return ( - - {Object.keys(monitor).length === 0 ? ( - - ) : ( - <> - - - - - - {monitor.name} - - - - - - - - - {monitor.url?.replace(/^https?:\/\//, "") || "..."} - - - {t("editing")} - - - - - - - - - - - - {t("settingsGeneralSettings")} - - - {t("pageSpeedConfigureSettingsDescription")} - - - .Mui-disabled)": { - backgroundColor: theme.palette.tertiary.main, - }, - }} - > - - - - - - - {t("notificationConfig.title")} - - {t("notificationConfig.description")} - - - - - - - - {t("distributedUptimeCreateAdvancedSettings")} - - - - - - - - - - - - ); -}; -export default CreatePageSpeed; diff --git a/client/src/Pages/PageSpeed/Setup/index.jsx b/client/src/Pages/PageSpeed/Setup/index.jsx index 4a653c58d..b6cb7d615 100644 --- a/client/src/Pages/PageSpeed/Setup/index.jsx +++ b/client/src/Pages/PageSpeed/Setup/index.jsx @@ -34,8 +34,9 @@ import { usePauseMonitor, } from "../../../Hooks/monitorHooks"; +// Constants const MS_PER_MINUTE = 60000; -const SELECT_VALUES = [ +const FREQUENCIES = [ { _id: 3, name: "3 minutes" }, { _id: 5, name: "5 minutes" }, { _id: 10, name: "10 minutes" }, @@ -45,107 +46,75 @@ const SELECT_VALUES = [ { _id: 10080, name: "1 week" }, ]; -const PageSpeedSetup = ({ monitor }) => { - const isConfigure = monitor; - const { t } = useTranslation(); - const theme = useTheme(); +const PageSpeedSetup = ({ configure }) => { + const isConfigure = configure; const { monitorId } = useParams(); - const { statusColor, pagespeedStatusMsg, determineState } = useMonitorUtils(); - const [notifications, notificationsAreLoading] = useGetNotificationsByTeamId(); - const [https, setHttps] = useState(true); - const [errors, setErrors] = useState({}); - const [isOpen, setIsOpen] = useState(false); - const [updateTrigger, setUpdateTrigger] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const [isDeleting, setIsDeleting] = useState(false); - const [isUpdating, setIsUpdating] = useState(false); - const [isPausing, setIsPausing] = useState(false); + const CRUMBS = [ + { name: "pagespeed", path: "/pagespeed" }, + ...(isConfigure + ? [ + { name: "details", path: `/pagespeed/${monitorId}` }, + { name: "configure", path: `/pagespeed/setup/${monitorId}` }, + ] + : [{ name: "create", path: `/pagespeed/create` }]), + ]; - // Monitor state - const [monitorData, setMonitorData] = useState({ + // States + const [monitor, setMonitor] = useState(isConfigure ? {} : { url: "", name: "", type: "pagespeed", notifications: [], - interval: 3, + interval: 180000, }); + const [https, setHttps] = useState(true); + const [errors, setErrors] = useState({}); + + const [isOpen, setIsOpen] = useState(false); + const [updateTrigger, setUpdateTrigger] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); + const [isUpdating, setIsUpdating] = useState(false); + const [isPausing, setIsPausing] = useState(false); + + // Setup + const { t } = useTranslation(); + const theme = useTheme(); + + const { user } = useSelector((state) => state.auth); + const { + statusColor, + pagespeedStatusMsg, + determineState + } = useMonitorUtils(); + const [ + notifications, + notificationsAreLoading, + notificationsError + ] = useGetNotificationsByTeamId(); // Hooks for API actions const [createMonitor, isCreating] = useCreateMonitor(); - const [fetchMonitor] = monitor - ? useFetchMonitorById({ monitorId, setMonitor: setMonitorData, updateTrigger }) - : [null]; + const [isLoading] = isConfigure + ? useFetchMonitorById({ monitorId, setMonitor, updateTrigger }) + : [false]; const [deleteMonitor] = useDeleteMonitor(); const [updateMonitor] = useUpdateMonitor(); const [pauseMonitor] = usePauseMonitor(); - const frequencies = [ - { _id: 3, name: "3 minutes" }, - { _id: 5, name: "5 minutes" }, - { _id: 10, name: "10 minutes" }, - { _id: 20, name: "20 minutes" }, - { _id: 60, name: "1 hour" }, - { _id: 1440, name: "1 day" }, - { _id: 10080, name: "1 week" }, - ]; - - // Fetch monitor if in configure mode - useEffect(() => { - if (monitor && monitorId && typeof fetchMonitor === 'function') { - setIsLoading(true); - fetchMonitor().finally(() => setIsLoading(false)); - } - }, [monitor, monitorId, updateTrigger, fetchMonitor]); // Handlers - - const handleChange = (event) => { - let { value, name } = event.target; - if (name === "interval") { - value = value * MS_PER_MINUTE; - } - setMonitorData((prev) => ({ - ...prev, - [name]: value - })); - const validation = monitorValidation.validate( - { [name]: value }, - { abortEarly: false } - ); - - setErrors((prev) => { - const updatedErrors = { ...prev }; - if (validation.error) { - updatedErrors[name] = validation.error.details[0].message; - } else { - delete updatedErrors[name]; - } - return updatedErrors; - }); - }; - - const handleBlur = (event) => { - const { name, value } = event.target; - if (name === "url" && monitorData.name === "") { - setMonitorData((prev) => ({ ...prev, name: parseDomainName(value) })); - } - }; - const onSubmit = async (event) => { event.preventDefault(); if (isConfigure) { - setIsUpdating(true); - await updateMonitor({ monitor: monitorData, redirect: "/pagespeed" }); - setIsUpdating(false); + await updateMonitor({ monitor, redirect: "/pagespeed" }); } else { let form = { - url: `http${https ? "s" : ""}://` + monitorData.url, - name: monitorData.name === "" ? monitorData.url : monitorData.name, - type: monitorData.type, - interval: monitorData.interval * MS_PER_MINUTE, - description: monitorData.name === "" ? monitorData.url : monitorData.name, - notifications: monitorData.notifications, + url: `http${https ? "s" : ""}://` + monitor.url, + name: monitor.name === "" ? monitor.url : monitor.name, + type: monitor.type, + interval: monitor.interval, }; + const { error } = monitorValidation.validate(form, { abortEarly: false }); if (error) { const newErrors = {}; @@ -156,296 +125,350 @@ const PageSpeedSetup = ({ monitor }) => { createToast({ body: "Please check the form for errors." }); return; } - setIsLoading(true); + + form = { + ...form, + description: form.name, + notifications: monitor.notifications, + }; await createMonitor({ monitor: form, redirect: "/pagespeed" }); - setIsLoading(false); } }; + const handleChange = (event) => { + let { value, name } = event.target; + + if (name === "interval") { + value = value * MS_PER_MINUTE; + } + + setMonitor({ + ...monitor, + [name]: value + }); + + const { error } = monitorValidation.validate( + { [name]: value }, + { abortEarly: false } + ); + setErrors((prev) => ({ + ...prev, + ...(error ? { [name]: error.details[0].message } : { [name]: undefined}) + })); + }; + + const handleBlur = (event) => { + const { name, value } = event.target; + if (name === "url" && monitor.name === "") { + setMonitor((prev) => ({ ...prev, name: parseDomainName(value) })); + } + }; + + const triggerUpdate = () => { + setUpdateTrigger(!updateTrigger); + }; + const handlePause = async () => { - setIsPausing(true); - await pauseMonitor({ monitorId, triggerUpdate: () => setUpdateTrigger((u) => !u) }); - setIsPausing(false); + await pauseMonitor({ monitorId, triggerUpdate }); }; const handleRemove = async (event) => { event.preventDefault(); - setIsDeleting(true); - await deleteMonitor({ monitor: monitorData, redirect: "/pagespeed" }); - setIsDeleting(false); + await deleteMonitor({ monitor, redirect: "/pagespeed" }); }; - // Loading skeleton - if (isConfigure && (isLoading || !monitorData._id)) { - return ; - } + // // Loading skeleton + // if (isConfigure && (isLoading || !monitor._id)) { + // return ; + // } return ( - - - - - {isConfigure ? monitorData.name : t("createYour") + " "} - - { !isConfigure - ? ( - - {t("pageSpeedMonitor")} - - ) - : <> - } - - {isConfigure && ( - - - - + ) : ( + <> + + + + + + + {isConfigure ? monitor.name : t("createYour") + " "} + + { !isConfigure + ? ( + + {t("pageSpeedMonitor")} + + ) + : <> + } + + {isConfigure && ( + + - - - - - - {monitorData.url?.replace(/^https?:\/\//, "") || "..."} - - - {t("editing")} - - - - - - + + + )} + + + + + {t("settingsGeneralSettings")} + + + {t("pageSpeedConfigureSettingsDescription")} + + + .Mui-disabled)": { + backgroundColor: theme.palette.tertiary.main, + }, + }} > - {t("remove")} - - - - )} - - - - {t("settingsGeneralSettings")} - - - {isConfigure ? t("pageSpeedConfigureSettingsDescription") : t("distributedUptimeCreateSelectURL")} - - - - : undefined} - placeholder={isConfigure ? "random.website.com" : "google.com"} - value={monitorData.url || ""} - onChange={handleChange} - onBlur={!isConfigure ? handleBlur : undefined} - error={!!errors["url"]} - helperText={errors["url"]} - disabled={isConfigure} - /> - - - - {!isConfigure && ( - - - - {t("distributedUptimeCreateChecks")} - - - {t("distributedUptimeCreateChecksDescription")} - - - - - : undefined} + placeholder="random.website.com" + value={monitor.url || ""} + onChange={handleChange} + onBlur={!isConfigure ? handleBlur : undefined} + error={!!errors["url"]} + helperText={errors["url"]} + disabled={isConfigure} + /> + - - - - - {errors["type"] ? ( - - - {errors["type"]} + + {!isConfigure && ( + + + + {t("distributedUptimeCreateChecks")} + + + {t("distributedUptimeCreateChecksDescription")} - ) : null} + + + + + + + + + {errors["type"] ? ( + + + {errors["type"]} + + + ) : ""} + + + )} + + + + {t("notificationConfig.title")} + + {t("notificationConfig.description")} + + + + + + + {t("distributedUptimeCreateAdvancedSettings")} + + + + - - - - - + + )} {isConfigure && ( { /> } + element={} />