Align byte units to tectonic ones. (#338)

Author: rawagner

src/components/ClusterOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap

@@ -45,7 +45,7 @@ exports[`<Capacity /> renders correctly 1`] = `
           Memory
         </h3>
         <h6>
-          1.0 MiB available out of 1 MiB
+          1.0 Mi available out of 1 Mi
         </h6>
         <div>
           <div

src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap

@@ -62,7 +62,7 @@ exports[`<Utilization /> renders correctly 1`] = `
           <div
             class="kubevirt-utilization__item-actual col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
-            30 KiB
+            30 Ki
           </div>
         </div>
         <div

src/utils/tests/utils.test.js

@@ -3,21 +3,21 @@ import { formatBytes, formatCores, formatNetTraffic } from '../utils';
 describe('unit format functions', () => {
   it('formats bytes', () => {
     expect(formatBytes(2)).toEqual({ value: 2, unit: 'B' });
-    expect(formatBytes(3 * 1024)).toEqual({ value: 3, unit: 'KiB' });
-    expect(formatBytes(3 * 1024 ** 2)).toEqual({ value: 3, unit: 'MiB' });
-    expect(formatBytes(3 * 1024 ** 3)).toEqual({ value: 3, unit: 'GiB' });
-    expect(formatBytes(3 * 1024 ** 4)).toEqual({ value: 3, unit: 'TiB' });
-    expect(formatBytes(3 * 1024 ** 5)).toEqual({ value: 3, unit: 'PiB' });
-    expect(formatBytes(3 * 1024 ** 6)).toEqual({ value: 3 * 1024, unit: 'PiB' });
-    expect(formatBytes(3 * 1024 ** 7)).toEqual({ value: 3 * 1024 ** 2, unit: 'PiB' });
+    expect(formatBytes(3 * 1024)).toEqual({ value: 3, unit: 'Ki' });
+    expect(formatBytes(3 * 1024 ** 2)).toEqual({ value: 3, unit: 'Mi' });
+    expect(formatBytes(3 * 1024 ** 3)).toEqual({ value: 3, unit: 'Gi' });
+    expect(formatBytes(3 * 1024 ** 4)).toEqual({ value: 3, unit: 'Ti' });
+    expect(formatBytes(3 * 1024 ** 5)).toEqual({ value: 3, unit: 'Pi' });
+    expect(formatBytes(3 * 1024 ** 6)).toEqual({ value: 3 * 1024, unit: 'Pi' });
+    expect(formatBytes(3 * 1024 ** 7)).toEqual({ value: 3 * 1024 ** 2, unit: 'Pi' });
   });
   it('formats bytes in preferred units', () => {
-    expect(formatBytes(3 * 1024 * 1024, 'KiB')).toEqual({ value: 3 * 1024, unit: 'KiB' });
+    expect(formatBytes(3 * 1024 * 1024, 'Ki')).toEqual({ value: 3 * 1024, unit: 'Ki' });
   });
   it('formats cores', () => {
     expect(formatCores(2)).toEqual({ value: 2, unit: 'cores' });
   });
   it('formats net traffic', () => {
-    expect(formatNetTraffic(3 * 1024 * 1024)).toEqual({ value: 3, unit: 'MiBps' });
+    expect(formatNetTraffic(3 * 1000 * 1000)).toEqual({ value: 3, unit: 'MBps' });
   });
 });

src/utils/utils.js

@@ -82,30 +82,42 @@ export const getResource = (
   return res;
 };
 
-const BYTE_UNITS = {
-  B: 0,
-  KiB: 1,
-  MiB: 2,
-  GiB: 3,
-  TiB: 4,
-  PiB: 5,
+const BYTE_UNITS_CONFIG = {
+  conversion: 1024,
+  units: {
+    B: 0,
+    Ki: 1,
+    Mi: 2,
+    Gi: 3,
+    Ti: 4,
+    Pi: 5,
+  },
 };
 
-export const formatBytes = (bytes, unit, fixed = 2) => {
-  unit = unit || Object.keys(BYTE_UNITS).find(key => bytes < 1024 ** (BYTE_UNITS[key] + 1)) || 'PiB';
-  return { value: Number((bytes / 1024 ** BYTE_UNITS[unit]).toFixed(fixed)), unit };
+const NETWORK_BYTE_UNITS_CONFIG = {
+  conversion: 1000,
+  units: {
+    Bps: 0,
+    KBps: 1,
+    MBps: 2,
+    GBps: 3,
+    TBps: 4,
+    PBps: 5,
+  },
+};
+
+export const formatBytes = (bytes, unit, fixed = 2, conversionConfig = BYTE_UNITS_CONFIG) => {
+  const { units, conversion } = conversionConfig;
+  const unitKeys = Object.keys(units);
+  unit = unit || unitKeys.find(key => bytes < conversion ** (units[key] + 1)) || unitKeys[unitKeys.length - 1];
+  return { value: Number((bytes / conversion ** units[unit]).toFixed(fixed)), unit };
 };
 
 export const formatCores = cores => ({ value: cores, unit: 'cores' });
 export const formatPercents = percents => ({ value: percents, unit: '%' });
 
-export const formatNetTraffic = (bytesPerSecond, preferredUnit, fixed = 2) => {
-  preferredUnit =
-    preferredUnit && preferredUnit.endsWith('ps') ? preferredUnit.slice(0, preferredUnit.length - 2) : preferredUnit;
-  const formatted = formatBytes(bytesPerSecond, preferredUnit, fixed);
-  formatted.unit = `${formatted.unit}ps`;
-  return formatted;
-};
+export const formatNetTraffic = (bytesPerSecond, preferredUnit, fixed = 2) =>
+  formatBytes(bytesPerSecond, preferredUnit, fixed, NETWORK_BYTE_UNITS_CONFIG);
 
 export const getNetworkBindings = networkType => {
   switch (networkType) {