From 6a8cdcef779a84a4610bbf78a87ec9e58f18465c Mon Sep 17 00:00:00 2001 From: Tiago Melo Date: Mon, 6 Aug 2018 11:32:02 +0100 Subject: [PATCH] mgr/dashboard: Use human readable units on the sparkline graphs Fixes: http://tracker.ceph.com/issues/25075 Signed-off-by: Tiago Melo --- .../app/ceph/block/iscsi/iscsi.component.ts | 1 + .../osd/osd-list/osd-list.component.ts | 1 + .../sparkline/sparkline.component.spec.ts | 31 +++++++++++++++++-- .../sparkline/sparkline.component.ts | 16 ++++++++-- .../datatable/table/table.component.html | 3 +- 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 033a65e37a9cb..d26ac22412973 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 92d19d44f5bb7..51876fdbdd4c0 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 7b3999d023364..2aac85321116e 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 cd40d8bab175f..b289882237e3f 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 = [ { @@ -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 = []; - 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 6f32e1d618d39..7054312f83ae0 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 @@ - +