diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index c34be3a2f..12f97ab1e 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -62,6 +62,10 @@ const Configure = () => { useEffect(() => { const data = monitors.find((monitor) => monitor._id === monitorId); + if (!data) { + console.error("Error fetching monitor of id: " + monitorId); + navigate("/not-found"); + } setMonitor({ ...data, }); diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index 852f602e7..bbfba0b43 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/Client/src/Pages/Monitors/Details/index.jsx @@ -12,7 +12,7 @@ import Button from "../../../Components/Button"; import WestRoundedIcon from "@mui/icons-material/WestRounded"; import GreenCheck from "../../../assets/icons/checkbox-green.svg?react"; import RedCheck from "../../../assets/icons/checkbox-red.svg?react"; -import SettingsIcon from "../../../assets/icons/settings.svg?react"; +import SettingsIcon from "../../../assets/icons/settings-bold.svg?react"; import { formatDuration, formatDurationRounded, @@ -43,45 +43,53 @@ const DetailsPage = () => { useEffect(() => { const fetchMonitor = async () => { - const res = await axiosInstance.get( - `/monitors/${monitorId}?sortOrder=asc`, - { - headers: { - Authorization: `Bearer ${authToken}`, - }, - } - ); - setMonitor(res.data.data); - const data = { - cols: [ - { id: 1, name: "Status" }, - { id: 2, name: "Date & Time" }, - { id: 3, name: "Message" }, - ], - rows: res.data.data.checks.map((check, idx) => { - const status = check.status === true ? "up" : "down"; + try { + const res = await axiosInstance.get( + `/monitors/${monitorId}?sortOrder=asc`, + { + headers: { + Authorization: `Bearer ${authToken}`, + }, + } + ); + setMonitor(res.data.data); + const data = { + cols: [ + { id: 1, name: "Status" }, + { id: 2, name: "Date & Time" }, + { id: 3, name: "Message" }, + ], + rows: res.data.data.checks.map((check, idx) => { + const status = check.status === true ? "up" : "down"; - return { - id: check._id, - data: [ - { - id: idx, - data: ( - - ), - }, - { id: idx + 1, data: new Date(check.createdAt).toLocaleString() }, - { id: idx + 2, data: check.statusCode }, - ], - }; - }), - }; + return { + id: check._id, + data: [ + { + id: idx, + data: ( + + ), + }, + { + id: idx + 1, + data: new Date(check.createdAt).toLocaleString(), + }, + { id: idx + 2, data: check.statusCode }, + ], + }; + }), + }; - setData(data); + setData(data); + } catch (error) { + console.error("Error fetching monitor of id: " + monitorId); + navigate("/not-found"); + } }; fetchMonitor(); }, [monitorId, authToken]); @@ -195,7 +203,11 @@ const DetailsPage = () => { level="tertiary" label="Configure" animate="rotate90" - img={} + img={ + + } onClick={() => navigate(`/monitors/configure/${monitorId}`)} sx={{ ml: "auto", diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index a9317d5da..180bac0b8 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -9,7 +9,7 @@ .monitors h2.MuiTypography-root { font-size: var(--env-var-font-size-large); } -.monitors .MuiStack-root > button { +.monitors .MuiStack-root > button:not(.MuiIconButton-root) { font-size: var(--env-var-font-size-medium); height: var(--env-var-height-2); min-width: fit-content; diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 145faaec3..3c1d7bc64 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -41,16 +41,26 @@ import { const Host = ({ params }) => { return ( - { event.stopPropagation(); + window.open(params.url, "_blank", "noreferrer"); + }} + sx={{ + "&:focus": { + outline: "none", + }, + mr: "3px", }} > - - + + {params.title} diff --git a/Client/src/assets/icons/open-in-new-page.svg b/Client/src/assets/icons/open-in-new-page.svg index 2bcb21c43..70599f390 100644 --- a/Client/src/assets/icons/open-in-new-page.svg +++ b/Client/src/assets/icons/open-in-new-page.svg @@ -1,3 +1,3 @@ - +