mgr/dashboard: fix MDS charts are stacked in Filesystems page

Also include some UI enhancements:
- Fix MDS chart container is not aligned to other components.
- Show header on client table.

Fixes: https://tracker.ceph.com/issues/37579
Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>
(cherry picked from commit a3e76ac5f5cf56f830fd2ae9d2e2ac4585195fc2)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
index 62a023b9aaf4930d1ecd05a15baf54d6edafa2f6..81457a147089fb568f3efaa1b754ae6b67ea5b41 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
@@ -1,6 +1,8 @@
 @import '../../../../styles/chart-tooltip.scss';
 
 .chart-container {
+  position: relative;
   height: 500px;
   width: 100%;
+  margin-bottom: 20px;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts
index 1dd411677a75621917afa8c693ee8c9d48fce9cb..7c5054e3c84e04abe65530a0deb0c935df436370 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts
@@ -71,6 +71,10 @@ export class CephfsChartComponent implements OnChanges, OnInit {
         }
       ],
       options: {
+        title: {
+          text: this.mdsCounter.name,
+          display: true
+        },
         responsive: true,
         maintainAspectRatio: false,
         legend: {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
index ae2e2160b1974c5a8e7b44677e4dbc5676f88b9b..8b84e618f5b25422eb2a22e35e6f56fd083e5f8b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
@@ -2,6 +2,5 @@
 
 <cd-table [data]="clients.data"
           [columns]="clients.columns"
-          (fetchData)="refresh()"
-          [header]="false">
+          (fetchData)="refresh()">
 </cd-table>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
index 81ae6060849bdb36359c9310defd54c1948227ee..73a385bee6a04c11382dabacd61a4947046a1f37 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
@@ -25,9 +25,10 @@
       </div>
     </div>
 
+    <legend i18n>MDS performance counters</legend>
     <div class="row"
          *ngFor="let mdsCounter of objectValues(mdsCounters); trackBy: trackByFn">
-      <div class="cold-md-12">
+      <div class="col-md-12">
         <cd-cephfs-chart [mdsCounter]="mdsCounter"></cd-cephfs-chart>
       </div>
     </div>