mgr/dashboard: Print a blank space between value and unit.

When displaying values with their unit a blank space must be shown between them, see #15 at https://physics.nist.gov/cuu/Units/checklist.html.

Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless-binary.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless-binary.pipe.spec.ts
index 268fe61588f553c9168ad2b0d0b88fa0daf300d1..caf51f5788aaf7cd94d34873b790f8a3caa81565 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless-binary.pipe.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless-binary.pipe.spec.ts
@@ -11,46 +11,46 @@ describe('DimlessBinaryPipe', () => {
 
   it('transforms 1024^0', () => {
     const value = Math.pow(1024, 0);
-    expect(pipe.transform(value)).toBe('1B');
+    expect(pipe.transform(value)).toBe('1 B');
   });
 
   it('transforms 1024^1', () => {
     const value = Math.pow(1024, 1);
-    expect(pipe.transform(value)).toBe('1KiB');
+    expect(pipe.transform(value)).toBe('1 KiB');
   });
 
   it('transforms 1024^2', () => {
     const value = Math.pow(1024, 2);
-    expect(pipe.transform(value)).toBe('1MiB');
+    expect(pipe.transform(value)).toBe('1 MiB');
   });
 
   it('transforms 1024^3', () => {
     const value = Math.pow(1024, 3);
-    expect(pipe.transform(value)).toBe('1GiB');
+    expect(pipe.transform(value)).toBe('1 GiB');
   });
 
   it('transforms 1024^4', () => {
     const value = Math.pow(1024, 4);
-    expect(pipe.transform(value)).toBe('1TiB');
+    expect(pipe.transform(value)).toBe('1 TiB');
   });
 
   it('transforms 1024^5', () => {
     const value = Math.pow(1024, 5);
-    expect(pipe.transform(value)).toBe('1PiB');
+    expect(pipe.transform(value)).toBe('1 PiB');
   });
 
   it('transforms 1024^6', () => {
     const value = Math.pow(1024, 6);
-    expect(pipe.transform(value)).toBe('1EiB');
+    expect(pipe.transform(value)).toBe('1 EiB');
   });
 
   it('transforms 1024^7', () => {
     const value = Math.pow(1024, 7);
-    expect(pipe.transform(value)).toBe('1ZiB');
+    expect(pipe.transform(value)).toBe('1 ZiB');
   });
 
   it('transforms 1024^8', () => {
     const value = Math.pow(1024, 8);
-    expect(pipe.transform(value)).toBe('1YiB');
+    expect(pipe.transform(value)).toBe('1 YiB');
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless.pipe.spec.ts
index edc7fe181baaffbc1628fa2bd155807a518dbeb0..8d01678f75d19aad2359d8fa372ac8597078b546 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless.pipe.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/dimless.pipe.spec.ts
@@ -16,41 +16,41 @@ describe('DimlessPipe', () => {
 
   it('transforms 1000^1', () => {
     const value = Math.pow(1000, 1);
-    expect(pipe.transform(value)).toBe('1k');
+    expect(pipe.transform(value)).toBe('1 k');
   });
 
   it('transforms 1000^2', () => {
     const value = Math.pow(1000, 2);
-    expect(pipe.transform(value)).toBe('1M');
+    expect(pipe.transform(value)).toBe('1 M');
   });
 
   it('transforms 1000^3', () => {
     const value = Math.pow(1000, 3);
-    expect(pipe.transform(value)).toBe('1G');
+    expect(pipe.transform(value)).toBe('1 G');
   });
 
   it('transforms 1000^4', () => {
     const value = Math.pow(1000, 4);
-    expect(pipe.transform(value)).toBe('1T');
+    expect(pipe.transform(value)).toBe('1 T');
   });
 
   it('transforms 1000^5', () => {
     const value = Math.pow(1000, 5);
-    expect(pipe.transform(value)).toBe('1P');
+    expect(pipe.transform(value)).toBe('1 P');
   });
 
   it('transforms 1000^6', () => {
     const value = Math.pow(1000, 6);
-    expect(pipe.transform(value)).toBe('1E');
+    expect(pipe.transform(value)).toBe('1 E');
   });
 
   it('transforms 1000^7', () => {
     const value = Math.pow(1000, 7);
-    expect(pipe.transform(value)).toBe('1Z');
+    expect(pipe.transform(value)).toBe('1 Z');
   });
 
   it('transforms 1000^8', () => {
     const value = Math.pow(1000, 8);
-    expect(pipe.transform(value)).toBe('1Y');
+    expect(pipe.transform(value)).toBe('1 Y');
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.spec.ts
index e3180621a990f5a58d2606c3f39a9d5656be5787..a331101ba7b707406b53ecde26046eaa5a4ee1ab 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.spec.ts
@@ -36,22 +36,22 @@ describe('FormatterService', () => {
     });
 
     it('should test some values', () => {
-      expect(service.format_number('0', 1024, formats)).toBe('0B');
-      expect(service.format_number('0.1', 1024, formats)).toBe('0.1B');
-      expect(service.format_number('1.2', 1024, formats)).toBe('1.2B');
-      expect(service.format_number('1', 1024, formats)).toBe('1B');
-      expect(service.format_number('1024', 1024, formats)).toBe('1KiB');
-      expect(service.format_number(23.45678 * Math.pow(1024, 3), 1024, formats)).toBe('23.5GiB');
+      expect(service.format_number('0', 1024, formats)).toBe('0 B');
+      expect(service.format_number('0.1', 1024, formats)).toBe('0.1 B');
+      expect(service.format_number('1.2', 1024, formats)).toBe('1.2 B');
+      expect(service.format_number('1', 1024, formats)).toBe('1 B');
+      expect(service.format_number('1024', 1024, formats)).toBe('1 KiB');
+      expect(service.format_number(23.45678 * Math.pow(1024, 3), 1024, formats)).toBe('23.5 GiB');
       expect(service.format_number(23.45678 * Math.pow(1024, 3), 1024, formats, 2)).toBe(
-        '23.46GiB'
+        '23.46 GiB'
       );
     });
 
     it('should test some dimless values', () => {
       expect(dimlessPipe.transform(0.6)).toBe('0.6');
-      expect(dimlessPipe.transform(1000.608)).toBe('1k');
-      expect(dimlessPipe.transform(1e10)).toBe('10G');
-      expect(dimlessPipe.transform(2.37e16)).toBe('23.7P');
+      expect(dimlessPipe.transform(1000.608)).toBe('1 k');
+      expect(dimlessPipe.transform(1e10)).toBe('10 G');
+      expect(dimlessPipe.transform(2.37e16)).toBe('23.7 P');
     });
   });
 
@@ -77,10 +77,10 @@ describe('FormatterService', () => {
     });
 
     it('should convert values to human readable again', () => {
-      convertToBytesAndBack('1.1MiB');
-      convertToBytesAndBack('1.0MiB', '1MiB');
-      convertToBytesAndBack('8.9GiB');
-      convertToBytesAndBack('123.5EiB');
+      convertToBytesAndBack('1.1 MiB');
+      convertToBytesAndBack('1.0MiB', '1 MiB');
+      convertToBytesAndBack('8.9 GiB');
+      convertToBytesAndBack('123.5 EiB');
     });
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts
index b3384c863d2beb817cfecaa768eb066c5173b5f8..6f1cfe4ec47ab9535eaa43af92f7acc23bbb4889 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/formatter.service.ts
@@ -13,9 +13,16 @@ export class FormatterService {
     if (!_.isNumber(n)) {
       return '-';
     }
-    const unit = n < 1 ? 0 : Math.floor(Math.log(n) / Math.log(divisor));
-    const truncatedFloat = _.round(n / Math.pow(divisor, unit), decimals).toString();
-    return truncatedFloat === '' ? '-' : truncatedFloat + units[unit];
+    let unit = n < 1 ? 0 : Math.floor(Math.log(n) / Math.log(divisor));
+    unit = (unit >= units.length) ? units.length - 1 : unit;
+    let result = _.round(n / Math.pow(divisor, unit), decimals).toString();
+    if (result === '') {
+      return '-';
+    }
+    if (units[unit] !== '') {
+      result = `${result} ${units[unit]}`;
+    }
+    return result;
   }
 
   /**