diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 5e2a7424e..8ed45d8b1 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -1,29 +1,18 @@ -.MuiTable-root .host-row { - display: flex; - align-items: center; -} -.MuiTable-root .host-row a { +.MuiTable-root .host a { width: var(--env-var-img-width-2); height: var(--env-var-img-width-2); color: var(--env-var-color-5); margin-right: 10px; margin-bottom: 2px; } -.MuiTable-root .host-row a svg { +.MuiTable-root .host a svg { width: var(--env-var-font-size-large); height: var(--env-var-font-size-large); } -.MuiTable-root .host-row .host-percentage { +.MuiTable-root .host div:nth-child(3) { font-size: var(--env-var-font-size-small); } - -.MuiTable-root .label { - border-color: var(--env-var-color-4); - border-radius: var(--env-var-radius-2); - padding: calc(var(--env-var-spacing-1) / 2); -} - -.MuiTable-root .host-name { +.MuiTable-root .host div:nth-child(2) { width: fit-content; margin-right: 10px; font-weight: 700; @@ -32,6 +21,12 @@ white-space: nowrap; } +.MuiTable-root .label { + border-color: var(--env-var-color-4); + border-radius: var(--env-var-radius-2); + padding: calc(var(--env-var-spacing-1) / 2); +} + .MuiPaper-root:has(table.MuiTable-root) { box-shadow: none; border: solid 1px var(--env-var-color-16); diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index 28f4e1fc4..f87893b29 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -31,3 +31,23 @@ margin-left: 10px; line-height: 0.8; } + +body:has(.monitors) .actions-menu .MuiPaper-root { + box-shadow: var(--env-var-shadow-1); + border: solid 1px var(--env-var-color-6); + border-radius: var(--env-var-radius-1); + gap: 1px; +} +body:has(.monitors) .actions-menu .MuiList-root { + padding: 6px 8px; + min-width: 100px; +} +body:has(.monitors) .actions-menu li.MuiButtonBase-root { + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-5); + padding: 5px 8px; + border-radius: var(--env-var-radius-1); +} +body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type { + color: var(--env-var-color-26); +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index b020ac47b..f067b11f4 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,5 +1,5 @@ import "./index.css"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { getUptimeMonitorsByUserId } from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; import { useNavigate } from "react-router-dom"; @@ -8,10 +8,18 @@ import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; import { useTheme } from "@emotion/react"; import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react"; +import Settings from "../../assets/icons/settings-bold.svg?react"; import BasicTable from "../../Components/BasicTable"; import { StatusLabel } from "../../Components/Label"; import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart"; -import { Box, Stack, Typography } from "@mui/material"; +import { + Box, + IconButton, + Menu, + MenuItem, + Stack, + Typography, +} from "@mui/material"; /** * Host component. @@ -27,18 +35,13 @@ import { Box, Stack, Typography } from "@mui/material"; */ const Host = ({ params }) => { return ( -
+ -
{params.title}
-
- {params.precentage}% -
-
+ {params.title} + {params.precentage}% + ); }; @@ -49,6 +52,8 @@ const Monitors = () => { const authState = useSelector((state) => state.auth); const dispatch = useDispatch(); + const [anchorEl, setAnchorEl] = useState(null); + useEffect(() => { dispatch(getUptimeMonitorsByUserId(authState.authToken)); }, []); @@ -65,12 +70,12 @@ const Monitors = () => { { id: 2, name: ( - <> + Status - + ), }, { id: 3, name: "Response Time" }, @@ -97,7 +102,8 @@ const Monitors = () => { return { id: monitor._id, - handleClick: () => navigate(`/monitors/${monitor._id}`), + // disabled for now + // handleClick: () => navigate(`/monitors/${monitor._id}`), data: [ { id: idx, data: }, { @@ -117,7 +123,24 @@ const Monitors = () => { {monitor.type} ), }, - { id: idx + 4, data: "TODO" }, + { + id: idx + 4, + data: ( + <> + setAnchorEl(event.currentTarget)} + sx={{ + "&:focus": { + outline: "none", + }, + }} + > + + + + ), + }, ], }; }); @@ -163,6 +186,19 @@ const Monitors = () => { + setAnchorEl(null)} + > + Open site + Details + {/* TODO - pass monitor id to Incidents page */} + Incidents + Configure + Remove + ); }; diff --git a/Client/src/assets/icons/settings-bold.svg b/Client/src/assets/icons/settings-bold.svg new file mode 100644 index 000000000..d8057286c --- /dev/null +++ b/Client/src/assets/icons/settings-bold.svg @@ -0,0 +1,4 @@ + + + +