hide alerts on distributed mode

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>
 	);

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));

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}

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>