Skip to content

Commit 050d4e7

Browse files
DaneEverittDaneEveritt
committed
Show the resource limits next to numbers
1 parent 5f156e1 commit 050d4e7

File tree

3 files changed

+46
-56
lines changed

3 files changed

+46
-56
lines changed

‎resources/scripts/components/server/console/ServerDetailsBlock.tsx‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useMemo, useState } from 'react';
22
import {
33
faClock,
44
faCloudDownloadAlt,
@@ -31,13 +31,30 @@ const getBackgroundColor = (value: number, max: number | null): string | undefin
3131
return undefined;
3232
};
3333

34+
const Limit = ({ limit, children }: { limit: string | null; children: React.ReactNode }) => (
35+
<>
36+
{children}
37+
<span className={'ml-1 text-gray-300 text-[70%] select-none'}>/ {limit || '&infin;'}</span>
38+
</>
39+
);
40+
3441
const ServerDetailsBlock = ({ className }: { className?: string }) => {
3542
const [stats, setStats] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
3643

3744
const status = ServerContext.useStoreState((state) => state.status.value);
3845
const connected = ServerContext.useStoreState((state) => state.socket.connected);
3946
const instance = ServerContext.useStoreState((state) => state.socket.instance);
4047
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
48+
49+
const textLimits = useMemo(
50+
() => ({
51+
cpu: limits?.cpu ? `${limits.cpu}%` : null,
52+
memory: limits?.memory ? bytesToString(mbToBytes(limits.memory)) : null,
53+
disk: limits?.disk ? bytesToString(mbToBytes(limits.disk)) : null,
54+
}),
55+
[limits]
56+
);
57+
4158
const allocation = ServerContext.useStoreState((state) => {
4259
const match = state.server.data!.allocations.find((allocation) => allocation.isDefault);
4360

@@ -82,56 +99,31 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
8299
>
83100
{stats.uptime > 0 ? <UptimeDuration uptime={stats.uptime / 1000} /> : 'Offline'}
84101
</StatBlock>
85-
<StatBlock
86-
icon={faMicrochip}
87-
title={'CPU Load'}
88-
color={getBackgroundColor(stats.cpu, limits.cpu)}
89-
description={
90-
limits.cpu
91-
? `This server is allowed to use up to ${limits.cpu}% of the host's available CPU resources.`
92-
: 'No CPU limit has been configured for this server.'
93-
}
94-
>
95-
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : `${stats.cpu.toFixed(2)}%`}
102+
<StatBlock icon={faMicrochip} title={'CPU Load'} color={getBackgroundColor(stats.cpu, limits.cpu)}>
103+
{status === 'offline' ? (
104+
<span className={'text-gray-400'}>Offline</span>
105+
) : (
106+
<Limit limit={textLimits.cpu}>{stats.cpu.toFixed(2)}%</Limit>
107+
)}
96108
</StatBlock>
97109
<StatBlock
98110
icon={faMemory}
99111
title={'Memory'}
100112
color={getBackgroundColor(stats.memory / 1024, limits.memory * 1024)}
101-
description={
102-
limits.memory
103-
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.memory))} of memory.`
104-
: 'No memory limit has been configured for this server.'
105-
}
106113
>
107-
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.memory)}
114+
{status === 'offline' ? (
115+
<span className={'text-gray-400'}>Offline</span>
116+
) : (
117+
<Limit limit={textLimits.memory}>{bytesToString(stats.memory)}</Limit>
118+
)}
108119
</StatBlock>
109-
<StatBlock
110-
icon={faHdd}
111-
title={'Disk'}
112-
color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}
113-
description={
114-
limits.disk
115-
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.disk))} of disk space.`
116-
: 'No disk space limit has been configured for this server.'
117-
}
118-
>
119-
{bytesToString(stats.disk)}
120+
<StatBlock icon={faHdd} title={'Disk'} color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}>
121+
<Limit limit={textLimits.disk}>{bytesToString(stats.disk)}</Limit>
120122
</StatBlock>
121-
<StatBlock
122-
icon={faCloudDownloadAlt}
123-
title={'Network (Inbound)'}
124-
description={'The total amount of network traffic that your server has received since it was started.'}
125-
>
123+
<StatBlock icon={faCloudDownloadAlt} title={'Network (Inbound)'}>
126124
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.rx)}
127125
</StatBlock>
128-
<StatBlock
129-
icon={faCloudUploadAlt}
130-
title={'Network (Outbound)'}
131-
description={
132-
'The total amount of traffic your server has sent across the internet since it was started.'
133-
}
134-
>
126+
<StatBlock icon={faCloudUploadAlt} title={'Network (Outbound)'}>
135127
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.tx)}
136128
</StatBlock>
137129
</div>

‎resources/scripts/components/server/console/StatBlock.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,24 @@ import React from 'react';
22
import Icon from '@/components/elements/Icon';
33
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
44
import classNames from 'classnames';
5-
import Tooltip from '@/components/elements/tooltip/Tooltip';
65
import styles from './style.module.css';
76
import useFitText from 'use-fit-text';
87
import CopyOnClick from '@/components/elements/CopyOnClick';
98

109
interface StatBlockProps {
1110
title: string;
1211
copyOnClick?: string;
13-
description?: string;
1412
color?: string | undefined;
1513
icon: IconDefinition;
1614
children: React.ReactNode;
1715
className?: string;
1816
}
1917

20-
export default ({ title, copyOnClick, icon, color, description, className, children }: StatBlockProps) => {
18+
export default ({ title, copyOnClick, icon, color, className, children }: StatBlockProps) => {
2119
const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
2220

2321
return (
24-
<Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
22+
<CopyOnClick text={copyOnClick}>
2523
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
2624
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
2725
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
@@ -35,17 +33,15 @@ export default ({ title, copyOnClick, icon, color, description, className, child
3533
</div>
3634
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
3735
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
38-
<CopyOnClick text={copyOnClick}>
39-
<div
40-
ref={ref}
41-
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
42-
style={{ fontSize }}
43-
>
44-
{children}
45-
</div>
46-
</CopyOnClick>
36+
<div
37+
ref={ref}
38+
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
39+
style={{ fontSize }}
40+
>
41+
{children}
42+
</div>
4743
</div>
4844
</div>
49-
</Tooltip>
45+
</CopyOnClick>
5046
);
5147
};

‎resources/scripts/components/server/console/chart.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,9 @@ function useChart(label: string, opts?: UseChartOptions) {
119119
merge(state, {
120120
datasets: (Array.isArray(items) ? items : [items]).map((item, index) => ({
121121
...state.datasets[index],
122-
data: state.datasets[index].data.slice(1).concat(item),
122+
data: state.datasets[index].data
123+
.slice(1)
124+
.concat(typeof item === 'number' ? Number(item.toFixed(2)) : item),
123125
})),
124126
})
125127
);

0 commit comments

Comments
 (0)