feat: App Logs Export #36403

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.

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

kodiakhq merged 17 commits into develop from feat/apps-log-export-button

Jul 17, 2025

.changeset/serious-apricots-compare.md

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    ---
+    '@rocket.chat/rest-typings': minor
+    '@rocket.chat/apps-engine': minor
+    '@rocket.chat/meteor': minor
+    ---
+    Adds a button to the apps logs UI that exports logs as a downloadable file

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -25,7 +25,7 @@ const AppLogs = ({ id }: { id: string }): ReactElement => {
  
    	const debouncedEvent = useDebouncedValue(event, 500);

    	const { data, isSuccess, isError, isFetching, error } = useLogs({

    	const { data, isSuccess, isError, error, isFetching } = useLogs({

    		appId: id,

    		current,

    		itemsPerPage,

    @@ -50,13 +50,12 @@ const AppLogs = ({ id }: { id: string }): ReactElement => {
  
    	return (

    		<>

    			<Box pb={16}>

    				<AppLogsFilter />

    				<AppLogsFilter noResults={isFetching || !isSuccess || data?.logs?.length === 0} isLoading={isFetching} />

    			</Box>

    			{isFetching && <AccordionLoading />}

    			{isError && <GenericError title={parsedError} />}

    			{isSuccess && data?.logs?.length === 0 ? (

    				<GenericNoResults />

    			) : (

    			{!isFetching && isSuccess && data?.logs?.length === 0 && <GenericNoResults />}

    			{!isFetching && isSuccess && data?.logs?.length > 0 && (

    				<CustomScrollbars>

    					<CollapsiblePanel aria-busy={isFetching || event !== debouncedEvent} width='100%' alignSelf='center'>

    						{data?.logs?.map((log, index) => <AppLogsItem regionId={log._id} key={`${index}-${log._createdAt}`} {...log} />)}

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

-Original file line number
+Diff line change
@@ Expand Up @@
     		</>
     	);
+    	const handleClick = () => {
+    		setExpanded(!expanded);
+    	};
     	const anchorRef = useRef<HTMLDivElement>(null);
     	const formatDateAndTime = useFormatDateAndTime();
     	return (
     		<>
-    			<CollapseButton regionId={regionId} expanded={expanded} onClick={() => setExpanded(!expanded)}>
+    			<CollapseButton regionId={regionId} expanded={expanded} onClick={handleClick}>
     				<Box ref={anchorRef}>{title}</Box>
     			</CollapseButton>
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -1,18 +1,27 @@
-    import { Box, Button, Icon, Label, Palette, TextInput } from '@rocket.chat/fuselage';
-    import { useRouter } from '@rocket.chat/ui-contexts';
+    import { Box, Button, Icon, IconButton, Label, Palette, TextInput } from '@rocket.chat/fuselage';
+    import { useRouter, useSetModal } from '@rocket.chat/ui-contexts';
     import { Controller } from 'react-hook-form';
     import { useTranslation } from 'react-i18next';
+    import CompactFilterOptions from './AppsLogsFilterOptionsCompact';
     import { InstanceFilterSelect } from './InstanceFilterSelect';
     import { SeverityFilterSelect } from './SeverityFilterSelect';
     import { TimeFilterSelect } from './TimeFilterSelect';
     import { useCompactMode } from '../../../useCompactMode';
     import { useAppLogsFilterFormContext } from '../useAppLogsFilterForm';
+    import { ExportLogsModal } from './ExportLogsModal';
-    export const AppLogsFilter = () => {
+    type AppsLogsFilterProps = {
+    	isLoading?: boolean;
+    	noResults?: boolean;
+    };
+    export const AppLogsFilter = ({ isLoading = false, noResults = false }: AppsLogsFilterProps) => {
     	const { t } = useTranslation();
-    	const { control } = useAppLogsFilterFormContext();
+    	const { control, getValues } = useAppLogsFilterFormContext();
+    	const setModal = useSetModal();
     	const router = useRouter();
@@ Expand All / @@ -26,6 +35,10 @@ export const AppLogsFilter = () => { @@
     		);
     	};
+    	const openExportModal = () => {
+    		setModal(<ExportLogsModal onClose={() => setModal(null)} filterValues={getValues()} />);
+    	};
     	const compactMode = useCompactMode();
     	return (
@@ Expand Down Expand Up / @@ -70,11 +83,25 @@ export const AppLogsFilter = () => { @@
     					<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
     				</Box>
     			)}
+    			{!compactMode && (
+    				<IconButton
+    					title={noResults ? t('No_data_to_export') : t('Export')}
+    					alignSelf='flex-end'
+    					icon='circle-arrow-down'
+    					disabled={noResults}
+    					secondary
+    					mie={10}
+    					onClick={() => openExportModal()}
+    					aria-label={noResults ? t('No_data_to_export') : t('Export')}
+    					aria-disabled={noResults}
+    				/>
+    			)}
     			{compactMode && (
     				<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
     					{t('Filters')}
     				</Button>
     			)}
+    			{compactMode && <CompactFilterOptions isLoading={isLoading} handleExportLogs={openExportModal} />}
     		</Box>
     	);
     };

...lient/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterCompact.spec.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,3 @@
-    /* eslint-disable @typescript-eslint/naming-convention */
     import { mockAppRoot } from '@rocket.chat/mock-providers';
     import { composeStories } from '@storybook/react';
     import { render, screen } from '@testing-library/react';
@@ Expand Down @@

...views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.spec.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,3 @@
-    /* eslint-disable @typescript-eslint/naming-convention */
     import { mockAppRoot } from '@rocket.chat/mock-providers';
     import { composeStories } from '@storybook/react';
     import { render, screen } from '@testing-library/react';
@@ Expand Down @@

...ient/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterExpanded.spec.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,3 @@
-    /* eslint-disable @typescript-eslint/naming-convention */
     import { mockAppRoot } from '@rocket.chat/mock-providers';
     import { composeStories } from '@storybook/react';
     import { render, screen } from '@testing-library/react';
@@ Expand Down @@

...nt/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppsLogsFilterOptionsCompact.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,26 @@
+    import { Box, Icon, Menu } from '@rocket.chat/fuselage';
+    import { useTranslation } from 'react-i18next';
+    type CompactFilterOptionsProps = {
+    	handleExportLogs: () => void;
+    	isLoading: boolean;
+    };
+    const CompactFilterOptions = ({ handleExportLogs, ...props }: CompactFilterOptionsProps) => {
+    	const { t } = useTranslation();
+    	const menuOptions = {
+    		exportLogs: {
+    			label: (
+    				<Box>
+    					<Icon name='circle-arrow-down' size='x16' marginInlineEnd={4} />
+    					{t('Export')}
+    				</Box>
+    			),
+    			action: handleExportLogs,
+    		},
+    	};
+    	return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
+    };
+    export default CompactFilterOptions;

...eteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.spec.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,3 @@
-    /* eslint-disable @typescript-eslint/naming-convention */
     import { mockAppRoot } from '@rocket.chat/mock-providers';
     import { composeStories } from '@storybook/react';
     import { render, screen } from '@testing-library/react';
@@ Expand Down @@

...eor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.spec.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    import { mockAppRoot } from '@rocket.chat/mock-providers';
+    import { composeStories } from '@storybook/react';
+    import { render } from '@testing-library/react';
+    import { axe } from 'jest-axe';
+    import * as stories from './ExportLogsModal.stories';
+    const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+    test.each(testCases)(`renders without crashing`, async (_storyname, Story) => {
+    	const view = render(<Story />, {
+    		wrapper: mockAppRoot().build(),
+    	});
+    	expect(view.baseElement).toMatchSnapshot();
+    });
+    test.each(testCases)('Should have no a11y violations', async (_storyname, Story) => {
+    	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+    	const results = await axe(container);
+    	expect(results).toHaveNoViolations();
+    });

.../client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,39 @@
+    import { Box } from '@rocket.chat/fuselage';
+    import { mockAppRoot } from '@rocket.chat/mock-providers';
+    import { action } from '@storybook/addon-actions';
+    import type { Meta, StoryFn } from '@storybook/react';
+    import type { ComponentProps } from 'react';
+    import { FormProvider, useForm } from 'react-hook-form';
+    import { ExportLogsModal } from './ExportLogsModal';
+    export default {
+    	title: 'Marketplace/AppDetailsPage/AppLogs/Filters/ExportLogsModal',
+    	component: ExportLogsModal,
+    	args: {
+    		onClose: action('onClose'),
+    		filterValues: {
+    			severity: 'all',
+    			event: '',
+    			startDate: '',
+    			endDate: '',
+    		},
+    	},
+    	decorators: [
+    		mockAppRoot().buildStoryDecorator(),
+    		(fn) => {
+    			const methods = useForm({});
+    			return (
+    				<FormProvider {...methods}>
+    					<Box p={16}>{fn()}</Box>
+    				</FormProvider>
+    			);
+    		},
+    	],
+    	parameters: {
+    		layout: 'fullscreen',
+    	},
+    } satisfies Meta<typeof ExportLogsModal>;
+    export const Default: StoryFn<ComponentProps<typeof ExportLogsModal>> = (args) => <ExportLogsModal {...args} />;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: App Logs Export #36403

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!