diff --git a/resources/scripts/components/server/console/ServerDetailsBlock.tsx b/resources/scripts/components/server/console/ServerDetailsBlock.tsx index 77bf17221..745eecc8b 100644 --- a/resources/scripts/components/server/console/ServerDetailsBlock.tsx +++ b/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} + / {limit || '∞'} + > +); + const ServerDetailsBlock = ({ className }: { className?: string }) => { const [stats, setStats] = useState({ 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 ? : 'Offline'} - - {status === 'offline' ? Offline : `${stats.cpu.toFixed(2)}%`} + + {status === 'offline' ? ( + Offline + ) : ( + {stats.cpu.toFixed(2)}% + )} - {status === 'offline' ? Offline : bytesToString(stats.memory)} + {status === 'offline' ? ( + Offline + ) : ( + {bytesToString(stats.memory)} + )} - - {bytesToString(stats.disk)} + + {bytesToString(stats.disk)} - + {status === 'offline' ? Offline : bytesToString(stats.rx)} - + {status === 'offline' ? Offline : bytesToString(stats.tx)} diff --git a/resources/scripts/components/server/console/StatBlock.tsx b/resources/scripts/components/server/console/StatBlock.tsx index a3495bea4..7e4d04d20 100644 --- a/resources/scripts/components/server/console/StatBlock.tsx +++ b/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 ( - + @@ -35,17 +33,15 @@ export default ({ title, copyOnClick, icon, color, description, className, child {title} - - - {children} - - + + {children} + - + ); }; diff --git a/resources/scripts/components/server/console/chart.ts b/resources/scripts/components/server/console/chart.ts index 9733dbeaf..84e1a5889 100644 --- a/resources/scripts/components/server/console/chart.ts +++ b/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), })), }) );
{title}