From ba0bb9b101c7d24f86415e9bad36f3abf5331636 Mon Sep 17 00:00:00 2001
From: Ricardo Marques <rimarques@suse.com>
Date: Mon, 2 Dec 2019 13:39:01 +0000
Subject: [PATCH] mgr/dashboard: Use badges for counters in tabs

Signed-off-by: Ricardo Marques <rimarques@suse.com>
---
 .../ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html    | 8 +++++---
 src/pybind/mgr/dashboard/frontend/src/styles.scss         | 4 ++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
index c2fc3e2eb29..126b30c76df 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
@@ -5,9 +5,11 @@
     <cd-cephfs-detail [data]="details">
     </cd-cephfs-detail>
   </tab>
-  <tab i18n-heading
-       (selectTab)="softRefresh()"
-       heading="Clients: {{ clients.data.length }}">
+  <tab (selectTab)="softRefresh()">
+    <ng-template tabHeading>
+      <ng-container i18n>Clients</ng-container>
+      <span class="badge badge-pill badge-tab ml-1">{{ clients.data.length }}</span>
+    </ng-template>
     <cd-cephfs-clients [id]="id"
                        [clients]="clients"
                        (triggerApiUpdate)="refresh()">
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index de50fb596ca..8bcdac0147d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -442,3 +442,7 @@ bfv-messages {
   color: $color-solid-white;
   background-color: $color-blue;
 }
+.badge-tab {
+  color: $color-solid-gray;
+  background-color: $color-light-shade-gray;
+}
-- 
2.39.5