apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: `InstancesModal` to ts (#28474)

Browse Source
pull/28735/head^2
Douglas Fabris 3 years ago committed by GitHub
parent a24c16f8fa
commit 1aad44bcd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 156 additions and 153 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 21
      apps/meteor/client/views/admin/info/DescriptionList.js
  2. 17
      apps/meteor/client/views/admin/info/DescriptionListEntry.js
  3. 105
      apps/meteor/client/views/admin/info/InstancesModal.js
  4. 7
      apps/meteor/client/views/admin/info/InstancesModal/DescriptionList.stories.tsx
  5. 23
      apps/meteor/client/views/admin/info/InstancesModal/DescriptionList.tsx
  6. 21
      apps/meteor/client/views/admin/info/InstancesModal/DescriptionListEntry.tsx
  7. 21
      apps/meteor/client/views/admin/info/InstancesModal/InstancesModal.stories.tsx
  8. 92
      apps/meteor/client/views/admin/info/InstancesModal/InstancesModal.tsx
  9. 1
      apps/meteor/client/views/admin/info/InstancesModal/index.ts
  10. 1
      packages/rest-typings/src/v1/instances.ts

21
apps/meteor/client/views/admin/info/DescriptionList.js
Unescape View File

@ -1,21 +0,0 @@
import { Box, Table } from '@rocket.chat/fuselage';
import React, { memo } from 'react';
import DescriptionListEntry from './DescriptionListEntry';
const DescriptionList = ({ children, title, ...props }) => (
<>
{title && (
<Box display='flex' justifyContent='flex-end' width='30%' paddingInline='x8'>
{title}
</Box>
)}
<Table striped marginBlockEnd='x32' width='full' {...props}>
<Table.Body>{children}</Table.Body>
</Table>
</>
);
export default Object.assign(memo(DescriptionList), {
Entry: DescriptionListEntry,
});

17
apps/meteor/client/views/admin/info/DescriptionListEntry.js
Unescape View File

@ -1,17 +0,0 @@
import { Table } from '@rocket.chat/fuselage';
import React, { memo } from 'react';
const style = { wordBreak: 'break-word' };
const DescriptionListEntry = ({ children, label, ...props }) => (
<Table.Row {...props}>
<Table.Cell is='th' scope='col' align='end' color='hint' backgroundColor='surface' fontScale='p2m' style={style}>
{label}
</Table.Cell>
<Table.Cell align='start' color='default' style={style}>
{children}
</Table.Cell>
</Table.Row>
);
export default memo(DescriptionListEntry);

105
apps/meteor/client/views/admin/info/InstancesModal.js
Unescape View File

@ -1,105 +0,0 @@
import { Modal, Button, Accordion } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React from 'react';
import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
import DescriptionList from './DescriptionList';
const InstancesModal = ({ instances = [], onClose }) => {
const t = useTranslation();
const formatDateAndTime = useFormatDateAndTime();
return (
<Modal width='x600'>
<Modal.Header>
<Modal.Title>{t('Instances')}</Modal.Title>
<Modal.Close onClick={onClose} />
</Modal.Header>
<Modal.Content>
<Accordion>
{instances.map(({ address, broadcastAuth, currentStatus, instanceRecord }) => (
<Accordion.Item title={address} key={address}>
<DescriptionList>
<DescriptionList.Entry label={t('Address')}>{address}</DescriptionList.Entry>
<DescriptionList.Entry label={t('Auth')}>{broadcastAuth ? 'true' : 'false'}</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Current_Status')} &gt; {t('Connected')}
</>
}
>
{currentStatus.connected ? 'true' : 'false'}
</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Current_Status')} &gt; {t('Local')}
</>
}
>
{currentStatus.local ? 'true' : 'false'}
</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Current_Status')} &gt; {t('Last_Heartbeat_Time')}
</>
}
>
{currentStatus.lastHeartbeatTime}
</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Instance_Record')} &gt; {t('ID')}
</>
}
>
{instanceRecord._id}
</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Instance_Record')} &gt; {t('PID')}
</>
}
>
{instanceRecord.pid}
</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Instance_Record')} &gt; {t('Created_at')}
</>
}
>
{formatDateAndTime(instanceRecord._createdAt)}
</DescriptionList.Entry>
<DescriptionList.Entry
label={
<>
{t('Instance_Record')} &gt; {t('Updated_at')}
</>
}
>
{formatDateAndTime(instanceRecord._updatedAt)}
</DescriptionList.Entry>
</DescriptionList>
</Accordion.Item>
))}
</Accordion>
</Modal.Content>
<Modal.Footer>
<Modal.FooterControllers>
<Button primary onClick={onClose}>
{t('Close')}
</Button>
</Modal.FooterControllers>
</Modal.Footer>
</Modal>
);
};
export default InstancesModal;

7
apps/meteor/client/views/admin/info/DescriptionList.stories.tsx → apps/meteor/client/views/admin/info/InstancesModal/DescriptionList.stories.tsx
Unescape View File

@ -2,6 +2,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';
import DescriptionList from './DescriptionList';
import DescriptionListEntry from './DescriptionListEntry';
export default {
title: 'Admin/Info/DescriptionList',
@ -14,9 +15,9 @@ export default {
export const Default: ComponentStory<typeof DescriptionList> = (args) => (
<DescriptionList {...args}>
<DescriptionList.Entry label='Key'>Value</DescriptionList.Entry>
<DescriptionList.Entry label='Key'>Value</DescriptionList.Entry>
<DescriptionList.Entry label='Key'>Value</DescriptionList.Entry>
<DescriptionListEntry label='Key'>Value</DescriptionListEntry>
<DescriptionListEntry label='Key'>Value</DescriptionListEntry>
<DescriptionListEntry label='Key'>Value</DescriptionListEntry>
</DescriptionList>
);
Default.storyName = 'DescriptionList';

23
apps/meteor/client/views/admin/info/InstancesModal/DescriptionList.tsx
Unescape View File

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

21
apps/meteor/client/views/admin/info/InstancesModal/DescriptionListEntry.tsx
Unescape View File

@ -0,0 +1,21 @@
import { TableRow, TableCell } from '@rocket.chat/fuselage';
import type { ReactNode } from 'react';
import React, { memo } from 'react';
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);

21
apps/meteor/client/views/admin/info/InstancesModal.stories.tsx → apps/meteor/client/views/admin/info/InstancesModal/InstancesModal.stories.tsx
Unescape View File

@ -25,20 +25,29 @@ Default.args = {
broadcastAuth: false,
currentStatus: {
connected: true,
retryCount: 0,
retryTime: 30000,
status: 'running',
},
instanceRecord: {
_updatedAt: '00-00-00',
_createdAt: '00-00-00',
_id: 'instance-id',
name: 'instance-name',
pid: 123,
_createdAt: new Date(),
_updatedAt: new Date(),
extraInformation: {
host: '127.0.0.1',
nodeVersion: 'v14.18.2',
port: 3000,
port: '',
tcpPort: 123,
os: {
type: 'macOSX',
platform: '',
arch: 'x64',
release: '236',
uptime: 10,
loadavg: [123, 123],
totalmem: 123,
freemem: 123,
cpus: 8,
},
},
},
},

92
apps/meteor/client/views/admin/info/InstancesModal/InstancesModal.tsx
Unescape View File

@ -0,0 +1,92 @@
import type { Serialized } from '@rocket.chat/core-typings';
import { Accordion } from '@rocket.chat/fuselage';
import type { IInstance } from '@rocket.chat/rest-typings';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React from 'react';
import GenericModal from '../../../../components/GenericModal';
import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
import DescriptionList from './DescriptionList';
import DescriptionListEntry from './DescriptionListEntry';
type InstancesModalProps = {
instances: Serialized<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 }) => (
<Accordion.Item 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>
<DescriptionListEntry
label={
<>
{t('Instance_Record')} &gt; {t('Updated_at')}
</>
}
>
{formatDateAndTime(instanceRecord?._updatedAt)}
</DescriptionListEntry>
</DescriptionList>
</Accordion.Item>
))}
</Accordion>
</GenericModal>
);
};
export default InstancesModal;

1
apps/meteor/client/views/admin/info/InstancesModal/index.ts
Unescape View File

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

1
packages/rest-typings/src/v1/instances.ts
Unescape View File

@ -8,7 +8,6 @@ export interface IInstance {
lastHeartbeatTime?: number;
};
instanceRecord?: IInstanceStatus;
broadcastAuth: boolean;
}

Write Preview
Loading…
Cancel
Save