diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx index a438750e7..abb3c3924 100644 --- a/resources/scripts/components/dashboard/ServerRow.tsx +++ b/resources/scripts/components/dashboard/ServerRow.tsx @@ -5,14 +5,15 @@ import { Link } from 'react-router-dom'; import { Server } from '@/api/server/getServer'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResourceUsage'; -import { bytesToHuman } from '@/helpers'; +import { bytesToHuman, megabytesToHuman } from '@/helpers'; import tw from 'twin.macro'; import GreyRowBox from '@/components/elements/GreyRowBox'; + // Determines if the current value is in an alarm threshold so we can show it in red rather // than the more faded default style. const isAlarmState = (current: number, limit: number): boolean => { - const limitInBytes = limit * 1000 * 1000; + const limitInBytes = limit * 1024 * 1024; return current / limitInBytes >= 0.90; }; @@ -49,8 +50,9 @@ export default ({ server }: { server: Server }) => { alarms.memory = isAlarmState(stats.memoryUsageInBytes, server.limits.memory); alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk); } - const disklimit = server.limits.disk !== 0 ? bytesToHuman(server.limits.disk * 1000 * 1000) : 'Unlimited'; - const memorylimit = server.limits.memory !== 0 ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited'; + + const disklimit = server.limits.disk !== 0 ? megabytesToHuman(server.limits.disk) : "Unlimited"; + const memorylimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : "Unlimited"; return ( @@ -128,6 +130,7 @@ export default ({ server }: { server: Server }) => { {bytesToHuman(stats.memoryUsageInBytes)}

+

of {memorylimit}

@@ -149,6 +152,7 @@ export default ({ server }: { server: Server }) => { {bytesToHuman(stats.diskUsageInBytes)}

+

of {disklimit}

diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx index 8c9dd1ed5..e90c86035 100644 --- a/resources/scripts/components/server/ServerConsole.tsx +++ b/resources/scripts/components/server/ServerConsole.tsx @@ -2,7 +2,7 @@ import React, { lazy, useEffect, useState } from 'react'; import { ServerContext } from '@/state/server'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons'; -import { bytesToHuman } from '@/helpers'; +import { bytesToHuman, megabytesToHuman } from '@/helpers'; import SuspenseSpinner from '@/components/elements/SuspenseSpinner'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import Can from '@/components/elements/Can'; @@ -56,8 +56,8 @@ export default () => { }; }, [ instance, connected ]); - const disklimit = server.limits.disk ? bytesToHuman(server.limits.disk * 1000 * 1000) : 'Unlimited'; - const memorylimit = server.limits.memory ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited'; + const disklimit = server.limits.disk ? megabytesToHuman(server.limits.disk) : 'Unlimited'; + const memorylimit = server.limits.memory ? megabytesToHuman(server.limits.memory) : 'Unlimited'; return ( diff --git a/resources/scripts/global.d.ts b/resources/scripts/global.d.ts new file mode 100644 index 000000000..b0dfa478c --- /dev/null +++ b/resources/scripts/global.d.ts @@ -0,0 +1 @@ +declare function tw (a: TemplateStringsArray | string): any; diff --git a/resources/scripts/helpers.ts b/resources/scripts/helpers.ts index d6d4712b0..84358193b 100644 --- a/resources/scripts/helpers.ts +++ b/resources/scripts/helpers.ts @@ -1,14 +1,19 @@ +export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1024 / 1024); + +export const megabytesToBytes = (mb: number) => Math.floor(mb * 1024 * 1024); + export function bytesToHuman (bytes: number): string { if (bytes === 0) { return '0 kB'; } - const i = Math.floor(Math.log(bytes) / Math.log(1000)); - // @ts-ignore - return `${(bytes / Math.pow(1000, i)).toFixed(2) * 1} ${[ 'Bytes', 'kB', 'MB', 'GB', 'TB' ][i]}`; + const i = Math.floor(Math.log(bytes) / Math.log(1024)); + return `${Number((bytes / Math.pow(1024, i)).toFixed(2))} ${[ 'Bytes', 'kB', 'MB', 'GB', 'TB' ][i]}`; } -export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1000 / 1000); +export function megabytesToHuman (mb: number): string { + return bytesToHuman(megabytesToBytes(mb)); +} export const randomInt = (low: number, high: number) => Math.floor(Math.random() * (high - low) + low);