Merge pull request #3827 from RedisInsight/feature/fe/overview-dynamic-units

Dynamically show multiple byte formats

Author: vlad-dargel

redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx

@@ -119,16 +119,21 @@ export const getOverviewMetrics = ({ theme, items, db = 0 }: Props): Array<IMetr
     },
   }
 
-  const networkInKbpsItem = {
+  let [networkIn, networkInUnit] = formatBytes(networkInKbps * 1000, 3, true, 1000)
+  networkInUnit = networkInUnit ? `${networkInUnit.toLowerCase()}/s` : ''
+  let [networkOut, networkOutUnit] = formatBytes(networkOutKbps * 1000, 3, true, 1000)
+  networkOutUnit = networkOutUnit ? `${networkOutUnit.toLowerCase()}/s` : ''
+
+  const networkInItem = {
     id: 'network-input',
     groupId: opsPerSecItem.id,
     title: 'Network Input',
     icon: theme === Theme.Dark ? InputDarkIcon : InputLightIcon,
-    value: networkInKbps,
+    value: networkIn,
     content: (
       <>
-        <b>{networkInKbps}</b>
-        &nbsp;kb/s
+        <b>{networkIn}</b>
+        &nbsp;{networkInUnit}
       </>
     ),
     unavailableText: 'Network Input is not available',
@@ -137,23 +142,23 @@ export const getOverviewMetrics = ({ theme, items, db = 0 }: Props): Array<IMetr
       icon: theme === Theme.Dark ? InputDarkIcon : InputLightIcon,
       content: (
         <>
-          <b>{networkInKbps}</b>
-          &nbsp;kb/s
+          <b>{networkIn}</b>
+          &nbsp;{networkInUnit}
         </>
       ),
     },
   }
 
-  const networkOutKbpsItem = {
+  const networkOutItem = {
     id: 'network-output-tip',
     groupId: opsPerSecItem.id,
     title: 'Network Output',
     icon: theme === Theme.Dark ? OutputDarkIcon : OutputLightIcon,
-    value: networkOutKbps,
+    value: networkOut,
     content: (
       <>
-        <b>{networkOutKbps}</b>
-        &nbsp;kb/s
+        <b>{networkOut}</b>
+        &nbsp;{networkOutUnit}
       </>
     ),
     unavailableText: 'Network Output is not available',
@@ -162,8 +167,8 @@ export const getOverviewMetrics = ({ theme, items, db = 0 }: Props): Array<IMetr
       icon: theme === Theme.Dark ? OutputDarkIcon : OutputLightIcon,
       content: (
         <>
-          <b>{networkOutKbps}</b>
-          &nbsp;kb/s
+          <b>{networkOut}</b>
+          &nbsp;{networkOutUnit}
         </>
       ),
     },
@@ -179,8 +184,8 @@ export const getOverviewMetrics = ({ theme, items, db = 0 }: Props): Array<IMetr
         content: opsPerSecond,
         unavailableText: 'Commands/s are not available',
       },
-      networkInKbpsItem,
-      networkOutKbpsItem
+      networkInItem,
+      networkOutItem
     ]
   }
 

redisinsight/ui/src/utils/tests/transformers/formatBytes.spec.ts

@@ -46,6 +46,12 @@ describe('formatBytes', () => {
   it('should return proper array with splitResults', () => {
     expect(formatBytes(1572864, 0, true)).toEqual([2, 'MB'])
     expect(formatBytes(1347545989, 3, true)).toEqual([1.255, 'GB'])
+    expect(formatBytes(0, 3, true)).toEqual([0, 'B'])
+  })
+
+  it('should properly set the baseK', () => {
+    expect(formatBytes(1347545989, 3, true)).toEqual([1.255, 'GB']) // default uses 1024
+    expect(formatBytes(1347545989, 3, true, 1000)).toEqual([1.348, 'GB'])
   })
 })
 

redisinsight/ui/src/utils/transformers/formatBytes.ts

@@ -3,14 +3,15 @@ const SIZES = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
 export const formatBytes = (
   input: number,
   decimals: number = 3,
-  splitResult: boolean = false
+  splitResult: boolean = false,
+  baseK = 1024,
 ): string | [number, string] => {
   try {
     const bytes = parseFloat(String(input))
-    const k = 1024
+    const k = baseK
     const dm = decimals < 0 ? 0 : decimals
     if (Number.isNaN(bytes) || bytes < 0) return '-'
-    if (bytes === 0) return `0 ${SIZES[0]}`
+    if (bytes === 0) return splitResult ? [0, SIZES[0]] : `0 ${SIZES[0]}`
 
     const i = Math.floor(Math.log(bytes) / Math.log(k))
     const sizeIndex = Math.min(i, SIZES.length - 1)