From 9dc966bc3e86c4011c1f4e8a631233f0764fe662 Mon Sep 17 00:00:00 2001
From: Ricardo Marques <rimarques@suse.com>
Date: Mon, 2 Apr 2018 12:09:25 +0100
Subject: [PATCH] mgr/dashboard: Apply usage-bar component on cephfs

Signed-off-by: Ricardo Marques <rimarques@suse.com>
---
 .../src/app/ceph/cephfs/cephfs/cephfs.component.html   |  6 ++----
 .../src/app/ceph/cephfs/cephfs/cephfs.component.ts     | 10 ++++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

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 ef62292d8ad..9da4446f39b 100644
--- 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 d8fe382fec6..774ce4e0ad6 100644
--- 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',
-- 
2.39.5