refactor: antdv5 notfications (SigNoz#2161)

Co-authored-by: gitstart <[email protected]> Co-authored-by: Nitesh Singh <[email protected]> Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com> Co-authored-by: Rubens Rafael <[email protected]> Co-authored-by: RubensRafael <[email protected]> Co-authored-by: niteshsingh1357 <[email protected]> Co-authored-by: gitstart_bot <[email protected]> Co-authored-by: Palash Gupta <[email protected]>
Prajuwal · Feb 2, 2023 · 846da08 · 846da08
1 parent 17f32e9
commit 846da08
Show file tree

Hide file tree

Showing 46 changed files with 745 additions and 540 deletions.
diff --git a/frontend/src/AppRoutes/Private.tsx b/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 {

diff --git a/frontend/src/components/Logs/CopyClipboardHOC.tsx b/frontend/src/components/Logs/CopyClipboardHOC.tsx
@@ -7,21 +7,22 @@ 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);
 	}, [setCopy, textToCopy]);
 
 	return (
 		<span onClick={onClick} onKeyDown={onClick} role="button" tabIndex={0}>
+			{NotificationElement}
 			<Popover
 				placement="top"
 				content={<span style={{ fontSize: '0.9rem' }}>Copy to clipboard</span>}

diff --git a/frontend/src/components/Logs/LogItem/index.tsx b/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>
 					{'{'}

diff --git a/frontend/src/container/AllError/index.tsx b/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"
-			dataSource={data?.payload as Exception[]}
-			columns={columns}
-			rowKey="firstSeen"
-			loading={isLoading || false || errorCountResponse.status === 'loading'}
-			pagination={{
-				pageSize: getUpdatedPageSize,
-				responsive: true,
-				current: getUpdatedOffset / 10 + 1,
-				position: ['bottomLeft'],
-				total: errorCountResponse.data?.payload || 0,
-			}}
-			onChange={onChangeHandler}
-		/>
+		<>
+			{NotificationElement}
+			<Table
+				tableLayout="fixed"
+				dataSource={data?.payload as Exception[]}
+				columns={columns}
+				rowKey="firstSeen"
+				loading={isLoading || false || errorCountResponse.status === 'loading'}
+				pagination={{
+					pageSize: getUpdatedPageSize,
+					responsive: true,
+					current: getUpdatedOffset / 10 + 1,
+					position: ['bottomLeft'],
+					total: errorCountResponse.data?.payload || 0,
+				}}
+				onChange={onChangeHandler}
+			/>
+		</>
 	);
 }
 

diff --git a/frontend/src/container/AppLayout/index.tsx b/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 />}

diff --git a/frontend/src/container/ErrorDetails/index.tsx b/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 />

diff --git a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx b/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' : ''}
-			mode="multiple"
-			style={{ width: '100%' }}
-			placeholder={t('placeholder_channel_select')}
-			value={currentValue}
-			onChange={(value): void => {
-				handleChange(value as string[]);
-			}}
-			optionLabelProp="label"
-		>
-			{renderOptions()}
-		</StyledSelect>
+		<>
+			{NotificationElement}
+			<StyledSelect
+				status={error ? 'error' : ''}
+				mode="multiple"
+				style={{ width: '100%' }}
+				placeholder={t('placeholder_channel_select')}
+				value={currentValue}
+				onChange={(value): void => {
+					handleChange(value as string[]);
+				}}
+				optionLabelProp="label"
+			>
+				{renderOptions()}
+			</StyledSelect>
+		</>
 	);
 }
 

diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/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>