From e903d4cc2af0d8a840095e4d28d3f80630ff17e4 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Wed, 10 Jun 2020 14:00:43 -0600
Subject: [PATCH] Use 1024 instead of 1000 for byte conversions, rename
 gloabl.d.ts to global.d.ts

---
 .../scripts/components/dashboard/ServerRow.tsx      |  6 +++---
 .../scripts/components/server/ServerConsole.tsx     |  6 +++---
 resources/scripts/{gloabl.d.ts => global.d.ts}      |  0
 resources/scripts/helpers.ts                        | 13 +++++++++----
 4 files changed, 15 insertions(+), 10 deletions(-)
 rename resources/scripts/{gloabl.d.ts => global.d.ts} (100%)

diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index e300e7611..b95d50e07 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -9,7 +9,7 @@ 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 classNames from 'classnames';
 
 // Determines if the current value is in an alarm threshold so we can show it in red rather
@@ -127,7 +127,7 @@ export default ({ server, className }: { server: Server; className: string | und
                                     {bytesToHuman(stats.memoryUsageInBytes)}
                                 </p>
                             </div>
-                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {bytesToHuman(server.limits.memory * 1000 * 1000)}</p>
+                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {megabytesToHuman(server.limits.memory)}</p>
                         </div>
                         <div className={'flex-1 ml-4'}>
                             <div className={'flex justify-center'}>
@@ -148,7 +148,7 @@ export default ({ server, className }: { server: Server; className: string | und
                                 </p>
                             </div>
                             <p className={'text-xs text-neutral-600 text-center mt-1'}>
-                                of {bytesToHuman(server.limits.disk * 1000 * 1000)}
+                                of {megabytesToHuman(server.limits.disk)}
                             </p>
                         </div>
                     </React.Fragment>
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index cf6ed5f50..1834dbe5f 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
 import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
 import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
-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';
@@ -112,7 +112,7 @@ export default () => {
                             className={'mr-1'}
                         />
                         &nbsp;{bytesToHuman(memory)}
-                        <span className={'text-neutral-500'}> / {bytesToHuman(server.limits.memory * 1000 * 1000)}</span>
+                        <span className={'text-neutral-500'}> / {megabytesToHuman(server.limits.memory)}</span>
                     </p>
                     <p className={'text-xs mt-2'}>
                         <FontAwesomeIcon
@@ -121,7 +121,7 @@ export default () => {
                             className={'mr-1'}
                         />
                         &nbsp;{bytesToHuman(disk)}
-                        <span className={'text-neutral-500'}> / {bytesToHuman(server.limits.disk * 1000 * 1000)}</span>
+                        <span className={'text-neutral-500'}> / {megabytesToHuman(server.limits.disk)}</span>
                     </p>
                 </TitledGreyBox>
                 {!server.isInstalling ?
diff --git a/resources/scripts/gloabl.d.ts b/resources/scripts/global.d.ts
similarity index 100%
rename from resources/scripts/gloabl.d.ts
rename to resources/scripts/global.d.ts
diff --git a/resources/scripts/helpers.ts b/resources/scripts/helpers.ts
index f8cf94848..fab1adfe0 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);