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

apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.stories.tsx

@@ -0,0 +1,57 @@
+import type { IStats } from '@rocket.chat/core-typings';
+import type { Meta } from '@storybook/react';
+
+import DeploymentCard from './DeploymentCard';
+
+export default {
+	component: DeploymentCard,
+	parameters: {
+		layout: 'centered',
+	},
+	args: {
+		statistics: {
+			uniqueId: '',
+			version: '1.0.0',
+			process: {
+				nodeVersion: '',
+				pid: 0,
+			},
+			migration: {
+				version: 272,
+				lockedAt: '',
+			},
+			msEnabled: false,
+			oplogEnabled: false,
+			mongoVersion: '',
+			mongoStorageEngine: '',
+		} as IStats,
+		instances: [],
+		serverInfo: {
+			info: {
+				commit: {},
+				marketplaceApiVersion: '',
+				build: {
+					date: '',
+					arch: '',
+					platform: '',
+					cpus: 0,
+					freeMemory: 0,
+					totalMemory: 0,
+					nodeVersion: '',
+					osRelease: '',
+				},
+				version: '',
+			},
+			cloudWorkspaceId: '',
+			minimumClientVersions: {
+				desktop: '',
+				mobile: '',
+			},
+			version: '',
+		},
+	},
+} satisfies Meta<typeof DeploymentCard>;
+
+export const Example = {
+	name: 'DeploymentCard',
+};

apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx

@@ -0,0 +1,112 @@
+import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings';
+import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { IInstance } from '@rocket.chat/rest-typings';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import InstancesModal from './components/InstancesModal';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
+
+export type DeploymentCardProps = {
+	serverInfo: IWorkspaceInfo;
+	instances: IInstance[];
+	statistics: IStats;
+};
+
+const DeploymentCard = ({
+	serverInfo: { info, cloudWorkspaceId, workspaceUrl, hashedWorkspaceUrl },
+	statistics,
+	instances,
+}: DeploymentCardProps) => {
+	const { t } = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+	const setModal = useSetModal();
+
+	const { commit = {}, marketplaceApiVersion: appsEngineVersion } = info || {};
+
+	const handleInstancesModal = useStableCallback(() => {
+		setModal(<InstancesModal instances={instances} onClose={(): void => setModal()} />);
+	});
+
+	return (
+		<Card height='full'>
+			<CardBody flexDirection='column'>
+				<WorkspaceCardSection>
+					<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' />
+				</WorkspaceCardSection>
+				<Margins blockEnd={8}>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Version')} />
+						{statistics.version}
+					</WorkspaceCardSection>
+					{workspaceUrl && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Site_Url')} />
+							{workspaceUrl}
+						</WorkspaceCardSection>
+					)}
+					{hashedWorkspaceUrl && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Hashed_Site_Url')} />
+							<span style={{ lineBreak: 'anywhere' }}>{hashedWorkspaceUrl}</span>
+						</WorkspaceCardSection>
+					)}
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Deployment_ID')} />
+						{statistics.uniqueId}
+					</WorkspaceCardSection>
+
+					{cloudWorkspaceId && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Cloud_Workspace_Id')} />
+							{cloudWorkspaceId}
+						</WorkspaceCardSection>
+					)}
+
+					{appsEngineVersion && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Apps_Engine_Version')} />
+							{appsEngineVersion}
+						</WorkspaceCardSection>
+					)}
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Node_version')} />
+						{statistics.process.nodeVersion}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('DB_Migration')} />
+						{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('MongoDB')} />
+						{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine}`}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Commit_details')} />
+						{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
+						{t('Branch')}: {commit.branch} <br />
+						{commit.subject}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('PID')} />
+						{statistics.process.pid}
+					</WorkspaceCardSection>
+				</Margins>
+			</CardBody>
+
+			{!!instances.length && (
+				<CardControls>
+					<Button medium onClick={handleInstancesModal}>
+						{t('Instances')}
+					</Button>
+				</CardControls>
+			)}
+		</Card>
+	);
+};
+
+export default memo(DeploymentCard);

apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionList.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import DescriptionList from './DescriptionList';
+import DescriptionListEntry from './DescriptionListEntry';
+
+export default {
+	component: DescriptionList,
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [(fn) => <div>{fn()}</div>],
+} satisfies Meta<typeof DescriptionList>;
+
+export const Default: StoryObj<typeof DescriptionList> = {
+	render: (args) => (
+		<DescriptionList {...args}>
+			<DescriptionListEntry label='Key'>Value</DescriptionListEntry>
+			<DescriptionListEntry label='Key'>Value</DescriptionListEntry>
+			<DescriptionListEntry label='Key'>Value</DescriptionListEntry>
+		</DescriptionList>
+	),
+
+	name: 'DescriptionList',
+};

apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionList.tsx

@@ -0,0 +1,23 @@
+import { Box, Table, TableBody } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+export type DescriptionListProps = {
+	children: ReactNode;
+	title?: string;
+};
+
+const DescriptionList = ({ children, title }: DescriptionListProps) => (
+	<>
+		{title && (
+			<Box display='flex' justifyContent='flex-end' width='30%' paddingInline={8}>
+				{title}
+			</Box>
+		)}
+		<Table striped marginBlockEnd={32} width='full'>
+			<TableBody>{children}</TableBody>
+		</Table>
+	</>
+);
+
+export default memo(DescriptionList);

apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionListEntry.tsx

@@ -0,0 +1,21 @@
+import { TableRow, TableCell } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+export type DescriptionListEntryProps = {
+	label: ReactNode;
+	children: ReactNode;
+};
+
+const DescriptionListEntry = ({ children, label }: DescriptionListEntryProps) => (
+	<TableRow>
+		<TableCell wordBreak='break-word' is='th' scope='col' align='end' color='hint' backgroundColor='surface' fontScale='p2m'>
+			{label}
+		</TableCell>
+		<TableCell align='start' color='default'>
+			{children}
+		</TableCell>
+	</TableRow>
+);
+
+export default memo(DescriptionListEntry);

apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta } from '@storybook/react';
+
+import InstancesModal from './InstancesModal';
+
+export default {
+	component: InstancesModal,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		onClose: { action: 'onClose' },
+	},
+} satisfies Meta<typeof InstancesModal>;
+
+export const Default = {
+	name: 'InstancesModal',
+
+	args: {
+		instances: [
+			{
+				address: 'http://localhost:3000',
+				broadcastAuth: false,
+				currentStatus: {
+					connected: true,
+				},
+				instanceRecord: {
+					_createdAt: new Date(),
+					_id: 'instance-id',
+					name: 'instance-name',
+					pid: 123,
+					extraInformation: {
+						host: '127.0.0.1',
+						nodeVersion: 'v14.18.2',
+						port: '',
+						tcpPort: 123,
+						os: {
+							type: 'macOSX',
+							platform: '',
+							arch: 'x64',
+							release: '236',
+							uptime: 10,
+							loadavg: [123, 123],
+							totalmem: 123,
+							freemem: 123,
+							cpus: 8,
+						},
+					},
+				},
+			},
+		],
+	},
+};

apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.tsx

@@ -0,0 +1,81 @@
+import { Accordion, AccordionItem } from '@rocket.chat/fuselage';
+import type { IInstance } from '@rocket.chat/rest-typings';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import DescriptionList from './DescriptionList';
+import DescriptionListEntry from './DescriptionListEntry';
+import { useFormatDateAndTime } from '../../../../../../hooks/useFormatDateAndTime';
+
+export type InstancesModalProps = {
+	instances: IInstance[];
+	onClose: () => void;
+};
+
+const InstancesModal = ({ instances = [], onClose }: InstancesModalProps) => {
+	const { t } = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+
+	return (
+		<GenericModal onConfirm={onClose} confirmText={t('Close')} icon={null} title={t('Instances')} onClose={onClose}>
+			<Accordion>
+				{instances.map(({ address, broadcastAuth, currentStatus, instanceRecord }) => (
+					<AccordionItem defaultExpanded title={address} key={address}>
+						<DescriptionList>
+							<DescriptionListEntry label={t('Address')}>{address}</DescriptionListEntry>
+							<DescriptionListEntry label={t('Auth')}>{broadcastAuth ? 'true' : 'false'}</DescriptionListEntry>
+							<DescriptionListEntry
+								label={
+									<>
+										{t('Current_Status')} &gt; {t('Connected')}
+									</>
+								}
+							>
+								{currentStatus.connected ? 'true' : 'false'}
+							</DescriptionListEntry>
+							<DescriptionListEntry
+								label={
+									<>
+										{t('Current_Status')} &gt; {t('Local')}
+									</>
+								}
+							>
+								{currentStatus.local ? 'true' : 'false'}
+							</DescriptionListEntry>
+							<DescriptionListEntry
+								label={
+									<>
+										{t('Current_Status')} &gt; {t('Last_Heartbeat_Time')}
+									</>
+								}
+							>
+								{currentStatus.lastHeartbeatTime}
+							</DescriptionListEntry>
+							<DescriptionListEntry label={<>{t('Instance_Record')} &gt; ID</>}>{instanceRecord?._id}</DescriptionListEntry>
+							<DescriptionListEntry
+								label={
+									<>
+										{t('Instance_Record')} &gt; {t('PID')}
+									</>
+								}
+							>
+								{instanceRecord?.pid}
+							</DescriptionListEntry>
+							<DescriptionListEntry
+								label={
+									<>
+										{t('Instance_Record')} &gt; {t('Created_at')}
+									</>
+								}
+							>
+								{formatDateAndTime(instanceRecord?._createdAt)}
+							</DescriptionListEntry>
+						</DescriptionList>
+					</AccordionItem>
+				))}
+			</Accordion>
+		</GenericModal>
+	);
+};
+
+export default InstancesModal;

apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/index.ts

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