snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/ABAC/ABACLogsTab/LogsPage.tsx

@@ -0,0 +1,221 @@
+import type { AbacAttributeDefinitionChangeType, AbacActionPerformed } from '@rocket.chat/core-typings';
+import { Box, InputBox, Margins, Pagination } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableRow,
+	usePagination,
+} from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import GenericNoResults from '../../../../components/GenericNoResults';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import { ABACQueryKeys } from '../../../../lib/queryKeys';
+import DateRangePicker from '../../moderation/helpers/DateRangePicker';
+
+const LogsPage = () => {
+	const { t } = useTranslation();
+
+	const [startDate, setStartDate] = useState<string>(new Date().toISOString().split('T')[0]);
+	const [endDate, setEndDate] = useState<string>(new Date().toISOString().split('T')[0]);
+
+	const formatDate = useFormatDateAndTime();
+
+	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+	const getLogs = useEndpoint('GET', '/v1/abac/audit');
+	const query = useMemo(
+		() => ({
+			...(startDate && { start: new Date(`${startDate}T00:00:00.000`).toISOString() }),
+			...(endDate && { end: new Date(`${endDate}T23:59:59.999`).toISOString() }),
+			offset: current,
+			count: itemsPerPage,
+		}),
+		[current, itemsPerPage, startDate, endDate],
+	);
+
+	// Whenever the user changes the filter or the text, reset the pagination to the first page
+	useEffect(() => {
+		setCurrent(0);
+	}, [startDate, endDate, setCurrent]);
+
+	const getActionLabel = (action?: AbacAttributeDefinitionChangeType | AbacActionPerformed | null) => {
+		switch (action) {
+			case 'created':
+				return t('Created');
+			case 'updated':
+				return t('Updated');
+			case 'deleted':
+				return t('Deleted');
+			case 'all-deleted':
+				return t('ABAC_All_Attributes_deleted');
+			case 'key-removed':
+				return t('ABAC_Key_removed');
+			case 'key-renamed':
+				return t('ABAC_Key_renamed');
+			case 'value-removed':
+				return t('ABAC_Value_removed');
+			case 'key-added':
+				return t('ABAC_Key_added');
+			case 'key-updated':
+				return t('ABAC_Key_updated');
+			case 'revoked-object-access':
+				return t('ABAC_Revoked_Object_Access');
+			case 'granted-object-access':
+				return t('ABAC_Granted_Object_Access');
+			default:
+				return '';
+		}
+	};
+
+	const { data, isLoading } = useQuery({
+		queryKey: ABACQueryKeys.logs.list(query),
+		queryFn: () => getLogs(query),
+		select: (data) => ({
+			events: data.events.map((event) => {
+				const eventInfo = {
+					id: event._id,
+					user: event.actor?.type === 'user' ? event.actor.username : t('System'),
+					...(event.actor?.type === 'user' && { userAvatar: <UserAvatar size='x28' userId={event.actor._id} /> }),
+					timestamp: new Date(event.ts),
+					element: t('ABAC_Room'),
+					action: getActionLabel(event.data?.find((item) => item.key === 'change')?.value),
+					room: undefined,
+				};
+				switch (event.t) {
+					case 'abac.attribute.changed':
+						return {
+							...eventInfo,
+							element: t('ABAC_Room_Attribute'),
+							name: event.data?.find((item) => item.key === 'attributeKey')?.value ?? '',
+						};
+					case 'abac.action.performed':
+						return {
+							...eventInfo,
+							name: event.data?.find((item) => item.key === 'subject')?.value?.username ?? '',
+							action: getActionLabel(event.data?.find((item) => item.key === 'action')?.value),
+							room: event.data?.find((item) => item.key === 'object')?.value?.name ?? '',
+							element: t('ABAC_room_membership'),
+						};
+					case 'abac.object.attribute.changed':
+					case 'abac.object.attributes.removed':
+						return {
+							...eventInfo,
+							name:
+								event.data
+									?.find((item) => item.key === 'current')
+									?.value?.map((item) => item.key)
+									.join(', ') ?? t('Empty'),
+							room: event.data?.find((item) => item.key === 'room')?.value?.name ?? '',
+						};
+					case 'abac.attribute.store.switched':
+						return {
+							...eventInfo,
+							element: t('ABAC_Attribute_Store'),
+							action: t('ABAC_Attribute_Store_Switched'),
+							name: `${event.data?.find((item) => item.key === 'from')?.value} -> ${event.data?.find((item) => item.key === 'to')?.value}`,
+							room: t('ABAC_Rooms_Affected', { count: Number(event.data?.find((item) => item.key === 'roomsAffected')?.value ?? 0) }),
+						};
+					default:
+						return null;
+				}
+			}),
+			count: data.count,
+			offset: data.offset,
+			total: data.total,
+		}),
+	});
+
+	return (
+		<>
+			<Margins block={24}>
+				<Box display='flex'>
+					<InputBox
+						type='date'
+						placeholder={t('Start_date')}
+						value={startDate}
+						onChange={(e) => setStartDate((e.target as HTMLInputElement).value)}
+					/>
+					<Margins inlineStart={8}>
+						<InputBox
+							type='date'
+							placeholder={t('End_date')}
+							value={endDate}
+							onChange={(e) => setEndDate((e.target as HTMLInputElement).value)}
+						/>
+					</Margins>
+					<Margins inlineStart={8}>
+						<DateRangePicker
+							defaultSelectedKey='today'
+							onChange={(range) => {
+								setStartDate(range.start);
+								setEndDate(range.end);
+							}}
+						/>
+					</Margins>
+				</Box>
+			</Margins>
+			{(!data || data.events?.length === 0) && !isLoading ? (
+				<Box display='flex' justifyContent='center' height='full'>
+					<GenericNoResults icon='extended-view' title={t('ABAC_No_logs')} description={t('ABAC_No_logs_description')} />
+				</Box>
+			) : (
+				<>
+					<GenericTable>
+						<GenericTableHeader>
+							<GenericTableHeaderCell>{t('User')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell>{t('Action')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell>{t('Room')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell>{t('ABAC_Element')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell>{t('ABAC_Element_Name')}</GenericTableHeaderCell>
+							<GenericTableHeaderCell>{t('Timestamp')}</GenericTableHeaderCell>
+						</GenericTableHeader>
+						<GenericTableBody>
+							{data?.events.map((eventInfo) => {
+								if (!eventInfo) {
+									return null;
+								}
+								return (
+									<GenericTableRow key={eventInfo.id}>
+										<GenericTableCell withTruncatedText>
+											{eventInfo.userAvatar && (
+												<Box is='span' marginInlineEnd={4}>
+													{eventInfo.userAvatar}
+												</Box>
+											)}
+											{eventInfo.user}
+										</GenericTableCell>
+										<GenericTableCell withTruncatedText>{eventInfo.action}</GenericTableCell>
+										<GenericTableCell withTruncatedText>{eventInfo.room}</GenericTableCell>
+										<GenericTableCell withTruncatedText>{eventInfo.element}</GenericTableCell>
+										<GenericTableCell withTruncatedText title={eventInfo.name}>
+											{eventInfo.name}
+										</GenericTableCell>
+										<GenericTableCell withTruncatedText>{formatDate(eventInfo.timestamp)}</GenericTableCell>
+									</GenericTableRow>
+								);
+							})}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default LogsPage;