ISSUE-205

src/api/logStream.ts

@@ -22,15 +22,15 @@ export const getLogStreamAlerts = (streamName: string) => {
 };
 
 export const putLogStreamAlerts = (streamName: string, data: any) => {
-	return Axios().put(LOG_STREAMS_ALERTS_URL(streamName), JSON.parse(data));
+	return Axios().put(LOG_STREAMS_ALERTS_URL(streamName), data);
 };
 
 export const getLogStreamRetention = (streamName: string) => {
 	return Axios().get(LOG_STREAMS_RETRNTION_URL(streamName));
 };
 
 export const putLogStreamRetention = (streamName: string, data: any) => {
-	return Axios().put(LOG_STREAMS_RETRNTION_URL(streamName), JSON.parse(data));
+	return Axios().put(LOG_STREAMS_RETRNTION_URL(streamName), data);
 };
 
 export const getLogStreamStats = (streamName: string) => {

src/components/Navbar/UserModal.tsx

@@ -36,7 +36,7 @@ const UserModal = (props: UserModalProps) => {
 					<Text style={{ fontSize: '1rem', fontWeight: 600 }}>Roles:</Text>
 					{Object.entries(userRoles).map(([key, value], index) => {
 						return (
-							<Text>
+							<Text key={index}>
 								{index + 1}. {key} ({value[0].privilege})
 							</Text>
 						);

src/hooks/useAlertsEditor.tsx

@@ -1,60 +1,39 @@
 import { useMutation, useQuery } from 'react-query';
 import { getLogStreamAlerts, putLogStreamAlerts } from '@/api/logStream';
-import { IconFileAlert } from '@tabler/icons-react';
-import { notifications } from '@mantine/notifications';
-import useMountedState from './useMountedState';
-import { Dayjs } from 'dayjs';
+import { notifyError, notifySuccess } from '@/utils/notification';
+import { AxiosError, isAxiosError } from 'axios';
 
-export const useAlertsEditor = (streamName: string, fetchStartTime?: Dayjs) => {
-	const [alertQuery, setAlertQuery] = useMountedState<string | undefined>('');
+export const useAlertsEditor = (streamName: string) => {
+	const { mutate: updateLogStreamAlerts } = useMutation((data: any) => putLogStreamAlerts(streamName, data), {
+		onSuccess: () => notifySuccess({ message: 'Updated Successfully' }),
+		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 });
+			}			
+		},
+	});
 
-	const {
-		mutate: updateLogStreamAlerts,
-		data: alertQueryData,
-		isSuccess: updateLogStreamIsSuccess,
-	} = useMutation((data: string) => putLogStreamAlerts(streamName, data), {});
+	return {
+		updateLogStreamAlerts,
+	};
+};
 
+export const useGetAlerts = (streamName: string) => {
 	const {
 		data: getLogAlertData,
 		isError: getLogAlertIsError,
 		isSuccess: getLogAlertIsSuccess,
 		isLoading: getLogAlertIsLoading,
-	} = useQuery(['fetch-log-stream-alert', streamName, updateLogStreamIsSuccess, fetchStartTime], () => getLogStreamAlerts(streamName), {
-		onSuccess: (data) => {
-			setAlertQuery(JSON.stringify(data?.data));
-		},
+	} = useQuery(['fetch-log-stream-alert', streamName], () => getLogStreamAlerts(streamName), {
 		retry: false,
 		enabled: streamName !== '',
+		refetchOnWindowFocus: false,
 	});
 
-	const handleAlertQueryChange = (value: string | undefined) => setAlertQuery(value);
-
-	const submitAlertQuery = () => {
-		try {
-			if (alertQuery) {
-				JSON.parse(alertQuery);
-				updateLogStreamAlerts(alertQuery);
-			} else {
-				throw new Error('Invalid JSON');
-			}
-		} catch (e) {
-			notifications.show({
-				id: 'load-data',
-				loading: false,
-				color: 'red',
-				title: 'Error occurred',
-				message: `Error occurred, please check your query and try again ${e}`,
-				icon: <IconFileAlert size="1rem" />,
-				autoClose: 3000,
-			});
-		}
-	};
-
 	return {
-		alertQuery,
-		handleAlertQueryChange,
-		submitAlertQuery,
-		alertQueryData,
 		getLogAlertData,
 		getLogAlertIsError,
 		getLogAlertIsSuccess,

src/hooks/useCacheToggle.tsx

@@ -13,6 +13,7 @@ export const useCacheToggle = (streamName: string) => {
 		{
 			retry: false,
 			enabled: streamName !== '',
+			refetchOnWindowFocus: false
 		},
 	);
 

src/hooks/useRetentionEditor.tsx

@@ -1,64 +1,39 @@
 import { useMutation, useQuery } from 'react-query';
 import { getLogStreamRetention, putLogStreamRetention } from '@/api/logStream';
-import { IconFileAlert } from '@tabler/icons-react';
-import { notifications } from '@mantine/notifications';
-import useMountedState from './useMountedState';
-import { Dayjs } from 'dayjs';
+import { notifyError, notifySuccess } from '@/utils/notification';
+import { AxiosError, isAxiosError } from 'axios';
 
-export const useRetentionEditor = (streamName: string, fetchStartTime?: Dayjs) => {
-	const [retentionQuery, setRetentionQuery] = useMountedState<string | undefined>('');
+export const useRetentionEditor = (streamName: string) => {
+	const { mutate: updateLogStreamRetention } = useMutation((data: any) => putLogStreamRetention(streamName, data), {
+		onSuccess: () => notifySuccess({ message: 'Updated Successfully' }),
+		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 });
+			}			
+		},
+	});
 
-	const {
-		mutate: updateLogStreamRetention,
-		data: retentionEditorData,
-		isSuccess: updateLogRetentionIsSuccess,
-	} = useMutation((data: string) => putLogStreamRetention(streamName, data), {});
+	return {
+		updateLogStreamRetention,
+	};
+};
 
+export const useGetRetention = (streamName: string) => {
 	const {
 		data: getLogRetentionData,
 		isError: getLogRetentionIsError,
 		isLoading: getLogRetentionIsLoading,
 		isSuccess: getLogRetentionIsSuccess,
-	} = useQuery(
-		['fetch-log-stream-retention', streamName, updateLogRetentionIsSuccess, fetchStartTime],
-		() => getLogStreamRetention(streamName),
-		{
-			onSuccess: (data) => {
-				setRetentionQuery(JSON.stringify(data?.data));
-			},
-			retry: false,
-			enabled: streamName !== '',
-		},
-	);
-
-	const handleRetentionQueryChange = (value: string | undefined) => setRetentionQuery(value);
-
-	const submitRetentionQuery = () => {
-		try {
-			if (retentionQuery) {
-				JSON.parse(retentionQuery);
-				updateLogStreamRetention(retentionQuery);
-			} else {
-				throw new Error('Invalid JSON');
-			}
-		} catch (e) {
-			notifications.show({
-				id: 'load-data',
-				loading: false,
-				color: 'red',
-				title: 'Error occurred',
-				message: `Error occurred, please check your query and try again ${e}`,
-				icon: <IconFileAlert size="1rem" />,
-				autoClose: 3000,
-			});
-		}
-	};
-
+	} = useQuery(['fetch-log-stream-retention', streamName], () => getLogStreamRetention(streamName), {
+		onSuccess: () => {},
+		retry: false,
+		enabled: streamName !== '',
+		refetchOnWindowFocus: false,
+	});
 	return {
-		retentionQuery,
-		handleRetentionQueryChange,
-		submitRetentionQuery,
-		retentionEditorData,
 		getLogRetentionData,
 		getLogRetentionIsLoading,
 		getLogRetentionIsError,

src/hooks/useRole.tsx

@@ -1,6 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { deleteRole, getDefaultRole, getRole, getRoles, putDeafultRole, putRole } from '@/api/roles';
 import Cookies from 'js-cookie';
+import { AxiosError, isAxiosError } from 'axios';
+import { notifyError } from '@/utils/notification';
 
 export const useRole = () => {
 	const queryClient = useQueryClient();
@@ -12,16 +14,31 @@ export const useRole = () => {
 		isError: updateRoleIsError,
 		isLoading: updateRoleIsLoading,
 		data: updateRoleData,
-	} = useMutation((data: { userName: string; privilege: object[] }) => putRole(data.userName, data.privilege), {});
+	} = useMutation((data: { userName: string; privilege: object[] }) => putRole(data.userName, data.privilege), {
+		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 });
+			}			
+		},
+	});
 
 	const {
 		mutate: deleteRoleMutation,
 		isSuccess: deleteRoleIsSuccess,
 		isError: deleteRoleIsError,
 		isLoading: deleteRoleIsLoading,
 	} = useMutation((data: { roleName: string }) => deleteRole(data.roleName), {
-		onError: () => {
+		onError: (data: AxiosError) => {
 			queryClient.invalidateQueries(['fetch-roles']);
+			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 });
+			}
 		},
 	});
 
@@ -54,6 +71,14 @@ export const useRole = () => {
 		mutate: updateDefaultRoleMutation,
 	} = useMutation((data: { roleName: string }) => putDeafultRole(data?.roleName), {
 		retry: false,
+		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 });
+			}			
+		},
 	});
 
 	const {

src/hooks/useUser.tsx

@@ -2,6 +2,7 @@ import { useMutation, useQuery } from 'react-query';
 import { deleteUser, getUserRoles, getUsers, postUser, postUserResetPassword, putUserRoles } from '@/api/users';
 import { isAxiosError, AxiosError } from 'axios';
 import useMountedState from './useMountedState';
+import { notifyError } from '@/utils/notification';
 
 export const useUser = () => {
 	const [resetPasswordError, setResetPasswordError] = useMountedState<string>('');
@@ -21,6 +22,7 @@ export const useUser = () => {
 				if (isAxiosError(data) && data.response) {
 					const error = data.response.data as string;
 					setCreateUserError(error);
+					typeof error === 'string' && notifyError({ message: error });
 				}
 			},
 			onSuccess: (_data, variables) => {
@@ -35,15 +37,32 @@ export const useUser = () => {
 		isError: deleteUserIsError,
 		isLoading: deleteUserIsLoading,
 		data: deleteUserData,
-	} = useMutation((data: { userName: string }) => deleteUser(data.userName), {});
+	} = useMutation((data: { userName: string; onSuccess?: () => void }) => deleteUser(data.userName), {
+		onSuccess: (_data, variables) => {
+			variables.onSuccess && variables.onSuccess();
+		},
+		onError: (data: AxiosError) => {
+			if (isAxiosError(data) && data.response) {
+				const error = data.response?.data as string;
+				typeof error === 'string' && notifyError({ message: error });
+			}
+		},
+	});
 
 	const {
 		mutate: updateUserMutation,
 		isSuccess: updateUserIsSuccess,
 		isError: updateUserIsError,
 		isLoading: updateUserIsLoading,
 		data: udpateUserData,
-	} = useMutation((data: { userName: string; roles: string[] }) => putUserRoles(data.userName, data.roles), {});
+	} = useMutation((data: { userName: string; roles: string[] }) => putUserRoles(data.userName, data.roles), {
+		onError: (data: AxiosError) => {
+			if (isAxiosError(data) && data.response) {
+				const error = data.response?.data as string;
+				typeof error === 'string' && notifyError({ message: error });
+			}
+		},
+	});
 
 	const {
 		mutate: updateUserPasswordMutation,
@@ -56,6 +75,7 @@ export const useUser = () => {
 			if (isAxiosError(data) && data.response) {
 				const error = data.response.data as string;
 				setResetPasswordError(error);
+				typeof error === 'string' && notifyError({ message: error });
 			}
 		},
 	});
@@ -111,6 +131,7 @@ export const useGetUser = () => {
 		refetch: getUserRefetch,
 	} = useQuery(['fetch-user'], () => getUsers(), {
 		retry: false,
+		refetchOnWindowFocus: false
 	});
 	return {
 		getUserRefetch,

src/pages/AccessManagement/PrivilegeTR.tsx

@@ -265,7 +265,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 							</Tooltip>
 						</>
 					) : (
-						<Badge color="red">Error</Badge>
+						<></>
 					)}
 				</td>
 				<td>

src/pages/AccessManagement/RoleTR.tsx

@@ -27,14 +27,15 @@ interface RoleTRProps {
 		id: string;
 		method: string;
 	};
-	deleteUserMutation: (data: { userName: string }) => void;
+	deleteUserMutation: (data: { userName: string, onSuccess?: () => void; }) => void;
 	updateUserPasswordIsError: boolean;
 	getUserRolesIsError: boolean;
 	getUserRolesIsLoading: boolean;
 	updateUserPasswordMutation: (data: { userName: string }) => void;
 	updateUserPasswordIsLoading: boolean;
 	udpateUserPasswordData: AxiosResponse | undefined;
 	resetPasswordError: string;
+	getUserRefetch: () => void;
 }
 
 const RoleTR: FC<RoleTRProps> = (props) => {
@@ -117,7 +118,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 	};
 
 	const handleDelete = () => {
-		deleteUserMutation({ userName: user.id });
+		deleteUserMutation({ userName: user.id, onSuccess: props.getUserRefetch });
 		closeDelete();
 		setUserInput('');
 	};
@@ -173,7 +174,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 				) : getUserRolesIsLoading ? (
 					'loading..'
 				) : getUserRolesData?.data ? (
-					<Stack style={{ flexDirection: 'row' }} gap={0} align="end" justify="center">
+					<Stack style={{ flexDirection: 'row' }} gap={0} align="end">
 						{getBadges()}
 						<Tooltip
 							label={'Add a Role'}
@@ -186,7 +187,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 						</Tooltip>
 					</Stack>
 				) : (
-					<Badge color="red">Error</Badge>
+					<></>
 				)}
 			</td>
 			<td>

src/pages/AccessManagement/Users.tsx

@@ -74,6 +74,7 @@ const Users: FC = () => {
 						updateUserPasswordIsLoading={updateUserPasswordIsLoading}
 						udpateUserPasswordData={udpateUserPasswordData}
 						resetPasswordError={resetPasswordError}
+						getUserRefetch={getUserRefetch}
 					/>
 				);
 			})