diff --git a/client/src/Hooks/useMonitorForm.ts b/client/src/Hooks/useMonitorForm.ts index 633fcb5c9..392b5064c 100644 --- a/client/src/Hooks/useMonitorForm.ts +++ b/client/src/Hooks/useMonitorForm.ts @@ -14,6 +14,9 @@ const getBaseDefaults = (data?: Monitor | null) => ({ notifications: data?.notifications || [], statusWindowSize: data?.statusWindowSize || 5, statusWindowThreshold: data?.statusWindowThreshold || 60, + geoCheckEnabled: data?.geoCheckEnabled || false, + geoCheckLocations: data?.geoCheckLocations || [], + geoCheckInterval: data?.geoCheckInterval || 300000, }); export const useMonitorForm = ({ diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx index 5012c1154..5699e8ea8 100644 --- a/client/src/Pages/CreateMonitor/index.tsx +++ b/client/src/Pages/CreateMonitor/index.tsx @@ -15,6 +15,7 @@ import Divider from "@mui/material/Divider"; import IconButton from "@mui/material/IconButton"; import { Trash2 } from "lucide-react"; import { HeaderDeleteControls } from "@/Components/monitors"; +import { GeoContinents } from "@/Types/GeoCheck"; import { BasePage, ConfigBox } from "@/Components/design-elements"; import { @@ -165,6 +166,7 @@ const CreateMonitorPage = () => { const watchedType = watch("type") as MonitorType; const watchedUseAdvancedMatching = watch("useAdvancedMatching") as boolean; + const watchGeoCheckEnabled = watch("geoCheckEnabled") as boolean; useEffect(() => { clearErrors(); @@ -823,6 +825,140 @@ const CreateMonitorPage = () => { /> )} + {watchedType === "http" && ( + + ( + + field.onChange(e.target.checked)} + /> + + {t("pages.createMonitor.form.geoChecks.option.enabled.label")} + + + )} + /> + {watchGeoCheckEnabled && ( + + { + // Map continents to have 'name' property for Autocomplete + const locationOptions = GeoContinents.map((continent) => ({ + id: continent, + name: t( + `pages.createMonitor.form.geoChecks.option.locations.options.${continent}` + ), + })); + const selectedLocations = locationOptions.filter((loc) => + (field.value ?? []).includes(loc.id) + ); + return ( + + option.name} + onChange={(_: unknown, newValue: typeof locationOptions) => { + field.onChange(newValue.map((loc) => loc.id)); + }} + isOptionEqualToValue={(option, value) => + option.id === value.id + } + fieldLabel={t( + "pages.createMonitor.form.geoChecks.option.locations.label" + )} + /> + {selectedLocations.length > 0 && ( + + {selectedLocations.map((location, index) => ( + + {location.name} + { + field.onChange( + (field.value ?? []).filter( + (id: string) => id !== location.id + ) + ); + }} + aria-label="Remove location" + > + + + {index < selectedLocations.length - 1 && } + + ))} + + )} + + ); + }} + /> + ( + + )} + /> + + )} + + } + /> + )} +