From 70ad86534d5a58b6c40f4624372c7db31d13ede5 Mon Sep 17 00:00:00 2001
From: Benedict Aas <x+g@shou.io>
Date: Tue, 1 Aug 2017 22:34:13 +0100
Subject: [PATCH] feat(GUI): make size units closest relative (#1539)

We make the size units used the closest relative unit through a new
filter `closestUnit` replacing the old `gigabyte` filter.

Changelog-Entry: Round byte sizes to the more appropriate unit.

* remove filters folder

* new shrinkwrap, add to package.json

* test
---
 .../templates/drive-selector-modal.tpl.html   |  2 +-
 lib/gui/pages/main/templates/main.tpl.html    |  4 +-
 lib/gui/utils/byte-size/byte-size.js          |  2 +-
 .../{filters/gigabyte.js => filter.js}        | 10 ++--
 lib/shared/units.js                           | 48 +++++++++----------
 npm-shrinkwrap.json                           | 46 ++++++------------
 package.json                                  |  1 +
 tests/gui/utils/byte-size.spec.js             | 10 ++--
 tests/shared/units.spec.js                    | 35 ++++++++++++--
 9 files changed, 85 insertions(+), 73 deletions(-)
 rename lib/gui/utils/byte-size/{filters/gigabyte.js => filter.js} (76%)

diff --git a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
index 35d4e965..5a741966 100644
--- a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -11,7 +11,7 @@
       ng-click="modal.toggleDrive(drive)">
         <div>
           <h4 class="list-group-item-heading">{{ drive.description }} -
-            <span class="word-keep">{{ drive.size | gigabyte | number:1 }} GB</span>
+            <span class="word-keep">{{ drive.size | closestUnit }}</span>
           </h4>
           <p class="list-group-item-text">{{ drive.displayName }}</p>
 
diff --git a/lib/gui/pages/main/templates/main.tpl.html b/lib/gui/pages/main/templates/main.tpl.html
index a1b9de54..24908deb 100644
--- a/lib/gui/pages/main/templates/main.tpl.html
+++ b/lib/gui/pages/main/templates/main.tpl.html
@@ -25,7 +25,7 @@
               class="step-image step-name"
               ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipses:20"
               uib-tooltip="{{ image.getImageBasename() }}"></span>
-            <span class="step-image step-size">{{ main.selection.getImageSize() | gigabyte | number:1 }} GB</span>
+            <span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
           </div>
 
           <button class="button button-link step-footer"
@@ -67,7 +67,7 @@
               <!-- middleEllipses errors on undefined, therefore fallback to empty string -->
               {{ (main.selection.getDrive().description || "") | middleEllipses:11 }}
             </span>
-            <span class="step-drive step-size">{{ main.selection.getDrive().size | gigabyte | number:1 }} GB</span>
+            <span class="step-drive step-size">{{ main.selection.getDrive().size | closestUnit }}</span>
           </div>
           <button class="button button-link step-footer"
             ng-click="drive.reselectDrive()"
diff --git a/lib/gui/utils/byte-size/byte-size.js b/lib/gui/utils/byte-size/byte-size.js
index f85153fa..f719ee70 100644
--- a/lib/gui/utils/byte-size/byte-size.js
+++ b/lib/gui/utils/byte-size/byte-size.js
@@ -29,7 +29,7 @@ const ByteSize = angular.module(MODULE_NAME, []);
 
 /* eslint-disable lodash/prefer-lodash-method */
 
-ByteSize.filter('gigabyte', require('./filters/gigabyte'));
+ByteSize.filter('closestUnit', require('./filter.js'));
 
 /* eslint-enable lodash/prefer-lodash-method */
 
diff --git a/lib/gui/utils/byte-size/filters/gigabyte.js b/lib/gui/utils/byte-size/filter.js
similarity index 76%
rename from lib/gui/utils/byte-size/filters/gigabyte.js
rename to lib/gui/utils/byte-size/filter.js
index fd1551c3..df162bca 100644
--- a/lib/gui/utils/byte-size/filters/gigabyte.js
+++ b/lib/gui/utils/byte-size/filter.js
@@ -16,21 +16,21 @@
 
 'use strict';
 
-const units = require('../../../../shared/units');
+const units = require('../../../shared/units');
 
 module.exports = () => {
 
   /**
-   * @summary Convert bytes to gigabytes
+   * @summary Convert bytes to the closest unit
    * @function
    * @public
    *
    * @param {Number} bytes - bytes
-   * @returns {Number} gigabytes
+   * @returns {String} formatted string containing size and unit
    *
    * @example
-   * {{ 7801405440 | gigabytes }}
+   * {{ 7801405440 | closestUnit }}
    */
-  return units.bytesToGigabytes;
+  return units.bytesToClosestUnit;
 
 };
diff --git a/lib/shared/units.js b/lib/shared/units.js
index 12a2dae9..8460b36e 100644
--- a/lib/shared/units.js
+++ b/lib/shared/units.js
@@ -16,16 +16,9 @@
 
 'use strict';
 
-/**
- * @summary Gigabyte to byte ratio
- * @constant
- * @private
- * @type {Number}
- *
- * @description
- * 1 GB = 1e+9 B
- */
-const GIGABYTE_TO_BYTE_RATIO = 1e+9;
+const _ = require('lodash');
+
+const prettyBytes = require('pretty-bytes');
 
 /**
  * @summary Megabyte to byte ratio
@@ -49,21 +42,6 @@ const MEGABYTE_TO_BYTE_RATIO = 1e+6;
  */
 const MILLISECONDS_IN_A_DAY = 86400000;
 
-/**
- * @summary Convert bytes to gigabytes
- * @function
- * @public
- *
- * @param {Number} bytes - bytes
- * @returns {Number} gigabytes
- *
- * @example
- * const result = units.bytesToGigabytes(7801405440);
- */
-exports.bytesToGigabytes = (bytes) => {
-  return bytes / GIGABYTE_TO_BYTE_RATIO;
-};
-
 /**
  * @summary Convert bytes to megabytes
  * @function
@@ -79,6 +57,26 @@ exports.bytesToMegabytes = (bytes) => {
   return bytes / MEGABYTE_TO_BYTE_RATIO;
 };
 
+/**
+ * @summary Convert bytes to most appropriate unit string
+ * @function
+ * @public
+ *
+ * @param {Number} bytes - bytes
+ * @returns {String} size and unit string
+ *
+ * @example
+ * const humanReadable = units.bytesToClosestUnit(7801405440);
+ * > '7.8 GB'
+ */
+exports.bytesToClosestUnit = (bytes) => {
+  if (_.isNumber(bytes)) {
+    return prettyBytes(bytes);
+  }
+
+  return null;
+};
+
 /**
  * @summary Convert days to milliseconds
  * @function
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 8c7b927d..18db2ec2 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -277,8 +277,7 @@
     "array-find-index": {
       "version": "1.0.2",
       "from": "array-find-index@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz"
     },
     "array-slice": {
       "version": "0.2.3",
@@ -681,13 +680,11 @@
       "version": "2.1.0",
       "from": "camelcase-keys@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "camelcase": {
           "version": "2.1.1",
           "from": "camelcase@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz"
         }
       }
     },
@@ -1046,8 +1043,7 @@
     "currently-unhandled": {
       "version": "0.4.1",
       "from": "currently-unhandled@>=0.4.1 <0.5.0",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz"
     },
     "cwd": {
       "version": "0.9.1",
@@ -2508,8 +2504,7 @@
     "get-stdin": {
       "version": "4.0.1",
       "from": "get-stdin@>=4.0.1 <5.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz"
     },
     "get-stream": {
       "version": "3.0.0",
@@ -2904,8 +2899,7 @@
     "indent-string": {
       "version": "2.1.0",
       "from": "indent-string@>=2.1.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz"
     },
     "index-of": {
       "version": "0.2.0",
@@ -3087,8 +3081,7 @@
     "is-finite": {
       "version": "1.0.2",
       "from": "is-finite@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz"
     },
     "is-fullwidth-code-point": {
       "version": "1.0.0",
@@ -3637,8 +3630,7 @@
     "loud-rejection": {
       "version": "1.6.0",
       "from": "loud-rejection@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz"
     },
     "lowercase-keys": {
       "version": "1.0.0",
@@ -4295,8 +4287,7 @@
     "map-obj": {
       "version": "1.0.1",
       "from": "map-obj@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
     },
     "markdown": {
       "version": "0.5.0",
@@ -4331,8 +4322,7 @@
     "meow": {
       "version": "3.7.0",
       "from": "meow@>=3.7.0 <4.0.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz"
     },
     "merge": {
       "version": "1.2.0",
@@ -4382,8 +4372,7 @@
     "minimist": {
       "version": "1.2.0",
       "from": "minimist@>=1.1.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
     },
     "mixin-deep": {
       "version": "1.2.0",
@@ -8315,8 +8304,7 @@
     "pretty-bytes": {
       "version": "1.0.4",
       "from": "pretty-bytes@1.0.4",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-1.0.4.tgz"
     },
     "private": {
       "version": "0.1.7",
@@ -8514,8 +8502,7 @@
     "redent": {
       "version": "1.0.0",
       "from": "redent@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz"
     },
     "reduce-component": {
       "version": "1.0.1",
@@ -8633,8 +8620,7 @@
     "repeating": {
       "version": "2.0.1",
       "from": "repeating@>=2.0.0 <3.0.0",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz"
     },
     "replace-ext": {
       "version": "0.0.1",
@@ -9305,8 +9291,7 @@
     "strip-indent": {
       "version": "1.0.1",
       "from": "strip-indent@>=1.0.1 <2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz"
     },
     "strip-json-comments": {
       "version": "2.0.1",
@@ -9585,8 +9570,7 @@
     "trim-newlines": {
       "version": "1.0.0",
       "from": "trim-newlines@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz"
     },
     "truncate-utf8-bytes": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index 5fb2a69d..93efad6c 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "node-ipc": "8.9.2",
     "node-stream-zip": "1.3.4",
     "path-is-inside": "1.0.2",
+    "pretty-bytes": "1.0.4",
     "prop-types": "15.5.9",
     "react": "15.5.4",
     "react-dom": "15.5.4",
diff --git a/tests/gui/utils/byte-size.spec.js b/tests/gui/utils/byte-size.spec.js
index b7ec5fd7..d3309ba4 100644
--- a/tests/gui/utils/byte-size.spec.js
+++ b/tests/gui/utils/byte-size.spec.js
@@ -11,16 +11,16 @@ describe('Browser: ByteSize', function() {
     require('../../../lib/gui/utils/byte-size/byte-size')
   ));
 
-  describe('GigabyteFilter', function() {
+  describe('ClosestUnitFilter', function() {
 
-    let gigabyteFilter;
+    let closestUnitFilter;
 
-    beforeEach(angular.mock.inject(function(_gigabyteFilter_) {
-      gigabyteFilter = _gigabyteFilter_;
+    beforeEach(angular.mock.inject(function(_closestUnitFilter_) {
+      closestUnitFilter = _closestUnitFilter_;
     }));
 
     it('should expose lib/shared/units.js bytesToGigabytes()', function() {
-      m.chai.expect(gigabyteFilter).to.equal(units.bytesToGigabytes);
+      m.chai.expect(closestUnitFilter).to.equal(units.bytesToClosestUnit);
     });
 
   });
diff --git a/tests/shared/units.spec.js b/tests/shared/units.spec.js
index 452f7a24..7d71ed0f 100644
--- a/tests/shared/units.spec.js
+++ b/tests/shared/units.spec.js
@@ -21,13 +21,42 @@ const units = require('../../lib/shared/units');
 
 describe('Shared: Units', function() {
 
-  describe('.bytesToGigabytes()', function() {
+  describe('.bytesToClosestUnit()', function() {
+
+    it('should convert bytes to terabytes', function() {
+      m.chai.expect(units.bytesToClosestUnit(1000000000000)).to.equal('1 TB');
+      m.chai.expect(units.bytesToClosestUnit(2987801405440)).to.equal('2.99 TB');
+      m.chai.expect(units.bytesToClosestUnit(999900000000000)).to.equal('999.9 TB');
+    });
 
     it('should convert bytes to gigabytes', function() {
-      m.chai.expect(units.bytesToGigabytes(7801405440)).to.equal(7.80140544);
-      m.chai.expect(units.bytesToGigabytes(100000000)).to.equal(0.1);
+      m.chai.expect(units.bytesToClosestUnit(1000000000)).to.equal('1 GB');
+      m.chai.expect(units.bytesToClosestUnit(7801405440)).to.equal('7.8 GB');
+      m.chai.expect(units.bytesToClosestUnit(999900000000)).to.equal('999.9 GB');
     });
 
+    it('should convert bytes to megabytes', function() {
+      m.chai.expect(units.bytesToClosestUnit(1000000)).to.equal('1 MB');
+      m.chai.expect(units.bytesToClosestUnit(801405440)).to.equal('801.41 MB');
+      m.chai.expect(units.bytesToClosestUnit(999900000)).to.equal('999.9 MB');
+    });
+
+    it('should convert bytes to kilobytes', function() {
+      m.chai.expect(units.bytesToClosestUnit(1000)).to.equal('1 kB');
+      m.chai.expect(units.bytesToClosestUnit(5440)).to.equal('5.44 kB');
+      m.chai.expect(units.bytesToClosestUnit(999900)).to.equal('999.9 kB');
+    });
+
+    it('should keep bytes as bytes', function() {
+      m.chai.expect(units.bytesToClosestUnit(1)).to.equal('1 B');
+      m.chai.expect(units.bytesToClosestUnit(8)).to.equal('8 B');
+      m.chai.expect(units.bytesToClosestUnit(999)).to.equal('999 B');
+    });
+
+  });
+
+  describe('.bytesToMegabytes()', function() {
+
     it('should convert bytes to megabytes', function() {
       m.chai.expect(units.bytesToMegabytes(1.2e+7)).to.equal(12);
       m.chai.expect(units.bytesToMegabytes(332000)).to.equal(0.332);