diff --git a/resources/scripts/components/server/ServerDetailsBlock.tsx b/resources/scripts/components/server/ServerDetailsBlock.tsx index 6df4a764c..a87dc3b01 100644 --- a/resources/scripts/components/server/ServerDetailsBlock.tsx +++ b/resources/scripts/components/server/ServerDetailsBlock.tsx @@ -7,14 +7,16 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox'; import { ServerContext } from '@/state/server'; import CopyOnClick from '@/components/elements/CopyOnClick'; import { SocketEvent, SocketRequest } from '@/components/server/events'; +import UptimeDuration from '@/components/server/UptimeDuration'; interface Stats { memory: number; cpu: number; disk: number; + uptime: number; } -function statusToColor (status: string|null, installing: boolean): TwStyle { +function statusToColor (status: string | null, installing: boolean): TwStyle { if (installing) { status = ''; } @@ -30,7 +32,7 @@ function statusToColor (status: string|null, installing: boolean): TwStyle { } const ServerDetailsBlock = () => { - const [ stats, setStats ] = useState({ memory: 0, cpu: 0, disk: 0 }); + const [ stats, setStats ] = useState({ memory: 0, cpu: 0, disk: 0, uptime: 0 }); const status = ServerContext.useStoreState(state => state.status.value); const connected = ServerContext.useStoreState(state => state.socket.connected); @@ -48,6 +50,7 @@ const ServerDetailsBlock = () => { memory: stats.memory_bytes, cpu: stats.cpu_absolute, disk: stats.disk_bytes, + uptime: stats.uptime || 0, }); }; @@ -69,7 +72,7 @@ const ServerDetailsBlock = () => { const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring); const limits = ServerContext.useStoreState(state => state.server.data!.limits); const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map( - allocation => (allocation.alias || allocation.ip) + ':' + allocation.port + allocation => (allocation.alias || allocation.ip) + ':' + allocation.port, )).toString(); const diskLimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited'; @@ -88,6 +91,11 @@ const ServerDetailsBlock = () => { ]} />  {!status ? 'Connecting...' : (isInstalling ? 'Installing' : (isTransferring) ? 'Transferring' : status)} + {stats.uptime > 0 && + + () + + }

diff --git a/resources/scripts/components/server/UptimeDuration.tsx b/resources/scripts/components/server/UptimeDuration.tsx new file mode 100644 index 000000000..1406450fa --- /dev/null +++ b/resources/scripts/components/server/UptimeDuration.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +export default ({ uptime }: { uptime: number }) => { + const hours = Math.floor(Math.floor(uptime) / 60 / 60); + const remainder = Math.floor(uptime - (hours * 60 * 60)); + const minutes = Math.floor(remainder / 60); + const seconds = remainder % 60; + + return ( + <> + {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')} + + ); +};