From ae5e63cc6405f71cc76401cc71a24112c92ca2c0 Mon Sep 17 00:00:00 2001
From: rahulkeswani101 <rahul@signoz.io>
Date: Mon, 7 Oct 2024 12:14:09 +0530
Subject: [PATCH] fix: updated the triggered alert list code (#6127)

---
 .../src/container/TriggeredAlerts/Filter.tsx  | 18 +++++-----
 .../TriggeredAlerts/TriggeredAlert.tsx        | 20 +++++++----
 .../src/container/TriggeredAlerts/index.tsx   | 33 +++++++++++++++++--
 3 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/frontend/src/container/TriggeredAlerts/Filter.tsx b/frontend/src/container/TriggeredAlerts/Filter.tsx
index e7ebdb0d76..b71aa8298b 100644
--- a/frontend/src/container/TriggeredAlerts/Filter.tsx
+++ b/frontend/src/container/TriggeredAlerts/Filter.tsx
@@ -2,7 +2,7 @@
 import type { SelectProps } from 'antd';
 import { Tag, Tooltip } from 'antd';
 import { BaseOptionType } from 'antd/es/select';
-import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
 import { Container, Select } from './styles';
@@ -31,8 +31,8 @@ function TextOverflowTooltip({
 }
 
 function Filter({
-	setSelectedFilter,
-	setSelectedGroup,
+	onSelectedFilterChange,
+	onSelectedGroupChange,
 	allAlerts,
 	selectedGroup,
 	selectedFilter,
@@ -40,27 +40,27 @@ function Filter({
 	const onChangeSelectGroupHandler = useCallback(
 		(value: unknown) => {
 			if (typeof value === 'object' && Array.isArray(value)) {
-				setSelectedGroup(
+				onSelectedGroupChange(
 					value.map((e) => ({
 						value: e,
 					})),
 				);
 			}
 		},
-		[setSelectedGroup],
+		[onSelectedGroupChange],
 	);
 
 	const onChangeSelectedFilterHandler = useCallback(
 		(value: unknown) => {
 			if (typeof value === 'object' && Array.isArray(value)) {
-				setSelectedFilter(
+				onSelectedFilterChange(
 					value.map((e) => ({
 						value: e,
 					})),
 				);
 			}
 		},
-		[setSelectedFilter],
+		[onSelectedFilterChange],
 	);
 
 	const uniqueLabels: Array<string> = useMemo(() => {
@@ -122,8 +122,8 @@ function Filter({
 }
 
 interface FilterProps {
-	setSelectedFilter: Dispatch<SetStateAction<Array<Value>>>;
-	setSelectedGroup: Dispatch<SetStateAction<Array<Value>>>;
+	onSelectedFilterChange: (value: Array<Value>) => void;
+	onSelectedGroupChange: (value: Array<Value>) => void;
 	allAlerts: Alerts[];
 	selectedGroup: Array<Value>;
 	selectedFilter: Array<Value>;
diff --git a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
index 18d40b7a4b..24e4a3ef39 100644
--- a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
+++ b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
 import Filter, { Value } from './Filter';
@@ -6,18 +5,21 @@ import FilteredTable from './FilteredTable';
 import NoFilterTable from './NoFilterTable';
 import { NoTableContainer } from './styles';
 
-function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
-	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
-	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
-
+function TriggeredAlerts({
+	allAlerts,
+	selectedFilter,
+	selectedGroup,
+	onSelectedFilterChange,
+	onSelectedGroupChange,
+}: TriggeredAlertsProps): JSX.Element {
 	return (
 		<div>
 			<Filter
 				allAlerts={allAlerts}
 				selectedFilter={selectedFilter}
 				selectedGroup={selectedGroup}
-				setSelectedFilter={setSelectedFilter}
-				setSelectedGroup={setSelectedGroup}
+				onSelectedFilterChange={onSelectedFilterChange}
+				onSelectedGroupChange={onSelectedGroupChange}
 			/>
 
 			{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
@@ -45,6 +47,10 @@ function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
 
 interface TriggeredAlertsProps {
 	allAlerts: Alerts[];
+	selectedFilter: Array<Value>;
+	selectedGroup: Array<Value>;
+	onSelectedFilterChange: (value: Array<Value>) => void;
+	onSelectedGroupChange: (value: Array<Value>) => void;
 }
 
 export default TriggeredAlerts;
diff --git a/frontend/src/container/TriggeredAlerts/index.tsx b/frontend/src/container/TriggeredAlerts/index.tsx
index d76945edd5..0dd8641e84 100644
--- a/frontend/src/container/TriggeredAlerts/index.tsx
+++ b/frontend/src/container/TriggeredAlerts/index.tsx
@@ -4,14 +4,17 @@ import Spinner from 'components/Spinner';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useAxiosError from 'hooks/useAxiosError';
 import { isUndefined } from 'lodash-es';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 
+import { Value } from './Filter';
 import TriggerComponent from './TriggeredAlert';
 
 function TriggeredAlerts(): JSX.Element {
+	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
+	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
 	const userId = useSelector<AppState, string | undefined>(
 		(state) => state.app.user?.userId,
 	);
@@ -34,6 +37,14 @@ function TriggeredAlerts(): JSX.Element {
 		},
 	);
 
+	const handleSelectedFilterChange = useCallback((newFilter: Value[]) => {
+		setSelectedFilter(newFilter);
+	}, []);
+
+	const handleSelectedGroupChange = useCallback((newGroup: Value[]) => {
+		setSelectedGroup(newGroup);
+	}, []);
+
 	useEffect(() => {
 		if (!hasLoggedEvent.current && !isUndefined(alertsResponse.data?.payload)) {
 			logEvent('Alert: Triggered alert list page visited', {
@@ -44,14 +55,30 @@ function TriggeredAlerts(): JSX.Element {
 	}, [alertsResponse.data?.payload]);
 
 	if (alertsResponse.error) {
-		return <TriggerComponent allAlerts={[]} />;
+		return (
+			<TriggerComponent
+				allAlerts={[]}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				onSelectedFilterChange={handleSelectedFilterChange}
+				onSelectedGroupChange={handleSelectedGroupChange}
+			/>
+		);
 	}
 
 	if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
 		return <Spinner height="75vh" tip="Loading Alerts..." />;
 	}
 
-	return <TriggerComponent allAlerts={alertsResponse?.data?.payload || []} />;
+	return (
+		<TriggerComponent
+			allAlerts={alertsResponse?.data?.payload || []}
+			selectedFilter={selectedFilter}
+			selectedGroup={selectedGroup}
+			onSelectedFilterChange={handleSelectedFilterChange}
+			onSelectedGroupChange={handleSelectedGroupChange}
+		/>
+	);
 }
 
 export default TriggeredAlerts;