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 c2fc3e2eb2986def167f9e8216fa57a6a168e00d..126b30c76df90e8c27ff08d9c121bae733c3e16d 100644 (file)
--- 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 de50fb596cafb4178346cb54cfc1c4050d1616ce..8bcdac0147d4c3ec86f1995c63eccdfc1cd22e0f 100644 (file)
--- 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;
+}