pybind: fix chart becomes bigger when refresh

Fixes: http://tracker.ceph.com/issues/20746
Signed-off-by: Yixing Yan <yanyx@umcloud.com>
(cherry picked from commit edf93427734ce156f5eaac7a25f4c16a92852b98)

diff --git a/src/pybind/mgr/dashboard/base.html b/src/pybind/mgr/dashboard/base.html
index 1d4947c26de3f5b22ce982777603196f47ea9895..95c13ab8c688f11c686ba24938ea7b7f4a911dda 100644 (file)
--- a/src/pybind/mgr/dashboard/base.html
+++ b/src/pybind/mgr/dashboard/base.html
@@ -233,6 +233,11 @@
             font-weight: bold;
         }
 
+        .chart-container {
+            width: 100%;
+            height: 100%;
+        }
+
         .dataTables_wrapper .dataTables_filter {
             color: #ddd
         }

diff --git a/src/pybind/mgr/dashboard/health.html b/src/pybind/mgr/dashboard/health.html
index 59dc312d9fa11ec7bfa9dd64f94018345316f4ea..48cea82f1097c69476fc43923ae49e5db7e82957 100644 (file)
--- a/src/pybind/mgr/dashboard/health.html
+++ b/src/pybind/mgr/dashboard/health.html
@@ -165,7 +165,7 @@
                     },
                     options: {
                         center_text: raw_usage_text,
-                        responsive: false,
+                        responsive: true,
                         legend: {display: false},
                         animation: {duration: 0}
                     }
@@ -199,7 +199,7 @@
                         ]
                     },
                     options: {
-                        responsive: false,
+                        responsive: true,
                         legend: {display: false},
                         animation: {duration: 0}
                     }
@@ -297,13 +297,15 @@
                                 <td>
                                     <span style="font-size: 45px;">{df.stats.total_objects | dimless}</span>
                                 </td>
-                                <td>
-                                    <canvas id="raw_usage_chart"
-                                            style="height:120px; width:120px;"></canvas>
+                                <td >
+                                    <div style="height:120px; width: 120px;">
+                                        <canvas id="raw_usage_chart"></canvas>
+                                    </div>
                                 </td>
                                 <td>
-                                    <canvas id="pool_usage_chart"
-                                            style="height:120px; width: 120px;"></canvas>
+                                    <div style="height:120px; width: 120px;">
+                                        <canvas id="pool_usage_chart"></canvas>
+                                    </div>
                                 </td>
                             </tr>
                             <tr>