From b4833eeb0efbb44569d1a0da9665e98ce72560b9 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Tue, 10 May 2022 17:27:04 +0530
Subject: [PATCH 1/3] fix: list alerts rules is handled

---
 frontend/src/container/ListAlertRules/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx
index abcf1efe58..a5c616bfe6 100644
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -8,15 +8,22 @@ import ListAlert from './ListAlert';
 
 function ListAlertRules(): JSX.Element {
 	const { t } = useTranslation('common');
-	const { data, isError, isLoading, refetch } = useQuery('allAlerts', {
+	const { data, isError, isLoading, refetch, status } = useQuery('allAlerts', {
 		queryFn: getAll,
 		cacheTime: 0,
 	});
 
+	// api failed to load the data
 	if (isError) {
 		return <div>{data?.error || t('something_went_wrong')}</div>;
 	}
 
+	// api is successful but error is present
+	if (status === 'success' && data.statusCode !== 200) {
+		return <div>{data?.error || t('something_went_wrong')}</div>;
+	}
+
+	// in case of loading
 	if (isLoading || !data?.payload) {
 		return <Spinner height="75vh" tip="Loading Rules..." />;
 	}

From 574088ad542fed583140dec3002c178c3337d598 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Tue, 10 May 2022 18:23:47 +0530
Subject: [PATCH 2/3] fix: error state is updated

---
 .../src/container/ListAlertRules/index.tsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx
index a5c616bfe6..9d1f502355 100644
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -1,6 +1,7 @@
+import { notification } from 'antd';
 import getAll from 'api/alerts/getAll';
 import Spinner from 'components/Spinner';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 
@@ -13,6 +14,14 @@ function ListAlertRules(): JSX.Element {
 		cacheTime: 0,
 	});
 
+	useEffect(() => {
+		if (status === 'error' || (status === 'success' && data.statusCode !== 200)) {
+			notification.error({
+				message: data?.error || t('something_went_wrong'),
+			});
+		}
+	}, [data?.error, data?.statusCode, status, t]);
+
 	// api failed to load the data
 	if (isError) {
 		return <div>{data?.error || t('something_went_wrong')}</div>;
@@ -20,7 +29,14 @@ function ListAlertRules(): JSX.Element {
 
 	// api is successful but error is present
 	if (status === 'success' && data.statusCode !== 200) {
-		return <div>{data?.error || t('something_went_wrong')}</div>;
+		return (
+			<ListAlert
+				{...{
+					allAlertRules: [],
+					refetch,
+				}}
+			/>
+		);
 	}
 
 	// in case of loading

From a34dbc4942243092cda627887b0c99d77073c3cf Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Fri, 13 May 2022 10:43:26 +0530
Subject: [PATCH 3/3] chore: error checking condition !=200 is moved to >=400

---
 frontend/src/container/ListAlertRules/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx
index 9d1f502355..2b81729e7e 100644
--- a/frontend/src/container/ListAlertRules/index.tsx
+++ b/frontend/src/container/ListAlertRules/index.tsx
@@ -15,7 +15,7 @@ function ListAlertRules(): JSX.Element {
 	});
 
 	useEffect(() => {
-		if (status === 'error' || (status === 'success' && data.statusCode !== 200)) {
+		if (status === 'error' || (status === 'success' && data.statusCode >= 400)) {
 			notification.error({
 				message: data?.error || t('something_went_wrong'),
 			});
@@ -28,7 +28,7 @@ function ListAlertRules(): JSX.Element {
 	}
 
 	// api is successful but error is present
-	if (status === 'success' && data.statusCode !== 200) {
+	if (status === 'success' && data.statusCode >= 400) {
 		return (
 			<ListAlert
 				{...{