Merge pull request #2563 from bluewave-labs/fix/2471-infrastructure-action-menu

Fix/2471 infrastructure action menu

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx

@@ -9,6 +9,8 @@ import Settings from "../../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import Dialog from "../../../../../Components/Dialog";
 import { networkService } from "../../../../../Utils/NetworkService.js";
+import { usePauseMonitor } from "../../../../../Hooks/monitorHooks";
+import { useTranslation } from "react-i18next";
 
 /**
  * InfrastructureMenu Component
@@ -19,7 +21,7 @@ import { networkService } from "../../../../../Utils/NetworkService.js";
  * @param {string} props.monitor.id - Unique ID of the monitor.
  * @param {string} [props.monitor.url] - URL associated with the monitor.
  * @param {string} props.monitor.type - Type of monitor (e.g., uptime, infrastructure).
- * @param {boolean} props.monitor.isActive - Indicates if the monitor is currently active.
+ * @param {boolean} props.monitor.isActive - Indicates if the monitor is currently active (true) or paused (false).
  * @param {boolean} props.isAdmin - Whether the user has admin privileges.
  * @param {Function} props.updateCallback - Callback to trigger when the monitor data is updated.
  * @returns {JSX.Element} The rendered component.
@@ -29,6 +31,8 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const theme = useTheme();
+	const [pauseMonitor] = usePauseMonitor();
+	const { t } = useTranslation();
 
 	const openMenu = (e) => {
 		e.stopPropagation();
@@ -54,14 +58,26 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 		navigate(`/infrastructure/${id}`);
 	}
 
+	const openConfigure = (id) => {
+		navigate(`/infrastructure/configure/${id}`);
+	};
+
+	const handlePause = async () => {
+		// Pass updateCallback as triggerUpdate to the hook
+		await pauseMonitor({ monitorId: monitor.id, triggerUpdate: updateCallback });
+		// Toast is already displayed in the hook, no need to display it again
+	};
+
 	const handleRemove = async () => {
 		try {
 			await networkService.deleteMonitorById({
 				monitorId: monitor.id,
 			});
-			createToast({ body: "Monitor deleted successfully." });
+			createToast({
+				body: t("monitorActions.deleteSuccess"),
+			});
 		} catch (error) {
-			createToast({ body: "Failed to delete monitor." });
+			createToast({ body: t("monitorActions.deleteFailed") });
 		} finally {
 			setIsDialogOpen(false);
 			updateCallback();
@@ -105,15 +121,53 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 					},
 				}}
 			>
-				{isAdmin && <MenuItem onClick={openRemove}>Remove</MenuItem>}
+				<MenuItem
+					onClick={(e) => {
+						e.stopPropagation();
+						openDetails(monitor.id);
+						closeMenu(e);
+					}}
+				>
+					{t("monitorActions.details")}
+				</MenuItem>
+				{isAdmin && (
+					<MenuItem
+						onClick={(e) => {
+							e.stopPropagation();
+							openConfigure(monitor.id);
+							closeMenu(e);
+						}}
+					>
+						{t("configure")}
+					</MenuItem>
+				)}
+				{isAdmin && (
+					<MenuItem
+						onClick={async (e) => {
+							e.stopPropagation();
+							await handlePause();
+							closeMenu(e);
+						}}
+					>
+						{!monitor.isActive ? t("resume") : t("pause")}
+					</MenuItem>
+				)}
+				{isAdmin && (
+					<MenuItem
+						onClick={openRemove}
+						sx={{ color: theme.palette.error.main }}
+					>
+						{t("remove")}
+					</MenuItem>
+				)}
 			</Menu>
 			<Dialog
 				open={isDialogOpen}
 				theme={theme}
-				title="Do you really want to delete this monitor?"
-				description="Once deleted, this monitor cannot be retrieved."
+				title={t("deleteDialogTitle")}
+				description={t("deleteDialogDescription")}
 				onCancel={cancelRemove}
-				confirmationButtonLabel="Delete"
+				confirmationButtonLabel={t("delete")}
 				onConfirm={handleRemove}
 				modelTitle="modal-delete-monitor"
 				modelDescription="delete-monitor-confirmation"
@@ -124,13 +178,16 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 
 InfrastructureMenu.propTypes = {
 	monitor: PropTypes.shape({
-		id: PropTypes.string,
+		id: PropTypes.string.isRequired,
 		url: PropTypes.string,
+		// Note: type must remain optional. Making it required (type: PropTypes.string.isRequired)
+		// causes runtime errors as some monitors don't have a defined type property
 		type: PropTypes.string,
-		isActive: PropTypes.bool,
+		isActive: PropTypes.bool, // Determines whether the monitor is paused (false) or active (true)
+		status: PropTypes.string, // Represents the monitor's operational status (e.g., 'up', 'down', etc.)
 	}).isRequired,
-	isAdmin: PropTypes.bool,
-	updateCallback: PropTypes.func,
+	isAdmin: PropTypes.bool.isRequired,
+	updateCallback: PropTypes.func.isRequired,
 };
 
 export { InfrastructureMenu };

client/src/locales/en.json

@@ -490,6 +490,9 @@
 	"message": "Message",
 	"monitor": "monitor",
 	"monitorActions": {
+		"deleteSuccess": "Monitor deleted successfully",
+		"deleteFailed": "Failed to delete monitor",
+		"details": "Details",
 		"export": "Export Monitors",
 		"import": "Import Monitors",
 		"title": "Export/Import"