feat: Add Pagination to App logs page (#36067)

Author: MartinSchoeler

.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

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx

@@ -1,16 +1,19 @@
-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';
 
 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 => {
 				</Box>
 			)}
 			{isSuccess && (
-				<Accordion width='100%' alignSelf='center'>
-					{data?.logs?.map((log) => (
-						<AppLogsItem
-							key={log._createdAt}
-							title={`${formatDateAndTime(log._createdAt)}: "${log.method}" (${log.totalTime}ms)`}
-							instanceId={log.instanceId}
-							entries={log.entries}
-						/>
-					))}
-				</Accordion>
+				<CustomScrollbars>
+					<Accordion width='100%' alignSelf='center'>
+						{data?.logs?.map((log) => (
+							<AppLogsItem
+								key={log._createdAt}
+								title={`${formatDateAndTime(log._createdAt)}: "${log.method}" (${log.totalTime}ms)`}
+								instanceId={log.instanceId}
+								entries={log.entries}
+							/>
+						))}
+					</Accordion>
+				</CustomScrollbars>
 			)}
+			<Pagination
+				divider
+				current={current}
+				itemsPerPage={itemsPerPage}
+				count={data?.total || 0}
+				onSetItemsPerPage={onSetItemsPerPage}
+				onSetCurrent={onSetCurrent}
+				{...paginationProps}
+			/>
 		</>
 	);
 };

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<OperationResult<'GET', '/apps/:id/logs'>> => {
+export const useLogs = ({
+	appId,
+	current,
+	itemsPerPage,
+}: {
+	appId: string;
+	current: number;
+	itemsPerPage: number;
+}): UseQueryResult<OperationResult<'GET', '/apps/:id/logs'>> => {
+	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),
 	});
 };