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),
});
};