diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 637e5e6dd..221c66494 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -124,3 +124,6 @@ .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected { background-color: var(--env-var-color-15); } +.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root{ + user-select: none; +} diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css index e69de29bb..f85a0bb04 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css @@ -0,0 +1,19 @@ +.area-tooltip { + background-color: white; + border: solid 1px var(--env-var-color-4); + border-radius: var(--env-var-radius-1); + padding: var(--env-var-spacing-1) var(--env-var-spacing-2); +} +.area-tooltip p { + margin: 0; + padding: 0; +} +.area-tooltip p:first-of-type { + color: var(--env-var-color-3); + font-size: var(--env-var-font-size-medium); +} +.area-tooltip p:last-of-type { + margin-top: 5px; + color: var(--env-var-color-5); + font-size: var(--env-var-font-size-small); +} diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 1d1ea3758..02729a709 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -1,11 +1,12 @@ import PropTypes from "prop-types"; import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer } from "recharts"; import { NormalizeData } from "../ChartUtils"; +import "./index.css"; const CustomToolTip = ({ active, payload, label }) => { if (active && payload && payload.length) { return ( -
+

{new Date(label).toLocaleDateString("en-US", { weekday: "short", // Mon @@ -80,7 +81,7 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => { data={normalizedChecks} margin={{ top: 10, - right: 30, + right: 0, left: 0, bottom: 0, }} @@ -89,6 +90,7 @@ const MonitorDetailsAreaChart = ({ checks, filter }) => { dataKey="createdAt" tickFormatter={formatDate} tick={{ fontSize: "13px" }} + tickLine={false} /> } /> { const seconds = Math.floor(ms / 1000); @@ -28,9 +33,36 @@ const formatDuration = (ms) => { return dateStr; }; +const formatDurationRounded = (ms) => { + const seconds = Math.floor(ms / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + + let time = ""; + if (days > 0) { + time += `${days} day${days !== 1 ? "s" : ""}`; + return time; + } + if (hours > 0) { + time += `${hours} hour${hours !== 1 ? "s" : ""}`; + return time; + } + if (minutes > 0) { + time += `${minutes} minute${minutes !== 1 ? "s" : ""}`; + return time; + } + if (seconds > 0) { + time += `${seconds} second${seconds !== 1 ? "s" : ""}`; + return time; + } + + return time; +}; + const StatBox = ({ title, value }) => { return ( - + {title} {value} @@ -103,6 +135,7 @@ const DetailsPage = () => { }, [monitorId, authToken]); const theme = useTheme(); + const navigate = useNavigate(); /** * Function to calculate uptime duration based on the most recent check. @@ -163,52 +196,110 @@ const DetailsPage = () => { padding: `${theme.content.pY} ${theme.content.pX}`, }} > -

- - - -
-
} + onClick={() => navigate("/monitors")} + sx={{ + backgroundColor: "#f4f4f4", + mb: theme.gap.medium, + px: theme.gap.ml, + "& svg.MuiSvgIcon-root": { + pr: theme.gap.small, + }, }} - > - - Response Times - - + /> + + + {monitor?.status ? : } + + + {monitor.url?.replace(/^https?:\/\//, "") || "..."} + + + + Your site is {monitor?.status ? "up" : "down"}. + {" "} + Checking every {formatDurationRounded(monitor?.interval)}. Last + time checked{" "} + {formatDurationRounded(getLastChecked(monitor?.checks))} ago. + +
-
- -
- - History - - + + + + + + Response Times + + +
); }; diff --git a/Client/src/assets/icons/checkbox-green.svg b/Client/src/assets/icons/checkbox-green.svg new file mode 100644 index 000000000..dd5676298 --- /dev/null +++ b/Client/src/assets/icons/checkbox-green.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Client/src/assets/icons/checkbox-red.svg b/Client/src/assets/icons/checkbox-red.svg new file mode 100644 index 000000000..3c43a2042 --- /dev/null +++ b/Client/src/assets/icons/checkbox-red.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Client/src/assets/icons/settings.svg b/Client/src/assets/icons/settings.svg new file mode 100644 index 000000000..d8057286c --- /dev/null +++ b/Client/src/assets/icons/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Client/src/index.css b/Client/src/index.css index 61c961dad..337e490f5 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -56,6 +56,7 @@ --env-var-width-2: 360px; --env-var-height-1: 100vh; + --env-var-height-2: 34px; --env-var-spacing-1: 12px; --env-var-spacing-1-plus: 16px;