Use IEC byte units on action page (#10574)

All of the platform properties are parsed as IEC bytes (powers of 1024),
so render the resource usage using IEC bytes as well, instead of SI
(powers of 1000).

For example if an action requests `EstimatedMemory=1.5GB` in platform
props, then we currently render "Requested memory: 1.6GB" which is
confusing.

Author: bduffany

app/format/format.tsx

@@ -169,23 +169,25 @@ function truncateDecimalZeroes(numString: string): string {
 }
 
 export function bytes(bytes: number | Long) {
-  bytes = +bytes;
-  if (bytes < 1e3) {
-    return bytes + "B";
-  }
-  if (bytes < 1e6) {
-    return truncateDecimalZeroes((bytes / 1e3).toPrecision(4)) + "KB";
-  }
-  if (bytes < 1e9) {
-    return truncateDecimalZeroes((bytes / 1e6).toPrecision(4)) + "MB";
-  }
-  if (bytes < 1e12) {
-    return truncateDecimalZeroes((bytes / 1e9).toPrecision(4)) + "GB";
+  bytes = Number(bytes);
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  for (const [i, unit] of units.entries()) {
+    if (bytes < Math.pow(1000, i + 1) || i === units.length - 1) {
+      return truncateDecimalZeroes((bytes / Math.pow(1000, i)).toPrecision(4)) + unit;
+    }
   }
-  if (bytes < 1e15) {
-    return truncateDecimalZeroes((bytes / 1e12).toPrecision(4)) + "TB";
+  throw new Error("unreachable code");
+}
+
+export function bytesIEC(bytes: number | Long) {
+  bytes = Number(bytes);
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+  for (const [i, unit] of units.entries()) {
+    if (bytes < Math.pow(1024, i + 1) || i === units.length - 1) {
+      return truncateDecimalZeroes((bytes / Math.pow(1024, i)).toPrecision(4)) + unit;
+    }
   }
-  return truncateDecimalZeroes((bytes / 1e15).toPrecision(4)) + "PB";
+  throw new Error("unreachable code");
 }
 
 export function bitsPerSecond(bitsPerSecond: number | Long) {
@@ -420,6 +422,7 @@ export default {
   sentenceCase,
   percent,
   bytes,
+  bytesIEC,
   bitsPerSecond,
   count,
   truncateList,

app/format/format_test.ts

@@ -124,6 +124,16 @@ describe("bytes", () => {
   });
 });
 
+describe("bytesIEC", () => {
+  it("should abbreviate large numbers", () => {
+    expect(format.bytesIEC(0)).toEqual("0B");
+    expect(format.bytesIEC(1)).toEqual("1B");
+    expect(format.bytesIEC(1023)).toEqual("1023B");
+    expect(format.bytesIEC(1024)).toEqual("1KB");
+    expect(format.bytesIEC(1024 + 512)).toEqual("1.5KB");
+  });
+});
+
 describe("count", () => {
   it("should abbreviate large numbers", () => {
     expect(format.count(0)).toEqual("0");

app/invocation/invocation_action_card.tsx

@@ -936,26 +936,27 @@ export default class InvocationActionCardComponent extends React.Component<Props
       <>
         <div className="metadata-title">Resource usage</div>
         <div>
-          <div>Peak memory: {format.bytes(usageStats.peakMemoryBytes)}</div>
+          <div>Peak memory: {format.bytesIEC(usageStats.peakMemoryBytes)}</div>
           <div>MilliCPU: {computeMilliCpu(this.state.actionResult!)}</div>
           {usageStats.peakFileSystemUsage?.map((fs) => (
             <div>
-              Peak disk usage: {fs.target} ({fs.fstype}): {format.bytes(fs.usedBytes)} of {format.bytes(fs.totalBytes)}
+              Peak disk usage: {fs.target} ({fs.fstype}): {format.bytesIEC(fs.usedBytes)} of{" "}
+              {format.bytesIEC(fs.totalBytes)}
             </div>
           ))}
           {usageStats.cgroupIoStats && (
             <>
-              <div>Disk bytes read: {format.bytes(usageStats.cgroupIoStats.rbytes)}</div>
+              <div>Disk bytes read: {format.bytesIEC(usageStats.cgroupIoStats.rbytes)}</div>
               <div>Disk read operations: {format.count(usageStats.cgroupIoStats.rios)}</div>
-              <div>Disk bytes written: {format.bytes(usageStats.cgroupIoStats.wbytes)}</div>
+              <div>Disk bytes written: {format.bytesIEC(usageStats.cgroupIoStats.wbytes)}</div>
               <div>Disk write operations: {format.count(usageStats.cgroupIoStats.wios)}</div>
             </>
           )}
           {usageStats.networkStats && (
             <>
-              <div>Network bytes received: {format.bytes(usageStats.networkStats.bytesReceived)}</div>
+              <div>Network bytes received: {format.bytesIEC(usageStats.networkStats.bytesReceived)}</div>
               <div>Network packets received: {format.count(usageStats.networkStats.packetsReceived)}</div>
-              <div>Network bytes sent: {format.bytes(usageStats.networkStats.bytesSent)}</div>
+              <div>Network bytes sent: {format.bytesIEC(usageStats.networkStats.bytesSent)}</div>
               <div>Network packets sent: {format.count(usageStats.networkStats.packetsSent)}</div>
             </>
           )}
@@ -1334,7 +1335,7 @@ export default class InvocationActionCardComponent extends React.Component<Props
                                 <div>
                                   <div>
                                     Peak memory:{" "}
-                                    {format.bytes(
+                                    {format.bytesIEC(
                                       this.state.actionResult.executionMetadata.estimatedTaskSize.estimatedMemoryBytes
                                     )}
                                   </div>