Merge branch '40092-fix-cluster-size' into 'master'

Formats bytes to human readable number in registry table

See merge request gitlab-org/gitlab-ce!15359

2 files changed, 34 insertions, 1 deletions

diff --git a/app/assets/javascripts/lib/utils/number_utils.js b/app/assets/javascripts/lib/utils/number_utils.js
index 917a45eb06b..a02c79b787e 100644
--- a/app/assets/javascripts/lib/utils/number_utils.js
+++ b/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`;
+}
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index e917279947e..14d43e135fe 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/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>