mgr/dashboard: Apply usage-bar component on osd

Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index 2683102f01884f71e216cebbdfebfcf668c235e6..ebf795c3c98e305707d7b39ddd85192f78407799 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -23,3 +23,8 @@
     <!-- Has to be on the same line to prevent a space between state and comma. -->
   </span>
 </ng-template>
+
+<ng-template #osdUsageTpl
+             let-row="row">
+  <cd-usage-bar [totalBytes]="row.stats.stat_bytes" [usedBytes]="row.stats.stat_bytes_used"></cd-usage-bar>
+</ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
index 506b536a63645bb445b80b99da5d67cb7324e591..7a1ef0254a8459b77e780d57f1abdf4d8b848d40 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
@@ -3,6 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
 
+import { ComponentsModule } from '../../../../shared/components/components.module';
 import { DataTableModule } from '../../../../shared/datatable/datatable.module';
 import { DimlessPipe } from '../../../../shared/pipes/dimless.pipe';
 import { FormatterService } from '../../../../shared/services/formatter.service';
@@ -24,7 +25,8 @@ describe('OsdListComponent', () => {
         HttpClientModule,
         PerformanceCounterModule,
         TabsModule.forRoot(),
-        DataTableModule
+        DataTableModule,
+        ComponentsModule
       ],
       declarations: [
         OsdListComponent,

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 29f0f22ede287169603d734147a148732574a8a9..ad64f5c87c997c407bf45e2d3364ebc954424831 100644 (file)
--- 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
@@ -3,7 +3,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
 import { CdTableColumn } from '../../../../shared/models/cd-table-column';
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
-import { DimlessPipe } from '../../../../shared/pipes/dimless.pipe';
+import { DimlessBinaryPipe } from '../../../../shared/pipes/dimless-binary.pipe';
 import { OsdService } from '../osd.service';
 
 @Component({
@@ -14,6 +14,7 @@ import { OsdService } from '../osd.service';
 
 export class OsdListComponent implements OnInit {
   @ViewChild('statusColor') statusColor: TemplateRef<any>;
+  @ViewChild('osdUsageTpl') osdUsageTpl: TemplateRef<any>;
 
   osds = [];
   columns: CdTableColumn[];
@@ -21,7 +22,7 @@ export class OsdListComponent implements OnInit {
 
   constructor(
     private osdService: OsdService,
-    private dimlessPipe: DimlessPipe
+    private dimlessBinaryPipe: DimlessBinaryPipe
   ) { }
 
   ngOnInit() {
@@ -30,7 +31,8 @@ export class OsdListComponent implements OnInit {
       {prop: 'id', name: 'ID', cellTransformation: CellTemplate.bold},
       {prop: 'collectedStates', name: 'Status', cellTemplate: this.statusColor},
       {prop: 'stats.numpg', name: 'PGs'},
-      {prop: 'usedPercent', name: 'Usage'},
+      {prop: 'stats.stat_bytes', name: 'Size', pipe: this.dimlessBinaryPipe},
+      {name: 'Usage', cellTemplate: this.osdUsageTpl},
       {
         prop: 'stats_history.out_bytes',
         name: 'Read bytes',
@@ -57,8 +59,6 @@ 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.usedPercent = this.dimlessPipe.transform(osd.stats.stat_bytes_used) + ' / ' +
-          this.dimlessPipe.transform(osd.stats.stat_bytes);
         return osd;
       });
     });