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

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx

@@ -0,0 +1,89 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useMediaQuery, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu, GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import { useRoute } from '@rocket.chat/ui-contexts';
+import type { KeyboardEvent } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
+import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+
+type DeviceRowProps = {
+	_id: string;
+	username?: string;
+	ip: string;
+	deviceName?: string;
+	deviceType?: string;
+	deviceOSName?: string;
+	loginAt: string;
+	rcVersion?: string;
+};
+
+const DeviceManagementAdminRow = ({
+	_id,
+	username,
+	ip,
+	deviceName,
+	deviceType = 'browser',
+	deviceOSName = '',
+	loginAt,
+	rcVersion,
+}: DeviceRowProps) => {
+	const { t } = useTranslation();
+	const deviceManagementRouter = useRoute('device-management');
+	const formatDateAndTime = useFormatDateAndTime();
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const handleDeviceLogout = useDeviceLogout(_id, '/v1/sessions/logout');
+
+	const handleClick = useStableCallback((): void => {
+		deviceManagementRouter.push({
+			context: 'info',
+			id: _id,
+		});
+	});
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent<HTMLOrSVGElement>): void => {
+			if (!['Enter', 'Space'].includes(e.nativeEvent.code)) {
+				return;
+			}
+			handleClick();
+		},
+		[handleClick],
+	);
+
+	const menuItems: GenericMenuItemProps[] = [
+		{
+			id: 'logoutDevice',
+			icon: 'sign-out',
+			content: t('Logout_Device'),
+			onClick: () => handleDeviceLogout(),
+		},
+	];
+
+	return (
+		<GenericTableRow key={_id} onKeyDown={handleKeyDown} onClick={handleClick} tabIndex={0} action aria-label={_id}>
+			<GenericTableCell>
+				<Box display='flex' alignItems='center'>
+					<DeviceIcon deviceType={deviceType} />
+					{deviceName && <Box withTruncatedText>{deviceName}</Box>}
+				</Box>
+			</GenericTableCell>
+			<GenericTableCell>{rcVersion}</GenericTableCell>
+			<GenericTableCell>{deviceOSName}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{username}</GenericTableCell>
+			{mediaQuery && <GenericTableCell>{formatDateAndTime(loginAt)}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{_id}</GenericTableCell>}
+			{mediaQuery && <GenericTableCell withTruncatedText>{ip}</GenericTableCell>}
+			<GenericTableCell onClick={(e) => e.stopPropagation()}>
+				<GenericMenu detached placement='bottom-end' title={t('Options')} items={menuItems} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default DeviceManagementAdminRow;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx

@@ -0,0 +1,105 @@
+import type { DeviceManagementPopulatedSession, DeviceManagementSession, Serialized } from '@rocket.chat/core-typings';
+import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableHeaderCell, usePagination, useSort } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DeviceManagementAdminRow from './DeviceManagementAdminRow';
+import FilterByText from '../../../../components/FilterByText';
+import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
+import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
+
+const sortMapping = {
+	client: 'device.name',
+	username: '_user.username',
+	os: 'device.os.name',
+	loginAt: 'loginAt',
+};
+
+const isSessionPopulatedSession = (
+	session: Serialized<DeviceManagementPopulatedSession | DeviceManagementSession>,
+): session is Serialized<DeviceManagementPopulatedSession> => '_user' in session;
+
+const DeviceManagementAdminTable = () => {
+	const { t } = useTranslation();
+	const [text, setText] = useState('');
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'username' | 'loginAt'>('username');
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				filter: text,
+				sort: JSON.stringify({ [sortMapping[sortBy]]: sortDirection === 'asc' ? 1 : -1 }),
+				count: itemsPerPage,
+				offset: text ? undefined : current,
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const listAllSessions = useEndpoint('GET', '/v1/sessions/list.all');
+	const queryResult = useQuery({
+		queryKey: deviceManagementQueryKeys.sessions(query),
+		queryFn: () => listAllSessions(query),
+	});
+
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell key='client' direction={sortDirection} active={sortBy === 'client'} onClick={setSort} sort='client'>
+				{t('Client')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='rcVersion'>{t('Version')}</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='os' direction={sortDirection} active={sortBy === 'os'} onClick={setSort} sort='os'>
+				{t('OS')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell key='username' direction={sortDirection} active={sortBy === 'username'} onClick={setSort} sort='username'>
+				{t('User')}
+			</GenericTableHeaderCell>,
+			mediaQuery && (
+				<GenericTableHeaderCell key='loginAt' direction={sortDirection} active={sortBy === 'loginAt'} onClick={setSort} sort='loginAt'>
+					{t('Last_login')}
+				</GenericTableHeaderCell>
+			),
+			mediaQuery && <GenericTableHeaderCell key='_id'>{t('Device_ID')}</GenericTableHeaderCell>,
+			mediaQuery && <GenericTableHeaderCell key='ip'>{t('IP_Address')}</GenericTableHeaderCell>,
+			<GenericTableHeaderCell width='5%' key='menu' />,
+		],
+		[t, mediaQuery, setSort, sortDirection, sortBy],
+	);
+
+	return (
+		<>
+			<FilterByText placeholder={t('Search_Devices_Users')} value={text} onChange={(event) => setText(event.target.value)} />
+			<DeviceManagementTable
+				{...queryResult}
+				headers={headers}
+				renderRow={(session) => (
+					<DeviceManagementAdminRow
+						key={session._id}
+						_id={session._id}
+						username={isSessionPopulatedSession(session) ? session._user?.username : ''}
+						ip={session.ip}
+						deviceName={session?.device?.name}
+						deviceType={session?.device?.type}
+						deviceOSName={session?.device?.os?.name}
+						rcVersion={session?.device?.version}
+						loginAt={session.loginAt}
+					/>
+				)}
+				current={current}
+				itemsPerPage={itemsPerPage}
+				setCurrent={setCurrent}
+				setItemsPerPage={setItemsPerPage}
+				paginationProps={paginationProps}
+			/>
+		</>
+	);
+};
+
+export default DeviceManagementAdminTable;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/index.ts

@@ -0,0 +1 @@
+export { default } from './DeviceManagementAdminTable';