mgr/dashboard: Unify the look of dashboard charts

Fixes: http://tracker.ceph.com/issues/39384
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
index a28afa613e8564fbc33449401a8dcc7033e3cefa..1016254c562853e220a508de530c991c295a7832 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.ts
@@ -37,6 +37,8 @@ export class HealthPieComponent implements OnChanges, OnInit {
   displayLegend = false;
   @Input()
   tooltipFn: any;
+  @Input()
+  showLabelAsTooltip = false;
   @Output()
   prepareFn = new EventEmitter();
 
@@ -147,6 +149,10 @@ export class HealthPieComponent implements OnChanges, OnInit {
   private getChartTooltipBody(body) {
     const bodySplit = body[0].split(': ');
 
+    if (this.showLabelAsTooltip) {
+      return bodySplit[0];
+    }
+
     if (this.isBytesData) {
       bodySplit[1] = this.dimlessBinary.transform(bodySplit[1]);
     }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
index 17d94d7bd5cc8aea6f1ab5342b3d165aa4da4c93..592c14b8d8c466d781b6ec23c498c7e97886e809 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -204,7 +204,8 @@
                     contentClass="content-chart"
                     *ngIf="healthData.df">
         <cd-health-pie [data]="healthData"
-                       [isBytesData]="true"
+                       [showLabelAsTooltip]="true"
+                       chartType="pie"
                        [displayLegend]="true"
                        (prepareFn)="prepareRawUsage($event[0], $event[1])">
         </cd-health-pie>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
index 99bc05fc8db217174b510b18ad9485e80d804045..b4823fc8485d3ef1a10245aed67978cedbb01cf8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.spec.ts
@@ -249,6 +249,8 @@ describe('HealthComponent', () => {
   });
 
   describe('preparePgStatus', () => {
+    const calcPercentage = (data) => Math.round((data / 10) * 100) || 0;
+
     const expectedChart = (data: number[]) => ({
       colors: [
         {
@@ -260,20 +262,29 @@ describe('HealthComponent', () => {
           ]
         }
       ],
-      labels: ['Clean', 'Working', 'Warning', 'Unknown'],
+      labels: [
+        `Clean (${calcPercentage(data[0])}%)`,
+        `Working (${calcPercentage(data[1])}%)`,
+        `Warning (${calcPercentage(data[2])}%)`,
+        `Unknown (${calcPercentage(data[3])}%)`
+      ],
+      options: {},
       dataset: [{ data: data }]
     });
 
     it('gets no data', () => {
-      const chart = { dataset: [{}] };
-      component.preparePgStatus(chart, { pg_info: {} });
+      const chart = { dataset: [{}], options: {} };
+      component.preparePgStatus(chart, {
+        pg_info: { pgs_per_osd: 0 }
+      });
       expect(chart).toEqual(expectedChart([undefined, undefined, undefined, undefined]));
     });
 
     it('gets data from all categories', () => {
-      const chart = { dataset: [{}] };
+      const chart = { dataset: [{}], options: {} };
       component.preparePgStatus(chart, {
         pg_info: {
+          pgs_per_osd: 10,
           statuses: {
             'clean+active+scrubbing+nonMappedState': 4,
             'clean+active+scrubbing': 2,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
index c5748642d357c18c4fe925c30244ae3f61e65edc..d43024bdcfd335e091d5f1cbaf8f2ac009795384 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
@@ -6,6 +6,7 @@ import { Subscription } from 'rxjs/Subscription';
 
 import { HealthService } from '../../../shared/api/health.service';
 import { Permissions } from '../../../shared/models/permissions';
+import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 import {
   FeatureTogglesMap$,
@@ -32,7 +33,8 @@ export class HealthComponent implements OnInit, OnDestroy {
     private authStorageService: AuthStorageService,
     private pgCategoryService: PgCategoryService,
     private featureToggles: FeatureTogglesService,
-    private refreshIntervalService: RefreshIntervalService
+    private refreshIntervalService: RefreshIntervalService,
+    private dimlessBinary: DimlessBinaryPipe
   ) {
     this.permissions = this.authStorageService.getPermissions();
     this.enabledFeature$ = this.featureToggles.get();
@@ -59,9 +61,14 @@ export class HealthComponent implements OnInit, OnDestroy {
     const ratioLabels = [];
     const ratioData = [];
 
-    ratioLabels.push(this.i18n('Writes'));
+    const total =
+      this.healthData.client_perf.write_op_per_sec + this.healthData.client_perf.read_op_per_sec;
+    const calcPercentage = (status) =>
+      Math.round(((this.healthData.client_perf[status] || 0) / total) * 100);
+
+    ratioLabels.push(`${this.i18n('Writes')} (${calcPercentage('write_op_per_sec')}%)`);
     ratioData.push(this.healthData.client_perf.write_op_per_sec);
-    ratioLabels.push(this.i18n('Reads'));
+    ratioLabels.push(`${this.i18n('Reads')} (${calcPercentage('read_op_per_sec')}%)`);
     ratioData.push(this.healthData.client_perf.read_op_per_sec);
 
     chart.dataset[0].data = ratioData;
@@ -84,19 +91,23 @@ export class HealthComponent implements OnInit, OnDestroy {
       chart.options.cutoutPercentage = 65;
     }
     chart.labels = [
-      `${this.i18n('Used')} (${percentUsed}%)`,
-      `${this.i18n('Avail.')} (${percentAvailable}%)`
+      `${this.dimlessBinary.transform(data.df.stats.total_used_raw_bytes)} ${this.i18n(
+        'Used'
+      )} (${percentUsed}%)`,
+      `${this.dimlessBinary.transform(
+        data.df.stats.total_bytes - data.df.stats.total_used_raw_bytes
+      )} ${this.i18n('Avail.')} (${percentAvailable}%)`
     ];
+
+    chart.options.title = {
+      display: true,
+      text: `${this.dimlessBinary.transform(data.df.stats.total_bytes)} total`,
+      position: 'bottom'
+    };
   }
 
   preparePgStatus(chart, data) {
     const categoryPgAmount = {};
-    chart.labels = [
-      this.i18n('Clean'),
-      this.i18n('Working'),
-      this.i18n('Warning'),
-      this.i18n('Unknown')
-    ];
     chart.colors = [
       {
         backgroundColor: [
@@ -120,6 +131,16 @@ export class HealthComponent implements OnInit, OnDestroy {
     chart.dataset[0].data = this.pgCategoryService
       .getAllTypes()
       .map((categoryType) => categoryPgAmount[categoryType]);
+
+    const calcPercentage = (status) =>
+      Math.round(((categoryPgAmount[status] || 0) / data.pg_info.pgs_per_osd) * 100) || 0;
+
+    chart.labels = [
+      `${this.i18n('Clean')} (${calcPercentage('clean')}%)`,
+      `${this.i18n('Working')} (${calcPercentage('working')}%)`,
+      `${this.i18n('Warning')} (${calcPercentage('warning')}%)`,
+      `${this.i18n('Unknown')} (${calcPercentage('unknown')}%)`
+    ];
   }
 
   isClientReadWriteChartShowable() {