Show the resource limits next to numbers

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

@@ -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
+            <StatBlock icon={faMicrochip} title={'CPU Load'} color={getBackgroundColor(stats.cpu, limits.cpu)}>
-                icon={faMicrochip}
+                {status === 'offline' ? (
-                title={'CPU Load'}
+                    <span className={'text-gray-400'}>Offline</span>
-                color={getBackgroundColor(stats.cpu, limits.cpu)}
+                ) : (
-                description={
+                    <Limit limit={textLimits.cpu}>{stats.cpu.toFixed(2)}%</Limit>
-                    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>
             <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
+            <StatBlock icon={faHdd} title={'Disk'} color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}>
-                icon={faHdd}
+                <Limit limit={textLimits.disk}>{bytesToString(stats.disk)}</Limit>
-                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>
-            <StatBlock
+            <StatBlock icon={faCloudDownloadAlt} title={'Network (Inbound)'}>
-                icon={faCloudDownloadAlt}
-                title={'Network (Inbound)'}
-                description={'The total amount of network traffic that your server has received since it was started.'}
-            >
                 {status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.rx)}
             </StatBlock>
-            <StatBlock
+            <StatBlock icon={faCloudUploadAlt} title={'Network (Outbound)'}>
-                icon={faCloudUploadAlt}
-                title={'Network (Outbound)'}
-                description={
-                    'The total amount of traffic your server has sent across the internet since it was started.'
-                }
-            >
                 {status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.tx)}
             </StatBlock>
         </div>

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

@@ -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
-                        <div
+                        ref={ref}
-                            ref={ref}
+                        className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
-                            className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
+                        style={{ fontSize }}
-                            style={{ fontSize }}
+                    >
-                        >
+                        {children}
-                            {children}
+                    </div>
-                        </div>
-                    </CopyOnClick>
                 </div>
             </div>
-        </Tooltip>
+        </CopyOnClick>
     );
 };

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

@@ -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),
                 })),
             })
         );