Show CPU limit next to CPU usage (#3307)

This commit is contained in:
Alex 2021-06-05 18:40:48 +03:00 committed by GitHub
parent 647d2cbf92
commit e33b1792b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions

View file

@ -76,6 +76,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
const diskLimit = server.limits.disk !== 0 ? megabytesToHuman(server.limits.disk) : 'Unlimited';
const memoryLimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
const cpuLimit = server.limits.cpu !== 0 ? server.limits.cpu + ' %' : 'Unlimited';
return (
<StatusIndicatorBox as={Link} to={`/server/${server.id}`} className={className} $status={stats?.status}>
@ -130,12 +131,15 @@ export default ({ server, className }: { server: Server; className?: string }) =
<Spinner size={'small'}/>
:
<React.Fragment>
<div css={tw`flex-1 flex md:ml-4 sm:flex hidden justify-center`}>
<div css={tw`flex-1 ml-4 sm:block hidden`}>
<div css={tw`flex justify-center`}>
<Icon icon={faMicrochip} $alarm={alarms.cpu}/>
<IconDescription $alarm={alarms.cpu}>
{stats.cpuUsagePercent} %
{stats.cpuUsagePercent.toFixed(2)} %
</IconDescription>
</div>
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {cpuLimit}</p>
</div>
<div css={tw`flex-1 ml-4 sm:block hidden`}>
<div css={tw`flex justify-center`}>
<Icon icon={faMemory} $alarm={alarms.memory}/>

View file

@ -74,6 +74,7 @@ const ServerDetailsBlock = () => {
const diskLimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
const memoryLimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
const cpuLimit = limits.cpu ? limits.cpu + '%' : 'Unlimited';
return (
<TitledGreyBox css={tw`break-words`} title={name} icon={faServer}>
@ -96,6 +97,7 @@ const ServerDetailsBlock = () => {
</CopyOnClick>
<p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}%
<span css={tw`text-neutral-500`}> / {cpuLimit}</span>
</p>
<p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(stats.memory)}