mgr/dashboard: Apply usage-bar component on cephfs

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.html
index ef62292d8ad3644851a2430af5bcfc47532d208c..9da4446f39bd631463690c0ae67c3199decd6994 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.html
@@ -55,11 +55,9 @@
 </div>
 
 <!-- templates -->
-<ng-template #poolProgressTmpl
+<ng-template #poolUsageTpl
              let-row="row">
-  <progressbar type="danger"
-               [value]="row.used * 100.0 / row.avail">
-  </progressbar>
+    <cd-usage-bar [totalBytes]="row.size" [usedBytes]="row.used"></cd-usage-bar>
 </ng-template>
 
 <ng-template #activityTmpl

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.ts
index d8fe382fec6f9b71b6b009795ec4837dd955fb21..774ce4e0ad67eb09ae18622e274a0d3243df5943 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.ts
@@ -14,7 +14,7 @@ import { CephfsService } from '../cephfs.service';
   styleUrls: ['./cephfs.component.scss']
 })
 export class CephfsComponent implements OnInit, OnDestroy {
-  @ViewChild('poolProgressTmpl') poolProgressTmpl: TemplateRef<any>;
+  @ViewChild('poolUsageTpl') poolUsageTpl: TemplateRef<any>;
   @ViewChild('activityTmpl') activityTmpl: TemplateRef<any>;
 
   routeParamsSubscribe: Subscription;
@@ -54,11 +54,10 @@ export class CephfsComponent implements OnInit, OnDestroy {
       columns: [
         { prop: 'pool' },
         { prop: 'type' },
-        { prop: 'used', pipe: this.dimlessBinary },
-        { prop: 'avail', pipe: this.dimlessBinary },
+        { prop: 'size', pipe: this.dimlessBinary },
         {
           name: 'Usage',
-          cellTemplate: this.poolProgressTmpl,
+          cellTemplate: this.poolUsageTpl,
           comparator: (valueA, valueB, rowA, rowB, sortDirection) => {
             const valA = rowA.used / rowA.avail;
             const valB = rowB.used / rowB.avail;
@@ -96,6 +95,9 @@ export class CephfsComponent implements OnInit, OnDestroy {
     this.cephfsService.getCephfs(this.id).subscribe((data: any) => {
       this.ranks.data = data.cephfs.ranks;
       this.pools.data = data.cephfs.pools;
+      this.pools.data.forEach((pool) => {
+        pool.size = pool.used + pool.avail;
+      });
       this.standbys = [
         {
           key: 'Standby daemons',