8000 feat: Add Pagination to App logs page by MartinSchoeler · Pull Request #36067 · RocketChat/Rocket.Chat · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat: Add Pagination to App logs page #36067

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
May 30, 2025
Merged

feat: Add Pagination to App logs page #36067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
03f6327
feat: Add Pagination to App logs page
MartinSchoeler May 23, 2025
45ef5a2
Create red-cherries-grin.md
MartinSchoeler May 23, 2025
7f772ef
review: use CustomScrollbars
MartinSchoeler May 23, 2025
e551e2b
Merge branch 'develop' into feat/apps-logs-pagination
MartinSchoeler May 26, 2025
b081d57
Merge branch 'develop' into feat/apps-logs-pagination
d-gubert May 26, 2025
f71c48f
Update apps/meteor/client/views/marketplace/hooks/useLogs.ts
MartinSchoeler May 26, 2025
1e36bf3
Merge branch 'develop' into feat/apps-logs-pagination
MartinSchoeler May 27, 2025
af073c0
Merge branch 'develop' into feat/apps-logs-pagination
kodiakhq[bot] May 27, 2025
caf4a93
Merge branch 'develop' into feat/apps-logs-pagination
MartinSchoeler May 27, 2025
ee3b728
Merge branch 'develop' into feat/apps-logs-pagination
kodiakhq[bot] May 27, 2025
6f72500
Merge branch 'develop' into feat/apps-logs-pagination
MartinSchoeler May 30, 2025
a8c09ad
Merge branch 'develop' into feat/apps-logs-pagination
MartinSchoeler May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/red-cherries-grin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
38 changes: 26 additions & 12 deletions apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
Expand All @@ -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}
>
>
{...paginationProps}
/>
</>
);
};
Expand Down
22 changes: 19 additions & 3 deletions apps/meteor/client/views/marketplace/hooks/useLogs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
});
};
Loading
0