diff --git a/.changeset/red-cherries-grin.md b/.changeset/red-cherries-grin.md new file mode 100644 index 0000000000000..30d0058450142 --- /dev/null +++ b/.changeset/red-cherries-grin.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": minor +--- + +Adds pagination to the App/Logs list, allowing the user to see all logs, instead of a subset of the most recent ones diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx index 7a895de86ccef..588b516ec0a72 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx @@ -1,8 +1,10 @@ -import { Accordion, Box } from '@rocket.chat/fuselage'; +import { Accordion, Box, Pagination } from '@rocket.chat/fuselage'; import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import AppLogsItem from './AppLogsItem'; +import { CustomScrollbars } from '../../../../../components/CustomScrollbars'; +import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination'; import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime'; import AccordionLoading from '../../../components/AccordionLoading'; import { useLogs } from '../../../hooks/useLogs'; @@ -10,7 +12,8 @@ import { useLogs } from '../../../hooks/useLogs'; const AppLogs = ({ id }: { id: string }): ReactElement => { const { t } = useTranslation(); const formatDateAndTime = useFormatDateAndTime(); - const { data, isSuccess, isError, isLoading } = useLogs(id); + const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination(); + const { data, isSuccess, isError, isLoading } = useLogs({ appId: id, current, itemsPerPage }); return ( <> @@ -21,17 +24,28 @@ const AppLogs = ({ id }: { id: string }): ReactElement => { )} {isSuccess && ( - - {data?.logs?.map((log) => ( - - ))} - + + + {data?.logs?.map((log) => ( + + ))} + + )} + ); }; diff --git a/apps/meteor/client/views/marketplace/hooks/useLogs.ts b/apps/meteor/client/views/marketplace/hooks/useLogs.ts index 48d5dfb290180..6d3c04da61956 100644 --- a/apps/meteor/client/views/marketplace/hooks/useLogs.ts +++ b/apps/meteor/client/views/marketplace/hooks/useLogs.ts @@ -2,12 +2,28 @@ import type { OperationResult } from '@rocket.chat/rest-typings'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import type { UseQueryResult } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query'; +import { useMemo } from 'react'; -export const useLogs = (appId: string): UseQueryResult> => { +export const useLogs = ({ + appId, + current, + itemsPerPage, +}: { + appId: string; + current: number; + itemsPerPage: number; +}): UseQueryResult> => { + const query = useMemo( + () => ({ + count: itemsPerPage, + offset: current, + }), + [itemsPerPage, current], + ); const logs = useEndpoint('GET', '/apps/:id/logs', { id: appId }); return useQuery({ - queryKey: ['marketplace', 'apps', appId, 'logs'], - queryFn: () => logs({}), + queryKey: ['marketplace', 'apps', appId, 'logs', query], + queryFn: () => logs(query), }); };