mgr/dashboard: Use human readable units on the sparkline graphs

Fixes: http://tracker.ceph.com/issues/25075

Signed-off-by: Tiago Melo <tmelo@suse.com>

5 files changed, 47 insertions, 5 deletions

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts
index 033a65e37a9..d26ac224129 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi/iscsi.component.ts
@@ -100,6 +100,7 @@ export class IscsiComponent {
       this.images.map((image) => {
         image.stats_history.rd_bytes = image.stats_history.rd_bytes.map((i) => i[1]);
         image.stats_history.wr_bytes = image.stats_history.wr_bytes.map((i) => i[1]);
+        image.cdIsBinary = true;
         return image;
       });
     });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 92d19d44f5b..51876fdbdd4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -75,6 +75,7 @@ export class OsdListComponent implements OnInit {
         osd.collectedStates = this.collectStates(osd);
         osd.stats_history.out_bytes = osd.stats_history.op_out_bytes.map((i) => i[1]);
         osd.stats_history.in_bytes = osd.stats_history.op_in_bytes.map((i) => i[1]);
+        osd.cdIsBinary = true;
         return osd;
       });
     });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
index 7b3999d0233..2aac8532111 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.spec.ts
@@ -1,7 +1,9 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { DimlessBinaryPipe } from '../../pipes/dimless-binary.pipe';
+import { FormatterService } from '../../services/formatter.service';
 import { SparklineComponent } from './sparkline.component';
 
 describe('SparklineComponent', () => {
@@ -11,7 +13,8 @@ describe('SparklineComponent', () => {
   configureTestBed({
     declarations: [SparklineComponent],
     schemas: [NO_ERRORS_SCHEMA],
-    imports: []
+    imports: [],
+    providers: [DimlessBinaryPipe, FormatterService]
   });
 
   beforeEach(() => {
@@ -22,5 +25,29 @@ describe('SparklineComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component.options.tooltips.custom).toBeDefined();
+  });
+
+  it('should update', () => {
+    expect(component.datasets).toEqual([{ data: [] }]);
+    expect(component.labels.length).toBe(0);
+
+    component.data = [11, 22, 33];
+    component.ngOnChanges({ data: new SimpleChange(null, component.data, false) });
+
+    expect(component.datasets).toEqual([{ data: [11, 22, 33] }]);
+    expect(component.labels.length).toBe(3);
+  });
+
+  it('should not transform the label, if not isBinary', () => {
+    component.isBinary = false;
+    const result = component.options.tooltips.callbacks.label({ yLabel: 1024 });
+    expect(result).toBe(1024);
+  });
+
+  it('should transform the label, if isBinary', () => {
+    component.isBinary = true;
+    const result = component.options.tooltips.callbacks.label({ yLabel: 1024 });
+    expect(result).toBe('1 KiB');
   });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.ts
index cd40d8bab17..b289882237e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.ts
@@ -2,6 +2,7 @@ import { Component, ElementRef, OnChanges, OnInit, SimpleChanges, ViewChild } fr
 import { Input } from '@angular/core';
 
 import { ChartTooltip } from '../../../shared/models/chart-tooltip';
+import { DimlessBinaryPipe } from '../../pipes/dimless-binary.pipe';
 
 @Component({
   selector: 'cd-sparkline',
@@ -21,6 +22,8 @@ export class SparklineComponent implements OnInit, OnChanges {
     height: '30px',
     width: '100px'
   };
+  @Input()
+  isBinary: boolean;
 
   public colors: Array<any> = [
     {
@@ -51,7 +54,16 @@ export class SparklineComponent implements OnInit, OnChanges {
       enabled: false,
       mode: 'index',
       intersect: false,
-      custom: undefined
+      custom: undefined,
+      callbacks: {
+        label: (tooltipItem) => {
+          if (this.isBinary) {
+            return this.dimlessBinaryPipe.transform(tooltipItem.yLabel);
+          } else {
+            return tooltipItem.yLabel;
+          }
+        }
+      }
     },
     scales: {
       yAxes: [
@@ -75,7 +87,7 @@ export class SparklineComponent implements OnInit, OnChanges {
 
   public labels: Array<any> = [];
 
-  constructor() {}
+  constructor(private dimlessBinaryPipe: DimlessBinaryPipe) {}
 
   ngOnInit() {
     const getStyleTop = (tooltip, positionY) => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 6f32e1d618d..7054312f83a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -136,8 +136,9 @@
 </ng-template>
 
 <ng-template #sparklineTpl
+             let-row="row"
              let-value="value">
-  <cd-sparkline [data]="value"></cd-sparkline>
+  <cd-sparkline [data]="value" [isBinary]="row.cdIsBinary"></cd-sparkline>
 </ng-template>
 
 <ng-template #routerLinkTpl