diff --git a/src/api/users.ts b/src/api/users.ts index c96d0674..df20a69b 100644 --- a/src/api/users.ts +++ b/src/api/users.ts @@ -1,26 +1,26 @@ -import { Axios } from "./axios"; -import { USERS_LIST_URL, USER_PASSWORD_URL, USER_ROLES_URL, USER_URL } from "./constants"; +import { Axios } from './axios'; +import { USERS_LIST_URL, USER_PASSWORD_URL, USER_ROLES_URL, USER_URL } from './constants'; export const getUsers = () => { - return Axios().get(USERS_LIST_URL); -} + return Axios().get(USERS_LIST_URL); +}; export const postUser = (username: string, roles?: object[]) => { - return Axios().post(USER_URL(username), roles ); -} + return Axios().post(USER_URL(username), roles); +}; export const deleteUser = (username: string) => { - return Axios().delete(USER_URL(username)); -} + return Axios().delete(USER_URL(username)); +}; -export const putUserRoles = (username: string, roles: object[]) => { - return Axios().put(USER_ROLES_URL(username), roles); -} +export const putUserRoles = (username: string, roles: string[]) => { + return Axios().put(USER_ROLES_URL(username), roles); +}; export const getUserRoles = (username: string) => { - return Axios().get(USER_ROLES_URL(username)); -} + return Axios().get(USER_ROLES_URL(username)); +}; export const postUserResetPassword = (username: string) => { - return Axios().post(USER_PASSWORD_URL(username)); -} \ No newline at end of file + return Axios().post(USER_PASSWORD_URL(username)); +}; diff --git a/src/components/Header/RefreshInterval.tsx b/src/components/Header/RefreshInterval.tsx index 84f8a34d..a01eab4e 100644 --- a/src/components/Header/RefreshInterval.tsx +++ b/src/components/Header/RefreshInterval.tsx @@ -1,11 +1,12 @@ import useMountedState from '@/hooks/useMountedState'; -import { REFRESH_INTERVALS, useHeaderContext } from '@/layouts/MainLayout/Context'; +import { useHeaderContext } from '@/layouts/MainLayout/Context'; import { Button, Menu, Text, px } from '@mantine/core'; import { IconRefresh, IconRefreshOff } from '@tabler/icons-react'; import ms from 'ms'; import type { FC } from 'react'; import { useEffect, useMemo } from 'react'; import { useLogQueryStyles } from './styles'; +import { REFRESH_INTERVALS } from '@/constants/timeConstants'; const RefreshInterval: FC = () => { const { @@ -38,9 +39,10 @@ const RefreshInterval: FC = () => { {selectedInterval ? ms(selectedInterval) : 'Off'} - + {REFRESH_INTERVALS.map((interval) => { if (interval === selectedInterval) return null; diff --git a/src/components/Header/TimeRange.tsx b/src/components/Header/TimeRange.tsx index 5104ee6a..5037ea6a 100644 --- a/src/components/Header/TimeRange.tsx +++ b/src/components/Header/TimeRange.tsx @@ -1,5 +1,5 @@ import useMountedState from '@/hooks/useMountedState'; -import { FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/Context'; +import { useHeaderContext } from '@/layouts/MainLayout/Context'; import { Box, Button, Menu, Text, UnstyledButton, px } from '@mantine/core'; import { DateTimePicker } from '@mantine/dates'; import { IconClock } from '@tabler/icons-react'; @@ -7,6 +7,7 @@ import dayjs from 'dayjs'; import type { FC } from 'react'; import { Fragment, useEffect, useMemo } from 'react'; import { useLogQueryStyles } from './styles'; +import { FIXED_DURATIONS } from '@/constants/timeConstants'; type FixedDurations = (typeof FIXED_DURATIONS)[number]; diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 76e0ba30..68c40262 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -18,7 +18,6 @@ import { import { FC, useEffect } from 'react'; import { useNavbarStyles } from './styles'; import { useLocation, useParams } from 'react-router-dom'; -import { useGetLogStreamList } from '@/hooks/useGetLogStreamList'; import { notifications } from '@mantine/notifications'; import { useNavigate } from 'react-router-dom'; import { DEFAULT_FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/Context'; @@ -26,13 +25,13 @@ import useMountedState from '@/hooks/useMountedState'; import dayjs from 'dayjs'; import { useDisclosure } from '@mantine/hooks'; import { USERS_MANAGEMENT_ROUTE } from '@/constants/routes'; -import { useDeleteLogStream } from '@/hooks/useDeleteLogStream'; import InfoModal from './infoModal'; -import { useGetUserRole } from '@/hooks/useGetUserRoles'; import { getStreamsSepcificAccess, getUserSepcificStreams } from './rolesHandler'; import { LogStreamData } from '@/@types/parseable/api/stream'; import Cookies from 'js-cookie'; import { NAVBAR_WIDTH } from '@/constants/theme'; +import { useUser } from '@/hooks/useUser'; +import { useLogStream } from '@/hooks/useLogStream'; const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/'; const isSecureConnection = window.location.protocol === 'https:'; @@ -69,8 +68,11 @@ const Navbar: FC = (props) => { const [opened, { open, close }] = useDisclosure(false); const [openedDelete, { close: closeDelete, open: openDelete }] = useDisclosure(); - const { data: streams, error, getData, resetData: resetStreamArray } = useGetLogStreamList(); - const { data: deleteData, deleteLogStreamFun } = useDeleteLogStream(); + const { deleteLogStreamMutation, getLogStreamListData, getLogStreamListIsError, getLogStreamListRefetch } = + useLogStream(); + + const { getUserRolesData, getUserRolesMutation } = useUser(); + useEffect(() => { const listener = subNavbarTogle.subscribe(setIsSubNavbarOpen); return () => { @@ -104,7 +106,7 @@ const Navbar: FC = (props) => { handleChange(userSepecficStreams[0].name); } else if (userSepecficStreams && !userSepecficStreams.find((stream: any) => stream.name === streamName)) { notifications.show({ - id: 'error-data', + id: 'getLogStreamListIsError-data', color: 'red', title: 'Error occurred', message: `${streamName} stream not found`, @@ -131,17 +133,18 @@ const Navbar: FC = (props) => { navigate(`/${value}${page}`); } }; + const handleChangeWithoutRiderection = (value: string, page: string = currentPage) => { setActiveStream(value); setSearchValue(value); setCurrentPage(page); const now = dayjs(); - setUserSepecficAccess(getStreamsSepcificAccess(roles, value)); + setUserSepecficAccess(getStreamsSepcificAccess(getUserRolesData?.data, value)); subLogQuery.set((state) => { state.streamName = value || ''; state.startTime = now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate(); state.endTime = now.toDate(); - state.access = getStreamsSepcificAccess(roles, value); + state.access = getStreamsSepcificAccess(getUserRolesData?.data, value); }); subLogSelectedTimeRange.set((state) => { state.state = 'fixed'; @@ -160,37 +163,23 @@ const Navbar: FC = (props) => { }; const handleDelete = () => { - deleteLogStreamFun(deleteStream); + deleteLogStreamMutation({ deleteStream }); closeDelete(); }; useEffect(() => { - if (deleteData) { - resetStreamArray(); - getData(); - return; - } - }, [deleteData]); - - const { data: roles, getRoles, resetData } = useGetUserRole(); - useEffect(() => { - if (username) { - getRoles(username); - } - return () => { - resetData(); - }; - }, [username]); - - useEffect(() => { - if (streams && streams.length > 0 && roles) { - const userStreams = getUserSepcificStreams(roles, streams as any); + if (getLogStreamListData?.data && getLogStreamListData?.data.length > 0 && getUserRolesData?.data) { + const userStreams = getUserSepcificStreams(getUserRolesData?.data, getLogStreamListData?.data as any); setUserSepecficStreams(userStreams as any); } else { setUserSepecficStreams([]); - setUserSepecficAccess(getStreamsSepcificAccess(roles)); + setUserSepecficAccess(getStreamsSepcificAccess(getUserRolesData?.data)); } - }, [roles, streams]); + }, [getUserRolesData?.data, getLogStreamListData?.data]); + + useEffect(() => { + getUserRolesMutation({ userName: username ? username : '' }); + }, [username]); const { classes } = useNavbarStyles(); const { @@ -232,13 +221,13 @@ const Navbar: FC = (props) => { required className={selectStreambtn} /> - {error &&
{error}
} - {error && ( + {getLogStreamListIsError &&
{getLogStreamListIsError}
} + {getLogStreamListIsError && ( } component="button" - onClick={getData} + onClick={() => getLogStreamListRefetch()} sx={{ paddingLeft: 0 }} /> )} diff --git a/src/components/Navbar/infoModal.tsx b/src/components/Navbar/infoModal.tsx index f41ee67c..d10b85f5 100644 --- a/src/components/Navbar/infoModal.tsx +++ b/src/components/Navbar/infoModal.tsx @@ -1,7 +1,7 @@ import { Box, Button, Modal, Text, Tooltip, px } from '@mantine/core'; import { FC, useEffect, useMemo } from 'react'; import { useInfoModalStyles } from './styles'; -import { useGetAbout } from '@/hooks/useGetAbout'; +import { useAbout } from '@/hooks/useGetAbout'; import { IconAlertCircle, IconBook2, IconBrandGithub, IconBrandSlack, IconBusinessplan } from '@tabler/icons-react'; import { useHeaderContext } from '@/layouts/MainLayout/Context'; @@ -62,30 +62,21 @@ const InfoModal: FC = (props) => { state: { subInstanceConfig }, } = useHeaderContext(); - const { data, loading, error, getAbout, resetData } = useGetAbout(); - useEffect(() => { - if (data) { - resetData(); - } - getAbout(); - return () => { - resetData(); - }; - }, []); + const { getAboutData, getAboutIsError, getAboutIsLoading } = useAbout(); const llmStatus = useMemo(() => { let status = 'LLM API Key not set'; - if (data?.llmActive) { - status = `${data.llmProvider} configured`; + if (getAboutData?.data?.llmActive) { + status = `${getAboutData?.data.llmProvider} configured`; } return status; - }, [data?.llmActive]); + }, [getAboutData?.data?.llmActive]); useEffect(() => { - if (data) { - subInstanceConfig.set(data); + if (getAboutData?.data) { + subInstanceConfig.set(getAboutData?.data); } - }, [data]); + }, [getAboutData?.data]); const { classes } = useInfoModalStyles(); const { @@ -108,16 +99,16 @@ const InfoModal: FC = (props) => { Important info about your Parseable deployment - {error ? ( + {getAboutIsError ? ( Error... - ) : loading ? ( + ) : getAboutIsLoading ? ( Loading... - ) : data ? ( + ) : getAboutData?.data ? ( <> License: - {data.license} + {getAboutData?.data.license} ) : null} UI Version: - {data.uiVersion} + {getAboutData?.data.uiVersion} Deployment Id: - {data.deploymentId} + {getAboutData?.data.deploymentId} Mode - {data.mode} + {getAboutData?.data.mode} Staging - {data.staging} + {getAboutData?.data.staging} Store - {data.store} + {getAboutData?.data.store} - Cache - {data.cache} - + Cache + {getAboutData?.data.cache} + LLM Status {llmStatus} diff --git a/src/constants/timeConstants.ts b/src/constants/timeConstants.ts new file mode 100644 index 00000000..398c0604 --- /dev/null +++ b/src/constants/timeConstants.ts @@ -0,0 +1,35 @@ +import dayjs from 'dayjs'; + +type FixedDuration = { + name: string; + milliseconds: number; +}; + +export const REFRESH_INTERVALS: number[] = [10000, 30000, 60000, 300000, 600000, 1200000]; + +export const FIXED_DURATIONS: ReadonlyArray = [ + { + name: 'last 10 minutes', + milliseconds: dayjs.duration({ minutes: 10 }).asMilliseconds(), + }, + { + name: 'last 1 hour', + milliseconds: dayjs.duration({ hours: 1 }).asMilliseconds(), + }, + { + name: 'last 5 hours', + milliseconds: dayjs.duration({ hours: 5 }).asMilliseconds(), + }, + { + name: 'last 24 hours', + milliseconds: dayjs.duration({ days: 1 }).asMilliseconds(), + }, + { + name: 'last 3 days', + milliseconds: dayjs.duration({ days: 3 }).asMilliseconds(), + }, + { + name: 'last 7 days', + milliseconds: dayjs.duration({ days: 7 }).asMilliseconds(), + }, +] as const; diff --git a/src/hooks/useAlertsEditor.tsx b/src/hooks/useAlertsEditor.tsx index 87a53eb1..158c1105 100644 --- a/src/hooks/useAlertsEditor.tsx +++ b/src/hooks/useAlertsEditor.tsx @@ -38,24 +38,25 @@ export const useAlertsEditor = (streamName: string) => { }, }); - const { data: getLogAlertData } = useQuery( - ['fetch-log-stream-alert', streamName, updateLogStreamIsSuccess], - () => getLogStreamAlerts(streamName), - { - onError: () => { - notifyApi({ - color: 'red', - message: 'Failed to get log streams alert', - icon: , - }); - }, - onSuccess: (data) => { - setAlertQuery(JSON.stringify(data?.data)); - }, - retry: false, - enabled: streamName !== '', + const { + data: getLogAlertData, + isError: getLogAlertIsError, + isSuccess: getLogAlertIsSuccess, + isLoading: getLogAlertIsLoading, + } = useQuery(['fetch-log-stream-alert', streamName, updateLogStreamIsSuccess], () => getLogStreamAlerts(streamName), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get log streams alert', + icon: , + }); + }, + onSuccess: (data) => { + setAlertQuery(JSON.stringify(data?.data)); }, - ); + retry: false, + enabled: streamName !== '', + }); const handleAlertQueryChange = (value: string | undefined) => setAlertQuery(value); @@ -86,5 +87,8 @@ export const useAlertsEditor = (streamName: string) => { submitAlertQuery, alertQueryData, getLogAlertData, + getLogAlertIsError, + getLogAlertIsSuccess, + getLogAlertIsLoading, }; }; diff --git a/src/hooks/useDeleteLogStream.tsx b/src/hooks/useDeleteLogStream.tsx index 64d211f9..a3a7ccc9 100644 --- a/src/hooks/useDeleteLogStream.tsx +++ b/src/hooks/useDeleteLogStream.tsx @@ -1,77 +1,42 @@ +import { useMutation } from 'react-query'; import { deleteLogStream } from '@/api/logStream'; -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { notifyApi } from '@/utils/notification'; export const useDeleteLogStream = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const deleteLogStreamFun = async (streamName: string) => { - try { - setLoading(true); - notifications.show({ - id: 'delete-data', - loading: true, - color: '#545BEB', - title: 'Deleting Stream', - message: 'Stream will be deleted.', - autoClose: false, - withCloseButton: false, - - }); - setError(null); - const res = await deleteLogStream(streamName); - - switch (res.status) { - case StatusCodes.OK: { - const streams = res.data; - - setData(streams); - notifications.update({ - id: 'delete-data', - color: 'green', - title: 'Stream was deleted', - message: 'Successfully Deleted', - icon: , - autoClose: 8000, - }); - break; - - } - default: { - setError('Failed to get ALert'); - notifications.update({ - id: 'delete-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while deleting stream', - icon: , - autoClose: 2000, - }); - } - } - } catch { - setError('Failed to get ALert'); - notifications.update({ - id: 'delete-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while deleting stream', - icon: , - autoClose: 2000, + const { + mutate: deleteLogStreamMutation, + isSuccess: deleteLogStreamIsSuccess, + isError: deleteLogStreamIsError, + isLoading: deleteLogStreamIsLoading, + } = useMutation((data: { deleteStream: string }) => deleteLogStream(data.deleteStream), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Stream was deleted', + message: 'Successfully Deleted', + icon: , + autoClose: 8000, }); - } finally { - setLoading(false); - } + }, + onError: () => { + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: 'Error occurred while deleting stream', + icon: , + autoClose: 2000, + }, + true, + ); + }, + }); + + return { + deleteLogStreamMutation, + deleteLogStreamIsSuccess, + deleteLogStreamIsError, + deleteLogStreamIsLoading, }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, deleteLogStreamFun, resetData }; }; diff --git a/src/hooks/useDeleteRole.tsx b/src/hooks/useDeleteRole.tsx deleted file mode 100644 index 5c398955..00000000 --- a/src/hooks/useDeleteRole.tsx +++ /dev/null @@ -1,75 +0,0 @@ - -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { deleteRole } from '@/api/roles'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - -export const useDeleteRole = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const deleteRoleFun = async (roleName:string) => { - try { - setLoading(true); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Deleting Role', - message: 'Role will be deleted.', - autoClose: false, - withCloseButton: false, - }); - setError(null); - const res = await deleteRole(roleName); - - switch (res.status) { - case StatusCodes.OK: { - setData("Role was deleted"); - notifications.update({ - id: 'load-data', - color: 'green', - title: 'Role was deleted', - message: 'Successfully deleted', - icon: , - autoClose: 3000, - }); - break; - } - default: { - setError('Failed to Delete Roles'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while deleting Role', - icon: , - autoClose: 2000, - }); - console.error(res); - } - } - } catch(error) { - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while deleting role', - icon: , - autoClose: 2000, - }); - setError('Failed to Delete Roles'); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, deleteRoleFun, resetData }; -} \ No newline at end of file diff --git a/src/hooks/useDeleteUser.tsx b/src/hooks/useDeleteUser.tsx deleted file mode 100644 index 42c51b2e..00000000 --- a/src/hooks/useDeleteUser.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { deleteUser } from '@/api/users'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - -export const useDeleteUser = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const deleteUserFun = async (userName:string) => { - try { - setLoading(true); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Deleting user', - message: 'User will be deleted.', - autoClose: false, - withCloseButton: false, - }); - setError(null); - const res = await deleteUser(userName); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - notifications.update({ - id: 'load-data', - color: 'green', - title: 'User was deleted', - message: 'Successfully deleted', - icon: , - autoClose: 3000, - }); - break; - - } - default: { - setError('Failed to get Roles'); - console.error(res); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while deleting user', - icon: , - autoClose: 2000, - }); - } - } - } catch(error) { - setError('Failed to get delete user'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while deleting user', - icon: , - autoClose: 2000, - }); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, deleteUserFun, resetData }; -}; diff --git a/src/hooks/useGetAbout.ts b/src/hooks/useGetAbout.ts deleted file mode 100644 index 1ec78fb3..00000000 --- a/src/hooks/useGetAbout.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { getCurrentAbout } from '@/api/about'; -import { AboutData } from '@/@types/parseable/api/about'; - -export const useGetAbout = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getAbout = async () => { - try { - setLoading(true); - setError(null); - const res = await getCurrentAbout(); - - switch (res.status) { - case StatusCodes.OK: { - - setData(res.data); - break; - } - default: { - setError('Failed to get ALert'); - console.error(res); - } - } - } catch(error) { - setError('Failed to get ALert'); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getAbout, resetData }; -}; diff --git a/src/hooks/useGetAbout.tsx b/src/hooks/useGetAbout.tsx new file mode 100644 index 00000000..b991a733 --- /dev/null +++ b/src/hooks/useGetAbout.tsx @@ -0,0 +1,40 @@ +import { getCurrentAbout } from '@/api/about'; +import { useQuery } from 'react-query'; +import { notifyApi } from '@/utils/notification'; +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; + +export const useAbout = () => { + const { + data: getAboutData, + isError: getAboutIsError, + isSuccess: getAboutIsSuccess, + isLoading: getAboutIsLoading, + } = useQuery(['fetch-about'], () => getCurrentAbout(), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get log streams alert', + icon: , + }); + }, + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Streams was loaded', + message: 'Successfully Loaded', + icon: , + autoClose: 1000, + }); + }, + retry: false, + refetchOnWindowFocus: false, + refetchOnMount: false, + }); + + return { + getAboutData, + getAboutIsError, + getAboutIsSuccess, + getAboutIsLoading, + }; +}; diff --git a/src/hooks/useGetCacheStatus.tsx b/src/hooks/useGetCacheStatus.tsx deleted file mode 100644 index bdf1a108..00000000 --- a/src/hooks/useGetCacheStatus.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import useMountedState from './useMountedState'; -import { StatusCodes } from 'http-status-codes'; -import { getCachingStatus } from '@/api/caching'; - -export const useGetCacheStatus = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getCacheStatus = async (streamName: string) => { - setLoading(true); - try { - const res = await getCachingStatus(streamName); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - break; - } - default: { - setError('Failed to get cache status'); - console.error(res); - } - } - } catch (error) { - setError('Failed to get cache status'); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getCacheStatus, resetData }; -}; diff --git a/src/hooks/useGetDefaultRole.tsx b/src/hooks/useGetDefaultRole.tsx deleted file mode 100644 index b8d93c6e..00000000 --- a/src/hooks/useGetDefaultRole.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { getDefaultRole } from '@/api/roles'; -import { notifications } from '@mantine/notifications'; -import { IconFileAlert } from '@tabler/icons-react'; - -export const useGetDefaultRole = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getDefaultOidc = async () => { - try { - setLoading(true); - setError(null); - const res = await getDefaultRole(); - - switch (res.status) { - case StatusCodes.OK: { - const streams = res.data; - - setData(streams); - break; - } - default: { - setError('Failed to get default role'); - notifications.show({ - id: 'get-default-role', - color: 'red', - title: 'Error occurred', - message: 'Failed to get default role', - icon: , - autoClose: 2000, - }); - } - } - } catch { - setError('Failed to get default role'); - notifications.show({ - id: 'get-default-role', - color: 'red', - title: 'Error occurred', - message: 'Failed to get default role', - icon: , - autoClose: 2000, - }); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getDefaultOidc, resetData }; -}; diff --git a/src/hooks/useGetLogStreamAlert.ts b/src/hooks/useGetLogStreamAlert.ts deleted file mode 100644 index 62130bea..00000000 --- a/src/hooks/useGetLogStreamAlert.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { getLogStreamAlerts } from '@/api/logStream'; -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; - -export const useGetLogStreamAlert = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getLogAlert = async (streamName: string) => { - try { - setLoading(true); - setError(null); - const res = await getLogStreamAlerts(streamName); - - switch (res.status) { - case StatusCodes.OK: { - const streams = res.data; - - setData(streams); - break; - } - default: { - setError('Failed to get ALert'); - } - } - } catch { - setError('Failed to get ALert'); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getLogAlert, resetData }; -}; diff --git a/src/hooks/useGetLogStreamList.tsx b/src/hooks/useGetLogStreamList.tsx index 2f81e004..5c440f6c 100644 --- a/src/hooks/useGetLogStreamList.tsx +++ b/src/hooks/useGetLogStreamList.tsx @@ -1,131 +1,67 @@ -import { LogStreamData } from '@/@types/parseable/api/stream'; - import { getLogStreamList } from '@/api/logStream'; -import { StatusCodes } from 'http-status-codes'; -import { useEffect } from 'react'; -import useMountedState from './useMountedState'; -import { notifications } from '@mantine/notifications'; +import { useQuery } from 'react-query'; import { IconFileAlert, IconCheck } from '@tabler/icons-react'; - -import { useNavigate } from 'react-router-dom'; -import { LOGIN_ROUTE } from '@/constants/routes'; +import { notifyApi } from '@/utils/notification'; +import { AxiosError, isAxiosError } from 'axios'; import Cookies from 'js-cookie'; export const useGetLogStreamList = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const navigate = useNavigate(); - - const getData = async () => { - try { - setLoading(true); - setError(null); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Fetching Streams', - message: 'Streams will be loaded.', - autoClose: false, - withCloseButton: false, - }); - const res = await getLogStreamList(); - - switch (res.status) { - case StatusCodes.OK: { - const streams = res.data.sort((a, b) => { - const nameA = a.name.toUpperCase(); - const nameB = b.name.toUpperCase(); - if (nameA < nameB) { - return -1; - } - if (nameA > nameB) { - return 1; - } - return 0; - }); - - setData(streams); - if (streams && Boolean(streams.length)) { - notifications.update({ - id: 'load-data', - color: 'green', - title: 'Streams was loaded', - message: 'Successfully Loaded', - icon: , - autoClose: 1000, - }); - } - - if (streams && streams.length === 0) { - notifications.update({ - id: 'load-data', - color: 'red', - title: 'No Streams', - message: 'No Streams Found in your account', - icon: , - autoClose: 2000, - }); - } - break; - } - case StatusCodes.UNAUTHORIZED: { - setError('Unauthorized'); - Cookies.remove('session'); - Cookies.remove('username'); - - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Unauthorized', - icon: , - autoClose: 2000, - }); - navigate( - { - pathname: LOGIN_ROUTE, - }, - { replace: true }, - ); + const logout = () => { + Cookies.remove('session'); + Cookies.remove('username'); + window.location.reload(); + }; - break; - } - default: { - setError('Failed to get log streams'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while fetching streams', - icon: , - autoClose: 2000, - }); + const { + data: getLogStreamListData, + isError: getLogStreamListIsError, + isSuccess: getLogStreamListIsSuccess, + isLoading: getLogStreamListIsLoading, + refetch: getLogStreamListRefetch, + } = useQuery(['fetch-log-stream-list'], () => getLogStreamList(), { + onError: (data: AxiosError) => { + if (isAxiosError(data) && data.response) { + if (data.response && data.response.status === 401) { + logout(); } + notifyApi({ + color: 'red', + message: 'Failed to get log streams alert', + icon: , + }); } - } catch { - setError('Failed to get log streams'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while fetching streams', - icon: , - autoClose: 2000, + }, + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Streams was loaded', + message: 'Successfully Loaded', + icon: , + autoClose: 1000, }); - } finally { - setLoading(false); - } - }; - const resetData = () => { - setData(null); - }; + }, + retry: false, + refetchOnWindowFocus: false, + refetchOnMount: false, + }); - useEffect(() => { - getData(); - }, []); + getLogStreamListData?.data.sort((a, b) => { + const nameA = a.name.toUpperCase(); + const nameB = b.name.toUpperCase(); + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + return 0; + }); - return { data, error, loading, getData, resetData }; + return { + getLogStreamListData, + getLogStreamListIsError, + getLogStreamListIsSuccess, + getLogStreamListIsLoading, + getLogStreamListRefetch, + }; }; diff --git a/src/hooks/useGetLogStreamRetention.ts b/src/hooks/useGetLogStreamRetention.ts deleted file mode 100644 index 99441585..00000000 --- a/src/hooks/useGetLogStreamRetention.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { LogStreamRetention } from '@/@types/parseable/api/stream'; -import { getLogStreamRetention } from '@/api/logStream'; -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; - -export const useGetLogStreamRetention = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getLogRetention = async (streamName: string) => { - try { - setLoading(true); - setError(null); - const res = await getLogStreamRetention(streamName); - - switch (res.status) { - case StatusCodes.OK: { - const streams = res.data; - - setData(streams); - break; - } - default: { - setError('Failed to get ALert'); - } - } - } catch { - setError('Failed to get ALert'); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getLogRetention, resetData }; -}; diff --git a/src/hooks/useGetLogStreamStat.ts b/src/hooks/useGetLogStreamStat.ts deleted file mode 100644 index 1ef3c6c1..00000000 --- a/src/hooks/useGetLogStreamStat.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { LogStreamStat } from '@/@types/parseable/api/stream'; -import { getLogStreamStats } from '@/api/logStream'; -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; - -export const useGetLogStreamStat = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getLogStat = async (streamName: string) => { - try { - setLoading(true); - setError(null); - const res = await getLogStreamStats(streamName); - - switch (res.status) { - case StatusCodes.OK: { - const streams = res.data; - - setData(streams); - break; - } - default: { - setError('Failed to get ALert'); - } - } - } catch { - setError('Failed to get ALert'); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getLogStat, resetData }; -}; diff --git a/src/hooks/useGetRole.tsx b/src/hooks/useGetRole.tsx deleted file mode 100644 index 27dcc357..00000000 --- a/src/hooks/useGetRole.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { getRole } from '@/api/roles'; - -export const useGetRole = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getRolePrivilege = async (roleName:string) => { - try { - setLoading(true); - setError(null); - const res = await getRole(roleName); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - break; - } - default: { - setError('Failed to get Role'); - console.error(res); - } - } - } catch(error) { - setError('Failed to get Role'); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getRolePrivilege, resetData }; -}; diff --git a/src/hooks/useGetRoles.tsx b/src/hooks/useGetRoles.tsx deleted file mode 100644 index a0363879..00000000 --- a/src/hooks/useGetRoles.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { getRoles } from '@/api/roles'; - -export const useGetRoles = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getRolesList = async () => { - try { - setLoading(true); - setError(null); - const res = await getRoles(); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - break; - } - default: { - setError('Failed to get Roles'); - console.error(res); - } - } - } catch(error) { - setError('Failed to get Roles'); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getRolesList, resetData }; -}; diff --git a/src/hooks/useGetUserRoles.ts b/src/hooks/useGetUserRoles.ts deleted file mode 100644 index 53e27a0c..00000000 --- a/src/hooks/useGetUserRoles.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { getUserRoles } from '@/api/users'; -import { useNavigate } from 'react-router-dom'; -import { LOGIN_ROUTE } from '@/constants/routes'; - -export const useGetUserRole = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - const navigate = useNavigate(); - - const getRoles = async (userName:string) => { - try { - setLoading(true); - setError(null); - const res = await getUserRoles(userName); - switch (res.status) { - case StatusCodes.OK: { - // let result:any[]=[] - // for (var prop in res.data ) { - // result=[...result,...res.data[prop]] - // } - setData(res.data); - break; - } - case StatusCodes.UNAUTHORIZED: { - setError('Unauthorized'); - navigate( - { - pathname: LOGIN_ROUTE, - }, - { replace: true }, - ); - - break; - } - default: { - setError('Failed to get Roles'); - console.error(res); - } - } - } catch(error) { - setError('Failed to get ALert'); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getRoles, resetData }; -}; diff --git a/src/hooks/useGetUsers.ts b/src/hooks/useGetUsers.ts deleted file mode 100644 index eab14a95..00000000 --- a/src/hooks/useGetUsers.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { getUsers } from '@/api/users'; - -export const useGetUsers = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getUsersList = async () => { - try { - setLoading(true); - setError(null); - const res = await getUsers(); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - break; - } - default: { - setError('Failed to get Users'); - console.error(res); - } - } - } catch(error) { - setError('Failed to get Users'); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getUsersList, resetData }; -}; diff --git a/src/hooks/useLogStream.tsx b/src/hooks/useLogStream.tsx new file mode 100644 index 00000000..b8450e68 --- /dev/null +++ b/src/hooks/useLogStream.tsx @@ -0,0 +1,87 @@ +import { useMutation, useQuery } from 'react-query'; +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { notifyApi } from '@/utils/notification'; +import { deleteLogStream, getLogStreamList } from '@/api/logStream'; + +export const useLogStream = () => { + const { + mutate: deleteLogStreamMutation, + isSuccess: deleteLogStreamIsSuccess, + isError: deleteLogStreamIsError, + isLoading: deleteLogStreamIsLoading, + } = useMutation((data: { deleteStream: string }) => deleteLogStream(data.deleteStream), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Stream was deleted', + message: 'Successfully Deleted', + icon: , + autoClose: 8000, + }); + }, + onError: () => { + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: 'Error occurred while deleting stream', + icon: , + autoClose: 2000, + }, + true, + ); + }, + }); + + const { + data: getLogStreamListData, + isError: getLogStreamListIsError, + isSuccess: getLogStreamListIsSuccess, + isLoading: getLogStreamListIsLoading, + refetch: getLogStreamListRefetch, + } = useQuery(['fetch-log-stream-list', deleteLogStreamIsSuccess], () => getLogStreamList(), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get log streams alert', + icon: , + }); + }, + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Streams was loaded', + message: 'Successfully Loaded', + icon: , + autoClose: 1000, + }); + }, + retry: false, + refetchOnWindowFocus: false, + refetchOnMount: false, + }); + + getLogStreamListData?.data.sort((a, b) => { + const nameA = a.name.toUpperCase(); + const nameB = b.name.toUpperCase(); + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + return 0; + }); + + return { + deleteLogStreamMutation, + deleteLogStreamIsSuccess, + deleteLogStreamIsError, + deleteLogStreamIsLoading, + getLogStreamListData, + getLogStreamListIsError, + getLogStreamListIsSuccess, + getLogStreamListIsLoading, + getLogStreamListRefetch, + }; +}; diff --git a/src/hooks/useLogStreamStats.tsx b/src/hooks/useLogStreamStats.tsx new file mode 100644 index 00000000..680ea891 --- /dev/null +++ b/src/hooks/useLogStreamStats.tsx @@ -0,0 +1,37 @@ +import { useQuery } from 'react-query'; +import { getLogStreamStats } from '@/api/logStream'; +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { notifyApi } from '@/utils/notification'; + +export const useLogStreamStats = (streamName: string) => { + const { + data: getLogStreamStatsData, + isSuccess: getLogStreamStatsDataIsSuccess, + isError: getLogStreamStatsDataIsError, + isLoading: getLogStreamStatsDataIsLoading, + } = useQuery(['fetch-log-stream-stats', streamName], () => getLogStreamStats(streamName), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get log streams stats', + icon: , + }); + }, + onSuccess: () => { + notifyApi({ + color: 'green', + message: 'Successfully fetched log streams stats', + icon: , + }); + }, + retry: false, + enabled: streamName !== '', + }); + + return { + getLogStreamStatsData, + getLogStreamStatsDataIsSuccess, + getLogStreamStatsDataIsLoading, + getLogStreamStatsDataIsError, + }; +}; diff --git a/src/hooks/usePostResetPassword.tsx b/src/hooks/usePostResetPassword.tsx deleted file mode 100644 index 7750100d..00000000 --- a/src/hooks/usePostResetPassword.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { postUserResetPassword } from '@/api/users'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - -export const usePostUserResetPassword = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const resetPasswordUser = async (userName:string) => { - try { - setLoading(true); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Changing Password', - message: 'Password will be Changed.', - autoClose: false, - withCloseButton: false, - }); - setError(null); - const res = await postUserResetPassword(userName); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - notifications.update({ - id: 'load-data', - color: 'green', - title: 'Password was Changed', - message: 'Successfully Changed', - icon: , - autoClose: 3000, - }); - break; - - } - default: { - setError(res.data); - console.error(res); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: res.data, - icon: , - autoClose: 2000, - }); - } - } - } catch(error) { - setError('Failed to get create user'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while creating user', - icon: , - autoClose: 2000, - }); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, resetPasswordUser, resetData }; -}; - diff --git a/src/hooks/usePostUser.tsx b/src/hooks/usePostUser.tsx deleted file mode 100644 index ebab7bdc..00000000 --- a/src/hooks/usePostUser.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { postUser } from '@/api/users'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - -export const usePostUser = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const createUser = async (userName:string,roles?:object[]) => { - try { - setLoading(true); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Creating user', - message: 'User will be created.', - autoClose: false, - withCloseButton: false, - }); - setError(null); - const res = await postUser(userName,roles); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - notifications.update({ - id: 'load-data', - color: 'green', - title: 'User was created', - message: 'Successfully created', - icon: , - autoClose: 3000, - }); - break; - - } - default: { - setError(res.data); - console.error(res); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: res.data, - icon: , - autoClose: 2000, - }); - } - } - } catch(error) { - setError('Failed to get create user'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while creating user', - icon: , - autoClose: 2000, - }); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setError(null); - setData(null); - }; - - return { data, error, loading, createUser, resetData }; -}; - diff --git a/src/hooks/usePutCache.tsx b/src/hooks/usePutCache.tsx deleted file mode 100644 index ddc6a330..00000000 --- a/src/hooks/usePutCache.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import useMountedState from './useMountedState'; -import { StatusCodes } from 'http-status-codes'; -import { updateCaching } from '@/api/caching'; - -export const usePutCache = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const updateCache = async (streamName: string, type: boolean) => { - setLoading(true); - try { - const res = await updateCaching(streamName, type); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - break; - } - default: { - setError('Failed to change cache setting'); - console.error(res); - } - } - } catch (error) { - setError('Failed to change cache setting'); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, updateCache, resetData }; -}; diff --git a/src/hooks/usePutDefaultRole.tsx b/src/hooks/usePutDefaultRole.tsx deleted file mode 100644 index 264a38ca..00000000 --- a/src/hooks/usePutDefaultRole.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; - -import { putDeafultRole } from '@/api/roles'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - -export const usePutDefaultRole = () => { - const [data, setData] = useMountedState<{ - data: any; - } | null>(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const setDefaultRole = async (payload: string) => { - try { - setLoading(true); - setError(null); - notifications.show({ - id: 'put-default-role', - loading: true, - color: '#545BEB', - title: 'Setting Default Role for oidc users', - message: 'Data will be loaded.', - autoClose: false, - withCloseButton: false, - }); - - const response = await putDeafultRole(payload); - - if (response.status === StatusCodes.OK) { - setData({ data: payload }); - notifications.update({ - id: 'put-default-role', - color: 'green', - title: 'Default Role Set', - message: 'Successfully Set', - icon: , - autoClose: 1000, - }); - - return; - } - - notifications.update({ - id: 'put-default-role', - color: 'red', - title: 'Error occurred', - message: 'Error occurred, please check role and try again', - icon: , - autoClose: 2000, - }); - setError(response.data); - } catch (error: any) { - notifications.update({ - id: 'put-default-role', - color: 'red', - title: 'Error occurred', - message: `Error: ${error.message}`, - icon: , - autoClose: 2000, - }); - setError(error.message); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, setDefaultRole, resetData }; -}; diff --git a/src/hooks/usePutLogStreamAlerts.ts b/src/hooks/usePutLogStreamAlerts.ts deleted file mode 100644 index b6ee44b3..00000000 --- a/src/hooks/usePutLogStreamAlerts.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { putLogStreamAlerts } from '@/api/logStream'; - -export const usePutLogStreamAlerts = () => { - const [data, setData] = useMountedState<{ - data: any; - } | null>(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const putAlertsData = async (streamName :string, payload:any) => { - try { - setLoading(true); - setError(null); - - const [logsAlertsRes] = await Promise.all([putLogStreamAlerts(streamName, payload)]); - - const data = logsAlertsRes.data; - - if (logsAlertsRes.status === StatusCodes.OK) { - setData({ data }); - return; - } - - setError(logsAlertsRes.data); - } catch (error: any) { - setError(error.message); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, putAlertsData, resetData }; -}; diff --git a/src/hooks/usePutLogStreamRetention.ts b/src/hooks/usePutLogStreamRetention.ts deleted file mode 100644 index 7b9071cd..00000000 --- a/src/hooks/usePutLogStreamRetention.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { putLogStreamRetention } from '@/api/logStream'; - -export const usePutLogStreamRetention = () => { - const [data, setData] = useMountedState<{ - data: any; - } | null>(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const putRetentionData = async (streamName: string, payload: any) => { - try { - setLoading(true); - setError(null); - - const [logRetentionRes] = await Promise.all([putLogStreamRetention(streamName, payload)]); - - const data = logRetentionRes.data; - - if (logRetentionRes.status === StatusCodes.OK) { - setData({ data }); - return; - } - - setError(logRetentionRes.data); - } catch (error: any) { - setError(error.message); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, putRetentionData, resetData }; -}; diff --git a/src/hooks/usePutRole.tsx b/src/hooks/usePutRole.tsx deleted file mode 100644 index 5d77e030..00000000 --- a/src/hooks/usePutRole.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { putRole } from '@/api/roles'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; - -export const usePutRole = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const putRolePrivilege = async (roleName: string, privilege: object[]) => { - try { - setLoading(true); - setError(null); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'updating/creating Role', - message: 'Role will be updated/created.', - autoClose: false, - withCloseButton: false, - }); - const res = await putRole(roleName, privilege); - - switch (res.status) { - case StatusCodes.OK: { - setData("Role was updated/created"); - notifications.update({ - id: 'load-data', - color: 'green', - title: 'Role was updated/created', - message: 'Successfully updated/created', - icon: , - autoClose: 3000, - }); - break; - } - default: { - setError('Failed to put Role'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while updated/created Role', - icon: , - autoClose: 2000, - }); - console.error(res); - } - } - } catch (error) { - setError('Failed to get Role'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while updated/created Role', - icon: , - autoClose: 2000, - }); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, putRolePrivilege, resetData }; -}; diff --git a/src/hooks/usePutUserRole.tsx b/src/hooks/usePutUserRole.tsx deleted file mode 100644 index 74f7132b..00000000 --- a/src/hooks/usePutUserRole.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { putUserRoles } from '@/api/users'; -import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; -import Cookies from 'js-cookie'; - -export const usePutUserRole = () => { - const [data, setData] = useMountedState(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const putRole = async (userName: string, roles: any) => { - try { - setLoading(true); - notifications.show({ - id: 'load-data', - loading: true, - color: '#545BEB', - title: 'Updating user', - message: 'User will be updated soon.', - autoClose: false, - withCloseButton: false, - }); - setError(null); - const res = await putUserRoles(userName, roles); - - switch (res.status) { - case StatusCodes.OK: { - setData(res.data); - notifications.update({ - id: 'load-data', - color: 'green', - title: 'Updated user', - message: 'Successfully updated', - icon: , - autoClose: 3000, - }); - break; - } - default: { - setError(res.data); - console.error(res); - Cookies.remove('session'); - Cookies.remove('username'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: res.data, - icon: , - autoClose: 2000, - }); - } - } - } catch (error) { - setError('Failed to get create user'); - notifications.update({ - id: 'load-data', - color: 'red', - title: 'Error occurred', - message: 'Error occurred while updating user role(s)', - icon: , - autoClose: 2000, - }); - console.error(error); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, putRole, resetData }; -}; diff --git a/src/hooks/useQueryResult.ts b/src/hooks/useQueryResult.ts deleted file mode 100644 index 55855e2e..00000000 --- a/src/hooks/useQueryResult.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { getQueryResult } from '@/api/query'; -import { StatusCodes } from 'http-status-codes'; -import useMountedState from './useMountedState'; -import { LogsQuery } from '@/@types/parseable/api/query'; - -export const useQueryResult = () => { - const [data, setData] = useMountedState<{ - data: any; - } | null>(null); - const [error, setError] = useMountedState(null); - const [loading, setLoading] = useMountedState(false); - - const getQueryData = async (logsQuery: LogsQuery, query = '') => { - try { - setLoading(true); - setError(null); - - const [logsQueryRes] = await Promise.all([getQueryResult(logsQuery, query)]); - - const data = logsQueryRes.data; - - if (logsQueryRes.status === StatusCodes.OK) { - setData({ data }); - return; - } - - if (typeof data === 'string' && data.includes('Stream is not initialized yet')) { - setData({ - data: [data], - }); - return; - } - - setError(logsQueryRes.data); - } catch (error: any) { - setError(error.message); - } finally { - setLoading(false); - } - }; - - const resetData = () => { - setData(null); - }; - - return { data, error, loading, getQueryData, resetData }; -}; diff --git a/src/hooks/useQueryResult.tsx b/src/hooks/useQueryResult.tsx new file mode 100644 index 00000000..d6bd9694 --- /dev/null +++ b/src/hooks/useQueryResult.tsx @@ -0,0 +1,48 @@ +import { getQueryResult } from '@/api/query'; +import { LogsQuery } from '@/@types/parseable/api/query'; +import { notifications } from '@mantine/notifications'; +import { isAxiosError, AxiosError } from 'axios'; +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { useMutation } from 'react-query'; + +type QueryData = { + logsQuery: LogsQuery; + query: string; +}; + +export const useQueryResult = () => { + const fetchQueryHandler = async (data: QueryData) => { + const response = await getQueryResult(data.logsQuery, data.query); + if (response.status !== 200) { + throw new Error(response.statusText); + } + return response.data; + }; + + const fetchQueryMutation = useMutation(fetchQueryHandler, { + onError: (data: AxiosError) => { + if (isAxiosError(data) && data.response) { + notifications.update({ + id: 'load-data', + color: 'red', + title: 'Error occurred', + message: 'Error occurred, please check your query and try again', + icon: , + autoClose: 2000, + }); + } + }, + onSuccess: () => { + notifications.update({ + id: 'load-data', + color: 'green', + title: 'Data was loaded', + message: 'Successfully Loaded', + icon: , + autoClose: 1000, + }); + }, + }); + + return { fetchQueryMutation }; +}; diff --git a/src/hooks/useRetentionEditor.tsx b/src/hooks/useRetentionEditor.tsx index 55d21bf0..57513932 100644 --- a/src/hooks/useRetentionEditor.tsx +++ b/src/hooks/useRetentionEditor.tsx @@ -38,7 +38,12 @@ export const useRetentionEditor = (streamName: string) => { }, }); - const { data: getLogRetentionData } = useQuery( + const { + data: getLogRetentionData, + isError: getLogRetentionIsError, + isLoading: getLogRetentionIsLoading, + isSuccess: getLogRetentionIsSuccess, + } = useQuery( ['fetch-log-stream-retention', streamName, updateLogRetentionIsSuccess], () => getLogStreamRetention(streamName), { @@ -86,5 +91,8 @@ export const useRetentionEditor = (streamName: string) => { submitRetentionQuery, retentionEditorData, getLogRetentionData, + getLogRetentionIsLoading, + getLogRetentionIsError, + getLogRetentionIsSuccess, }; }; diff --git a/src/hooks/useRole.tsx b/src/hooks/useRole.tsx new file mode 100644 index 00000000..e1cf0a2e --- /dev/null +++ b/src/hooks/useRole.tsx @@ -0,0 +1,175 @@ +import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { notifyApi } from '@/utils/notification'; +import { deleteRole, getDefaultRole, getRole, getRoles, putDeafultRole, putRole } from '@/api/roles'; +import Cookies from 'js-cookie'; + +export const useRole = () => { + const queryClient = useQueryClient(); + const username = Cookies.get('username'); + + const { + mutate: updateRoleMutation, + isSuccess: updateRoleIsSuccess, + isError: updateRoleIsError, + isLoading: updateRoleIsLoading, + data: updateRoleData, + } = useMutation((data: { userName: string; privilege: object[] }) => putRole(data.userName, data.privilege), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Role was udpated', + message: 'Successfully updated', + icon: , + autoClose: 8000, + }); + }, + onError: () => { + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: 'Error occurred while updating role', + icon: , + autoClose: 2000, + }, + true, + ); + }, + }); + + const { + mutate: deleteRoleMutation, + isSuccess: deleteRoleIsSuccess, + isError: deleteRoleIsError, + isLoading: deleteRoleIsLoading, + } = useMutation((data: { roleName: string }) => deleteRole(data.roleName), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Role was deleted', + message: 'Successfully Deleted', + icon: , + autoClose: 8000, + }); + }, + onError: () => { + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: 'Error occurred while deleting role', + icon: , + autoClose: 2000, + }, + true, + ); + queryClient.invalidateQueries(['fetch-roles']); + }, + }); + + const { + data: getRolesData, + isError: getRolesIsError, + isSuccess: getRolesIsSuccess, + isLoading: getRolesIsLoading, + refetch: getRolesRefetch, + } = useQuery(['fetch-roles', username, updateRoleIsSuccess, deleteRoleIsSuccess], () => getRoles(), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get Roles', + icon: , + }); + }, + onSuccess: () => {}, + retry: false, + refetchOnWindowFocus: false, + }); + + const { + data: getRoleData, + isError: getRoleIsError, + isSuccess: getRoleIsSuccess, + isLoading: getRoleIsLoading, + mutate: getRoleMutation, + } = useMutation((data: { roleName: string }) => getRole(data?.roleName), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get Roles', + icon: , + }); + }, + onSuccess: () => {}, + retry: false, + }); + + const { + data: updateDefaultRoleData, + isError: updateDefaultRoleIsError, + isSuccess: updateDefaultRoleIsSuccess, + isLoading: updateDefaultRoleIsLoading, + mutate: updateDefaultRoleMutation, + } = useMutation((data: { roleName: string }) => putDeafultRole(data?.roleName), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get Roles', + icon: , + }); + }, + onSuccess: () => {}, + retry: false, + }); + + const { + data: getDefaultRoleData, + isError: getDefaultRoleIsError, + isSuccess: getDefaultRoleIsSuccess, + isLoading: getDefaultRoleIsLoading, + mutate: getDefaultRoleMutation, + } = useMutation(() => getDefaultRole(), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get Roles', + icon: , + }); + }, + onSuccess: () => {}, + retry: false, + }); + + return { + deleteRoleMutation, + deleteRoleIsSuccess, + deleteRoleIsError, + deleteRoleIsLoading, + updateRoleMutation, + updateRoleIsSuccess, + updateRoleIsError, + updateRoleIsLoading, + updateRoleData, + getRolesRefetch, + getRolesData, + getRolesIsError, + getRolesIsSuccess, + getRolesIsLoading, + getRoleMutation, + getRoleData, + getRoleIsError, + getRoleIsSuccess, + getRoleIsLoading, + updateDefaultRoleMutation, + updateDefaultRoleData, + updateDefaultRoleIsError, + updateDefaultRoleIsSuccess, + updateDefaultRoleIsLoading, + getDefaultRoleMutation, + getDefaultRoleData, + getDefaultRoleIsError, + getDefaultRoleIsSuccess, + getDefaultRoleIsLoading, + }; +}; diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx new file mode 100644 index 00000000..79aec83c --- /dev/null +++ b/src/hooks/useUser.tsx @@ -0,0 +1,215 @@ +import { useMutation, useQuery } from 'react-query'; +import { IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { notifyApi } from '@/utils/notification'; +import { deleteUser, getUserRoles, getUsers, postUser, postUserResetPassword, putUserRoles } from '@/api/users'; +import { isAxiosError, AxiosError } from 'axios'; +import useMountedState from './useMountedState'; + +export const useUser = () => { + const [resetPasswordError, setResetPasswordError] = useMountedState(''); + const [createUserError, setCreateUserError] = useMountedState(''); + + const { + mutate: createUserMutation, + isSuccess: createUserIsSuccess, + isError: createUserIsError, + isLoading: createUserIsLoading, + data: createUserData, + reset: createUserReset, + } = useMutation((data: { userName: string; roles: object[] }) => postUser(data.userName, data.roles), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'User was created', + message: 'Successfully created', + icon: , + autoClose: 3000, + }); + }, + onError: (data: AxiosError) => { + if (isAxiosError(data) && data.response) { + const error = data.response.data as string; + setCreateUserError(error); + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: `${error}`, + icon: , + autoClose: 2000, + }, + true, + ); + } + }, + }); + + const { + mutate: deleteUserMutation, + isSuccess: deleteUserIsSuccess, + isError: deleteUserIsError, + isLoading: deleteUserIsLoading, + data: deleteUserData, + } = useMutation((data: { userName: string }) => deleteUser(data.userName), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'User was deleted', + message: 'Successfully deleted', + icon: , + autoClose: 3000, + }); + }, + onError: () => { + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: 'Error occurred while deleting user', + icon: , + autoClose: 2000, + }, + true, + ); + }, + }); + + const { + mutate: updateUserMutation, + isSuccess: updateUserIsSuccess, + isError: updateUserIsError, + isLoading: updateUserIsLoading, + data: udpateUserData, + } = useMutation((data: { userName: string; roles: string[] }) => putUserRoles(data.userName, data.roles), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'User was updated', + message: 'Successfully updated', + icon: , + autoClose: 3000, + }); + }, + onError: (data: AxiosError) => { + if (isAxiosError(data) && data.response) { + const error = data.response.data; + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: `${error}`, + icon: , + autoClose: 2000, + }, + true, + ); + } + }, + }); + + const { + mutate: updateUserPasswordMutation, + isSuccess: updateUserPasswordIsSuccess, + isError: updateUserPasswordIsError, + isLoading: updateUserPasswordIsLoading, + data: udpateUserPasswordData, + } = useMutation((data: { userName: string }) => postUserResetPassword(data.userName), { + onSuccess: () => { + notifyApi({ + color: 'green', + title: 'Password was Changed', + message: 'Successfully Changed', + icon: , + autoClose: 3000, + }); + }, + onError: (data: AxiosError) => { + if (isAxiosError(data) && data.response) { + const error = data.response.data as string; + setResetPasswordError(error); + notifyApi( + { + color: 'red', + title: 'Error occurred', + message: `${error}`, + icon: , + autoClose: 2000, + }, + true, + ); + } + }, + }); + + const { + data: getUserData, + isError: getUserIsError, + isSuccess: getUserIsSuccess, + isLoading: getUserIsLoading, + refetch: getUserRefetch, + } = useQuery(['fetch-user', createUserIsSuccess, deleteUserIsSuccess], () => getUsers(), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get user', + icon: , + }); + }, + onSuccess: () => {}, + retry: false, + }); + + const { + data: getUserRolesData, + isError: getUserRolesIsError, + isSuccess: getUserRolesIsSuccess, + isLoading: getUserRolesIsLoading, + mutate: getUserRolesMutation, + } = useMutation((data: { userName: string }) => getUserRoles(data?.userName), { + onError: () => { + notifyApi({ + color: 'red', + message: 'Failed to get Roles', + icon: , + }); + }, + onSuccess: () => {}, + retry: false, + }); + + return { + createUserMutation, + createUserIsSuccess, + createUserIsError, + createUserIsLoading, + createUserData, + createUserReset, + getUserRefetch, + getUserData, + getUserIsError, + getUserIsSuccess, + getUserIsLoading, + deleteUserMutation, + deleteUserIsSuccess, + deleteUserIsError, + deleteUserIsLoading, + deleteUserData, + updateUserMutation, + updateUserIsSuccess, + updateUserIsError, + updateUserIsLoading, + udpateUserData, + getUserRolesMutation, + getUserRolesData, + getUserRolesIsError, + getUserRolesIsSuccess, + getUserRolesIsLoading, + updateUserPasswordMutation, + updateUserPasswordIsSuccess, + updateUserPasswordIsError, + updateUserPasswordIsLoading, + udpateUserPasswordData, + resetPasswordError, + createUserError, + }; +}; diff --git a/src/layouts/MainLayout/Context.tsx b/src/layouts/MainLayout/Context.tsx index 88abdea9..af9dc9e6 100644 --- a/src/layouts/MainLayout/Context.tsx +++ b/src/layouts/MainLayout/Context.tsx @@ -1,6 +1,7 @@ import { AboutData } from '@/@types/parseable/api/about'; import { SortOrder, type LogsQuery, type LogsSearch, type LogSelectedTimeRange } from '@/@types/parseable/api/query'; import { LogStreamData } from '@/@types/parseable/api/stream'; +import { FIXED_DURATIONS } from '@/constants/timeConstants'; import useSubscribeState, { SubData } from '@/hooks/useSubscribeState'; import dayjs from 'dayjs'; import type { FC } from 'react'; @@ -11,33 +12,6 @@ const Context = createContext({}); const { Provider } = Context; const now = dayjs(); -export const REFRESH_INTERVALS = [10000, 30000, 60000, 300000, 600000, 1200000]; -export const FIXED_DURATIONS = [ - { - name: 'last 10 minutes', - milliseconds: dayjs.duration({ minutes: 10 }).asMilliseconds(), - }, - { - name: 'last 1 hour', - milliseconds: dayjs.duration({ hours: 1 }).asMilliseconds(), - }, - { - name: 'last 5 hours', - milliseconds: dayjs.duration({ hours: 5 }).asMilliseconds(), - }, - { - name: 'last 24 hours', - milliseconds: dayjs.duration({ days: 1 }).asMilliseconds(), - }, - { - name: 'last 3 days', - milliseconds: dayjs.duration({ days: 3 }).asMilliseconds(), - }, - { - name: 'last 7 days', - milliseconds: dayjs.duration({ days: 7 }).asMilliseconds(), - }, -] as const; export const DEFAULT_FIXED_DURATIONS = FIXED_DURATIONS[0]; diff --git a/src/pages/AccessManagement/PrivilegeTR.tsx b/src/pages/AccessManagement/PrivilegeTR.tsx index 2ad70dc3..47a55e39 100644 --- a/src/pages/AccessManagement/PrivilegeTR.tsx +++ b/src/pages/AccessManagement/PrivilegeTR.tsx @@ -17,19 +17,20 @@ import { useDisclosure } from '@mantine/hooks'; import { IconPlus, IconTrash, IconX } from '@tabler/icons-react'; import { FC, useEffect, useState } from 'react'; import { useUsersStyles } from './styles'; -import { useGetRole } from '@/hooks/useGetRole'; -import { useDeleteRole } from '@/hooks/useDeleteRole'; -import { usePutRole } from '@/hooks/usePutRole'; import { useGetLogStreamList } from '@/hooks/useGetLogStreamList'; +import { useRole } from '@/hooks/useRole'; interface PrivilegeTRProps { roleName: string; - getRolesList: () => void; defaultRole: string | null; + refetchRoles: () => void; + deleteRoleMutation: (data: { roleName: string }) => void; + getRoleIsLoading: boolean; + getRoleIsError: boolean; } const PrivilegeTR: FC = (props) => { - const { roleName, getRolesList, defaultRole } = props; + const { roleName, defaultRole, deleteRoleMutation, getRoleIsLoading, getRoleIsError } = props; const [UserInput, setUserInput] = useState(''); @@ -48,36 +49,13 @@ const PrivilegeTR: FC = (props) => { const [SelectedStream, setSelectedStream] = useState(''); const [streamSearchValue, setStreamSearchValue] = useState(''); const [tagInput, setTagInput] = useState(''); - const { data: streams } = useGetLogStreamList(); - // Update Role Modal Constants : Ends + const { getLogStreamListData } = useGetLogStreamList(); - const { - data: privileges, - error: getRolePrivilegeError, - loading: getRolePrivilegeLoading, - getRolePrivilege, - resetData: resetGetRolePrivilegeData, - } = useGetRole(); - - const { data: DeleteRoleResponse, deleteRoleFun, resetData: resetDeleteRoleData } = useDeleteRole(); - - const { data: UpdatedRoleResponse, putRolePrivilege, resetData: resetUpdatedRoleData } = usePutRole(); - - useEffect(() => { - getRolePrivilege(roleName); - - return () => { - resetGetRolePrivilegeData(); - }; - }, []); + const { getRoleData, getRoleMutation, updateRoleMutation, updateRoleIsSuccess } = useRole(); useEffect(() => { - getRolePrivilege(roleName); - - return () => { - resetUpdatedRoleData(); - }; - }, [UpdatedRoleResponse]); + getRoleMutation({ roleName }); + }, [roleName, updateRoleIsSuccess]); const getBadge = (privilege: any, i: number, withAction: boolean) => { if (privilege.privilege === 'admin' || privilege.privilege === 'editor') { @@ -130,14 +108,13 @@ const PrivilegeTR: FC = (props) => { }; const handlePrivilegeDelete = () => { - const newPrivileges = privileges?.filter((privilege: any, i: number) => { + const newPrivileges = getRoleData?.data?.filter((privilege: any, i: number) => { if (i !== deletePrivilegeIndex) { return privilege; } }); - putRolePrivilege(roleName, newPrivileges); - + updateRoleMutation({ userName: roleName, privilege: newPrivileges }); handleClosePrivilegeDelete(); }; @@ -157,7 +134,7 @@ const PrivilegeTR: FC = (props) => { }; const handleDelete = () => { - deleteRoleFun(roleName); + deleteRoleMutation({ roleName }); handleCloseDelete(); }; @@ -165,12 +142,6 @@ const PrivilegeTR: FC = (props) => { closeDeleteRole(); setUserInput(''); }; - useEffect(() => { - if (DeleteRoleResponse) { - getRolesList(); - resetDeleteRoleData(); - } - }, [DeleteRoleResponse]); const handleCloseUpdateRole = () => { closeUpdateRole(); @@ -182,14 +153,14 @@ const PrivilegeTR: FC = (props) => { const handleUpadterole = () => { if (selectedPrivilege === 'admin' || selectedPrivilege === 'editor') { - privileges?.push({ + getRoleData?.data?.push({ privilege: selectedPrivilege, }); } if (selectedPrivilege === 'reader' || selectedPrivilege === 'writer' || selectedPrivilege === 'ingester') { - if (streams?.find((stream) => stream.name === SelectedStream)) { + if (getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream)) { if (tagInput !== '' && tagInput !== undefined && selectedPrivilege === 'reader') { - privileges?.push({ + getRoleData?.data?.push({ privilege: selectedPrivilege, resource: { stream: SelectedStream, @@ -197,7 +168,7 @@ const PrivilegeTR: FC = (props) => { }, }); } else { - privileges?.push({ + getRoleData?.data?.push({ privilege: selectedPrivilege, resource: { stream: SelectedStream, @@ -206,20 +177,20 @@ const PrivilegeTR: FC = (props) => { } } } - putRolePrivilege(roleName, privileges); + updateRoleMutation({ userName: roleName, privilege: getRoleData?.data }); handleCloseUpdateRole(); }; const updateRoleVaildtion = () => { if (selectedPrivilege === 'admin' || selectedPrivilege === 'editor') { - if (privileges?.find((role: any) => role.privilege === selectedPrivilege)) { + if (getRoleData?.data?.find((role: any) => role.privilege === selectedPrivilege)) { return true; } return false; } if (selectedPrivilege === 'reader') { if ( - privileges?.find( + getRoleData?.data?.find( (role: any) => role.privilege === selectedPrivilege && role.resource?.stream === SelectedStream && @@ -231,7 +202,7 @@ const PrivilegeTR: FC = (props) => { return true; } if ( - streams?.find((stream) => stream.name === SelectedStream) && + getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream) && SelectedStream !== '' && SelectedStream !== undefined ) { @@ -241,14 +212,14 @@ const PrivilegeTR: FC = (props) => { } if (selectedPrivilege === 'writer' || selectedPrivilege === 'ingester') { if ( - privileges?.find( + getRoleData?.data?.find( (role: any) => role.privilege === selectedPrivilege && role.resource?.stream === SelectedStream, ) ) { return true; } if ( - streams?.find((stream) => stream.name === SelectedStream) && + getLogStreamListData?.data?.find((stream) => stream.name === SelectedStream) && SelectedStream !== '' && SelectedStream !== undefined ) { @@ -276,13 +247,13 @@ const PrivilegeTR: FC = (props) => { )} - {getRolePrivilegeError ? ( + {getRoleIsError ? ( 'Error' - ) : getRolePrivilegeLoading ? ( + ) : getRoleIsLoading ? ( 'loading..' - ) : privileges ? ( + ) : getRoleData?.data ? ( <> - {getBadges(privileges)} + {getBadges(getRoleData?.data)} = (props) => { - {privileges?.[deletePrivilegeIndex] ? ( + {getRoleData?.data?.[deletePrivilegeIndex] ? ( = (props) => { centered className={classes.modalStyle}> - {getBadge(privileges[deletePrivilegeIndex], deletePrivilegeIndex, false)} + {getBadge(getRoleData?.data[deletePrivilegeIndex], deletePrivilegeIndex, false)} = (props) => { onSearchChange={(value) => setStreamSearchValue(value)} onDropdownClose={() => setStreamSearchValue(SelectedStream)} onDropdownOpen={() => setStreamSearchValue('')} - data={streams?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []} + data={getLogStreamListData?.data?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []} searchable label="Select a stream to assign" required diff --git a/src/pages/AccessManagement/RoleTR.tsx b/src/pages/AccessManagement/RoleTR.tsx index 3ed6e6fc..55c3365b 100644 --- a/src/pages/AccessManagement/RoleTR.tsx +++ b/src/pages/AccessManagement/RoleTR.tsx @@ -1,5 +1,3 @@ -import { useGetUserRole } from '@/hooks/useGetUserRoles'; -import { usePutUserRole } from '@/hooks/usePutUserRole'; import { ActionIcon, Badge, @@ -20,20 +18,37 @@ import { IconPlus, IconTransform, IconTrash, IconX } from '@tabler/icons-react'; import { FC, useEffect, useState } from 'react'; import { useUsersStyles } from './styles'; import { Prism } from '@mantine/prism'; -import { useDeleteUser } from '@/hooks/useDeleteUser'; -import { usePostUserResetPassword } from '@/hooks/usePostResetPassword'; -import { useGetRoles } from '@/hooks/useGetRoles'; +import { AxiosResponse } from 'axios'; +import { useUser } from '@/hooks/useUser'; +import { useRole } from '@/hooks/useRole'; interface RoleTRProps { user: { id: string; method: string; }; - getUsersList: () => void; + deleteUserMutation: (data: { userName: string }) => void; + updateUserPasswordIsError: boolean; + getUserRolesIsError: boolean; + getUserRolesIsLoading: boolean; + updateUserPasswordMutation: (data: { userName: string }) => void; + updateUserPasswordIsLoading: boolean; + udpateUserPasswordData: AxiosResponse | undefined; + resetPasswordError: string; } const RoleTR: FC = (props) => { - const { user, getUsersList } = props; + const { + user, + getUserRolesIsError, + getUserRolesIsLoading, + updateUserPasswordMutation, + updateUserPasswordIsError, + updateUserPasswordIsLoading, + udpateUserPasswordData, + resetPasswordError, + deleteUserMutation, + } = props; const [openedDelete, { close: closeDelete, open: openDelete }] = useDisclosure(); const [openedDeleteRole, { close: closeDeleteRole, open: openDeleteRole }] = useDisclosure(); const [openedEditModal, { close: closeEditModal, open: openEditModal }] = useDisclosure(); @@ -44,50 +59,19 @@ const RoleTR: FC = (props) => { const [SelectedRole, setSelectedRole] = useState(''); const [roleSearchValue, setRoleSearchValue] = useState(''); + const { getUserRolesData, getUserRolesMutation, updateUserMutation, updateUserIsSuccess } = useUser(); - const { putRole, data: putRoleData, resetData: resetPutRoleData } = usePutUserRole(); - const { - data: newPassword, - error: resetPasswordError, - loading: resetPasswordLoading, - resetPasswordUser, - resetData: resetNewPassword, - } = usePostUserResetPassword(); - const { - data: userRole, - error: userRoleError, - loading: userRoleLoading, - getRoles, - resetData: userRoleReset, - } = useGetUserRole(); - const { data: deletedUser, deleteUserFun: deleteUserAction, resetData: deletedUserReset } = useDeleteUser(); - const { data: roles, getRolesList, resetData: rolesReset } = useGetRoles(); - - useEffect(() => { - if (deletedUser) { - getUsersList(); - deletedUserReset(); - } - }, [deletedUser]); + const { getRolesData } = useRole(); useEffect(() => { - getRoles(user.id); - getRolesList(); - - return () => { - rolesReset(); - userRoleReset(); - }; + getUserRolesMutation({ userName: user.id }); }, [user]); useEffect(() => { - if (putRoleData) { - getRoles(user.id); + if (updateUserIsSuccess) { + getUserRolesMutation({ userName: user.id }); } - return () => { - resetPutRoleData(); - }; - }, [putRoleData]); + }, [updateUserIsSuccess]); const removeButton = (role: string) => ( = (props) => { ); }; - const getBadges = (userRole: any) => { - if (Object.keys(userRole).length > 0) { - const Badges = Object.keys(userRole).map((role: any) => { + + const getBadges = () => { + if (Object.keys(getUserRolesData?.data).length > 0) { + const Badges = Object.keys(getUserRolesData?.data).map((role: any) => { return {getBadge(role, user.method === 'native' ? true : false)}; }); return Badges; @@ -130,18 +115,20 @@ const RoleTR: FC = (props) => { closeDelete(); setUserInput(''); }; + const handleDelete = () => { - deleteUserAction(user.id); + deleteUserMutation({ userName: user.id }); closeDelete(); setUserInput(''); }; // For Delete Role const handleRoleDelete = () => { - let filtered = Object.keys(userRole).filter((role) => role !== deleteRole); - putRole(user.id, filtered); + let filtered = Object.keys(getUserRolesData?.data).filter((role) => role !== deleteRole); + updateUserMutation({ userName: user.id, roles: filtered }); closeDeleteRole(); setDeleteRole(null); + getUserRolesMutation({ userName: user.id }); }; const handleCloseRoleDelete = () => { closeDeleteRole(); @@ -149,7 +136,6 @@ const RoleTR: FC = (props) => { }; // For Edit Role - const handleCloseRoleEdit = () => { closeEditModal(); setSelectedRole(''); @@ -157,29 +143,24 @@ const RoleTR: FC = (props) => { }; const handleEditUserRole = () => { - - let userRoleArray: any = Object.keys(userRole); + let userRoleArray: any = Object.keys(getUserRolesData?.data); if (userRoleArray.includes(SelectedRole) || SelectedRole === '') { return; } userRoleArray.push(SelectedRole); - - putRole(user.id, userRoleArray); + + updateUserMutation({ userName: user.id, roles: userRoleArray }); handleCloseRoleEdit(); }; - - - //for reset password - + // for reset password const handleCloseResetPassword = () => { close(); setUserInput(''); - resetNewPassword(); }; const handleResetPassword = () => { - resetPasswordUser(UserInput); + updateUserPasswordMutation({ userName: UserInput }); }; const { classes } = useUsersStyles(); @@ -188,13 +169,13 @@ const RoleTR: FC = (props) => { {user.id} - {userRoleError ? ( + {getUserRolesIsError ? ( 'Error' - ) : userRoleLoading ? ( + ) : getUserRolesIsLoading ? ( 'loading..' - ) : userRole ? ( + ) : getUserRolesData?.data ? ( <> - {getBadges(userRole)} + {getBadges()} @@ -223,19 +204,20 @@ const RoleTR: FC = (props) => { - - - @@ -271,7 +253,7 @@ const RoleTR: FC = (props) => { - {userRole && deleteRole && userRole[deleteRole] ? ( + {getUserRolesData?.data && deleteRole && getUserRolesData?.data[deleteRole] ? ( = (props) => { required /> - {resetPasswordError ? ( + {updateUserPasswordIsError ? ( {resetPasswordError} - ) : resetPasswordLoading ? ( + ) : updateUserPasswordIsLoading ? ( loading - ) : newPassword ? ( + ) : udpateUserPasswordData?.data ? ( Password = (props) => { language="markup" copyLabel="Copy password to clipboard" copiedLabel="Password copied to clipboard"> - {newPassword} + {udpateUserPasswordData?.data} Warning this is the only time you are able to see Password @@ -353,14 +335,16 @@ const RoleTR: FC = (props) => { )} - {user.method === "native" ? ():( + {user.method === 'native' ? ( + + ) : ( Cannot reset password for this user )}