Format MonitorsTableMenu component

This commit is contained in:
mohadeseh safari
2025-06-28 18:50:14 -04:00
parent c44325ba7f
commit 5ba82415ad

View File

@@ -34,14 +34,14 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
const theme = useTheme();
const [pauseMonitor] = usePauseMonitor();
const { t } = useTranslation();
// Update local state when monitor prop changes
useEffect(() => {
// Ensure we have a valid monitor object with default values for missing properties
if (monitor) {
setLocalMonitorState({
...monitor,
status: monitor.status || 'active' // Default to active if status is undefined
status: monitor.status || "active", // Default to active if status is undefined
});
}
}, [monitor]);
@@ -77,19 +77,19 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
const handlePause = async () => {
try {
// Toggle the local state immediately for better UI responsiveness
setLocalMonitorState(prevState => ({
setLocalMonitorState((prevState) => ({
...prevState,
status: prevState.status === "paused" ? "active" : "paused"
status: prevState.status === "paused" ? "active" : "paused",
}));
// 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
} catch (error) {
// Error handling is done in the hook - revert the local state on error
setLocalMonitorState(prevState => ({
setLocalMonitorState((prevState) => ({
...prevState,
status: prevState.status === "paused" ? "active" : "paused"
status: prevState.status === "paused" ? "active" : "paused",
}));
}
};
@@ -99,7 +99,9 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
await networkService.deleteMonitorById({
monitorId: monitor.id,
});
createToast({ body: t("monitorActions.deleteSuccess", "Monitor deleted successfully") });
createToast({
body: t("monitorActions.deleteSuccess", "Monitor deleted successfully"),
});
} catch (error) {
createToast({ body: t("monitorActions.deleteFailed", "Failed to delete monitor") });
} finally {
@@ -145,25 +147,37 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
},
}}
>
<MenuItem onClick={(e) => {
e.stopPropagation();
openDetails(monitor.id);
closeMenu(e);
}}>{t("monitorActions.details", "Details")}</MenuItem>
{isAdmin && (
<MenuItem onClick={(e) => {
<MenuItem
onClick={(e) => {
e.stopPropagation();
openConfigure(monitor.id);
openDetails(monitor.id);
closeMenu(e);
}}>{t("configure", "Configure")}</MenuItem>
}}
>
{t("monitorActions.details", "Details")}
</MenuItem>
{isAdmin && (
<MenuItem
onClick={(e) => {
e.stopPropagation();
openConfigure(monitor.id);
closeMenu(e);
}}
>
{t("configure", "Configure")}
</MenuItem>
)}
{isAdmin && (
<MenuItem onClick={async (e) => {
e.stopPropagation();
await handlePause();
closeMenu(e);
}}>
{localMonitorState?.status === "paused" ? t("resume", "Resume") : t("pause", "Pause")}
<MenuItem
onClick={async (e) => {
e.stopPropagation();
await handlePause();
closeMenu(e);
}}
>
{localMonitorState?.status === "paused"
? t("resume", "Resume")
: t("pause", "Pause")}
</MenuItem>
)}
{isAdmin && (
@@ -179,7 +193,10 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
open={isDialogOpen}
theme={theme}
title={t("deleteDialogTitle", "Do you really want to delete this monitor?")}
description={t("deleteDialogDescription", "Once deleted, this monitor cannot be retrieved.")}
description={t(
"deleteDialogDescription",
"Once deleted, this monitor cannot be retrieved."
)}
onCancel={cancelRemove}
confirmationButtonLabel={t("delete", "Delete")}
onConfirm={handleRemove}