diff --git a/Client/src/Pages/Monitors/ActionMenu/index.jsx b/Client/src/Pages/Monitors/ActionMenu/index.jsx
new file mode 100644
index 000000000..a8fb437bc
--- /dev/null
+++ b/Client/src/Pages/Monitors/ActionMenu/index.jsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Box, IconButton, Menu, MenuItem } from "@mui/material";
+import Settings from "../../../assets/icons/settings-bold.svg?react";
+import { useNavigate } from "react-router-dom";
+
+const ActionsMenu = ({ monitor }) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [actions, setActions] = useState({});
+ const openMenu = (event, id, url) => {
+ event.preventDefault();
+ setAnchorEl(event.currentTarget);
+ setActions({ id: id, url: url });
+ };
+
+ const openRemove = () => {
+ closeMenu();
+ setIsOpen(true);
+ };
+
+ const closeMenu = () => {
+ setAnchorEl(null);
+ };
+
+ const navigate = useNavigate();
+ return (
+ <>
+ {
+ event.stopPropagation();
+ openMenu(
+ event,
+ monitor._id,
+ monitor.type === "ping" ? null : monitor.url
+ );
+ }}
+ sx={{
+ "&:focus": {
+ outline: "none",
+ },
+ }}
+ >
+
+
+
+
+ >
+ );
+};
+
+export default ActionsMenu;
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index b80e88f5a..24ab4d172 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -11,7 +11,6 @@ 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 { createToast } from "../../Utils/toastUtils";
@@ -26,6 +25,7 @@ import {
Stack,
Typography,
} from "@mui/material";
+import ActionsMenu from "./ActionMenu";
/**
* Host component.
@@ -111,22 +111,8 @@ const Monitors = () => {
const authState = useSelector((state) => state.auth);
const dispatch = useDispatch({});
- const [anchorEl, setAnchorEl] = useState(null);
- const [actions, setActions] = useState({});
- const openMenu = (event, id, url) => {
- event.preventDefault();
- setAnchorEl(event.currentTarget);
- setActions({ id: id, url: url });
- };
- const closeMenu = () => {
- setAnchorEl(null);
- };
-
const [isOpen, setIsOpen] = useState(false);
- const openRemove = () => {
- closeMenu();
- setIsOpen(true);
- };
+
const handleRemove = async (event) => {
event.preventDefault();
let monitor = { _id: actions.id };
@@ -191,7 +177,9 @@ const Monitors = () => {
return {
id: monitor._id,
// disabled for now
- handleClick: () => navigate(`/monitors/${monitor._id}`),
+ handleClick: () => {
+ navigate(`/monitors/${monitor._id}`);
+ },
data: [
{ id: idx, data: },
{
@@ -213,28 +201,7 @@ const Monitors = () => {
},
{
id: idx + 4,
- data: (
- <>
- {
- event.stopPropagation();
- openMenu(
- event,
- monitor._id,
- monitor.type === "ping" ? null : monitor.url
- );
- }}
- sx={{
- "&:focus": {
- outline: "none",
- },
- }}
- >
-
-
- >
- ),
+ data: ,
},
],
};
@@ -327,33 +294,7 @@ const Monitors = () => {
)}
>
)}
-
+