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)

Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-clients/cephfs-clients.component.html
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html

files above are renamed, their paths in mimic are:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/clients/clients.component.html
	src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.html

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 39a03890add32ab28d9317aa1c46c283e7c77756..51a3275780e25e96b758d4e81cba1445625abc42 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
@@ -68,6 +68,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/cephfs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs/cephfs.component.html
index f2ee88d2fb4f2f0b6cdc2244d6f547d2647ba4dc..6f0337bdf15796740562880e6badd37703d7cd6f 100644 (file)
--- 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
@@ -42,9 +42,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>

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