StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show the resource limits next to numbers

Browse source
This commit is contained in:
DaneEveritt 2022-06-27 20:14:55 -04:00
parent 5f156e193a
commit 050d4e7a36
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 46 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

74
resources/scripts/components/server/console/ServerDetailsBlock.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import {
faClock,
faCloudDownloadAlt,
@ -31,6 +31,13 @@ const getBackgroundColor = (value: number, max: number | null): string | undefin
return undefined;
};
const Limit = ({ limit, children }: { limit: string | null; children: React.ReactNode }) => (
<>
{children}
<span className={'ml-1 text-gray-300 text-[70%] select-none'}>/ {limit || '&infin;'}</span>
</>
);
const ServerDetailsBlock = ({ className }: { className?: string }) => {
const [stats, setStats] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
@ -38,6 +45,16 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
const connected = ServerContext.useStoreState((state) => state.socket.connected);
const instance = ServerContext.useStoreState((state) => state.socket.instance);
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
const textLimits = useMemo(
() => ({
cpu: limits?.cpu ? `${limits.cpu}%` : null,
memory: limits?.memory ? bytesToString(mbToBytes(limits.memory)) : null,
disk: limits?.disk ? bytesToString(mbToBytes(limits.disk)) : null,
}),
[limits]
);
const allocation = ServerContext.useStoreState((state) => {
const match = state.server.data!.allocations.find((allocation) => allocation.isDefault);
@ -82,56 +99,31 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
>
{stats.uptime > 0 ? <UptimeDuration uptime={stats.uptime / 1000} /> : 'Offline'}
</StatBlock>
<StatBlock
icon={faMicrochip}
title={'CPU Load'}
color={getBackgroundColor(stats.cpu, limits.cpu)}
description={
limits.cpu
? `This server is allowed to use up to ${limits.cpu}% of the host's available CPU resources.`
: 'No CPU limit has been configured for this server.'
}
>
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : `${stats.cpu.toFixed(2)}%`}
<StatBlock icon={faMicrochip} title={'CPU Load'} color={getBackgroundColor(stats.cpu, limits.cpu)}>
{status === 'offline' ? (
<span className={'text-gray-400'}>Offline</span>
) : (
<Limit limit={textLimits.cpu}>{stats.cpu.toFixed(2)}%</Limit>
)}
</StatBlock>
<StatBlock
icon={faMemory}
title={'Memory'}
color={getBackgroundColor(stats.memory / 1024, limits.memory * 1024)}
description={
limits.memory
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.memory))} of memory.`
: 'No memory limit has been configured for this server.'
}
>
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.memory)}
{status === 'offline' ? (
<span className={'text-gray-400'}>Offline</span>
) : (
<Limit limit={textLimits.memory}>{bytesToString(stats.memory)}</Limit>
)}
</StatBlock>
<StatBlock
icon={faHdd}
title={'Disk'}
color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}
description={
limits.disk
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.disk))} of disk space.`
: 'No disk space limit has been configured for this server.'
}
>
{bytesToString(stats.disk)}
<StatBlock icon={faHdd} title={'Disk'} color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}>
<Limit limit={textLimits.disk}>{bytesToString(stats.disk)}</Limit>
</StatBlock>
<StatBlock
icon={faCloudDownloadAlt}
title={'Network (Inbound)'}
description={'The total amount of network traffic that your server has received since it was started.'}
>
<StatBlock icon={faCloudDownloadAlt} title={'Network (Inbound)'}>
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.rx)}
</StatBlock>
<StatBlock
icon={faCloudUploadAlt}
title={'Network (Outbound)'}
description={
'The total amount of traffic your server has sent across the internet since it was started.'
}
>
<StatBlock icon={faCloudUploadAlt} title={'Network (Outbound)'}>
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.tx)}
</StatBlock>
</div>