better format the memory numbers - fixes jupyter-server#1

Author: echarles

src/format.ts

@@ -0,0 +1,53 @@
+// Taken from https://github.com/jupyter-server/jupyter-resource-usage/blob/e6ec53fa69fdb6de8e878974bcff006310658408/packages/labextension/src/memoryUsage.tsx#L272
+
+type MemoryUnit = 'B' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB';
+
+const MEMORY_UNIT_LIMITS: {
+  readonly [U in MemoryUnit]: number;
+} = {
+  B: 1,
+  KB: 1024,
+  MB: 1048576,
+  GB: 1073741824,
+  TB: 1099511627776,
+  PB: 1125899906842624
+};
+
+/**
+ * Given a number of bytes, convert to the most human-readable
+ * format, (GB, TB, etc).
+ * Taken from https://github.com/jupyter-server/jupyter-resource-usage/blob/e6ec53fa69fdb6de8e878974bcff006310658408/packages/labextension/src/memoryUsage.tsx#L272
+ */
+export function convertToLargestUnit(
+  numBytes: number | undefined
+): [number, MemoryUnit] {
+  if (!numBytes) {
+    return [0, 'B'];
+  }
+  if (numBytes < MEMORY_UNIT_LIMITS.KB) {
+    return [numBytes, 'B'];
+  } else if (
+    MEMORY_UNIT_LIMITS.KB === numBytes ||
+    numBytes < MEMORY_UNIT_LIMITS.MB
+  ) {
+    return [numBytes / MEMORY_UNIT_LIMITS.KB, 'KB'];
+  } else if (
+    MEMORY_UNIT_LIMITS.MB === numBytes ||
+    numBytes < MEMORY_UNIT_LIMITS.GB
+    // eslint-disable-next-line prettier/prettier
+) {
+    return [numBytes / MEMORY_UNIT_LIMITS.MB, 'MB'];
+  } else if (
+    MEMORY_UNIT_LIMITS.GB === numBytes ||
+    numBytes < MEMORY_UNIT_LIMITS.TB
+  ) {
+    return [numBytes / MEMORY_UNIT_LIMITS.GB, 'GB'];
+  } else if (
+    MEMORY_UNIT_LIMITS.TB === numBytes ||
+    numBytes < MEMORY_UNIT_LIMITS.PB
+  ) {
+    return [numBytes / MEMORY_UNIT_LIMITS.TB, 'TB'];
+  } else {
+    return [numBytes / MEMORY_UNIT_LIMITS.PB, 'PB'];
+  }
+}

src/widget.tsx

@@ -7,6 +7,7 @@ import { Kernel } from '@jupyterlab/services';
 import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import { requestAPI } from './handler';
 import useInterval from './useInterval';
+import { convertToLargestUnit } from './format';
 
 type Usage = {
   timestamp: Date | null;
@@ -149,7 +150,7 @@ const KernelUsage = (props: {
             CPU: {kernelPoll.usage?.kernel_cpu.toFixed(1)}
           </div>
           <div className="jp-kernelusage-separator">
-            Memory: {kernelPoll.usage?.kernel_memory}
+            Memory: {convertToLargestUnit(kernelPoll.usage?.kernel_memory)}
           </div>
           <hr></hr>
           <h4 className="jp-kernelusage-separator">Host CPU</h4>
@@ -158,28 +159,39 @@ const KernelUsage = (props: {
           </div>
           <h4 className="jp-kernelusage-separator">Host Virtual Memory</h4>
           <div className="jp-kernelusage-separator">
-            Active: {kernelPoll.usage?.host_virtual_memory.active}
+            Active:{' '}
+            {convertToLargestUnit(kernelPoll.usage?.host_virtual_memory.active)}
           </div>
           <div className="jp-kernelusage-separator">
-            Available: {kernelPoll.usage?.host_virtual_memory.available}
+            Available:{' '}
+            {convertToLargestUnit(
+              kernelPoll.usage?.host_virtual_memory.available
+            )}
           </div>
           <div className="jp-kernelusage-separator">
-            Free: {kernelPoll.usage?.host_virtual_memory.free}
+            Free:{' '}
+            {convertToLargestUnit(kernelPoll.usage?.host_virtual_memory.free)}
           </div>
           <div className="jp-kernelusage-separator">
-            Inactive: {kernelPoll.usage?.host_virtual_memory.inactive}
+            Inactive:{' '}
+            {convertToLargestUnit(
+              kernelPoll.usage?.host_virtual_memory.inactive
+            )}
           </div>
           <div className="jp-kernelusage-separator">
-            Percent: {kernelPoll.usage?.host_virtual_memory.percent}
+            Percent: {kernelPoll.usage?.host_virtual_memory.percent.toFixed(1)}
           </div>
           <div className="jp-kernelusage-separator">
-            Total: {kernelPoll.usage?.host_virtual_memory.total}
+            Total:{' '}
+            {convertToLargestUnit(kernelPoll.usage?.host_virtual_memory.total)}
           </div>
           <div className="jp-kernelusage-separator">
-            Used: {kernelPoll.usage?.host_virtual_memory.used}
+            Used:{' '}
+            {convertToLargestUnit(kernelPoll.usage?.host_virtual_memory.used)}
           </div>
           <div className="jp-kernelusage-separator">
-            Wired: {kernelPoll.usage?.host_virtual_memory.wired}
+            Wired:{' '}
+            {convertToLargestUnit(kernelPoll.usage?.host_virtual_memory.wired)}
           </div>
         </>
       );