Show the resource limits next to numbers
This commit is contained in:
DaneEveritt
parent
5f156e193a
commit
050d4e7a36
3 changed files with 46 additions and 56 deletions
|
|
@ -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 || '∞'}</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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
import Icon from '@/components/elements/Icon';
|
||||
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
||||
import classNames from 'classnames';
|
||||
import Tooltip from '@/components/elements/tooltip/Tooltip';
|
||||
import styles from './style.module.css';
|
||||
import useFitText from 'use-fit-text';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
|
|
@ -10,18 +9,17 @@ import CopyOnClick from '@/components/elements/CopyOnClick';
|
|||
interface StatBlockProps {
|
||||
title: string;
|
||||
copyOnClick?: string;
|
||||
description?: string;
|
||||
color?: string | undefined;
|
||||
icon: IconDefinition;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default ({ title, copyOnClick, icon, color, description, className, children }: StatBlockProps) => {
|
||||
export default ({ title, copyOnClick, icon, color, className, children }: StatBlockProps) => {
|
||||
const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
|
||||
|
||||
return (
|
||||
<Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
|
||||
<CopyOnClick text={copyOnClick}>
|
||||
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
|
||||
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
|
||||
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
|
||||
|
|
@ -35,17 +33,15 @@ export default ({ title, copyOnClick, icon, color, description, className, child
|
|||
</div>
|
||||
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
|
||||
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
|
||||
<CopyOnClick text={copyOnClick}>
|
||||
<div
|
||||
ref={ref}
|
||||
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
|
||||
style={{ fontSize }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CopyOnClick>
|
||||
<div
|
||||
ref={ref}
|
||||
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
|
||||
style={{ fontSize }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</CopyOnClick>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -119,7 +119,9 @@ function useChart(label: string, opts?: UseChartOptions) {
|
|||
merge(state, {
|
||||
datasets: (Array.isArray(items) ? items : [items]).map((item, index) => ({
|
||||
...state.datasets[index],
|
||||
data: state.datasets[index].data.slice(1).concat(item),
|
||||
data: state.datasets[index].data
|
||||
.slice(1)
|
||||
.concat(typeof item === 'number' ? Number(item.toFixed(2)) : item),
|
||||
})),
|
||||
})
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue