fix(general): fix the size display using the filesize library (portai…

…ner#246) * fix(general): fix the size display using the filesize library * refactor(humansize): use default value for filter
nexus · Oct 1, 2016 · 739a5ec · 739a5ec
1 parent 59e6522
commit 739a5ec
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 40 deletions.
diff --git a/app/components/dashboard/dashboard.html b/app/components/dashboard/dashboard.html
@@ -53,7 +53,7 @@
             </tr>
             <tr>
               <td>Total memory</td>
-              <td>{{ infoData.MemTotal|humansize }}</td>
+              <td>{{ infoData.MemTotal|humansize: 2 }}</td>
             </tr>
           </tbody>
         </table>

diff --git a/app/components/stats/statsController.js b/app/components/stats/statsController.js
@@ -87,7 +87,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
     },
     {
       scaleLabel: function (valueObj) {
-        return humansizeFilter(parseInt(valueObj.value, 10));
+        return humansizeFilter(parseInt(valueObj.value, 10), 2);
       },
       responsive: true
       //scaleOverride: true,
@@ -100,7 +100,7 @@ function (Settings, $scope, Messages, $timeout, Container, ContainerTop, $stateP
       datasets: [networkRxDataset, networkTxDataset]
     }, {
       scaleLabel: function (valueObj) {
-        return humansizeFilter(parseInt(valueObj.value, 10));
+        return humansizeFilter(parseInt(valueObj.value, 10), 2);
       },
       responsive: true
     });

diff --git a/app/components/swarm/swarm.html b/app/components/swarm/swarm.html
@@ -42,8 +42,8 @@
             </tr>
             <tr>
               <td>Total memory</td>
-              <td ng-if="!swarm_mode">{{ info.MemTotal|humansize }}</td>
-              <td ng-if="swarm_mode">{{ totalMemory|humansize }}</td>
+              <td ng-if="!swarm_mode">{{ info.MemTotal|humansize: 2 }}</td>
+              <td ng-if="swarm_mode">{{ totalMemory|humansize: 2 }}</td>
             </tr>
             <tr ng-if="!swarm_mode">
               <td>Operating system</td>

diff --git a/app/shared/filters.js b/app/shared/filters.js
@@ -123,15 +123,13 @@ angular.module('portainer.filters', [])
 })
 .filter('humansize', function () {
   'use strict';
-  return function (bytes) {
-    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    if (bytes === 0) {
-      return 'n/a';
-    }
-    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
-    var value = bytes / Math.pow(1024, i);
-    var decimalPlaces = (i < 1) ? 0 : (i - 1);
-    return value.toFixed(decimalPlaces) + ' ' + sizes[[i]];
+  return function (bytes, round) {
+    if (!round) {
+      round = 1;
+    }
+    if (bytes || bytes === 0) {
+      return filesize(bytes, {base: 10, round: round});
+    }
   };
 })
 .filter('containername', function () {

diff --git a/bower.json b/bower.json
@@ -34,6 +34,7 @@
     "angular-ui-select": "~0.17.1",
     "bootstrap": "~3.3.6",
     "font-awesome": "~4.6.3",
+    "filesize": "~3.3.0",
     "Hover": "2.0.2",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",

diff --git a/gruntFile.js b/gruntFile.js
@@ -71,6 +71,7 @@ module.exports = function (grunt) {
                 'bower_components/bootstrap/dist/js/bootstrap.min.js',
                 'bower_components/Chart.js/Chart.min.js',
                 'bower_components/lodash/dist/lodash.min.js',
+                'bower_components/filesize/lib/filesize.min.js',
                 'bower_components/moment/min/moment.min.js',
                 'bower_components/xterm.js/src/xterm.js',
                 'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"

diff --git a/test/unit/app/shared/filters.spec.js b/test/unit/app/shared/filters.spec.js
@@ -82,32 +82,6 @@ describe('filters', function () {
         }));
     });
 
-    describe('humansize', function () {
-        it('should return n/a when size is zero', inject(function (humansizeFilter) {
-            expect(humansizeFilter(0)).toBe('n/a');
-        }));
-
-        it('should handle Bytes values', inject(function (humansizeFilter) {
-            expect(humansizeFilter(512)).toBe('512 Bytes');
-        }));
-
-        it('should handle KB values', inject(function (humansizeFilter) {
-            expect(humansizeFilter(5 * 1024)).toBe('5 KB');
-        }));
-
-        it('should handle MB values', inject(function (humansizeFilter) {
-            expect(humansizeFilter(5 * 1024 * 1024)).toBe('5.0 MB');
-        }));
-
-        it('should handle GB values', inject(function (humansizeFilter) {
-            expect(humansizeFilter(5 * 1024 * 1024 * 1024)).toBe('5.00 GB');
-        }));
-
-        it('should handle TB values', inject(function (humansizeFilter) {
-            expect(humansizeFilter(5 * 1024 * 1024 * 1024 * 1024)).toBe('5.000 TB');
-        }));
-    });
-
     describe('containername', function () {
         it('should strip the leading slash from container name', inject(function (containernameFilter) {
             var container = {