From 3dc94c8da76ff03d1e07646cb91710b47cab4159 Mon Sep 17 00:00:00 2001
From: Amol Umbark <amolumbarkar@gmail.com>
Date: Tue, 29 Mar 2022 19:59:40 +0530
Subject: [PATCH] (fix): Duplicate alerts in triggered alerts  (#932)

* (fix): Duplicate alerts in triggered alerts fixed by changing source api from /alert/groups to /alerts

* (fix): added comments for removed lines of group api call

* (fix): restored all getGroup
---
 frontend/src/api/alerts/getTriggered.ts       | 29 +++++++++++++++++++
 .../TriggeredAlerts/TriggeredAlert.tsx        | 16 +++++-----
 .../src/container/TriggeredAlerts/index.tsx   | 19 +++++++-----
 frontend/src/types/api/alerts/getTriggered.ts | 10 +++++++
 4 files changed, 59 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/api/alerts/getTriggered.ts
 create mode 100644 frontend/src/types/api/alerts/getTriggered.ts

diff --git a/frontend/src/api/alerts/getTriggered.ts b/frontend/src/api/alerts/getTriggered.ts
new file mode 100644
index 0000000000..160b9a3b93
--- /dev/null
+++ b/frontend/src/api/alerts/getTriggered.ts
@@ -0,0 +1,29 @@
+import { AxiosAlertManagerInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import convertObjectIntoParams from 'lib/query/convertObjectIntoParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/alerts/getTriggered';
+
+const getTriggered = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const queryParams = convertObjectIntoParams(props);
+
+		const response = await AxiosAlertManagerInstance.get(
+			`/alerts?${queryParams}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTriggered;
diff --git a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
index df3b6ff012..425334e7ba 100644
--- a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
+++ b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
@@ -1,4 +1,4 @@
-import getGroupApi from 'api/alerts/getGroup';
+import getTriggeredApi from 'api/alerts/getTriggered';
 import useInterval from 'hooks/useInterval';
 import React, { useState } from 'react';
 import { Alerts } from 'types/api/alerts/getAll';
@@ -13,20 +13,22 @@ function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
 
 	useInterval(() => {
 		(async (): Promise<void> => {
-			const response = await getGroupApi({
+			const response = await getTriggeredApi({
 				active: true,
 				inhibited: true,
 				silenced: false,
 			});
 
 			if (response.statusCode === 200 && response.payload !== null) {
-				const initialAlerts: Alerts[] = [];
+				// commented reduce() call as we no longer use /alerts/groups
+				// from alertmanager which needed re-grouping on client side
+				// const initialAlerts: Alerts[] = [];
 
-				const allAlerts: Alerts[] = response.payload.reduce((acc, cur) => {
-					return [...acc, ...cur.alerts];
-				}, initialAlerts);
+				// const allAlerts: Alerts[] = response.payload.reduce((acc, cur) => {
+				//	return [...acc, ...cur.alerts];
+				// }, initialAlerts);
 
-				setInitialAlerts(allAlerts);
+				setInitialAlerts(response.payload);
 			}
 		})();
 	}, 30000);
diff --git a/frontend/src/container/TriggeredAlerts/index.tsx b/frontend/src/container/TriggeredAlerts/index.tsx
index a665adf6dd..88ebb2e138 100644
--- a/frontend/src/container/TriggeredAlerts/index.tsx
+++ b/frontend/src/container/TriggeredAlerts/index.tsx
@@ -1,9 +1,9 @@
-import getGroupApi from 'api/alerts/getGroup';
+import getTriggeredApi from 'api/alerts/getTriggered';
 import Spinner from 'components/Spinner';
 import { State } from 'hooks/useFetch';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Alerts } from 'types/api/alerts/getAll';
-import { PayloadProps } from 'types/api/alerts/getGroups';
+import { PayloadProps } from 'types/api/alerts/getTriggered';
 
 import TriggerComponent from './TriggeredAlert';
 
@@ -23,7 +23,7 @@ function TriggeredAlerts(): JSX.Element {
 				loading: true,
 			}));
 
-			const response = await getGroupApi({
+			const response = await getTriggeredApi({
 				active: true,
 				inhibited: true,
 				silenced: false,
@@ -65,13 +65,16 @@ function TriggeredAlerts(): JSX.Element {
 		return <Spinner height="75vh" tip="Loading Alerts..." />;
 	}
 
-	const initialAlerts: Alerts[] = [];
+	// commented the reduce() call as we no longer use /alerts/groups
+	// API from alert manager, which returns a group for each receiver
 
-	const allAlerts: Alerts[] = groupState.payload.reduce((acc, curr) => {
-		return [...acc, ...curr.alerts];
-	}, initialAlerts);
+	// const initialAlerts: Alerts[] = [];
 
-	return <TriggerComponent allAlerts={allAlerts} />;
+	// const allAlerts: Alerts[] = groupState.payload.reduce((acc, curr) => {
+	//	return [...acc, ...curr.alerts];
+	// }, initialAlerts);
+
+	return <TriggerComponent allAlerts={groupState.payload} />;
 }
 
 export default TriggeredAlerts;
diff --git a/frontend/src/types/api/alerts/getTriggered.ts b/frontend/src/types/api/alerts/getTriggered.ts
new file mode 100644
index 0000000000..8b0e50a279
--- /dev/null
+++ b/frontend/src/types/api/alerts/getTriggered.ts
@@ -0,0 +1,10 @@
+import { Alerts } from './getAll';
+
+export interface Props {
+	silenced: boolean;
+	inhibited: boolean;
+	active: boolean;
+	[key: string]: string | boolean;
+}
+
+export type PayloadProps = Alerts[] | [];