From d9c5b8eab7533d25e90606fb0169e5c258bfd18f Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 1 Aug 2024 16:35:13 -0400 Subject: [PATCH 1/4] Added monitor actions menu dropdown and styling --- Client/src/Components/BasicTable/index.css | 25 ++++---- Client/src/Pages/Monitors/index.css | 20 +++++++ Client/src/Pages/Monitors/index.jsx | 66 +++++++++++++++++----- Client/src/assets/icons/settings-bold.svg | 4 ++ 4 files changed, 85 insertions(+), 30 deletions(-) create mode 100644 Client/src/assets/icons/settings-bold.svg 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 @@ + + + + From b04962e29efdbd4ea6a0979a3e9d686b3d75423f Mon Sep 17 00:00:00 2001 From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com> Date: Thu, 1 Aug 2024 16:56:57 -0400 Subject: [PATCH 2/4] Create CNAME --- docs/CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/CNAME diff --git a/docs/CNAME b/docs/CNAME new file mode 100644 index 000000000..05329a3ec --- /dev/null +++ b/docs/CNAME @@ -0,0 +1 @@ +uptime.bluewavelabs.ca \ No newline at end of file From 91022d044825b6613c2b125cbfd6e3437e2c05f1 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 1 Aug 2024 17:04:11 -0400 Subject: [PATCH 3/4] Added functions and rmeove modal --- Client/src/Pages/Monitors/index.css | 4 ++ Client/src/Pages/Monitors/index.jsx | 104 +++++++++++++++++++++++++--- 2 files changed, 100 insertions(+), 8 deletions(-) diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index f87893b29..bce3bee72 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -51,3 +51,7 @@ body:has(.monitors) .actions-menu li.MuiButtonBase-root { body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type { color: var(--env-var-color-26); } +body:has(.monitors) .MuiModal-root p.MuiTypography-root { + font-size: var(--env-var-font-size-medium); + color: var(--env-var-color-2); +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index f067b11f4..9c9f99d15 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,7 +1,10 @@ import "./index.css"; import { useEffect, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; -import { getUptimeMonitorsByUserId } from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; +import { + deleteUptimeMonitor, + getUptimeMonitorsByUserId, +} from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; import { useNavigate } from "react-router-dom"; import Button from "../../Components/Button"; import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; @@ -11,12 +14,14 @@ 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 { createToast } from "../../Utils/toastUtils"; import ResponseTimeChart from "../../Components/Charts/ResponseTimeChart"; import { Box, IconButton, Menu, MenuItem, + Modal, Stack, Typography, } from "@mui/material"; @@ -50,9 +55,38 @@ const Monitors = () => { const navigate = useNavigate(); const monitorState = useSelector((state) => state.uptimeMonitors); const authState = useSelector((state) => state.auth); - const dispatch = useDispatch(); + const dispatch = useDispatch({}); const [anchorEl, setAnchorEl] = useState(null); + const [actions, setActions] = useState({}); + const openMenu = (event, id, url) => { + setAnchorEl(event.currentTarget); + setActions({ id: id, url: url }); + }; + const closeMenu = () => { + setAnchorEl(null); + setActions({}); + }; + + const [isOpen, setIsOpen] = useState(false); + const openRemove = () => { + setAnchorEl(null); + setIsOpen(true); + }; + const handleRemove = async (event) => { + event.preventDefault(); + let monitor = { _id: actions.id }; + const action = await dispatch( + deleteUptimeMonitor({ authToken: authState.authToken, monitor }) + ); + if (action.meta.requestStatus === "fulfilled") { + setIsOpen(false); // close modal + dispatch(getUptimeMonitorsByUserId(authState.authToken)); + createToast({ body: "Monitor deleted successfully." }); + } else { + createToast({ body: "Failed to delete monitor." }); + } + }; useEffect(() => { dispatch(getUptimeMonitorsByUserId(authState.authToken)); @@ -129,7 +163,7 @@ const Monitors = () => { <> setAnchorEl(event.currentTarget)} + onClick={(event) => openMenu(event, monitor._id, monitor.url)} sx={{ "&:focus": { outline: "none", @@ -190,15 +224,69 @@ const Monitors = () => { className="actions-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} - onClose={() => setAnchorEl(null)} + onClose={closeMenu} > - Open site - Details + window.open(actions.url, "_blank", "noreferrer")} + > + Open site + + navigate(`/monitors/${actions.id}`)}> + Details + {/* TODO - pass monitor id to Incidents page */} Incidents - Configure - Remove + navigate(`/monitors/configure/${actions.id}`)}> + Configure + + Remove + setIsOpen(false)} + disablePortal + > + + + Really delete this monitor? + + + Once deleted, this monitor cannot be retrieved back. + + +