Formats bytes to human reabale number in registry table

app/assets/javascripts/lib/utils/number_utils.js

@@ -52,3 +52,31 @@ export function bytesToKiB(number) {
 export function bytesToMiB(number) {
   return number / (BYTES_IN_KIB * BYTES_IN_KIB);
 }
+
+/**
+ * Utility function that calculates GiB of the given bytes.
+ * @param {Number} number
+ * @returns {Number}
+ */
+export function bytesToGiB(number) {
+  return number / (BYTES_IN_KIB * BYTES_IN_KIB * BYTES_IN_KIB);
+}
+
+/**
+ * Port of rails number_to_human_size
+ * Formats the bytes in number into a more understandable
+ * representation (e.g., giving it 1500 yields 1.5 KB).
+ *
+ * @param {Number} size
+ * @returns {String}
+ */
+export function numberToHumanSize(size) {
+  if (size < BYTES_IN_KIB) {
+    return `${size} bytes`;
+  } else if (size < BYTES_IN_KIB * BYTES_IN_KIB) {
+    return `${bytesToKiB(size).toFixed(2)} KiB`;
+  } else if (size < BYTES_IN_KIB * BYTES_IN_KIB * BYTES_IN_KIB) {
+    return `${bytesToMiB(size).toFixed(2)} MiB`;
+  }
+  return `${bytesToGiB(size).toFixed(2)} GiB`;
+}

app/assets/javascripts/registry/components/table_registry.vue

@@ -8,6 +8,7 @@
   import tooltip from '../../vue_shared/directives/tooltip';
   import timeagoMixin from '../../vue_shared/mixins/timeago';
   import { errorMessages, errorMessagesTypes } from '../constants';
+  import { numberToHumanSize } from '../../lib/utils/number_utils';
 
   export default {
     props: {
@@ -41,6 +42,10 @@
         return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
       },
 
+      formatSize(size) {
+        return numberToHumanSize(size);
+      },
+
       handleDeleteRegistry(registry) {
         this.deleteRegistry(registry)
           .then(() => this.fetchList({ repo: this.repo }))
@@ -97,7 +102,7 @@
             </span>
         </td>
         <td>
-          {{item.size}}
+          {{formatSize(item.size)}}
           <template v-if="item.size && item.layers">
             &middot;
           </template>

changelogs/unreleased/40092-fix-cluster-size.yml

+---
+title: Formats bytes to human reabale number in registry table
+merge_request:
+author:
+type: fixed

spec/javascripts/lib/utils/number_utility_spec.js

-import { formatRelevantDigits, bytesToKiB, bytesToMiB } from '~/lib/utils/number_utils';
+import { formatRelevantDigits, bytesToKiB, bytesToMiB, bytesToGiB, numberToHumanSize } from '~/lib/utils/number_utils';
 
 describe('Number Utils', () => {
   describe('formatRelevantDigits', () => {
@@ -52,4 +52,29 @@ describe('Number Utils', () => {
       expect(bytesToMiB(1000000)).toEqual(0.95367431640625);
     });
   });
+
+  describe('bytesToGiB', () => {
+    it('calculates GiB for the given bytes', () => {
+      expect(bytesToGiB(1073741824)).toEqual(1);
+      expect(bytesToGiB(10737418240)).toEqual(10);
+    });
+  });
+
+  describe('numberToHumanSize', () => {
+    it('should return bytes', () => {
+      expect(numberToHumanSize(654)).toEqual('654 bytes');
+    });
+
+    it('should return KiB', () => {
+      expect(numberToHumanSize(1079)).toEqual('1.05 KiB');
+    });
+
+    it('should return MiB', () => {
+      expect(numberToHumanSize(10485764)).toEqual('10.00 MiB');
+    });
+
+    it('should return GiB', () => {
+      expect(numberToHumanSize(10737418240)).toEqual('10.00 GiB');
+    });
+  });
 });