From a3e76ac5f5cf56f830fd2ae9d2e2ac4585195fc2 Mon Sep 17 00:00:00 2001
From: Kiefer Chang <kiefer.chang@suse.com>
Date: Fri, 31 May 2019 15:28:25 +0800
Subject: [PATCH] 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>
---
 .../app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss  | 2 ++
 .../app/ceph/cephfs/cephfs-chart/cephfs-chart.component.ts    | 4 ++++
 .../ceph/cephfs/cephfs-clients/cephfs-clients.component.html  | 3 +--
 .../ceph/cephfs/cephfs-detail/cephfs-detail.component.html    | 3 ++-
 4 files changed, 9 insertions(+), 3 deletions(-)

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 62a023b9aaf..81457a14708 100644
--- 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 1dd411677a7..7c5054e3c84 100644
--- 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 ae2e2160b19..8b84e618f5b 100644
--- 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 81ae6060849..73a385bee6a 100644
--- 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>
-- 
2.39.5