diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 5db3ea623..8fb4bf932 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -59,7 +59,7 @@ function App() { element={} /> } /> { const MS_PER_MINUTE = 60000; const { user, authToken } = useSelector((state) => state.auth); + const { monitors } = useSelector((state) => state.uptimeMonitors); const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); @@ -30,6 +32,7 @@ const CreateMonitor = () => { "notify-email-default": "notification-email", }; + const { monitorId } = useParams(); const [monitor, setMonitor] = useState({ url: "", name: "", @@ -40,6 +43,36 @@ const CreateMonitor = () => { const [https, setHttps] = useState(true); const [errors, setErrors] = useState({}); + useEffect(() => { + const fetchMonitor = async () => { + if (monitorId) { + const action = await dispatch( + getUptimeMonitorById({ authToken, monitorId }) + ); + + if (action.payload.success) { + const data = action.payload.data; + const { name, ...rest } = data; //data.name is read-only + if (rest.type === "http") { + const url = new URL(rest.url); + rest.url = url.host; + } + rest.name = `${name} (Clone)`; + rest.interval /= MS_PER_MINUTE; + setMonitor({ + ...rest, + }); + } else { + navigate("/not-found", { replace: true }); + createToast({ + body: "There was an error cloning the monitor.", + }); + } + } + }; + fetchMonitor(); + }, [monitorId, authToken, monitors]); + const handleChange = (event, name) => { const { value, id } = event.target; if (!name) name = idMap[id]; diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx index efb29402d..7f2eb0d97 100644 --- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx +++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx @@ -137,6 +137,14 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => { Configure )} + { + e.stopPropagation(); + navigate(`/monitors/create/${actions.id}`); + }} + > + Clone + {isAdmin && ( {