From: Ricardo Marques <rimarques@suse.com>
Date: Mon, 2 Dec 2019 13:39:01 +0000 (+0000)
Subject: mgr/dashboard: Use badges for counters in tabs
X-Git-Tag: v15.1.0~538^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=ba0bb9b101c7d24f86415e9bad36f3abf5331636;p=ceph-ci.git

mgr/dashboard: Use badges for counters in tabs

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

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;
+}