From 15ead497594b811f9622b5eafa31efe7644f53ff Mon Sep 17 00:00:00 2001
From: balaji-jr <balaji.joshua1998@gmail.com>
Date: Thu, 19 Sep 2024 14:21:24 +0530
Subject: [PATCH] hide alerts on distributed mode

---
 src/components/Misc/RestrictedView.tsx       | 13 +++++++++++--
 src/hooks/useAlertsEditor.tsx                |  4 ++--
 src/pages/Stream/Views/Manage/Alerts.tsx     |  9 ++++++---
 src/pages/Stream/Views/Manage/Management.tsx |  6 ++++--
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Misc/RestrictedView.tsx b/src/components/Misc/RestrictedView.tsx
index e2214d19..5c4ea66a 100644
--- a/src/components/Misc/RestrictedView.tsx
+++ b/src/components/Misc/RestrictedView.tsx
@@ -1,6 +1,13 @@
 import { Stack, Text } from '@mantine/core';
 
-const RestrictedView = () => {
+const defaultMsg = 'Access restricted, Please contact your administrator.';
+
+type RestrictedViewOpts = {
+	msg?: string;
+};
+
+const RestrictedView = (opts: RestrictedViewOpts) => {
+	const msg = opts.msg || defaultMsg;
 	return (
 		<Stack
 			style={{
@@ -11,7 +18,9 @@ const RestrictedView = () => {
 				justifyContent: 'center',
 			}}>
 			<Stack>
-				<Text ta="center" c='gray.6'>Access restricted, Please contact your administrator.</Text>
+				<Text ta="center" c="gray.6">
+					{msg}
+				</Text>
 			</Stack>
 		</Stack>
 	);
diff --git a/src/hooks/useAlertsEditor.tsx b/src/hooks/useAlertsEditor.tsx
index ab8f00fb..c2adf9a3 100644
--- a/src/hooks/useAlertsEditor.tsx
+++ b/src/hooks/useAlertsEditor.tsx
@@ -5,14 +5,14 @@ import { AxiosError, isAxiosError } from 'axios';
 import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/StreamProvider';
 const { setAlertsConfig } = streamStoreReducers;
 
-const useAlertsQuery = (streamName: string, hasAlertsAccess: boolean) => {
+const useAlertsQuery = (streamName: string, hasAlertsAccess: boolean, isStandAloneMode: boolean | null) => {
 	const [, setStreamStore] = useStreamStore((_store) => null);
 	const { data, isError, isSuccess, isLoading, refetch } = useQuery(
 		['fetch-log-stream-alert', streamName, hasAlertsAccess],
 		() => getLogStreamAlerts(streamName),
 		{
 			retry: false,
-			enabled: streamName !== '' && hasAlertsAccess,
+			enabled: streamName !== '' && hasAlertsAccess && !!isStandAloneMode,
 			refetchOnWindowFocus: false,
 			onSuccess: (data) => {
 				setStreamStore((store) => setAlertsConfig(store, data));
diff --git a/src/pages/Stream/Views/Manage/Alerts.tsx b/src/pages/Stream/Views/Manage/Alerts.tsx
index 1a2abcf6..631d7acd 100644
--- a/src/pages/Stream/Views/Manage/Alerts.tsx
+++ b/src/pages/Stream/Views/Manage/Alerts.tsx
@@ -661,6 +661,7 @@ const Alerts = (props: {
 	isError: boolean;
 	hasAlertsAccess: boolean;
 	updateAlerts: ({ config, onSuccess }: { config: any; onSuccess?: () => void }) => void;
+	isStandAloneMode: boolean | null;
 }) => {
 	const [alertName, setAlertName] = useState<string>('');
 	const [alertModalOpen, setAlertModalOpen] = useState<boolean>(false);
@@ -674,14 +675,16 @@ const Alerts = (props: {
 		setAlertModalOpen(false);
 	}, []);
 
+	const hideAlerts = !props.hasAlertsAccess || props.isStandAloneMode === false;
+
 	return (
 		<Stack className={classes.sectionContainer} gap={0} style={{ flex: 1 }}>
 			<AlertsModal open={alertModalOpen} alertName={alertName} onClose={closeModal} updateAlerts={props.updateAlerts} />
-			<Header selectAlert={selectAlert} isLoading={props.isLoading} showCreateBtn={props.hasAlertsAccess}/>
+			<Header selectAlert={selectAlert} isLoading={props.isLoading} showCreateBtn={!hideAlerts} />
 			{props.isError ? (
 				<ErrorView />
-			) : !props.hasAlertsAccess ? (
-				<RestrictedView />
+			) : hideAlerts ? (
+				<RestrictedView msg={!props.isStandAloneMode ? 'Alerts is unavailable on distributed mode.' : ''} />
 			) : (
 				<AlertList
 					selectAlert={selectAlert}
diff --git a/src/pages/Stream/Views/Manage/Management.tsx b/src/pages/Stream/Views/Manage/Management.tsx
index fd18e3bf..fe30e2d7 100644
--- a/src/pages/Stream/Views/Manage/Management.tsx
+++ b/src/pages/Stream/Views/Manage/Management.tsx
@@ -15,15 +15,16 @@ const Management = (props: { schemaLoading: boolean }) => {
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [instanceConfig] = useAppStore((store) => store.instanceConfig);
 	const [userAccessMap] = useAppStore((store) => store.userAccessMap);
+	const [isStandAloneMode] = useAppStore((store) => store.isStandAloneMode);
 	const { hasAlertsAccess, hasSettingsAccess } = userAccessMap;
-	const getStreamAlertsConfig = useAlertsQuery(currentStream || '', hasAlertsAccess);
+	const getStreamAlertsConfig = useAlertsQuery(currentStream || '', hasAlertsAccess, isStandAloneMode);
 	const getStreamStats = useLogStreamStats(currentStream || '');
 	const getRetentionConfig = useRetentionQuery(currentStream || '', hasSettingsAccess);
 	const getStreamInfo = useGetStreamInfo(currentStream || '', currentStream !== null);
 	const hotTierFetch = useHotTier(currentStream || '', hasSettingsAccess);
 
 	// todo - handle loading and error states separately
-	const isAlertsLoading = getStreamAlertsConfig.isError || getStreamAlertsConfig.isLoading;
+	const isAlertsLoading = getStreamAlertsConfig.isError || getStreamAlertsConfig.isLoading || isStandAloneMode === null;
 	const isRetentionLoading = getRetentionConfig.getLogRetentionIsLoading || instanceConfig === null;
 	const isHotTierLoading = hotTierFetch.getHotTierInfoLoading;
 
@@ -56,6 +57,7 @@ const Management = (props: { schemaLoading: boolean }) => {
 					updateAlerts={getStreamAlertsConfig.updateLogStreamAlerts}
 					isError={getStreamAlertsConfig.isError}
 					hasAlertsAccess={hasAlertsAccess}
+					isStandAloneMode={isStandAloneMode}
 				/>
 			</Stack>
 		</Stack>