feat: triggered alerts is migrated to useQuery (#2814)

* feat: alerts is migrated to useQuery

* chore: review comments is updated

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Rajat Dabade <rajat@signoz.io>

frontend/src/constants/reactQueryKeys.ts

@@ -2,4 +2,5 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_LICENCES: 'GET_ALL_LICENCES',
 	GET_QUERY_RANGE: 'GET_QUERY_RANGE',
 	GET_ALL_DASHBOARDS: 'GET_ALL_DASHBOARDS',
+	GET_TRIGGERED_ALERTS: 'GET_TRIGGERED_ALERTS',
 };

frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx

@@ -1,5 +1,3 @@
-import getTriggeredApi from 'api/alerts/getTriggered';
-import useInterval from 'hooks/useInterval';
 import { useState } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
@@ -9,68 +7,34 @@ import NoFilterTable from './NoFilterTable';
 import { NoTableContainer } from './styles';
 
 function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
-	const [allInitialAlerts, setInitialAlerts] = useState(allAlerts || []);
-
-	useInterval(() => {
-		(async (): Promise<void> => {
-			const response = await getTriggeredApi({
-				active: true,
-				inhibited: true,
-				silenced: false,
-			});
-
-			if (response.statusCode === 200 && response.payload !== null) {
-				// 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);
-
-				setInitialAlerts(response.payload);
-			}
-		})();
-	}, 30000);
-
 	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
 	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
 
 	return (
 		<div>
 			<Filter
-				{...{
+				allAlerts={allAlerts}
-					allAlerts: allInitialAlerts,
+				selectedFilter={selectedFilter}
-					selectedFilter,
+				selectedGroup={selectedGroup}
-					selectedGroup,
+				setSelectedFilter={setSelectedFilter}
-					setSelectedFilter,
+				setSelectedGroup={setSelectedGroup}
-					setSelectedGroup,
-				}}
 			/>
 
 			{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
 				<NoTableContainer>
-					<NoFilterTable
+					<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
-						selectedFilter={selectedFilter}
-						allAlerts={allInitialAlerts}
-					/>
 				</NoTableContainer>
 			) : (
 				<div>
 					{selectedFilter.length !== 0 && selectedGroup.length === 0 ? (
 						<NoTableContainer>
-							<NoFilterTable
+							<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
-								selectedFilter={selectedFilter}
-								allAlerts={allInitialAlerts}
-							/>
 						</NoTableContainer>
 					) : (
 						<FilteredTable
-							{...{
+							allAlerts={allAlerts}
-								allAlerts: allInitialAlerts,
+							selectedFilter={selectedFilter}
-								selectedFilter,
+							selectedGroup={selectedGroup}
-								selectedGroup,
-							}}
 						/>
 					)}
 				</div>

frontend/src/container/TriggeredAlerts/index.tsx

@@ -1,91 +1,43 @@
 import getTriggeredApi from 'api/alerts/getTriggered';
 import Spinner from 'components/Spinner';
-import { State } from 'hooks/useFetch';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useNotifications } from 'hooks/useNotifications';
+import useAxiosError from 'hooks/useAxiosError';
-import { useCallback, useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
-import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
-import { PayloadProps } from 'types/api/alerts/getTriggered';
+import { AppState } from 'store/reducers';
 
 import TriggerComponent from './TriggeredAlert';
 
 function TriggeredAlerts(): JSX.Element {
-	const [groupState, setGroupState] = useState<State<PayloadProps>>({
+	const userId = useSelector<AppState, string | undefined>(
-		error: false,
+		(state) => state.app.user?.userId,
-		errorMessage: '',
+	);
-		loading: true,
-		success: false,
-		payload: [],
-	});
-	const { t } = useTranslation(['common']);
-	const { notifications } = useNotifications();
 
-	const fetchData = useCallback(async () => {
+	const handleError = useAxiosError();
-		try {
-			setGroupState((state) => ({
-				...state,
-				loading: true,
-			}));
 
-			const response = await getTriggeredApi({
+	const alertsResponse = useQuery(
-				active: true,
+		[REACT_QUERY_KEY.GET_TRIGGERED_ALERTS, userId],
-				inhibited: true,
+		{
-				silenced: false,
+			queryFn: () =>
-			});
+				getTriggeredApi({
+					active: true,
+					inhibited: true,
+					silenced: false,
+				}),
+			refetchInterval: 30000,
+			onError: handleError,
+		},
+	);
 
-			if (response.statusCode === 200) {
+	if (alertsResponse.error) {
-				setGroupState((state) => ({
-					...state,
-					loading: false,
-					payload: response.payload || [],
-				}));
-			} else {
-				setGroupState((state) => ({
-					...state,
-					loading: false,
-					error: true,
-					errorMessage: response.error || 'Something went wrong',
-				}));
-			}
-		} catch (error) {
-			setGroupState((state) => ({
-				...state,
-				error: true,
-				loading: false,
-				errorMessage: 'Something went wrong',
-			}));
-		}
-	}, []);
-
-	useEffect(() => {
-		fetchData();
-	}, [fetchData]);
-
-	useEffect(() => {
-		if (groupState.error) {
-			notifications.error({
-				message: groupState.errorMessage || t('something_went_wrong'),
-			});
-		}
-	}, [groupState.error, groupState.errorMessage, t, notifications]);
-
-	if (groupState.error) {
 		return <TriggerComponent allAlerts={[]} />;
 	}
 
-	if (groupState.loading || groupState.payload === undefined) {
+	if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
 		return <Spinner height="75vh" tip="Loading Alerts..." />;
 	}
 
-	// commented the reduce() call as we no longer use /alerts/groups
+	return <TriggerComponent allAlerts={alertsResponse?.data?.payload || []} />;
-	// API from alert manager, which returns a group for each receiver
-
-	// const initialAlerts: Alerts[] = [];
-
-	// const allAlerts: Alerts[] = groupState.payload.reduce((acc, curr) => {
-	//	return [...acc, ...curr.alerts];
-	// }, initialAlerts);
-
-	return <TriggerComponent allAlerts={groupState.payload} />;
 }
 
 export default TriggeredAlerts;