Merge pull request #2670 from bluewave-labs/feat/fe/resolve-monitor-incidents

Feat: Selected Monitor Incidents Resolve

client/src/Hooks/checkHooks.js

@@ -185,23 +185,30 @@ const useResolveIncident = () => {
 	return [resolveIncident, isLoading];
 };
 
-const useAckAllChecks = () => {
+const useAcknowledgeChecks = () => {
 	const [isLoading, setIsLoading] = useState(false);
 	const { t } = useTranslation();
 
-	const ackAllChecks = async (setUpdateTrigger) => {
+	const acknowledge = async (setUpdateTrigger, monitorId = null) => {
+		setIsLoading(true);
 		try {
-			setIsLoading(true);
-			await networkService.updateAllChecksStatus({ ack: true });
+			if (monitorId) {
+				await networkService.updateMonitorChecksStatus({ monitorId, ack: true });
+			} else {
+				await networkService.updateAllChecksStatus({ ack: true });
+			}
 			setUpdateTrigger((prev) => !prev);
 		} catch (error) {
-			createToast({ body: t("checkHooks.failureResolveAll") });
+			const toastMessage = monitorId
+				? t("checkHooks.failureResolveMonitor")
+				: t("checkHooks.failureResolveAll");
+			createToast({ body: toastMessage });
 		} finally {
 			setIsLoading(false);
 		}
 	};
 
-	return [ackAllChecks, isLoading];
+	return { acknowledge, isLoading };
 };
 
 export {
@@ -209,5 +216,5 @@ export {
 	useFetchChecksTeam,
 	useFetchChecksSummaryByTeamId,
 	useResolveIncident,
-	useAckAllChecks,
+	useAcknowledgeChecks,
 };

client/src/Pages/Incidents/index.jsx

@@ -11,7 +11,7 @@ import { Box, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useFetchMonitorsByTeamId } from "../../Hooks/monitorHooks";
 import { useFetchChecksSummaryByTeamId } from "../../Hooks/checkHooks";
-import { useAckAllChecks } from "../../Hooks/checkHooks";
+import { useAcknowledgeChecks } from "../../Hooks/checkHooks";
 import { useState, useEffect } from "react";
 import NetworkError from "../../Components/GenericFallback/NetworkError";
 import { useTranslation } from "react-i18next";
@@ -34,7 +34,7 @@ const Incidents = () => {
 	const [updateTrigger, setUpdateTrigger] = useState(false);
 
 	//Hooks
-	const [ackAllChecks, ackAllLoading] = useAckAllChecks();
+	const { acknowledge, isLoadingAcknowledge } = useAcknowledgeChecks();
 
 	//Utils
 	const theme = useTheme();
@@ -62,8 +62,9 @@ const Incidents = () => {
 		setMonitorLookup(monitorLookup);
 	}, [monitors]);
 
-	const handleAckAllChecks = () => {
-		ackAllChecks(setUpdateTrigger);
+	const handleAcknowledge = () => {
+		const monitorId = selectedMonitor === "0" ? null : selectedMonitor;
+		acknowledge(setUpdateTrigger, monitorId);
 	};
 
 	if (networkError || networkErrorSummary) {
@@ -81,10 +82,12 @@ const Incidents = () => {
 				<Button
 					variant="contained"
 					color="accent"
-					onClick={handleAckAllChecks}
-					disabled={ackAllLoading}
+					onClick={handleAcknowledge}
+					disabled={isLoadingAcknowledge}
 				>
-					{t("incidentsPageActionResolve")}
+					{selectedMonitor === "0"
+						? t("incidentsPageActionResolveAll")
+						: t("incidentsPageActionResolveMonitor")}
 				</Button>
 			</Box>
 			<StatusBoxes

client/src/Utils/NetworkService.js

@@ -631,6 +631,35 @@ class NetworkService {
 		});
 	}
 
+	/**
+	 * ************************************
+	 * Update the status of all checks for a given monitor
+	 * ************************************
+	 *
+	 * @async
+	 * @param {Object} config - The configuration object.
+	 * @param {string} config.monitorId - The ID of the monitor.
+	 * @param {boolean} config.ack - The acknowledgment to update the checks to.
+	 * @returns {Promise<AxiosResponse>} The response from the axios PUT request.
+	 *
+	 */
+	async updateMonitorChecksStatus(config) {
+		return this.axiosInstance.put(`/checks/monitor/${config.monitorId}`, {
+			ack: config.ack,
+		});
+	}
+
+	/**
+	 * ************************************
+	 * Update the status of all checks for a given team
+	 * ************************************
+	 *
+	 * @async
+	 * @param {Object} config - The configuration object.
+	 * @param {boolean} config.ack - The acknowledgment to update the checks to.
+	 * @returns {Promise<AxiosResponse>} The response from the axios PUT request.
+	 *
+	 */
 	async updateAllChecksStatus(config) {
 		return this.axiosInstance.put(`/checks/team/`, {
 			ack: config.ack,

client/src/locales/en.json

@@ -218,6 +218,7 @@
 	"checkFrequency": "Check frequency",
 	"checkHooks": {
 		"failureResolveAll": "Failed to resolve all incidents.",
+		"failureResolveMonitor": "Failed to resolve monitor incidents.",
 		"failureResolveOne": "Failed to resolve incident."
 	},
 	"checkingEvery": "Checking every",
@@ -452,7 +453,8 @@
 	"incidentsOptionsHeaderShow": "Show:",
 	"incidentsOptionsHeaderTotalIncidents": "Total Incidents",
 	"incidentsOptionsPlaceholderAllServers": "All servers",
-	"incidentsPageActionResolve": "Resolve all incidents",
+	"incidentsPageActionResolveMonitor": "Resolve monitor incidents",
+	"incidentsPageActionResolveAll": "Resolve all incidents",
 	"incidentsPageTitle": "Incidents",
 	"incidentsTableActionResolve": "Resolve",
 	"incidentsTableDateTime": "Date & Time",