refactor: antdv5 notfications (#2161)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/AppRoutes/Private.tsx

@@ -47,6 +47,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const currentRoute = mapRoutes.get('current');
 
 	const navigateToLoginIfNotLoggedIn = (isLoggedIn = isLoggedInState): void => {
@@ -106,7 +108,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 							} else {
 								Logout();
 
-								notification.error({
+								notifications.error({
 									message: response.error || t('something_went_wrong'),
 								});
 							}
@@ -155,7 +157,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	// NOTE: disabling this rule as there is no need to have div
 	// eslint-disable-next-line react/jsx-no-useless-fragment
-	return <>{children}</>;
+	return (
+		<>
+			{NotificationElement}
+			{children}
+		</>
+	);
 }
 
 interface PrivateRouteProps {

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -7,14 +7,14 @@ function CopyClipboardHOC({
 	children,
 }: CopyClipboardHOCProps): JSX.Element {
 	const [value, setCopy] = useCopyToClipboard();
-
+	const [notifications, NotificationElement] = notification.useNotification();
 	useEffect(() => {
 		if (value.value) {
-			notification.success({
+			notifications.success({
 				message: 'Copied to clipboard',
 			});
 		}
-	}, [value]);
+	}, [value, notifications]);
 
 	const onClick = useCallback((): void => {
 		setCopy(textToCopy);
@@ -22,6 +22,7 @@ function CopyClipboardHOC({
 
 	return (
 		<span onClick={onClick} onKeyDown={onClick} role="button" tabIndex={0}>
+			{NotificationElement}
 			<Popover
 				placement="top"
 				content={<span style={{ fontSize: '0.9rem' }}>Copy to clipboard</span>}

frontend/src/components/Logs/LogItem/index.tsx

@@ -79,6 +79,7 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
 	const dispatch = useDispatch();
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 	const [, setCopy] = useCopyToClipboard();
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const handleDetailedView = useCallback(() => {
 		dispatch({
@@ -89,13 +90,14 @@ function LogItem({ logData }: LogItemProps): JSX.Element {
 
 	const handleCopyJSON = (): void => {
 		setCopy(JSON.stringify(logData, null, 2));
-		notification.success({
+		notifications.success({
 			message: 'Copied to clipboard',
 		});
 	};
 
 	return (
 		<Container>
+			{NotificationElement}
 			<div>
 				<div>
 					{'{'}

frontend/src/container/AllError/index.tsx

@@ -127,14 +127,15 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	useEffect(() => {
 		if (data?.error) {
-			notification.error({
+			notifications.error({
 				message: data.error || t('something_went_wrong'),
 			});
 		}
-	}, [data?.error, data?.payload, t]);
+	}, [data?.error, data?.payload, t, notifications]);
 
 	const getDateValue = (value: string): JSX.Element => (
 		<Typography>{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}</Typography>
@@ -379,21 +380,24 @@ function AllErrors(): JSX.Element {
 	);
 
 	return (
-		<Table
+		<>
-			tableLayout="fixed"
+			{NotificationElement}
-			dataSource={data?.payload as Exception[]}
+			<Table
-			columns={columns}
+				tableLayout="fixed"
-			rowKey="firstSeen"
+				dataSource={data?.payload as Exception[]}
-			loading={isLoading || false || errorCountResponse.status === 'loading'}
+				columns={columns}
-			pagination={{
+				rowKey="firstSeen"
-				pageSize: getUpdatedPageSize,
+				loading={isLoading || false || errorCountResponse.status === 'loading'}
-				responsive: true,
+				pagination={{
-				current: getUpdatedOffset / 10 + 1,
+					pageSize: getUpdatedPageSize,
-				position: ['bottomLeft'],
+					responsive: true,
-				total: errorCountResponse.data?.payload || 0,
+					current: getUpdatedOffset / 10 + 1,
-			}}
+					position: ['bottomLeft'],
-			onChange={onChangeHandler}
+					total: errorCountResponse.data?.payload || 0,
-		/>
+				}}
+				onChange={onChangeHandler}
+			/>
+		</>
 	);
 }
 

frontend/src/container/AppLayout/index.tsx

@@ -91,6 +91,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const latestVersionCounter = useRef(0);
 	const latestConfigCounter = useRef(0);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (
 			getUserLatestVersionResponse.isFetched &&
@@ -105,7 +107,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					isError: true,
 				},
 			});
-			notification.error({
+			notifications.error({
 				message: t('oops_something_went_wrong_version'),
 			});
 		}
@@ -123,7 +125,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					isError: true,
 				},
 			});
-			notification.error({
+			notifications.error({
 				message: t('oops_something_went_wrong_version'),
 			});
 		}
@@ -219,12 +221,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		getDynamicConfigsResponse.data,
 		getDynamicConfigsResponse.isFetched,
 		getDynamicConfigsResponse.isSuccess,
+		notifications,
 	]);
 
 	const isToDisplayLayout = isLoggedIn;
 
 	return (
 		<Layout>
+			{NotificationElement}
 			{isToDisplayLayout && <Header />}
 			<Layout>
 				{isToDisplayLayout && <SideNav />}

frontend/src/container/ErrorDetails/index.tsx

@@ -77,13 +77,15 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 		[],
 	);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onClickErrorIdHandler = async (
 		id: string,
 		timestamp: string,
 	): Promise<void> => {
 		try {
 			if (id.length === 0) {
-				notification.error({
+				notifications.error({
 					message: 'Error Id cannot be empty',
 				});
 				return;
@@ -95,7 +97,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				}&timestamp=${getNanoSeconds(timestamp)}&errorId=${id}`,
 			);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong'),
 			});
 		}
@@ -116,6 +118,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 	return (
 		<>
+			{NotificationElement}
 			<Typography>{errorDetail.exceptionType}</Typography>
 			<Typography>{errorDetail.exceptionMessage}</Typography>
 			<Divider />

frontend/src/container/FormAlertRules/ChannelSelect/index.tsx

@@ -20,12 +20,14 @@ function ChannelSelect({
 
 	const { loading, payload, error, errorMessage } = useFetch(getChannels);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const handleChange = (value: string[]): void => {
 		onSelectChannels(value);
 	};
 
 	if (error && errorMessage !== '') {
-		notification.error({
+		notifications.error({
 			message: 'Error',
 			description: errorMessage,
 		});
@@ -48,19 +50,22 @@ function ChannelSelect({
 		return children;
 	};
 	return (
-		<StyledSelect
+		<>
-			status={error ? 'error' : ''}
+			{NotificationElement}
-			mode="multiple"
+			<StyledSelect
-			style={{ width: '100%' }}
+				status={error ? 'error' : ''}
-			placeholder={t('placeholder_channel_select')}
+				mode="multiple"
-			value={currentValue}
+				style={{ width: '100%' }}
-			onChange={(value): void => {
+				placeholder={t('placeholder_channel_select')}
-				handleChange(value as string[]);
+				value={currentValue}
-			}}
+				onChange={(value): void => {
-			optionLabelProp="label"
+					handleChange(value as string[]);
-		>
+				}}
-			{renderOptions()}
+				optionLabelProp="label"
-		</StyledSelect>
+			>
+				{renderOptions()}
+			</StyledSelect>
+		</>
 	);
 }
 

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -163,10 +163,11 @@ function QuerySection({
 			...allQueries,
 		});
 	};
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const addMetricQuery = useCallback(() => {
 		if (Object.keys(metricQueries).length > 5) {
-			notification.error({
+			notifications.error({
 				message: t('metric_query_max_limit'),
 			});
 			return;
@@ -191,7 +192,7 @@ function QuerySection({
 			expression: queryLabel,
 		};
 		setMetricQueries({ ...queries });
-	}, [t, getNextQueryLabel, metricQueries, setMetricQueries]);
+	}, [t, getNextQueryLabel, metricQueries, setMetricQueries, notifications]);
 
 	const addFormula = useCallback(() => {
 		// defaulting to F1 as only one formula is supported
@@ -350,6 +351,7 @@ function QuerySection({
 	};
 	return (
 		<>
+			{NotificationElement}
 			<StepHeading> {t('alert_form_step1')}</StepHeading>
 			<FormContainer>
 				<div style={{ display: 'flex' }}>{renderTabs(alertType)}</div>

frontend/src/container/FormAlertRules/index.tsx

@@ -190,12 +190,14 @@ function FormAlertRules({
 			});
 		}
 	};
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const validatePromParams = useCallback((): boolean => {
 		let retval = true;
 		if (queryCategory !== EQueryType.PROM) return retval;
 
 		if (!promQueries || Object.keys(promQueries).length === 0) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('promql_required'),
 			});
@@ -204,7 +206,7 @@ function FormAlertRules({
 
 		Object.keys(promQueries).forEach((key) => {
 			if (promQueries[key].query === '') {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: t('promql_required'),
 				});
@@ -213,14 +215,14 @@ function FormAlertRules({
 		});
 
 		return retval;
-	}, [t, promQueries, queryCategory]);
+	}, [t, promQueries, queryCategory, notifications]);
 
 	const validateChQueryParams = useCallback((): boolean => {
 		let retval = true;
 		if (queryCategory !== EQueryType.CLICKHOUSE) return retval;
 
 		if (!chQueries || Object.keys(chQueries).length === 0) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('chquery_required'),
 			});
@@ -229,7 +231,7 @@ function FormAlertRules({
 
 		Object.keys(chQueries).forEach((key) => {
 			if (chQueries[key].rawQuery === '') {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: t('chquery_required'),
 				});
@@ -238,14 +240,14 @@ function FormAlertRules({
 		});
 
 		return retval;
-	}, [t, chQueries, queryCategory]);
+	}, [t, chQueries, queryCategory, notifications]);
 
 	const validateQBParams = useCallback((): boolean => {
 		let retval = true;
 		if (queryCategory !== EQueryType.QUERY_BUILDER) return true;
 
 		if (!metricQueries || Object.keys(metricQueries).length === 0) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('condition_required'),
 			});
@@ -253,7 +255,7 @@ function FormAlertRules({
 		}
 
 		if (!alertDef.condition?.target) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('target_missing'),
 			});
@@ -262,7 +264,7 @@ function FormAlertRules({
 
 		Object.keys(metricQueries).forEach((key) => {
 			if (metricQueries[key].metricName === '') {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: t('metricname_missing', { where: metricQueries[key].name }),
 				});
@@ -272,7 +274,7 @@ function FormAlertRules({
 
 		Object.keys(formulaQueries).forEach((key) => {
 			if (formulaQueries[key].expression === '') {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: t('expression_missing', formulaQueries[key].name),
 				});
@@ -280,11 +282,11 @@ function FormAlertRules({
 			}
 		});
 		return retval;
-	}, [t, alertDef, queryCategory, metricQueries, formulaQueries]);
+	}, [t, alertDef, queryCategory, metricQueries, formulaQueries, notifications]);
 
 	const isFormValid = useCallback((): boolean => {
 		if (!alertDef.alert || alertDef.alert === '') {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('alertname_required'),
 			});
@@ -300,7 +302,14 @@ function FormAlertRules({
 		}
 
 		return validateQBParams();
-	}, [t, validateQBParams, validateChQueryParams, alertDef, validatePromParams]);
+	}, [
+		t,
+		validateQBParams,
+		validateChQueryParams,
+		alertDef,
+		validatePromParams,
+		notifications,
+	]);
 
 	const preparePostData = (): AlertDef => {
 		const postableAlert: AlertDef = {
@@ -348,7 +357,7 @@ function FormAlertRules({
 			const response = await saveAlertApi(apiReq);
 
 			if (response.statusCode === 200) {
-				notification.success({
+				notifications.success({
 					message: 'Success',
 					description:
 						!ruleId || ruleId === 0 ? t('rule_created') : t('rule_edited'),
@@ -361,19 +370,26 @@ function FormAlertRules({
 					history.replace(ROUTES.LIST_ALL_ALERT);
 				}, 2000);
 			} else {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (e) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('unexpected_error'),
 			});
 		}
 		setLoading(false);
-	}, [t, isFormValid, ruleId, ruleCache, memoizedPreparePostData]);
+	}, [
+		t,
+		isFormValid,
+		ruleId,
+		ruleCache,
+		memoizedPreparePostData,
+		notifications,
+	]);
 
 	const onSaveHandler = useCallback(async () => {
 		const content = (
@@ -407,30 +423,30 @@ function FormAlertRules({
 			if (response.statusCode === 200) {
 				const { payload } = response;
 				if (payload?.alertCount === 0) {
-					notification.error({
+					notifications.error({
 						message: 'Error',
 						description: t('no_alerts_found'),
 					});
 				} else {
-					notification.success({
+					notifications.success({
 						message: 'Success',
 						description: t('rule_test_fired'),
 					});
 				}
 			} else {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (e) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('unexpected_error'),
 			});
 		}
 		setLoading(false);
-	}, [t, isFormValid, memoizedPreparePostData]);
+	}, [t, isFormValid, memoizedPreparePostData, notifications]);
 
 	const renderBasicInfo = (): JSX.Element => (
 		<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
@@ -467,6 +483,7 @@ function FormAlertRules({
 	);
 	return (
 		<>
+			{NotificationElement}
 			{Element}
 			<PanelContainer>
 				<StyledLeftContainer flex="5 1 600px">

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -172,6 +172,8 @@ function GeneralSettings({
 		logsTtlValuesPayload.status === 'pending' ? 1000 : null,
 	);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onModalToggleHandler = (type: TTTLType): void => {
 		if (type === 'metrics') setModalMetrics((modal) => !modal);
 		if (type === 'traces') setModalTraces((modal) => !modal);
@@ -186,14 +188,14 @@ function GeneralSettings({
 	const onClickSaveHandler = useCallback(
 		(type: TTTLType) => {
 			if (!setRetentionPermission) {
-				notification.error({
+				notifications.error({
 					message: `Sorry you don't have permission to make these changes`,
 				});
 				return;
 			}
 			onModalToggleHandler(type);
 		},
-		[setRetentionPermission],
+		[setRetentionPermission, notifications],
 	);
 
 	const s3Enabled = useMemo(
@@ -352,7 +354,7 @@ function GeneralSettings({
 			let hasSetTTLFailed = false;
 			if (setTTLResponse.statusCode === 409) {
 				hasSetTTLFailed = true;
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: t('retention_request_race_condition'),
 					placement: 'topRight',
@@ -390,7 +392,7 @@ function GeneralSettings({
 					});
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('retention_failed_message'),
 				placement: 'topRight',
@@ -591,6 +593,7 @@ function GeneralSettings({
 
 	return (
 		<>
+			{NotificationElement}
 			{Element}
 			<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 				<ErrorTextContainer>

frontend/src/container/GridGraphLayout/index.tsx

@@ -204,6 +204,8 @@ function GridGraph(props: Props): JSX.Element {
 		[widgets, onDragSelect],
 	);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onEmptyWidgetHandler = useCallback(async () => {
 		try {
 			const id = 'empty';
@@ -219,22 +221,25 @@ function GridGraph(props: Props): JSX.Element {
 				...(data.layout || []),
 			];
 
-			await UpdateDashboard({
+			await UpdateDashboard(
-				data,
+				{
-				generateWidgetId: id,
+					data,
-				graphType: 'EMPTY_WIDGET',
+					generateWidgetId: id,
-				selectedDashboard,
+					graphType: 'EMPTY_WIDGET',
-				layout,
+					selectedDashboard,
-				isRedirected: false,
+					layout,
-			});
+					isRedirected: false,
+				},
+				notifications,
+			);
 
 			setLayoutFunction(layout);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: error instanceof Error ? error.toString() : 'Something went wrong',
 			});
 		}
-	}, [data, selectedDashboard, setLayoutFunction]);
+	}, [data, selectedDashboard, setLayoutFunction, notifications]);
 
 	const onLayoutChangeHandler = async (layout: Layout[]): Promise<void> => {
 		setLayoutFunction(layout);
@@ -255,7 +260,7 @@ function GridGraph(props: Props): JSX.Element {
 						toggleAddWidget(true);
 					})
 					.catch(() => {
-						notification.error(t('something_went_wrong'));
+						notifications.error(t('something_went_wrong'));
 					});
 			} else {
 				toggleAddWidget(true);
@@ -263,26 +268,29 @@ function GridGraph(props: Props): JSX.Element {
 			}
 		} catch (error) {
 			if (typeof error === 'string') {
-				notification.error({
+				notifications.error({
 					message: error || t('something_went_wrong'),
 				});
 			}
 		}
-	}, [layouts, onEmptyWidgetHandler, t, toggleAddWidget]);
+	}, [layouts, onEmptyWidgetHandler, t, toggleAddWidget, notifications]);
 
 	return (
-		<GraphLayoutContainer
+		<>
-			{...{
+			{NotificationElement}
-				addPanelLoading,
+			<GraphLayoutContainer
-				layouts,
+				{...{
-				onAddPanelHandler,
+					addPanelLoading,
-				onLayoutChangeHandler,
+					layouts,
-				onLayoutSaveHandler,
+					onAddPanelHandler,
-				saveLayoutState,
+					onLayoutChangeHandler,
-				widgets,
+					onLayoutSaveHandler,
-				setLayout,
+					saveLayoutState,
-			}}
+					widgets,
-		/>
+					setLayout,
+				}}
+			/>
+		</>
 	);
 }
 

frontend/src/container/GridGraphLayout/utils.ts

@@ -1,4 +1,4 @@
-import { notification } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import updateDashboardApi from 'api/dashboard/update';
 import {
 	ClickHouseQueryTemplate,
@@ -12,14 +12,17 @@ import store from 'store';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { EQueryType } from 'types/common/dashboard';
 
-export const UpdateDashboard = async ({
+export const UpdateDashboard = async (
-	data,
+	{
-	graphType,
+		data,
-	generateWidgetId,
+		graphType,
-	layout,
+		generateWidgetId,
-	selectedDashboard,
+		layout,
-	isRedirected,
+		selectedDashboard,
-}: UpdateDashboardProps): Promise<Dashboard | undefined> => {
+		isRedirected,
+	}: UpdateDashboardProps,
+	notify: NotificationInstance,
+): Promise<Dashboard | undefined> => {
 	const updatedSelectedDashboard: Dashboard = {
 		...selectedDashboard,
 		data: {
@@ -89,7 +92,7 @@ export const UpdateDashboard = async ({
 		if (response.statusCode === 200) {
 			return response.payload;
 		}
-		notification.error({
+		notify.error({
 			message: response.error || 'Something went wrong',
 		});
 		return undefined;

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -26,10 +26,12 @@ function ApplyLicenseForm({
 		enabled: false,
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onFinish = async (values: unknown | { key: string }): Promise<void> => {
 		const params = values as { key: string };
 		if (params.key === '' || !params.key) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('enter_license_key'),
 			});
@@ -53,18 +55,18 @@ function ApplyLicenseForm({
 						payload: featureFlagsResponse.data.payload,
 					});
 				}
-				notification.success({
+				notifications.success({
 					message: 'Success',
 					description: t('license_applied'),
 				});
 			} else {
-				notification.error({
+				notifications.error({
 					message: 'Error',
 					description: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (e) {
-			notification.error({
+			notifications.error({
 				message: 'Error',
 				description: t('unexpected_error'),
 			});
@@ -74,6 +76,7 @@ function ApplyLicenseForm({
 
 	return (
 		<ApplyFormContainer>
+			{NotificationElement}
 			<ApplyForm layout="inline" onFinish={onFinish}>
 				<LicenseInput labelAlign="left" name="key">
 					<Input

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -30,6 +30,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		role,
 	);
 
+	const [notificationsApi, NotificationElement] = notification.useNotification();
+
 	useInterval(() => {
 		(async (): Promise<void> => {
 			const { data: refetchData, status } = await refetch();
@@ -37,7 +39,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				setData(refetchData?.payload || []);
 			}
 			if (status === 'error') {
-				notification.error({
+				notificationsApi.error({
 					message: t('something_went_wrong'),
 				});
 			}
@@ -145,6 +147,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 
 	return (
 		<>
+			{NotificationElement}
 			{Element}
 
 			<ButtonContainer>

frontend/src/container/ListAlertRules/ToggleAlertState.tsx

@@ -20,6 +20,8 @@ function ToggleAlertState({
 		payload: undefined,
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const defaultErrorMessage = 'Something went wrong';
 
 	const onToggleHandler = async (
@@ -58,7 +60,7 @@ function ToggleAlertState({
 					loading: false,
 					payload: response.payload,
 				}));
-				notification.success({
+				notifications.success({
 					message: 'Success',
 				});
 			} else {
@@ -69,7 +71,7 @@ function ToggleAlertState({
 					errorMessage: response.error || defaultErrorMessage,
 				}));
 
-				notification.error({
+				notifications.error({
 					message: response.error || defaultErrorMessage,
 				});
 			}
@@ -81,21 +83,24 @@ function ToggleAlertState({
 				errorMessage: defaultErrorMessage,
 			}));
 
-			notification.error({
+			notifications.error({
 				message: defaultErrorMessage,
 			});
 		}
 	};
 
 	return (
-		<ColumnButton
+		<>
-			disabled={apiStatus.loading || false}
+			{NotificationElement}
-			loading={apiStatus.loading || false}
+			<ColumnButton
-			onClick={(): Promise<void> => onToggleHandler(id, !disabled)}
+				disabled={apiStatus.loading || false}
-			type="link"
+				loading={apiStatus.loading || false}
-		>
+				onClick={(): Promise<void> => onToggleHandler(id, !disabled)}
-			{disabled ? 'Enable' : 'Disable'}
+				type="link"
-		</ColumnButton>
+			>
+				{disabled ? 'Enable' : 'Disable'}
+			</ColumnButton>
+		</>
 	);
 }
 

frontend/src/container/ListAlertRules/index.tsx

@@ -17,28 +17,38 @@ function ListAlertRules(): JSX.Element {
 		cacheTime: 0,
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (status === 'error' || (status === 'success' && data.statusCode >= 400)) {
-			notification.error({
+			notifications.error({
 				message: data?.error || t('something_went_wrong'),
 			});
 		}
-	}, [data?.error, data?.statusCode, status, t]);
+	}, [data?.error, data?.statusCode, status, t, notifications]);
 
 	// api failed to load the data
 	if (isError) {
-		return <div>{data?.error || t('something_went_wrong')}</div>;
+		return (
+			<div>
+				{NotificationElement}
+				{data?.error || t('something_went_wrong')}
+			</div>
+		);
 	}
 
 	// api is successful but error is present
 	if (status === 'success' && data.statusCode >= 400) {
 		return (
-			<ListAlert
+			<>
-				{...{
+				{NotificationElement}
-					allAlertRules: [],
+				<ListAlert
-					refetch,
+					{...{
-				}}
+						allAlertRules: [],
-			/>
+						refetch,
+					}}
+				/>
+			</>
 		);
 	}
 
@@ -49,6 +59,7 @@ function ListAlertRules(): JSX.Element {
 
 	return (
 		<Space direction="vertical" size="large" style={{ width: '100%' }}>
+			{NotificationElement}
 			<ReleaseNote path={location.pathname} />
 			<ListAlert
 				{...{

frontend/src/container/ListOfDashboard/ImportJSON/index.tsx

@@ -41,6 +41,8 @@ function ImportJSON({
 
 	const [editorValue, setEditorValue] = useState<string>('');
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onChangeHandler: UploadProps['onChange'] = (info) => {
 		const { fileList } = info;
 		const reader = new FileReader();
@@ -106,7 +108,7 @@ function ImportJSON({
 				}, 10);
 			} else {
 				setIsCreateDashboardError(true);
-				notification.error({
+				notifications.error({
 					message:
 						response.error ||
 						t('something_went_wrong', {
@@ -130,58 +132,61 @@ function ImportJSON({
 	);
 
 	return (
-		<Modal
+		<>
-			open={isImportJSONModalVisible}
+			{NotificationElement}
-			centered
+			<Modal
-			maskClosable
+				open={isImportJSONModalVisible}
-			destroyOnClose
+				centered
-			width="70vw"
+				maskClosable
-			onCancel={onModalHandler}
+				destroyOnClose
-			title={
+				width="70vw"
-				<>
+				onCancel={onModalHandler}
-					<Typography.Title level={4}>{t('import_json')}</Typography.Title>
+				title={
-					<Typography>{t('import_dashboard_by_pasting')}</Typography>
+					<>
-				</>
+						<Typography.Title level={4}>{t('import_json')}</Typography.Title>
-			}
+						<Typography>{t('import_dashboard_by_pasting')}</Typography>
-			footer={
+					</>
-				<FooterContainer>
+				}
-					<Button
+				footer={
-						disabled={editorValue.length === 0}
+					<FooterContainer>
-						onClick={onClickLoadJsonHandler}
+						<Button
-						loading={dashboardCreating}
+							disabled={editorValue.length === 0}
-					>
+							onClick={onClickLoadJsonHandler}
-						{t('load_json')}
+							loading={dashboardCreating}
-					</Button>
+						>
-					{isCreateDashboardError && getErrorNode(t('error_loading_json'))}
+							{t('load_json')}
-				</FooterContainer>
+						</Button>
-			}
+						{isCreateDashboardError && getErrorNode(t('error_loading_json'))}
-		>
+					</FooterContainer>
-			<div>
+				}
-				<Space direction="horizontal">
+			>
-					<Upload
+				<div>
-						accept=".json"
+					<Space direction="horizontal">
-						showUploadList={false}
+						<Upload
-						multiple={false}
+							accept=".json"
-						onChange={onChangeHandler}
+							showUploadList={false}
-						beforeUpload={(): boolean => false}
+							multiple={false}
-						action="none"
+							onChange={onChangeHandler}
-						data={jsonData}
+							beforeUpload={(): boolean => false}
-					>
+							action="none"
-						<Button type="primary">{t('upload_json_file')}</Button>
+							data={jsonData}
-					</Upload>
+						>
-					{isUploadJSONError && <>{getErrorNode(t('error_upload_json'))}</>}
+							<Button type="primary">{t('upload_json_file')}</Button>
-				</Space>
+						</Upload>
+						{isUploadJSONError && <>{getErrorNode(t('error_upload_json'))}</>}
+					</Space>
 
-				<EditorContainer>
+					<EditorContainer>
-					<Typography.Paragraph>{t('paste_json_below')}</Typography.Paragraph>
+						<Typography.Paragraph>{t('paste_json_below')}</Typography.Paragraph>
-					<Editor
+						<Editor
-						onChange={(newValue): void => setEditorValue(newValue)}
+							onChange={(newValue): void => setEditorValue(newValue)}
-						value={editorValue}
+							value={editorValue}
-						language="json"
+							language="json"
-					/>
+						/>
-				</EditorContainer>
+					</EditorContainer>
-			</div>
+				</div>
-		</Modal>
+			</Modal>
+		</>
 	);
 }
 

frontend/src/container/Login/index.tsx

@@ -42,6 +42,8 @@ function Login({
 	const [precheckInProcess, setPrecheckInProcess] = useState(false);
 	const [precheckComplete, setPrecheckComplete] = useState(false);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (withPassword === 'Y') {
 			setPrecheckComplete(true);
@@ -62,15 +64,15 @@ function Login({
 
 	useEffect(() => {
 		if (ssoerror !== '') {
-			notification.error({
+			notifications.error({
 				message: t('failed_to_login'),
 			});
 		}
-	}, [ssoerror, t]);
+	}, [ssoerror, t, notifications]);
 
 	const onNextHandler = async (): Promise<void> => {
 		if (!email) {
-			notification.error({
+			notifications.error({
 				message: t('invalid_email'),
 			});
 			return;
@@ -88,18 +90,18 @@ function Login({
 				if (isUser) {
 					setPrecheckComplete(true);
 				} else {
-					notification.error({
+					notifications.error({
 						message: t('invalid_account'),
 					});
 				}
 			} else {
-				notification.error({
+				notifications.error({
 					message: t('invalid_config'),
 				});
 			}
 		} catch (e) {
 			console.log('failed to call precheck Api', e);
-			notification.error({ message: t('unexpected_error') });
+			notifications.error({ message: t('unexpected_error') });
 		}
 		setPrecheckInProcess(false);
 	};
@@ -144,14 +146,14 @@ function Login({
 				);
 				history.push(ROUTES.APPLICATION);
 			} else {
-				notification.error({
+				notifications.error({
 					message: response.error || t('unexpected_error'),
 				});
 			}
 			setIsLoading(false);
 		} catch (error) {
 			setIsLoading(false);
-			notification.error({
+			notifications.error({
 				message: t('unexpected_error'),
 			});
 		}
@@ -183,6 +185,7 @@ function Login({
 
 	return (
 		<FormWrapper>
+			{NotificationElement}
 			<FormContainer onSubmit={onSubmitHandler}>
 				<Title level={4}>{t('login_page_title')}</Title>
 				<ParentContainer>

frontend/src/container/LogsSearchFilter/SearchFields/index.tsx

@@ -36,6 +36,8 @@ function SearchFields({
 
 	const keyPrefixRef = useRef(hashCode(JSON.stringify(fieldsQuery)));
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		const updatedFieldsQuery = createParsedQueryStructure([
 			...parsedQuery,
@@ -81,7 +83,7 @@ function SearchFields({
 		const flatParsedQuery = flatten(fieldsQuery);
 
 		if (!fieldsQueryIsvalid(flatParsedQuery)) {
-			notification.error({
+			notifications.error({
 				message: 'Please enter a valid criteria for each of the selected fields',
 			});
 			return;
@@ -90,7 +92,7 @@ function SearchFields({
 		keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
 		updateParsedQuery(flatParsedQuery);
 		onDropDownToggleHandler(false)();
-	}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery]);
+	}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery, notifications]);
 
 	const clearFilters = useCallback((): void => {
 		keyPrefixRef.current = hashCode(JSON.stringify([]));
@@ -100,6 +102,7 @@ function SearchFields({
 
 	return (
 		<>
+			{NotificationElement}
 			<QueryBuilder
 				key={keyPrefixRef.current}
 				keyPrefix={keyPrefixRef.current}

frontend/src/container/MySettings/Password/index.tsx

@@ -23,6 +23,8 @@ function PasswordContainer(): JSX.Element {
 		ns: 'settings',
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (currentPassword && !isPasswordValid(currentPassword)) {
 			setIsPasswordPolicyError(true);
@@ -52,13 +54,13 @@ function PasswordContainer(): JSX.Element {
 			});
 
 			if (statusCode === 200) {
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
 				});
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						error ||
 						t('something_went_wrong', {
@@ -70,7 +72,7 @@ function PasswordContainer(): JSX.Element {
 		} catch (error) {
 			setIsLoading(false);
 
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -80,6 +82,7 @@ function PasswordContainer(): JSX.Element {
 
 	return (
 		<Space direction="vertical" size="large">
+			{NotificationElement}
 			<Typography.Title level={3}>
 				{t('change_password', {
 					ns: 'settings',

frontend/src/container/MySettings/UpdateName/index.tsx

@@ -21,6 +21,8 @@ function UpdateName(): JSX.Element {
 	const [changedName, setChangedName] = useState<string>(user?.name || '');
 	const [loading, setLoading] = useState<boolean>(false);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	if (!user || !org) {
 		return <div />;
 	}
@@ -34,7 +36,7 @@ function UpdateName(): JSX.Element {
 			});
 
 			if (statusCode === 200) {
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
@@ -51,7 +53,7 @@ function UpdateName(): JSX.Element {
 					},
 				});
 			} else {
-				notification.error({
+				notifications.error({
 					message: t('something_went_wrong', {
 						ns: 'common',
 					}),
@@ -59,7 +61,7 @@ function UpdateName(): JSX.Element {
 			}
 			setLoading(false);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -70,6 +72,7 @@ function UpdateName(): JSX.Element {
 
 	return (
 		<div>
+			{NotificationElement}
 			<Space direction="vertical" size="middle">
 				<Typography>Name</Typography>
 				<NameInput

frontend/src/container/NewDashboard/ComponentsSlider/index.tsx

@@ -22,6 +22,8 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
 		(state) => state.dashboards,
 	);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const [selectedDashboard] = dashboards;
 	const { data } = selectedDashboard;
 
@@ -31,7 +33,7 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
 				const emptyLayout = data.layout?.find((e) => e.i === 'empty');
 
 				if (emptyLayout === undefined) {
-					notification.error({
+					notifications.error({
 						message: 'Please click on Add Panel Button',
 					});
 					return;
@@ -43,18 +45,19 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element {
 					`${history.location.pathname}/new?graphType=${name}&widgetId=${emptyLayout.i}`,
 				);
 			} catch (error) {
-				notification.error({
+				notifications.error({
 					message: 'Something went wrong',
 				});
 			}
 		},
-		[data, toggleAddWidget],
+		[data, toggleAddWidget, notifications],
 	);
 	const isDarkMode = useIsDarkMode();
 	const fillColor: React.CSSProperties['color'] = isDarkMode ? 'white' : 'black';
 
 	return (
 		<Container>
+			{NotificationElement}
 			{menuItems.map(({ name, Icon, display }) => (
 				<Card
 					onClick={(event): void => {

frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx

@@ -1,6 +1,7 @@
 import { blue, red } from '@ant-design/colors';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Modal, Row, Space, Table, Tag } from 'antd';
+import { Button, Modal, notification, Row, Space, Table, Tag } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import React, { useRef, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -24,6 +25,8 @@ function VariablesSetting({
 		(state) => state.dashboards,
 	);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const [selectedDashboard] = dashboards;
 
 	const {
@@ -74,8 +77,7 @@ function VariablesSetting({
 		if (oldName) {
 			delete newVariables[oldName];
 		}
-
+		updateDashboardVariables(newVariables, notifications);
-		updateDashboardVariables(newVariables);
 		onDoneVariableViewMode();
 	};
 
@@ -87,7 +89,7 @@ function VariablesSetting({
 	const handleDeleteConfirm = (): void => {
 		const newVariables = { ...variables };
 		if (variableToDelete?.current) delete newVariables[variableToDelete?.current];
-		updateDashboardVariables(newVariables);
+		updateDashboardVariables(newVariables, notifications);
 		variableToDelete.current = null;
 		setDeleteVariableModal(false);
 	};
@@ -137,6 +139,7 @@ function VariablesSetting({
 
 	return (
 		<>
+			{NotificationElement}
 			{variableViewMode ? (
 				<VariableItem
 					variableData={{ ...variableEditData } as IDashboardVariable}
@@ -178,6 +181,7 @@ function VariablesSetting({
 interface DispatchProps {
 	updateDashboardVariables: (
 		props: Record<string, IDashboardVariable>,
+		notify: NotificationInstance,
 	) => (dispatch: Dispatch<AppActions>) => void;
 }
 

frontend/src/container/NewDashboard/DashboardVariablesSelection/index.tsx

@@ -1,4 +1,5 @@
-import { Row } from 'antd';
+import { notification, Row } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import { map, sortBy } from 'lodash-es';
 import React, { useState } from 'react';
 import { connect, useSelector } from 'react-redux';
@@ -25,6 +26,7 @@ function DashboardVariableSelection({
 
 	const [update, setUpdate] = useState<boolean>(false);
 	const [lastUpdatedVar, setLastUpdatedVar] = useState<string>('');
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const onVarChanged = (name: string): void => {
 		setLastUpdatedVar(name);
@@ -45,7 +47,7 @@ function DashboardVariableSelection({
 	): void => {
 		const updatedVariablesData = { ...variables };
 		updatedVariablesData[name].selectedValue = value;
-		updateDashboardVariables(updatedVariablesData);
+		updateDashboardVariables(updatedVariablesData, notifications);
 		onVarChanged(name);
 	};
 	const onAllSelectedUpdate = (
@@ -54,12 +56,13 @@ function DashboardVariableSelection({
 	): void => {
 		const updatedVariablesData = { ...variables };
 		updatedVariablesData[name].allSelected = value;
-		updateDashboardVariables(updatedVariablesData);
+		updateDashboardVariables(updatedVariablesData, notifications);
 		onVarChanged(name);
 	};
 
 	return (
 		<Row style={{ gap: '1rem' }}>
+			{NotificationElement}
 			{map(sortBy(Object.keys(variables)), (variableName) => (
 				<VariableItem
 					key={`${variableName}${variables[variableName].modificationUUID}`}
@@ -81,6 +84,7 @@ function DashboardVariableSelection({
 interface DispatchProps {
 	updateDashboardVariables: (
 		props: Parameters<typeof UpdateDashboardVariables>[0],
+		notify: NotificationInstance,
 	) => (dispatch: Dispatch<AppActions>) => void;
 }
 

frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx

@@ -32,10 +32,11 @@ function ShareModal({
 	const [isViewJSON, setIsViewJSON] = useState<boolean>(false);
 	const { t } = useTranslation(['dashboard', 'common']);
 	const [state, setCopy] = useCopyToClipboard();
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	useEffect(() => {
 		if (state.error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -43,13 +44,13 @@ function ShareModal({
 		}
 
 		if (state.value) {
-			notification.success({
+			notifications.success({
 				message: t('success', {
 					ns: 'common',
 				}),
 			});
 		}
-	}, [state.error, state.value, t]);
+	}, [state.error, state.value, t, notifications]);
 
 	const selectedDataCleaned = cleardQueryData(selectedData);
 	const GetFooterComponent = useMemo(() => {
@@ -83,28 +84,34 @@ function ShareModal({
 	}, [isViewJSON, jsonValue, selectedData, selectedDataCleaned, setCopy, t]);
 
 	return (
-		<Modal
+		<>
-			open={isJSONModalVisible}
+			{NotificationElement}
-			onCancel={(): void => {
+			<Modal
-				onToggleHandler();
+				open={isJSONModalVisible}
-				setIsViewJSON(false);
+				onCancel={(): void => {
-			}}
+					onToggleHandler();
-			width="70vw"
+					setIsViewJSON(false);
-			centered
+				}}
-			title={t('share', {
+				width="70vw"
-				ns: 'common',
+				centered
-			})}
+				title={t('share', {
-			okText={t('download_json')}
+					ns: 'common',
-			cancelText={t('cancel')}
+				})}
-			destroyOnClose
+				okText={t('download_json')}
-			footer={GetFooterComponent}
+				cancelText={t('cancel')}
-		>
+				destroyOnClose
-			{!isViewJSON ? (
+				footer={GetFooterComponent}
-				<Typography>{t('export_dashboard')}</Typography>
+			>
-			) : (
+				{!isViewJSON ? (
-				<Editor onChange={(value): void => setJSONValue(value)} value={jsonValue} />
+					<Typography>{t('export_dashboard')}</Typography>
-			)}
+				) : (
-		</Modal>
+					<Editor
+						onChange={(value): void => setJSONValue(value)}
+						value={jsonValue}
+					/>
+				)}
+			</Modal>
+		</>
 	);
 }
 

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/index.tsx

@@ -37,6 +37,7 @@ function QueryBuilderQueryContainer({
 	metricsBuilderQueries,
 	selectedGraph,
 }: IQueryBuilderQueryContainerProps): JSX.Element | null {
+	const [notifications, NotificationElement] = notification.useNotification();
 	const handleQueryBuilderQueryChange = ({
 		queryIndex,
 		aggregateFunction,
@@ -113,7 +114,7 @@ function QueryBuilderQueryContainer({
 	};
 	const addQueryHandler = (): void => {
 		if (!canCreateQueryAndFormula(queryData)) {
-			notification.error({
+			notifications.error({
 				message:
 					'Unable to create query. You can create at max 10 queries and formulae.',
 			});
@@ -130,7 +131,7 @@ function QueryBuilderQueryContainer({
 
 	const addFormulaHandler = (): void => {
 		if (!canCreateQueryAndFormula(queryData)) {
-			notification.error({
+			notifications.error({
 				message:
 					'Unable to create formula. You can create at max 10 queries and formulae.',
 			});
@@ -155,6 +156,7 @@ function QueryBuilderQueryContainer({
 	}
 	return (
 		<>
+			{NotificationElement}
 			{metricsBuilderQueries.queryBuilder.map((q, idx) => (
 				<MetricsBuilder
 					key={q.name}

frontend/src/container/OrganizationSettings/AuthDomains/AddDomain/index.tsx

@@ -21,6 +21,8 @@ function AddDomain({ refetch }: Props): JSX.Element {
 
 	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onCreateHandler = async (): Promise<void> => {
 		try {
 			const response = await createDomainApi({
@@ -29,19 +31,19 @@ function AddDomain({ refetch }: Props): JSX.Element {
 			});
 
 			if (response.statusCode === 200) {
-				notification.success({
+				notifications.success({
 					message: 'Your domain has been added successfully.',
 					duration: 15,
 				});
 				setIsDomain(false);
 				refetch();
 			} else {
-				notification.error({
+				notifications.error({
 					message: t('common:something_went_wrong'),
 				});
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('common:something_went_wrong'),
 			});
 		}
@@ -49,6 +51,7 @@ function AddDomain({ refetch }: Props): JSX.Element {
 
 	return (
 		<>
+			{NotificationElement}
 			<Container>
 				<Typography.Title level={3}>
 					{t('authenticated_domains', {

frontend/src/container/OrganizationSettings/AuthDomains/Edit/index.tsx

@@ -31,6 +31,8 @@ function EditSSO({
 
 	const { t } = useTranslation(['common']);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const onFinishHandler = useCallback(() => {
 		form
 			.validateFields()
@@ -44,11 +46,11 @@ function EditSSO({
 				});
 			})
 			.catch(() => {
-				notification.error({
+				notifications.error({
 					message: t('something_went_wrong', { ns: 'common' }),
 				});
 			});
-	}, [form, onRecordUpdateHandler, record, t]);
+	}, [form, onRecordUpdateHandler, record, t, notifications]);
 
 	const onResetHandler = useCallback(() => {
 		form.resetFields();
@@ -61,7 +63,7 @@ function EditSSO({
 			initialValues={record}
 			onFinishFailed={(error): void => {
 				error.errorFields.forEach(({ errors }) => {
-					notification.error({
+					notifications.error({
 						message:
 							errors[0].toString() || t('something_went_wrong', { ns: 'common' }),
 					});
@@ -73,6 +75,7 @@ function EditSSO({
 			autoComplete="off"
 			form={form}
 		>
+			{NotificationElement}
 			{renderFormInputs(record)}
 			<Space
 				style={{ width: '100%', justifyContent: 'flex-end' }}

frontend/src/container/OrganizationSettings/AuthDomains/index.tsx

@@ -56,6 +56,8 @@ function AuthDomains(): JSX.Element {
 		enabled: org !== null,
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	const assignSsoMethod = useCallback(
 		(typ: AuthDomain['ssoType']): void => {
 			setCurrentDomain({ ...currentDomain, ssoType: typ } as AuthDomain);
@@ -76,7 +78,7 @@ function AuthDomains(): JSX.Element {
 				const response = await updateDomain(record);
 
 				if (response.statusCode === 200) {
-					notification.success({
+					notifications.success({
 						message: t('saml_settings', {
 							ns: 'organizationsettings',
 						}),
@@ -87,7 +89,7 @@ function AuthDomains(): JSX.Element {
 					return true;
 				}
 
-				notification.error({
+				notifications.error({
 					message: t('something_went_wrong', {
 						ns: 'common',
 					}),
@@ -95,7 +97,7 @@ function AuthDomains(): JSX.Element {
 
 				return false;
 			} catch (error) {
-				notification.error({
+				notifications.error({
 					message: t('something_went_wrong', {
 						ns: 'common',
 					}),
@@ -103,7 +105,7 @@ function AuthDomains(): JSX.Element {
 				return false;
 			}
 		},
-		[refetch, t, onCloseHandler],
+		[refetch, t, onCloseHandler, notifications],
 	);
 
 	const onOpenHandler = useCallback(
@@ -142,19 +144,19 @@ function AuthDomains(): JSX.Element {
 					});
 
 					if (response.statusCode === 200) {
-						notification.success({
+						notifications.success({
 							message: t('common:success'),
 						});
 						refetch();
 					} else {
-						notification.error({
+						notifications.error({
 							message: t('common:something_went_wrong'),
 						});
 					}
 				},
 			});
 		},
-		[refetch, t],
+		[refetch, t, notifications],
 	);
 
 	const onClickLicenseHandler = useCallback(() => {
@@ -247,6 +249,7 @@ function AuthDomains(): JSX.Element {
 	if (!isLoading && data?.payload?.length === 0) {
 		return (
 			<Space direction="vertical" size="middle">
+				{NotificationElement}
 				<AddDomain refetch={refetch} />
 
 				<Modal
@@ -278,6 +281,7 @@ function AuthDomains(): JSX.Element {
 
 	return (
 		<>
+			{NotificationElement}
 			<Modal
 				centered
 				title="Configure Authentication Method"

frontend/src/container/OrganizationSettings/DisplayName/index.tsx

@@ -21,6 +21,7 @@ function DisplayName({
 	const { name } = (org || [])[index];
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const onSubmit = async ({ name: orgName }: OnSubmitProps): Promise<void> => {
 		try {
@@ -31,7 +32,7 @@ function DisplayName({
 				orgId,
 			});
 			if (statusCode === 200) {
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
@@ -44,7 +45,7 @@ function DisplayName({
 					},
 				});
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						error ||
 						t('something_went_wrong', {
@@ -55,7 +56,7 @@ function DisplayName({
 			setIsLoading(false);
 		} catch (error) {
 			setIsLoading(false);
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -75,6 +76,7 @@ function DisplayName({
 			onFinish={onSubmit}
 			autoComplete="off"
 		>
+			{NotificationElement}
 			<Form.Item name="name" label="Display name" rules={[{ required: true }]}>
 				<Input size="large" placeholder={t('signoz')} disabled={isLoading} />
 			</Form.Item>

frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx

@@ -36,19 +36,21 @@ function EditMembersDetails({
 		[],
 	);
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (state.error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong'),
 			});
 		}
 
 		if (state.value) {
-			notification.success({
+			notifications.success({
 				message: t('success'),
 			});
 		}
-	}, [state.error, state.value, t]);
+	}, [state.error, state.value, t, notifications]);
 
 	const onPasswordChangeHandler: React.ChangeEventHandler<HTMLInputElement> = useCallback(
 		(event) => {
@@ -67,7 +69,7 @@ function EditMembersDetails({
 			if (response.statusCode === 200) {
 				setPasswordLink(getPasswordLink(response.payload.token));
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						response.error ||
 						t('something_went_wrong', {
@@ -79,7 +81,7 @@ function EditMembersDetails({
 		} catch (error) {
 			setIsLoading(false);
 
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -89,6 +91,7 @@ function EditMembersDetails({
 
 	return (
 		<Space direction="vertical" size="large">
+			{NotificationElement}
 			<Space direction="horizontal">
 				<Title>Email address</Title>
 				<Input

frontend/src/container/OrganizationSettings/Members/index.tsx

@@ -39,6 +39,7 @@ function UserFunction({
 	const { t } = useTranslation(['common']);
 	const [isDeleteLoading, setIsDeleteLoading] = useState<boolean>(false);
 	const [isUpdateLoading, setIsUpdateLoading] = useState<boolean>(false);
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const onUpdateDetailsHandler = (): void => {
 		setDataSource((data) => {
@@ -88,14 +89,14 @@ function UserFunction({
 
 			if (response.statusCode === 200) {
 				onDelete();
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
 				});
 				setIsDeleteModalVisible(false);
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						response.error ||
 						t('something_went_wrong', {
@@ -107,7 +108,7 @@ function UserFunction({
 		} catch (error) {
 			setIsDeleteLoading(false);
 
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -134,13 +135,13 @@ function UserFunction({
 				updateRoleResponse.statusCode === 200
 			) {
 				onUpdateDetailsHandler();
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
 				});
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						editUserResponse.error ||
 						updateRoleResponse.error ||
@@ -151,7 +152,7 @@ function UserFunction({
 			}
 			setIsUpdateLoading(false);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -162,6 +163,7 @@ function UserFunction({
 
 	return (
 		<>
+			{NotificationElement}
 			<Space direction="horizontal">
 				<Typography.Link
 					onClick={(): void => onModalToggleHandler(setIsModalVisible, true)}

frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx

@@ -25,22 +25,23 @@ function PendingInvitesContainer(): JSX.Element {
 	const [isInvitingMembers, setIsInvitingMembers] = useState<boolean>(false);
 	const { t } = useTranslation(['organizationsettings', 'common']);
 	const [state, setText] = useCopyToClipboard();
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	useEffect(() => {
 		if (state.error) {
-			notification.error({
+			notifications.error({
 				message: state.error.message,
 			});
 		}
 
 		if (state.value) {
-			notification.success({
+			notifications.success({
 				message: t('success', {
 					ns: 'common',
 				}),
 			});
 		}
-	}, [state.error, state.value, t]);
+	}, [state.error, state.value, t, notifications]);
 
 	const getPendingInvitesResponse = useQuery({
 		queryFn: () => getPendingInvites(),
@@ -112,13 +113,13 @@ function PendingInvitesContainer(): JSX.Element {
 						...dataSource.slice(index + 1, dataSource.length),
 					]);
 				}
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
 				});
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						response.error ||
 						t('something_went_wrong', {
@@ -127,7 +128,7 @@ function PendingInvitesContainer(): JSX.Element {
 				});
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -192,7 +193,7 @@ function PendingInvitesContainer(): JSX.Element {
 					});
 
 					if (statusCode !== 200) {
-						notification.error({
+						notifications.error({
 							message:
 								error ||
 								t('something_went_wrong', {
@@ -212,7 +213,7 @@ function PendingInvitesContainer(): JSX.Element {
 				toggleModal(false);
 			}, 2000);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -222,6 +223,7 @@ function PendingInvitesContainer(): JSX.Element {
 
 	return (
 		<div>
+			{NotificationElement}
 			<Modal
 				title={t('invite_team_members')}
 				open={isInviteTeamMemberModalOpen}

frontend/src/container/ResetPassword/index.tsx

@@ -24,6 +24,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	const { search } = useLocation();
 	const params = new URLSearchParams(search);
 	const token = params.get('token');
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	useEffect(() => {
 		if (!token) {
@@ -53,14 +54,14 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 			});
 
 			if (response.statusCode === 200) {
-				notification.success({
+				notifications.success({
 					message: t('success', {
 						ns: 'common',
 					}),
 				});
 				history.push(ROUTES.LOGIN);
 			} else {
-				notification.error({
+				notifications.error({
 					message:
 						response.error ||
 						t('something_went_wrong', {
@@ -72,7 +73,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 			setLoading(false);
 		} catch (error) {
 			setLoading(false);
-			notification.error({
+			notifications.error({
 				message: t('something_went_wrong', {
 					ns: 'common',
 				}),
@@ -82,70 +83,73 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 
 	return (
 		<WelcomeLeftContainer version={version}>
-			<FormWrapper>
+			<>
-				<form onSubmit={handleSubmit}>
+				{NotificationElement}
-					<Title level={4}>Reset Your Password</Title>
+				<FormWrapper>
+					<form onSubmit={handleSubmit}>
+						<Title level={4}>Reset Your Password</Title>
 
-					<div>
+						<div>
-						<Label htmlFor="Password">Password</Label>
+							<Label htmlFor="Password">Password</Label>
-						<Input.Password
+							<Input.Password
-							value={password}
+								value={password}
-							onChange={(e): void => {
+								onChange={(e): void => {
-								setState(e.target.value, setPassword);
+									setState(e.target.value, setPassword);
-							}}
-							required
-							id="currentPassword"
-						/>
-					</div>
-					<div>
-						<Label htmlFor="ConfirmPassword">Confirm Password</Label>
-						<Input.Password
-							value={confirmPassword}
-							onChange={(e): void => {
-								const updateValue = e.target.value;
-								setState(updateValue, setConfirmPassword);
-								if (password !== updateValue) {
-									setConfirmPasswordError(true);
-								} else {
-									setConfirmPasswordError(false);
-								}
-							}}
-							required
-							id="UpdatePassword"
-						/>
-
-						{confirmPasswordError && (
-							<Typography.Paragraph
-								italic
-								style={{
-									color: '#D89614',
-									marginTop: '0.50rem',
 								}}
-							>
+								required
-								Passwords don’t match. Please try again
+								id="currentPassword"
-							</Typography.Paragraph>
+							/>
-						)}
+						</div>
-					</div>
+						<div>
+							<Label htmlFor="ConfirmPassword">Confirm Password</Label>
+							<Input.Password
+								value={confirmPassword}
+								onChange={(e): void => {
+									const updateValue = e.target.value;
+									setState(updateValue, setConfirmPassword);
+									if (password !== updateValue) {
+										setConfirmPasswordError(true);
+									} else {
+										setConfirmPasswordError(false);
+									}
+								}}
+								required
+								id="UpdatePassword"
+							/>
 
-					<ButtonContainer>
+							{confirmPasswordError && (
-						<Button
+								<Typography.Paragraph
-							type="primary"
+									italic
-							htmlType="submit"
+									style={{
-							data-attr="signup"
+										color: '#D89614',
-							loading={loading}
+										marginTop: '0.50rem',
-							disabled={
+									}}
-								loading ||
+								>
-								!password ||
+									Passwords don’t match. Please try again
-								!confirmPassword ||
+								</Typography.Paragraph>
-								confirmPasswordError ||
+							)}
-								token === null
+						</div>
-							}
+
-						>
+						<ButtonContainer>
-							Get Started
+							<Button
-						</Button>
+								type="primary"
-					</ButtonContainer>
+								htmlType="submit"
-				</form>
+								data-attr="signup"
-			</FormWrapper>
+								loading={loading}
+								disabled={
+									loading ||
+									!password ||
+									!confirmPassword ||
+									confirmPasswordError ||
+									token === null
+								}
+							>
+								Get Started
+							</Button>
+						</ButtonContainer>
+					</form>
+				</FormWrapper>
+			</>
 		</WelcomeLeftContainer>
 	);
 }

frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx

@@ -38,6 +38,8 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 		(userSelectedFilter.get(name) || []).find((e) => e === keyValue) !==
 		undefined;
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const onCheckHandler = async (): Promise<void> => {
 		try {
@@ -141,12 +143,12 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 			} else {
 				setIsLoading(false);
 
-				notification.error({
+				notifications.error({
 					message: response.error || 'Something went wrong',
 				});
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: (error as AxiosError).toString() || 'Something went wrong',
 			});
 			setIsLoading(false);
@@ -161,6 +163,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 
 	return (
 		<CheckBoxContainer>
+			{NotificationElement}
 			<Checkbox
 				disabled={isLoading || filterLoading}
 				onClick={onCheckHandler}

frontend/src/container/Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx

@@ -28,6 +28,7 @@ function TraceID(): JSX.Element {
 	);
 	const [isLoading, setIsLoading] = useState(false);
 	const [userEnteredValue, setUserEnteredValue] = useState<string>('');
+	const [notifications, NotificationElement] = notification.useNotification();
 	useEffect(() => {
 		setUserEnteredValue(selectedFilter.get('traceID')?.[0] || '');
 	}, [selectedFilter]);
@@ -91,7 +92,7 @@ function TraceID(): JSX.Element {
 				);
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: (error as AxiosError).toString() || 'Something went wrong',
 			});
 		} finally {
@@ -108,6 +109,7 @@ function TraceID(): JSX.Element {
 	};
 	return (
 		<div>
+			{NotificationElement}
 			<Search
 				placeholder="Filter by Trace ID"
 				onSearch={onSearch}

frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx

@@ -53,6 +53,8 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 
 	const defaultErrorMessage = 'Something went wrong';
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const onExpandHandler: React.MouseEventHandler<HTMLDivElement> = async (e) => {
 		try {
@@ -119,14 +121,14 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					spansAggregate.orderParam,
 				);
 			} else {
-				notification.error({
+				notifications.error({
 					message: response.error || defaultErrorMessage,
 				});
 			}
 
 			setIsLoading(false);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: (error as AxiosError).toString() || defaultErrorMessage,
 			});
 		}
@@ -225,13 +227,13 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					spansAggregate.orderParam,
 				);
 			} else {
-				notification.error({
+				notifications.error({
 					message: response.error || 'Something went wrong',
 				});
 			}
 			setIsLoading(false);
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: (error as AxiosError).toString(),
 			});
 			setIsLoading(false);
@@ -295,6 +297,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 
 	return (
 		<>
+			{NotificationElement}
 			{PanelName !== 'duration' && <Divider plain style={{ margin: 0 }} />}
 
 			<Card bordered={false}>

frontend/src/container/TriggeredAlerts/index.tsx

@@ -17,6 +17,7 @@ function TriggeredAlerts(): JSX.Element {
 		payload: [],
 	});
 	const { t } = useTranslation(['common']);
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const fetchData = useCallback(async () => {
 		try {
@@ -61,18 +62,28 @@ function TriggeredAlerts(): JSX.Element {
 
 	useEffect(() => {
 		if (groupState.error) {
-			notification.error({
+			notifications.error({
 				message: groupState.errorMessage || t('something_went_wrong'),
 			});
 		}
-	}, [groupState.error, groupState.errorMessage, t]);
+	}, [groupState.error, groupState.errorMessage, t, notifications]);
 
 	if (groupState.error) {
-		return <TriggerComponent allAlerts={[]} />;
+		return (
+			<>
+				{NotificationElement}
+				<TriggerComponent allAlerts={[]} />
+			</>
+		);
 	}
 
 	if (groupState.loading || groupState.payload === undefined) {
-		return <Spinner height="75vh" tip="Loading Alerts..." />;
+		return (
+			<>
+				{NotificationElement}
+				<Spinner height="75vh" tip="Loading Alerts..." />
+			</>
+		);
 	}
 
 	// commented the reduce() call as we no longer use /alerts/groups
@@ -84,7 +95,12 @@ function TriggeredAlerts(): JSX.Element {
 	//	return [...acc, ...curr.alerts];
 	// }, initialAlerts);
 
-	return <TriggerComponent allAlerts={groupState.payload} />;
+	return (
+		<>
+			{NotificationElement}
+			<TriggerComponent allAlerts={groupState.payload} />
+		</>
+	);
 }
 
 export default TriggeredAlerts;

frontend/src/pages/EditRules/index.tsx

@@ -26,21 +26,28 @@ function EditRules(): JSX.Element {
 		enabled: isValidRuleId,
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (!isValidRuleId) {
-			notification.error({
+			notifications.error({
 				message: 'Rule Id is required',
 			});
 			history.replace(ROUTES.LIST_ALL_ALERT);
 		}
-	}, [isValidRuleId, ruleId]);
+	}, [isValidRuleId, ruleId, notifications]);
 
 	if (
 		(isError && !isValidRuleId) ||
 		ruleId == null ||
 		(data?.payload?.data === undefined && !isLoading)
 	) {
-		return <div>{data?.error || t('something_went_wrong')}</div>;
+		return (
+			<div>
+				{NotificationElement}
+				{data?.error || t('something_went_wrong')}
+			</div>
+		);
 	}
 
 	if (isLoading || !data?.payload) {
@@ -48,10 +55,13 @@ function EditRules(): JSX.Element {
 	}
 
 	return (
-		<EditRulesContainer
+		<>
-			ruleId={parseInt(ruleId, 10)}
+			{NotificationElement}
-			initialValue={data.payload.data}
+			<EditRulesContainer
-		/>
+				ruleId={parseInt(ruleId, 10)}
+				initialValue={data.payload.data}
+			/>
+		</>
 	);
 }
 

frontend/src/pages/Metrics/index.tsx

@@ -30,14 +30,15 @@ function Metrics({ getService }: MetricsProps): JSX.Element {
 		error,
 		errorMessage,
 	} = useSelector<AppState, MetricReducer>((state) => state.metrics);
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	useEffect(() => {
 		if (error) {
-			notification.error({
+			notifications.error({
 				message: errorMessage,
 			});
 		}
-	}, [error, errorMessage]);
+	}, [error, errorMessage, notifications]);
 
 	const selectedTags = useMemo(
 		() =>
@@ -90,6 +91,7 @@ function Metrics({ getService }: MetricsProps): JSX.Element {
 
 	return (
 		<Space direction="vertical" style={{ width: '100%' }}>
+			{NotificationElement}
 			<ReleaseNote path={location.pathname} />
 
 			<ResourceAttributesFilter />

frontend/src/pages/SignUp/SignUp.tsx

@@ -56,6 +56,8 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		enabled: token !== null,
 	});
 
+	const [notifications, NotificationElement] = notification.useNotification();
+
 	useEffect(() => {
 		if (
 			getInviteDetailsResponse.status === 'success' &&
@@ -73,7 +75,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 			getInviteDetailsResponse.data?.error
 		) {
 			const { error } = getInviteDetailsResponse.data;
-			notification.error({
+			notifications.error({
 				message: error,
 			});
 		}
@@ -82,6 +84,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		getInviteDetailsResponse.data?.error,
 		getInviteDetailsResponse.status,
 		getInviteDetailsResponse,
+		notifications,
 	]);
 
 	const setState = (
@@ -122,17 +125,17 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 						callback(userResponse);
 					}
 				} else {
-					notification.error({
+					notifications.error({
 						message: loginResponse.error || t('unexpected_error'),
 					});
 				}
 			} else {
-				notification.error({
+				notifications.error({
 					message: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('unexpected_error'),
 			});
 		}
@@ -150,7 +153,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		if (editResponse.statusCode === 200) {
 			history.push(ROUTES.APPLICATION);
 		} else {
-			notification.error({
+			notifications.error({
 				message: editResponse.error || t('unexpected_error'),
 			});
 		}
@@ -159,7 +162,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		e: React.FormEvent<HTMLFormElement>,
 	): Promise<void> => {
 		if (!params.get('token')) {
-			notification.error({
+			notifications.error({
 				message: t('token_required'),
 			});
 			return;
@@ -182,7 +185,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 					if (response.payload?.ssoUrl) {
 						window.location.href = response.payload?.ssoUrl;
 					} else {
-						notification.error({
+						notifications.error({
 							message: t('failed_to_initiate_login'),
 						});
 						// take user to login page as there is nothing to do here
@@ -190,12 +193,12 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 					}
 				}
 			} else {
-				notification.error({
+				notifications.error({
 					message: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (error) {
-			notification.error({
+			notifications.error({
 				message: t('unexpected_error'),
 			});
 		}
@@ -227,7 +230,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 
 				setLoading(false);
 			} catch (error) {
-				notification.error({
+				notifications.error({
 					message: t('unexpected_error'),
 				});
 				setLoading(false);
@@ -263,164 +266,169 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 
 	return (
 		<WelcomeLeftContainer version={version}>
-			<FormWrapper>
+			<>
-				<form onSubmit={!precheck.sso ? handleSubmit : handleSubmitSSO}>
+				{NotificationElement}
-					<Title level={4}>Create your account</Title>
+				<FormWrapper>
-					<div>
+					<form onSubmit={!precheck.sso ? handleSubmit : handleSubmitSSO}>
-						<Label htmlFor="signupEmail">{t('label_email')}</Label>
+						<Title level={4}>Create your account</Title>
-						<Input
-							placeholder={t('placeholder_email')}
-							type="email"
-							autoFocus
-							value={email}
-							onChange={(e): void => {
-								setState(e.target.value, setEmail);
-							}}
-							required
-							id="signupEmail"
-							disabled={isDetailsDisable}
-						/>
-					</div>
-
-					{isNameVisible && (
 						<div>
-							<Label htmlFor="signupFirstName">{t('label_firstname')}</Label>
+							<Label htmlFor="signupEmail">{t('label_email')}</Label>
 							<Input
-								placeholder={t('placeholder_firstname')}
+								placeholder={t('placeholder_email')}
-								value={firstName}
+								type="email"
+								autoFocus
+								value={email}
 								onChange={(e): void => {
-									setState(e.target.value, setFirstName);
+									setState(e.target.value, setEmail);
 								}}
 								required
-								id="signupFirstName"
+								id="signupEmail"
 								disabled={isDetailsDisable}
 							/>
 						</div>
-					)}
 
-					<div>
+						{isNameVisible && (
-						<Label htmlFor="organizationName">{t('label_orgname')}</Label>
+							<div>
-						<Input
+								<Label htmlFor="signupFirstName">{t('label_firstname')}</Label>
-							placeholder={t('placeholder_orgname')}
+								<Input
-							value={organizationName}
+									placeholder={t('placeholder_firstname')}
-							onChange={(e): void => {
+									value={firstName}
-								setState(e.target.value, setOrganizationName);
+									onChange={(e): void => {
-							}}
+										setState(e.target.value, setFirstName);
-							required
+									}}
-							id="organizationName"
+									required
-							disabled={isDetailsDisable}
+									id="signupFirstName"
-						/>
+									disabled={isDetailsDisable}
-					</div>
+								/>
-					{!precheck.sso && (
+							</div>
+						)}
+
 						<div>
-							<Label htmlFor="Password">{t('label_password')}</Label>
+							<Label htmlFor="organizationName">{t('label_orgname')}</Label>
-							<Input.Password
+							<Input
-								value={password}
+								placeholder={t('placeholder_orgname')}
+								value={organizationName}
 								onChange={(e): void => {
-									setState(e.target.value, setPassword);
+									setState(e.target.value, setOrganizationName);
 								}}
 								required
-								id="currentPassword"
+								id="organizationName"
+								disabled={isDetailsDisable}
 							/>
 						</div>
-					)}
+						{!precheck.sso && (
-					{!precheck.sso && (
+							<div>
-						<div>
+								<Label htmlFor="Password">{t('label_password')}</Label>
-							<Label htmlFor="ConfirmPassword">{t('label_confirm_password')}</Label>
+								<Input.Password
-							<Input.Password
+									value={password}
-								value={confirmPassword}
+									onChange={(e): void => {
-								onChange={(e): void => {
+										setState(e.target.value, setPassword);
-									const updateValue = e.target.value;
+									}}
-									setState(updateValue, setConfirmPassword);
+									required
+									id="currentPassword"
+								/>
+							</div>
+						)}
+						{!precheck.sso && (
+							<div>
+								<Label htmlFor="ConfirmPassword">{t('label_confirm_password')}</Label>
+								<Input.Password
+									value={confirmPassword}
+									onChange={(e): void => {
+										const updateValue = e.target.value;
+										setState(updateValue, setConfirmPassword);
+									}}
+									required
+									id="confirmPassword"
+								/>
+
+								{confirmPasswordError && (
+									<Typography.Paragraph
+										italic
+										id="password-confirm-error"
+										style={{
+											color: '#D89614',
+											marginTop: '0.50rem',
+										}}
+									>
+										{t('failed_confirm_password')}
+									</Typography.Paragraph>
+								)}
+								{isPasswordPolicyError && (
+									<Typography.Paragraph
+										italic
+										style={{
+											color: '#D89614',
+											marginTop: '0.50rem',
+										}}
+									>
+										{isPasswordNotValidMessage}
+									</Typography.Paragraph>
+								)}
+							</div>
+						)}
+
+						{isPreferenceVisible && (
+							<>
+								<MarginTop marginTop="2.4375rem">
+									<Space>
+										<Switch
+											onChange={(value): void =>
+												onSwitchHandler(value, setHasOptedUpdates)
+											}
+											checked={hasOptedUpdates}
+										/>
+										<Typography>{t('prompt_keepme_posted')} </Typography>
+									</Space>
+								</MarginTop>
+
+								<MarginTop marginTop="0.5rem">
+									<Space>
+										<Switch
+											onChange={(value): void => onSwitchHandler(value, setIsAnonymous)}
+											checked={isAnonymous}
+										/>
+										<Typography>{t('prompt_anonymise')}</Typography>
+									</Space>
+								</MarginTop>
+							</>
+						)}
+
+						{isPreferenceVisible && (
+							<Typography.Paragraph
+								italic
+								style={{
+									color: '#D89614',
+									marginTop: '0.50rem',
 								}}
-								required
+							>
-								id="confirmPassword"
+								This will create an admin account. If you are not an admin, please ask
-							/>
+								your admin for an invite link
+							</Typography.Paragraph>
+						)}
 
-							{confirmPasswordError && (
+						<ButtonContainer>
-								<Typography.Paragraph
+							<Button
-									italic
+								type="primary"
-									id="password-confirm-error"
+								htmlType="submit"
-									style={{
+								data-attr="signup"
-										color: '#D89614',
+								loading={loading}
-										marginTop: '0.50rem',
+								disabled={
-									}}
+									loading ||
-								>
+									!email ||
-									{t('failed_confirm_password')}
+									!organizationName ||
-								</Typography.Paragraph>
+									(!precheck.sso && (!password || !confirmPassword)) ||
-							)}
+									(!isDetailsDisable && !firstName) ||
-							{isPasswordPolicyError && (
+									confirmPasswordError ||
-								<Typography.Paragraph
+									isPasswordPolicyError
-									italic
+								}
-									style={{
+							>
-										color: '#D89614',
+								{t('button_get_started')}
-										marginTop: '0.50rem',
+							</Button>
-									}}
+						</ButtonContainer>
-								>
+					</form>
-									{isPasswordNotValidMessage}
+				</FormWrapper>
-								</Typography.Paragraph>
+			</>
-							)}
-						</div>
-					)}
-
-					{isPreferenceVisible && (
-						<>
-							<MarginTop marginTop="2.4375rem">
-								<Space>
-									<Switch
-										onChange={(value): void => onSwitchHandler(value, setHasOptedUpdates)}
-										checked={hasOptedUpdates}
-									/>
-									<Typography>{t('prompt_keepme_posted')} </Typography>
-								</Space>
-							</MarginTop>
-
-							<MarginTop marginTop="0.5rem">
-								<Space>
-									<Switch
-										onChange={(value): void => onSwitchHandler(value, setIsAnonymous)}
-										checked={isAnonymous}
-									/>
-									<Typography>{t('prompt_anonymise')}</Typography>
-								</Space>
-							</MarginTop>
-						</>
-					)}
-
-					{isPreferenceVisible && (
-						<Typography.Paragraph
-							italic
-							style={{
-								color: '#D89614',
-								marginTop: '0.50rem',
-							}}
-						>
-							This will create an admin account. If you are not an admin, please ask
-							your admin for an invite link
-						</Typography.Paragraph>
-					)}
-
-					<ButtonContainer>
-						<Button
-							type="primary"
-							htmlType="submit"
-							data-attr="signup"
-							loading={loading}
-							disabled={
-								loading ||
-								!email ||
-								!organizationName ||
-								(!precheck.sso && (!password || !confirmPassword)) ||
-								(!isDetailsDisable && !firstName) ||
-								confirmPasswordError ||
-								isPasswordPolicyError
-							}
-						>
-							{t('button_get_started')}
-						</Button>
-					</ButtonContainer>
-				</form>
-			</FormWrapper>
 		</WelcomeLeftContainer>
 	);
 }

frontend/src/pages/Trace/index.tsx

@@ -1,4 +1,5 @@
-import { Card } from 'antd';
+import { Card, notification } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import ROUTES from 'constants/routes';
 import Filters from 'container/Trace/Filters';
 import TraceGraph from 'container/Trace/Graph';
@@ -52,21 +53,26 @@ function Trace({
 		isFilterExclude,
 	} = useSelector<AppState, TraceReducer>((state) => state.traces);
 
-	useEffect(() => {
+	const [notifications, NotificationElement] = notification.useNotification();
-		getInitialFilter(minTime, maxTime);
-	}, [maxTime, minTime, getInitialFilter, isChanged]);
 
 	useEffect(() => {
-		getSpansAggregate({
+		getInitialFilter(minTime, maxTime, notifications);
-			maxTime,
+	}, [maxTime, minTime, getInitialFilter, isChanged, notifications]);
-			minTime,
+
-			selectedFilter,
+	useEffect(() => {
-			current: spansAggregate.currentPage,
+		getSpansAggregate(
-			pageSize: spansAggregate.pageSize,
+			{
-			selectedTags,
+				maxTime,
-			order: spansAggregate.order,
+				minTime,
-			orderParam: spansAggregate.orderParam,
+				selectedFilter,
-		});
+				current: spansAggregate.currentPage,
+				pageSize: spansAggregate.pageSize,
+				selectedTags,
+				order: spansAggregate.order,
+				orderParam: spansAggregate.orderParam,
+			},
+			notifications,
+		);
 	}, [
 		selectedTags,
 		selectedFilter,
@@ -77,19 +83,23 @@ function Trace({
 		spansAggregate.pageSize,
 		spansAggregate.order,
 		spansAggregate.orderParam,
+		notifications,
 	]);
 
 	useEffect(() => {
-		getSpans({
+		getSpans(
-			end: maxTime,
+			{
-			function: selectedFunction,
+				end: maxTime,
-			groupBy: selectedGroupBy,
+				function: selectedFunction,
-			selectedFilter,
+				groupBy: selectedGroupBy,
-			selectedTags,
+				selectedFilter,
-			start: minTime,
+				selectedTags,
-			step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
+				start: minTime,
-			isFilterExclude,
+				step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
-		});
+				isFilterExclude,
+			},
+			notifications,
+		);
 	}, [
 		selectedFunction,
 		selectedGroupBy,
@@ -99,6 +109,7 @@ function Trace({
 		minTime,
 		getSpans,
 		isFilterExclude,
+		notifications,
 	]);
 
 	useEffect(
@@ -128,6 +139,7 @@ function Trace({
 
 	return (
 		<>
+			{NotificationElement}
 			<Search />
 			<Container>
 				<div>
@@ -155,11 +167,15 @@ function Trace({
 }
 
 interface DispatchProps {
-	getSpansAggregate: (props: GetSpansAggregateProps) => void;
+	getSpansAggregate: (
-	getSpans: (props: GetSpansProps) => void;
+		props: GetSpansAggregateProps,
+		notify: NotificationInstance,
+	) => void;
+	getSpans: (props: GetSpansProps, notify: NotificationInstance) => void;
 	getInitialFilter: (
 		minTime: GlobalReducer['minTime'],
 		maxTime: GlobalReducer['maxTime'],
+		notify: NotificationInstance,
 	) => void;
 }
 

frontend/src/store/actions/dashboard/updatedDashboardVariables.ts

@@ -1,4 +1,4 @@
-import { notification } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import update from 'api/dashboard/update';
 import { Dispatch } from 'redux';
 import store from 'store/index';
@@ -8,6 +8,7 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export const UpdateDashboardVariables = (
 	variables: Record<string, IDashboardVariable>,
+	notify: NotificationInstance,
 ): ((dispatch: Dispatch<AppActions>) => void) => async (
 	dispatch: Dispatch<AppActions>,
 ): Promise<void> => {
@@ -28,7 +29,7 @@ export const UpdateDashboardVariables = (
 		});
 
 		if (response.statusCode !== 200) {
-			notification.error({
+			notify.error({
 				message: response.error,
 			});
 		}

frontend/src/store/actions/trace/getInitialFilter.ts

@@ -1,4 +1,4 @@
-import { notification } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import getFiltersApi from 'api/trace/getFilters';
 import xor from 'lodash-es/xor';
 import { Dispatch, Store } from 'redux';
@@ -29,6 +29,7 @@ import {
 export const GetInitialTraceFilter = (
 	minTime: GlobalReducer['minTime'],
 	maxTime: GlobalReducer['maxTime'],
+	notify: NotificationInstance,
 ): ((
 	dispatch: Dispatch<AppActions>,
 	getState: Store<AppState>['getState'],
@@ -166,7 +167,7 @@ export const GetInitialTraceFilter = (
 				},
 			});
 		} else {
-			notification.error({
+			notify.error({
 				message: response.error || 'Something went wrong',
 			});
 		}

frontend/src/store/actions/trace/getInitialSpansAggregate.ts

@@ -1,4 +1,4 @@
-import { notification } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import getSpansAggregate from 'api/trace/getSpansAggregate';
 import { Dispatch, Store } from 'redux';
 import { AppState } from 'store/reducers';
@@ -12,6 +12,7 @@ import { updateURL } from './util';
 
 export const GetSpansAggregate = (
 	props: GetSpansAggregateProps,
+	notify: NotificationInstance,
 ): ((
 	dispatch: Dispatch<AppActions>,
 	getState: Store<AppState>['getState'],
@@ -91,7 +92,7 @@ export const GetSpansAggregate = (
 				spansAggregate.orderParam,
 			);
 		} else {
-			notification.error({
+			notify.error({
 				message: response.error || 'Something went wrong',
 			});
 

frontend/src/store/actions/trace/getSpans.ts

@@ -1,4 +1,4 @@
-import { notification } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import getSpans from 'api/trace/getSpans';
 import { Dispatch, Store } from 'redux';
 import { AppState } from 'store/reducers';
@@ -12,6 +12,7 @@ import { Props } from 'types/api/trace/getSpans';
 
 export const GetSpans = (
 	props: GetSpansProps,
+	notify: NotificationInstance,
 ): ((
 	dispatch: Dispatch<AppActions>,
 	getState: Store<AppState>['getState'],
@@ -72,7 +73,7 @@ export const GetSpans = (
 					},
 				});
 			} else {
-				notification.error({
+				notify.error({
 					message: response.error || defaultMessage,
 				});
 				dispatch({