Merge pull request #2105 from pterodactyl/fix/2071

Fix improper byte conversions

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 (
         <GreyRowBox as={Link} to={`/server/${server.id}`}>
@@ -128,6 +130,7 @@ export default ({ server }: { server: Server }) => {
                                     {bytesToHuman(stats.memoryUsageInBytes)}
                                 </p>
                             </div>
+
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memorylimit}</p>
                         </div>
                         <div css={tw`flex-1 ml-4`}>
@@ -149,6 +152,7 @@ export default ({ server }: { server: Server }) => {
                                     {bytesToHuman(stats.diskUsageInBytes)}
                                 </p>
                             </div>
+
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
                         </div>
                     </React.Fragment>

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 disklimit = server.limits.disk ? megabytesToHuman(server.limits.disk) : 'Unlimited';
-    const memorylimit = server.limits.memory ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited';
+    const memorylimit = server.limits.memory ? megabytesToHuman(server.limits.memory) : 'Unlimited';
 
     return (
         <PageContentBlock css={tw`flex`}>

resources/scripts/global.d.ts

@@ -0,0 +1 @@
+declare function tw (a: TemplateStringsArray | string): any;

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));
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    // @ts-ignore
+    return `${Number((bytes / Math.pow(1024, i)).toFixed(2))} ${[ 'Bytes', 'kB', 'MB', 'GB', 'TB' ][i]}`;
-    return `${(bytes / Math.pow(1000, i)).toFixed(2) * 1} ${[ '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);