implement error view on stream management page

src/hooks/useGetStreamInfo.tsx

@@ -1,5 +1,7 @@
 import { getLogStreamInfo } from '@/api/logStream';
 import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/StreamProvider';
+import { notifyError } from '@/utils/notification';
+import { AxiosError, isAxiosError } from 'axios';
 import { useQuery } from 'react-query';
 
 const { setStreamInfo } = streamStoreReducers;
@@ -17,7 +19,17 @@ export const useGetStreamInfo = (currentStream: string) => {
 		refetchOnWindowFocus: false,
 		refetchOnMount: true,
 		enabled: currentStream !== '',
-		onSuccess: (data) => setStreamStore((store) => setStreamInfo(store, data)),
+		onSuccess: (data) => {
+			setStreamStore((store) => setStreamInfo(store, data))
+		},
+		onError: (data: AxiosError) => {
+			if (isAxiosError(data) && data.response) {
+				const error = data.response?.data as string;
+				typeof error === 'string' && notifyError({ message: error });
+			} else if (data.message && typeof data.message === 'string') {
+				notifyError({ message: data.message });
+			}
+		},
 	});
 
 	return {

src/hooks/useLogStreamStats.tsx

@@ -2,6 +2,8 @@ import { useQuery } from 'react-query';
 import { getLogStreamStats } from '@/api/logStream';
 import { Dayjs } from 'dayjs';
 import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/StreamProvider';
+import { notifyError } from '@/utils/notification';
+import { AxiosError, isAxiosError } from 'axios';
 
 const { setStats } = streamStoreReducers;
 
@@ -18,6 +20,14 @@ export const useLogStreamStats = (streamName: string, fetchStartTime?: Dayjs) =>
 		onSuccess: (data) => {
 			setStreamStore((store) => setStats(store, data));
 		},
+		onError: (data: AxiosError) => {
+			if (isAxiosError(data) && data.response) {
+				const error = data.response?.data as string;
+				typeof error === 'string' && notifyError({ message: error });
+			} else if (data.message && typeof data.message === 'string') {
+				notifyError({ message: data.message });
+			}
+		},
 		refetchOnWindowFocus: false,
 	});
 

src/hooks/useRetentionEditor.tsx

@@ -20,6 +20,14 @@ export const useRetentionQuery = (streamName: string) => {
 			const retentionData = _.isArray(data.data) ? data.data[0] || {} : {};
 			setStreamStore((store) => setRetention(store, retentionData));
 		},
+		onError: (data: AxiosError) => {
+			if (isAxiosError(data) && data.response) {
+				const error = data.response?.data as string;
+				typeof error === 'string' && notifyError({ message: error });
+			} else if (data.message && typeof data.message === 'string') {
+				notifyError({ message: data.message });
+			}
+		},
 		retry: false,
 		enabled: streamName !== '',
 		refetchOnWindowFocus: false,

src/pages/Stream/Views/Manage/Alerts.tsx

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IconEdit, IconInfoCircleFilled, IconPlus, IconTrash } from '@tabler/icons-react';
 import { UseFormReturnType, useForm } from '@mantine/form';
 import { useStreamStore, streamStoreReducers } from '../../providers/StreamProvider';
+import ErrorView from './ErrorView';
 
 const defaultColumnTypeConfig = { column: '', operator: '=', value: '', repeats: 1, ignoreCase: false };
 const defaultColumnTypeRule = { type: 'column' as 'column', config: defaultColumnTypeConfig };
@@ -657,6 +658,7 @@ const AlertList = (props: {
 const Alerts = (props: {
 	isLoading: boolean;
 	schemaLoading: boolean;
+	isError: boolean;
 	updateAlerts: ({ config, onSuccess }: { config: any; onSuccess?: () => void }) => void;
 }) => {
 	const [alertName, setAlertName] = useState<string>('');
@@ -675,7 +677,15 @@ const Alerts = (props: {
 		<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} />
-			<AlertList selectAlert={selectAlert} isLoading={props.isLoading} updateAlerts={props.updateAlerts} />
+			{props.isError ? (
+				<ErrorView />
+			) : (
+				<AlertList
+					selectAlert={selectAlert}
+					isLoading={props.isLoading || props.schemaLoading}
+					updateAlerts={props.updateAlerts}
+				/>
+			)}
 		</Stack>
 	);
 };

src/pages/Stream/Views/Manage/ErrorView.tsx

@@ -0,0 +1,15 @@
+import { Stack, Text } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import classes from '../../styles/ErrorView.module.css';
+
+const ErrorView = (props: { msg?: string }) => {
+	const { msg = 'Something went wrong' } = props;
+	return (
+		<Stack gap={2} style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
+			<IconAlertTriangle stroke={1.2} className={classes.warningIcon} />
+			<Text className={classes.errorMsgText}>{msg}</Text>
+		</Stack>
+	);
+};
+
+export default ErrorView;

src/pages/Stream/Views/Manage/Info.tsx

@@ -6,6 +6,7 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import UpdateTimePartitionLimit from './UpdateTimePartitionLimit';
 import UpdateCustomPartitionField from './UpdateCustomPartitionField';
 import timeRangeUtils from '@/utils/timeRangeUtils';
+import ErrorView from './ErrorView';
 
 const { formatDateWithTimezone } = timeRangeUtils;
 
@@ -92,11 +93,11 @@ const InfoData = (props: { isLoading: boolean }) => {
 	);
 };
 
-const Info = (props: { isLoading: boolean }) => {
+const Info = (props: { isLoading: boolean; isError: boolean }) => {
 	return (
 		<Stack className={classes.sectionContainer} gap={0}>
 			<Header />
-			<InfoData isLoading={props.isLoading} />
+			{props.isError ? <ErrorView /> : <InfoData isLoading={props.isLoading} />}
 		</Stack>
 	);
 };

src/pages/Stream/Views/Manage/Management.tsx

@@ -21,19 +21,17 @@ const Management = (props: { schemaLoading: boolean }) => {
 	const hotTierFetch = useHotTier(currentStream || '');
 
 	// todo - handle loading and error states separately
-	const isStatsLoading = getStreamStats.getLogStreamStatsDataIsLoading || getStreamStats.getLogStreamStatsDataIsError;
 	const isAlertsLoading = getStreamAlertsConfig.isError || getStreamAlertsConfig.isLoading;
 	const isRetentionLoading =
-		getRetentionConfig.getLogRetentionIsLoading || getRetentionConfig.getLogRetentionIsError || instanceConfig === null;
-	const isStreamInfoLoading = getStreamInfo.getStreamInfoLoading || getStreamInfo.getStreamInfoError;
+		getRetentionConfig.getLogRetentionIsLoading || instanceConfig === null;
 	const isHotTierLoading = hotTierFetch.getHotTierInfoLoading;
 
 	return (
 		<Stack style={{ padding: '1rem', paddingTop: '0', height: '90%' }}>
 			<DeleteStreamModal />
 			<Stack style={{ flexDirection: 'row', height: '40%' }} gap={24}>
-				<Stats isLoading={isStatsLoading} />
-				<Info isLoading={isStreamInfoLoading} />
+				<Stats isLoading={getStreamStats.getLogStreamStatsDataIsLoading} isError={getStreamStats.getLogStreamStatsDataIsError} />
+				<Info isLoading={getStreamInfo.getStreamInfoLoading} isError={getStreamInfo.getStreamInfoError} />
 			</Stack>
 			<Stack style={{ flexDirection: 'row', height: '57%' }} gap={24}>
 				<Stack w="49.4%">
@@ -44,12 +42,14 @@ const Management = (props: { schemaLoading: boolean }) => {
 						deleteHotTierInfo={hotTierFetch.deleteHotTier}
 						isDeleting={hotTierFetch.isDeleting}
 						isUpdating={hotTierFetch.isUpdating}
+						isRetentionError={getRetentionConfig.getLogRetentionIsError}
 					/>
 				</Stack>
 				<Alerts
 					isLoading={isAlertsLoading}
 					schemaLoading={props.schemaLoading}
 					updateAlerts={getStreamAlertsConfig.updateLogStreamAlerts}
+					isError={getStreamAlertsConfig.isError}
 				/>
 			</Stack>
 		</Stack>

src/pages/Stream/Views/Manage/Settings.tsx

@@ -9,6 +9,7 @@ import { useStreamStore } from '../../providers/StreamProvider';
 import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
 import { sanitizeBytes, convertGibToBytes } from '@/utils/formatBytes';
 import timeRangeUtils from '@/utils/timeRangeUtils';
+import ErrorView from './ErrorView';
 
 const { formatDateWithTimezone } = timeRangeUtils;
 
@@ -311,6 +312,7 @@ const Settings = (props: {
 	deleteHotTierInfo: ({ onSuccess }: { onSuccess: () => void }) => void;
 	isDeleting: boolean;
 	isUpdating: boolean;
+	isRetentionError: boolean;
 }) => {
 	const [isStandAloneMode] = useAppStore((store) => store.isStandAloneMode);
 	return (
@@ -336,7 +338,11 @@ const Settings = (props: {
 						<Divider />
 						<Stack className={classes.fieldsContainer} style={{ border: 'none', flex: 1, gap: 4 }}>
 							<Text className={classes.fieldTitle}>Retention</Text>
-							<RetentionForm updateRetentionConfig={props.updateRetentionConfig} />
+							{!props.isRetentionError ? (
+								<RetentionForm updateRetentionConfig={props.updateRetentionConfig} />
+							) : (
+								<ErrorView />
+							)}
 						</Stack>
 					</>
 				)}

src/pages/Stream/Views/Manage/Stats.tsx

@@ -4,6 +4,7 @@ import { useStreamStore } from '../../providers/StreamProvider';
 import _ from 'lodash';
 import { calcCompressionRate, sanitizeBytes, sanitizeEventsCount } from '@/utils/formatBytes';
 import { IconArrowDown } from '@tabler/icons-react';
+import ErrorView from './ErrorView';
 
 const Header = () => {
 	return (
@@ -188,11 +189,11 @@ const StatsTable = (props: { isLoading: boolean }) => {
 	);
 };
 
-const Stats = (props: { isLoading: boolean }) => {
+const Stats = (props: { isLoading: boolean; isError: boolean }) => {
 	return (
 		<Stack className={classes.sectionContainer} gap={0}>
 			<Header />
-			<StatsTable isLoading={props.isLoading} />
+			{!props.isError ? <StatsTable isLoading={props.isLoading} /> : <ErrorView />}
 		</Stack>
 	);
 };

src/pages/Stream/styles/ErrorView.module.css

@@ -0,0 +1,8 @@
+
+.warningIcon {
+    color: var(--mantine-color-gray-5);
+}
+
+.errorMsgText {
+    color: var(--mantine-color-gray-5);
+}