feat: [FE] New App Logs Filters #36288

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 26 commits into develop from feat/apps-log-page

Jul 15, 2025

.changeset/curvy-dancers-try.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    "@rocket.chat/meteor": minor
+    ---
+    Adds a new filter to the Logs tab of the App Details page.

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -14,10 +14,13 @@ import { handleAPIError } from '../helpers/handleAPIError';
  
    import { useAppInfo } from '../hooks/useAppInfo';

    import AppDetails from './tabs/AppDetails';

    import AppLogs from './tabs/AppLogs';

    import { AppLogsFilterContextualBar } from './tabs/AppLogs/Filters/AppLogsFilterContextualBar';

    import { useAppLogsFilterForm } from './tabs/AppLogs/useAppLogsFilterForm';

    import AppReleases from './tabs/AppReleases';

    import AppRequests from './tabs/AppRequests/AppRequests';

    import AppSecurity from './tabs/AppSecurity/AppSecurity';

    import AppSettings from './tabs/AppSettings';

    import { useCompactMode } from './useCompactMode';

    import { AppClientOrchestratorInstance } from '../../../apps/orchestrator';

    import { Page, PageFooter, PageHeader, PageScrollableContentWithShadow } from '../../../components/Page';

    @@ -35,7 +38,9 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => {
  
    	const tab = useRouteParameter('tab');

    	const context = useRouteParameter('context');

    	const contextualBar = useRouteParameter('contextualBar');

    	const appData = useAppInfo(id, context || '');

    	const compactMode = useCompactMode();

    	const handleReturn = useEffectEvent((): void => {

    		if (!context) {

    @@ -48,6 +53,20 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => {
  
    		});

    	});

    	const handleReturnToLogs = useEffectEvent((): void => {

    		if (!context) {

    			return;

    		}

    		router.navigate(

    			{

    				name: 'marketplace',

    				params: { ...router.getRouteParameters(), contextualBar: '' },

    			},

    			{ replace: true },

    		);

    	});

    	const { installed, settings, privacyPolicySummary, permissions, tosLink, privacyLink, name } = appData || {};

    	const isSecurityVisible = Boolean(privacyPolicySummary || permissions || tosLink || privacyLink);

    @@ -58,12 +77,14 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => {
  
    		);

    	}, [settings]);

    	const methods = useForm<AppDetailsPageFormData>({ values: reducedSettings });

    	const settingsFormMethods = useForm<AppDetailsPageFormData>({ values: reducedSettings });

    	const {

    		handleSubmit,

    		reset,

    		formState: { isDirty, isSubmitting },

    	} = methods;

    	} = settingsFormMethods;

    	const logsFilterFormMethods = useAppLogsFilterForm();

    	const saveAppSettings = useCallback(

    		async (data: AppDetailsPageFormData) => {

    @@ -81,56 +102,67 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => {
  
    				handleAPIError(e);

    			}

    		},

    		[dispatchToastMessage, id, name, settings, reset],

    		[id, settings, reset, dispatchToastMessage, t, name],

    	);

    	return (

    		<Page flexDirection='column' h='full'>

    			<PageHeader title={t('App_Info')} onClickBack={handleReturn} />

    			<PageScrollableContentWithShadow pi={24} pbs={24} pbe={0} h='full'>

    				<Box w='full' alignSelf='center' h='full' display='flex' flexDirection='column'>

    					{!appData && <AppDetailsPageLoading />}

    					{appData && (

    						<>

    							<AppDetailsPageHeader app={appData} />

    							<AppDetailsPageTabs

    								context={context || ''}

    								installed={installed}

    								isSecurityVisible={isSecurityVisible}

    								settings={settings}

    								tab={tab}

    							/>

    							{Boolean(!tab || tab === 'details') && <AppDetails app={appData} />}

    							{tab === 'requests' && <AppRequests id={id} isAdminUser={isAdminUser} />}

    							{tab === 'security' && isSecurityVisible && (

    								<AppSecurity

    									privacyPolicySummary={privacyPolicySummary}

    									appPermissions={permissions}

    									tosLink={tosLink}

    									privacyLink={privacyLink}

    		<Page flexDirection='row'>

    			<Page flexDirection='column' h='full'>

    				<PageHeader title={t('App_Info')} onClickBack={handleReturn} />

    				<PageScrollableContentWithShadow pi={24} pbs={24} pbe={0} h='full'>

    					<Box w='full' alignSelf='center' h='full' display='flex' flexDirection='column'>

    						{!appData && <AppDetailsPageLoading />}

    						{appData && (

    							<>

    								<AppDetailsPageHeader app={appData} />

    								<AppDetailsPageTabs

    									context={context || ''}

    									installed={installed}

    									isSecurityVisible={isSecurityVisible}

    									settings={settings}

    									tab={tab}

    								/>

    							)}

    							{tab === 'releases' && <AppReleases id={id} />}

    							{Boolean(tab === 'settings' && settings && Object.values(settings).length) && (

    								<FormProvider {...methods}>

    									<AppSettings settings={settings || {}} />

    								</FormProvider>

    							)}

    							{tab === 'logs' && <AppLogs id={id} />}

    						</>

    					)}

    				</Box>

    			</PageScrollableContentWithShadow>

    			<PageFooter isDirty={isDirty}>

    				<ButtonGroup>

    					<Button onClick={() => reset()}>{t('Cancel')}</Button>

    					{installed && isAdminUser && (

    						<Button primary loading={isSubmitting} onClick={handleSubmit(saveAppSettings)}>

    							{t('Save_changes')}

    						</Button>

    					)}

    				</ButtonGroup>

    			</PageFooter>

    								{Boolean(!tab || tab === 'details') && <AppDetails app={appData} />}

    								{tab === 'requests' && <AppRequests id={id} isAdminUser={isAdminUser} />}

    								{tab === 'security' && isSecurityVisible && (

    									<AppSecurity

    										privacyPolicySummary={privacyPolicySummary}

    										appPermissions={permissions}

    										tosLink={tosLink}

    										privacyLink={privacyLink}

    									/>

    								)}

    								{tab === 'releases' && <AppReleases id={id} />}

    								{Boolean(tab === 'settings' && settings && Object.values(settings).length) && (

    									<FormProvider {...settingsFormMethods}>

    										<AppSettings settings={settings || {}} />

    									</FormProvider>

    								)}

    								{(tab === 'logs' || tab === 'logs-filter') && (

    									<FormProvider {...logsFilterFormMethods}>

    										<AppLogs id={id} />

    									</FormProvider>

    								)}

    							</>

    						)}

    					</Box>

    				</PageScrollableContentWithShadow>

    				<PageFooter isDirty={isDirty}>

    					<ButtonGroup>

    						<Button onClick={() => reset()}>{t('Cancel')}</Button>

    						{installed && isAdminUser && (

    							<Button primary loading={isSubmitting} onClick={handleSubmit(saveAppSettings)}>

    								{t('Save_changes')}

    							</Button>

    						)}

    					</ButtonGroup>

    				</PageFooter>

    			</Page>

    			{compactMode && contextualBar === 'filter-logs' && (

    				<FormProvider {...logsFilterFormMethods}>

    					<AppLogsFilterContextualBar onClose={handleReturnToLogs} />

    				</FormProvider>

    			)}

    		</Page>

    	);

    };

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

-Original file line number
+Diff line change
@@ -1,30 +1,64 @@
     import { Box, Pagination } from '@rocket.chat/fuselage';
-    import type { ReactElement } from 'react';
+    import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+    import { useMemo, type ReactElement } from 'react';
     import { useTranslation } from 'react-i18next';
     import AppLogsItem from './AppLogsItem';
     import { CollapsiblePanel } from './Components/CollapsiblePanel';
+    import { AppLogsFilter } from './Filters/AppLogsFilter';
+    import { useAppLogsFilterFormContext } from './useAppLogsFilterForm';
     import { CustomScrollbars } from '../../../../../components/CustomScrollbars';
+    import GenericError from '../../../../../components/GenericError';
+    import GenericNoResults from '../../../../../components/GenericNoResults';
     import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
     import AccordionLoading from '../../../components/AccordionLoading';
     import { useLogs } from '../../../hooks/useLogs';
     const AppLogs = ({ id }: { id: string }): ReactElement => {
     	const { t } = useTranslation();
+    	const { watch } = useAppLogsFilterFormContext();
+    	const { startTime, endTime, startDate, endDate, event, severity, instance } = watch();
     	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
-    	const { data, isSuccess, isError, isLoading } = useLogs({ appId: id, current, itemsPerPage });
+    	const debouncedEvent = useDebouncedValue(event, 500);
+    	const { data, isSuccess, isError, isFetching, error } = useLogs({
+    		appId: id,
+    		current,
+    		itemsPerPage,
+    		...(instance !== 'all' && { instanceId: instance }),
+    		...(severity !== 'all' && { logLevel: severity }),
+    		method: debouncedEvent,
+    		...(startTime && startDate && { startDate: new Date(`${startDate}T${startTime}`).toISOString() }),
+    		...(endTime && endDate && { endDate: new Date(`${endDate}T${endTime}`).toISOString() }),
+    	});
+    	const parsedError = useMemo(() => {
+    		if (error) {
+    			// TODO: Check why tanstack expects a default Error but we return {error: string}
+    			if ((error as unknown as { error: string }).error === 'Invalid date range') {
+    				return t('error-invalid-dates');
+    			}
+    			return t('Something_Went_Wrong');
+    		}
+    	}, [error, t]);
     	return (
     		<>
-    			{isLoading && <AccordionLoading />}
-    			{isError && (
-    				<Box maxWidth='x600' alignSelf='center'>
-    					{t('App_not_found')}
-    				</Box>
-    			)}
-    			{isSuccess && (
+    			<Box pb={16}>
+    				<AppLogsFilter />
+    			</Box>
+    			{isFetching && <AccordionLoading />}
+    			{isError && <GenericError title={parsedError} />}
+    			{isSuccess && data?.logs?.length === 0 ? (
+    				<GenericNoResults />
+    			) : (
     				<CustomScrollbars>
-    					<CollapsiblePanel width='100%' alignSelf='center'>
+    					<CollapsiblePanel aria-busy={isFetching || event !== debouncedEvent} width='100%' alignSelf='center'>
     						{data?.logs?.map((log, index) => <AppLogsItem regionId={log._id} key={`${index}-${log._createdAt}`} {...log} />)}
     					</CollapsiblePanel>
     				</CustomScrollbars>
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ import AppLogsItem from './AppLogsItem'; @@
     import { CollapsiblePanel } from './Components/CollapsiblePanel';
     export default {
-    	title: 'Components/AppLogsItem',
+    	title: 'Marketplace/AppDetailsPage/AppLogs/AppLogsItem',
     	component: AppLogsItem,
     	decorators: [(fn) => <CollapsiblePanel style={{ padding: 24 }}>{fn()}</CollapsiblePanel>],
     	args: {
@@ Expand Down @@

...ent/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapsiblePanel.stories.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ import { CollapsiblePanel } from './CollapsiblePanel'; @@
     import { CollapsibleRegion } from './CollapsibleRegion';
     export default {
-    	title: 'Components/CollapsiblePanel',
+    	title: 'Marketplace/AppDetailsPage/AppLogs/Components/CollapsiblePanel',
     	component: CollapsiblePanel,
     	args: {
@@ Expand Down @@

...or/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,36 @@
+    import { Box } from '@rocket.chat/fuselage';
+    import { mockAppRoot } from '@rocket.chat/mock-providers';
+    import type { Meta } from '@storybook/react';
+    import { FormProvider } from 'react-hook-form';
+    import { AppLogsFilter } from './AppLogsFilter';
+    import { useAppLogsFilterForm } from '../useAppLogsFilterForm';
+    export default {
+    	title: 'Marketplace/AppDetailsPage/AppLogs/Filters/AppLogsFilter',
+    	component: AppLogsFilter,
+    	args: {},
+    	decorators: [
+    		mockAppRoot()
+    			// @ts-expect-error The endpoint is to be merged in https://github.com/RocketChat/Rocket.Chat/pull/36245
+    			.withEndpoint('GET', '/apps/logs/instanceIds', () => ({
+    				success: true,
+    				instanceIds: ['instance-1', 'instance-2', 'instance-3'],
+    			}))
+    			.buildStoryDecorator(),
+    		(fn) => {
+    			const methods = useAppLogsFilterForm();
+    			return (
+    				<FormProvider {...methods}>
+    					<Box p={16}>{fn()}</Box>
+    				</FormProvider>
+    			);
+    		},
+    	],
+    	parameters: {
+    		layout: 'fullscreen',
+    	},
+    } satisfies Meta<typeof AppLogsFilter>;
+    export const Default = () => <AppLogsFilter />;

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

-Original file line number
+Diff line change
@@ -0,0 +1,80 @@
+    import { Box, Button, Icon, Label, Palette, TextInput } from '@rocket.chat/fuselage';
+    import { useRouter } from '@rocket.chat/ui-contexts';
+    import { Controller } from 'react-hook-form';
+    import { useTranslation } from 'react-i18next';
+    import { InstanceFilterSelect } from './InstanceFilterSelect';
+    import { SeverityFilterSelect } from './SeverityFilterSelect';
+    import { TimeFilterSelect } from './TimeFilterSelect';
+    import { useCompactMode } from '../../../useCompactMode';
+    import { useAppLogsFilterFormContext } from '../useAppLogsFilterForm';
+    export const AppLogsFilter = () => {
+    	const { t } = useTranslation();
+    	const { control } = useAppLogsFilterFormContext();
+    	const router = useRouter();
+    	const openContextualBar = () => {
+    		router.navigate(
+    			{
+    				name: 'marketplace',
+    				params: { ...router.getRouteParameters(), contextualBar: 'filter-logs' },
+    			},
+    			{ replace: true },
+    		);
+    	};
+    	const compactMode = useCompactMode();
+    	return (
+    		<Box display='flex' flexDirection='row' width='full' flexWrap='wrap' alignContent='flex-end'>
+    			<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+    				<Label htmlFor='eventFilter'>{t('Event')}</Label>
+    				<Controller
+    					control={control}
+    					name='event'
+    					render={({ field }) => (
+    						<TextInput
+    							addon={<Icon color={Palette.text['font-secondary-info']} name='magnifier' size={20} />}
+    							id='eventFilter'
+    							{...field}
+    						/>
+    					)}
+    				/>
+    			</Box>
+    			{!compactMode && (
+    				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+    					<Label id='timeFilterLabel' htmlFor='timeFilter'>
+    						{t('Time')}
+    					</Label>
+    					<TimeFilterSelect id='timeFilter' aria-labelledby='timeFilterLabel' />
+    				</Box>
+    			)}
+    			{!compactMode && (
+    				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+    					<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
+    						{t('Instance')}
+    					</Label>
+    					<Controller
+    						control={control}
+    						name='instance'
+    						render={({ field }) => <InstanceFilterSelect aria-labelledby='instanceFilterLabel' id='instanceFilter' {...field} />}
+    					/>
+    				</Box>
+    			)}
+    			{!compactMode && (
+    				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+    					<Label>{t('Severity')}</Label>
+    					<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
+    				</Box>
+    			)}
+    			{compactMode && (
+    				<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
+    					{t('Filters')}
+    				</Button>
+    			)}
+    		</Box>
+    	);
+    };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [FE] New App Logs Filters #36288

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!