Feat - ICU 8234 helper format-bytes-size (#170)

* feat: 🎸 Add format-bytes-size helper

addons/core/addon/helpers/format-bytes-size.js

@@ -0,0 +1,12 @@
+import { helper } from '@ember/component/helper';
+import filesize from 'file-size';
+
+/**
+ * Takes a int expressing file size in bytes and returns a conversion
+ * into a human-readable string.
+ * "e.g. {{format-bytes-size 164730000}} // 164,73 MB"
+ */
+export default helper(function formatBytesSize([sizeInBytes]) {
+  const numberOfBytes = Number(sizeInBytes);
+  return filesize(numberOfBytes).human('si');
+});

addons/core/app/helpers/format-bytes-size.js

@@ -0,0 +1 @@
+export { default } from 'core/helpers/format-bytes-size';

addons/core/package.json

@@ -41,6 +41,7 @@
     "ember-intl": "^6.0.0-beta.4",
     "ember-loading": "^2.0.0",
     "ember-truth-helpers": "^3.0.0",
+    "file-size": "^1.0.0",
     "intl-unofficial-duration-unit-format": "^3.1.0"
   },
   "devDependencies": {

addons/core/tests/integration/helpers/format-bytes-size-test.js

@@ -0,0 +1,92 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | format-bytes-size', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders file size in human-readable string', async function (assert) {
+    assert.expect(16);
+    // Size to kB
+    const expectedSizeKb = '108.93 kB';
+    this.set('inputNumberSizeKb', 108930);
+    this.set('inputStringSizeKb', '108930');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeKb}}`);
+    assert.dom(this.element).hasText(expectedSizeKb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeKb}}`);
+    assert.dom(this.element).hasText(expectedSizeKb);
+
+    // Size to MB
+    const expectedSizeMb = '164.73 MB';
+    this.set('inputNumberSizeMb', 164730000);
+    this.set('inputStringSizeMb', '164730000');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeMb}}`);
+    assert.dom(this.element).hasText(expectedSizeMb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeMb}}`);
+    assert.dom(this.element).hasText(expectedSizeMb);
+
+    // Size to GB
+    const expectedSizeGb = '2.15 GB';
+    this.set('inputNumberSizeGb', 2147483647);
+    this.set('inputStringSizeGb', '2147483647');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeGb}}`);
+    assert.dom(this.element).hasText(expectedSizeGb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeGb}}`);
+    assert.dom(this.element).hasText(expectedSizeGb);
+
+    // Size to TB
+    const expectedSizeTb = '12.37 TB';
+    this.set('inputNumberSizeTb', 12370000000000);
+    this.set('inputStringSizeTb', '12370000000000');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeTb}}`);
+    assert.dom(this.element).hasText(expectedSizeTb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeTb}}`);
+    assert.dom(this.element).hasText(expectedSizeTb);
+
+    // Size to PB
+    const expectedSizePb = '9.01 PB';
+    this.set('inputNumberSizePb', 9007199254740991);
+    this.set('inputStringSizePb', '9007199254740991');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizePb}}`);
+    assert.dom(this.element).hasText(expectedSizePb);
+    await render(hbs`{{format-bytes-size this.inputStringSizePb}}`);
+    assert.dom(this.element).hasText(expectedSizePb);
+
+    /* eslint-disable no-loss-of-precision */
+    // Size to EB
+    const expectedSizeEb = '1.24 EB';
+    this.set('inputNumberSizeEb', 1237000000000000000);
+    this.set('inputStringSizeEb', '1237000000000000000');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeEb}}`);
+    assert.dom(this.element).hasText(expectedSizeEb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeEb}}`);
+    assert.dom(this.element).hasText(expectedSizeEb);
+
+    // Size to ZB
+    const expectedSizeZb = '900.72 ZB';
+    this.set('inputNumberSizeZb', 900719985474899195498367);
+    this.set('inputStringSizeZb', '900719985474899195498367');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeZb}}`);
+    assert.dom(this.element).hasText(expectedSizeZb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeZb}}`);
+    assert.dom(this.element).hasText(expectedSizeZb);
+
+    // Size to YB
+    const expectedSizeYb = '90.07 YB';
+    this.set('inputNumberSizeYb', 90071992547409919549836723);
+    this.set('inputStringSizeYb', '90071992547409919549836723');
+
+    await render(hbs`{{format-bytes-size this.inputNumberSizeYb}}`);
+    assert.dom(this.element).hasText(expectedSizeYb);
+    await render(hbs`{{format-bytes-size this.inputStringSizeYb}}`);
+    assert.dom(this.element).hasText(expectedSizeYb);
+  });
+});

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs

@@ -46,13 +46,13 @@
           {{! Bytes up }}
           <p>
             <FlightIcon @name='arrow-up' />
-            {{@model.channelRecording.bytes_up}}
+            {{format-bytes-size @model.channelRecording.bytes_up}}
           </p>
 
           {{! Bytes down }}
           <p>
             <FlightIcon @name='arrow-down' />
-            {{@model.channelRecording.bytes_down}}
+            {{format-bytes-size @model.channelRecording.bytes_down}}
           </p>
 
           {{! Errors }}

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs

@@ -53,9 +53,9 @@
                   </B.Td>
                   <B.Td>
                     <span><FlightIcon @name='arrow-up' /></span>
-                    <span>{{B.data.bytes_up}}</span>
+                    <span>{{format-bytes-size B.data.bytes_up}}</span>
                     <span><FlightIcon @name='arrow-down' /></span>
-                    <span>{{B.data.bytes_down}}</span>
+                    <span>{{format-bytes-size B.data.bytes_down}}</span>
                     <span
                       class='session-recording-list-cell-item hds-foreground-faint'
                     >
@@ -96,13 +96,13 @@
             {{! Bytes up }}
             <p>
               <FlightIcon @name='arrow-up' />
-              {{@model.sessionRecording.bytes_up}}
+              {{format-bytes-size @model.sessionRecording.bytes_up}}
             </p>
 
             {{! Bytes down }}
             <p>
               <FlightIcon @name='arrow-down' />
-              {{@model.sessionRecording.bytes_down}}
+              {{format-bytes-size @model.sessionRecording.bytes_down}}
             </p>
           </div>
           {{! Related }}