schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: improve server status table list display

Browse Source 
make sure never break word
This commit is contained in:
moonrailgun 2024-01-03 19:53:25 +08:00
parent a04aa67f85
commit 28dd506cb4
1 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/client/pages/Servers.tsx
View File

@ -159,6 +159,7 @@ export const ServerList: React.FC<{
{ {
key: 'status', key: 'status',
title: 'Status', title: 'Status',
width: 90,
render: (val, record) => { render: (val, record) => {
return isServerOnline(record) ? ( return isServerOnline(record) ? (
<Badge status="success" text="online" /> <Badge status="success" text="online" />
@ -176,10 +177,14 @@ export const ServerList: React.FC<{
{ {
dataIndex: 'name', dataIndex: 'name',
title: 'Node Name', title: 'Node Name',
width: 150,
ellipsis: true,
}, },
{ {
dataIndex: 'hostname', dataIndex: 'hostname',
title: 'Host Name', title: 'Host Name',
width: 150,
ellipsis: true,
}, },
// { // {
// dataIndex: ['payload', 'system'], // dataIndex: ['payload', 'system'],
@ -188,15 +193,18 @@ export const ServerList: React.FC<{
{ {
dataIndex: ['payload', 'uptime'], dataIndex: ['payload', 'uptime'],
title: 'Uptime', title: 'Uptime',
width: 150,
render: (val) => prettyMilliseconds(Number(val) * 1000), render: (val) => prettyMilliseconds(Number(val) * 1000),
}, },
{ {
dataIndex: ['payload', 'load'], dataIndex: ['payload', 'load'],
title: 'Load', title: 'Load',
width: 70,
}, },
{ {
key: 'nework', key: 'nework',
title: 'Network', title: 'Network',
width: 110,
render: (_, record) => { render: (_, record) => {
return ( return (
<UpDownCounter <UpDownCounter
@ -209,6 +217,7 @@ export const ServerList: React.FC<{
{ {
key: 'traffic', key: 'traffic',
title: 'Traffic', title: 'Traffic',
width: 110,
render: (_, record) => { render: (_, record) => {
return ( return (
<UpDownCounter <UpDownCounter
@ -220,30 +229,40 @@ export const ServerList: React.FC<{
}, },
{ {
dataIndex: ['payload', 'cpu'], dataIndex: ['payload', 'cpu'],
title: 'cpu', title: 'CPU',
width: 80,
render: (val) => `${val}%`, render: (val) => `${val}%`,
}, },
{ {
key: 'ram', key: 'ram',
title: 'ram', title: 'RAM',
width: 120,
render: (_, record) => { render: (_, record) => {
return `${filesize(record.payload.memory_used * 1000)} / ${filesize( return (
record.payload.memory_total * 1000 <div>
)}`; <div>{filesize(record.payload.memory_used * 1000)} / </div>
<div>{filesize(record.payload.memory_total * 1000)}</div>
</div>
);
}, },
}, },
{ {
key: 'hdd', key: 'hdd',
title: 'hdd', title: 'HDD',
width: 120,
render: (_, record) => { render: (_, record) => {
return `${filesize( return (
record.payload.hdd_used * 1000 * 1000 <div>
)} / ${filesize(record.payload.hdd_total * 1000 * 1000)}`; <div>{filesize(record.payload.hdd_used * 1000 * 1000)} / </div>
<div>{filesize(record.payload.hdd_total * 1000 * 1000)}</div>
</div>
);
}, },
}, },
{ {
dataIndex: 'updatedAt', dataIndex: 'updatedAt',
title: 'updatedAt', title: 'updatedAt',
width: 130,
render: (val) => { render: (val) => {
return dayjs(val).format('MMM D HH:mm:ss'); return dayjs(val).format('MMM D HH:mm:ss');
}, },
@ -256,15 +275,19 @@ export const ServerList: React.FC<{
<div className="text-right text-sm opacity-80"> <div className="text-right text-sm opacity-80">
Last updated at: {dayjs(lastUpdatedAt).format('YYYY-MM-DD HH:mm:ss')} Last updated at: {dayjs(lastUpdatedAt).format('YYYY-MM-DD HH:mm:ss')}
</div> </div>
<div className="overflow-auto">
<Table <Table
rowKey="hostname" rowKey="hostname"
columns={columns} columns={columns}
dataSource={dataSource} dataSource={dataSource}
pagination={false} pagination={false}
locale={{ emptyText: <Empty description="No server online" /> }} locale={{ emptyText: <Empty description="No server online" /> }}
rowClassName={(record) => clsx(!isServerOnline(record) && 'opacity-60')} rowClassName={(record) =>
clsx(!isServerOnline(record) && 'opacity-60')
}
/> />
</div> </div>
</div>
); );
}); });
ServerList.displayName = 'ServerList'; ServerList.displayName = 'ServerList';
@ -286,6 +309,11 @@ export const InstallScript: React.FC = React.memo(() => {
> >
<span>{command}</span> <span>{command}</span>
</Typography.Paragraph> </Typography.Paragraph>
<div>
Or you wanna report server status in windows server? switch to Manual
tab
</div>
</div> </div>
); );
}); });