mgr/dashboard: rbd pool image view should use dynamic data table

Signed-off-by: Jason Dillaman <dillaman@redhat.com>

diff --git a/src/pybind/mgr/dashboard/base.html b/src/pybind/mgr/dashboard/base.html
index 237c0c1ea0e81004921ff69abc92071394cf8cad..dc97f48d111f5619aba3793b40009cec0f233771 100644 (file)
--- a/src/pybind/mgr/dashboard/base.html
+++ b/src/pybind/mgr/dashboard/base.html
@@ -18,6 +18,8 @@
           href="/static/AdminLTE-2.3.7/dist/css/AdminLTE.min.css">
     <link rel="stylesheet"
           href="/static/AdminLTE-2.3.7/dist/css/skins/skin-blue.min.css">
+    <link rel="stylesheet"
+          href="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.css">
 
     <script src="/static/AdminLTE-2.3.7/plugins/jQuery/jquery-2.2.3.min.js"></script>
     <script src="/static/AdminLTE-2.3.7/plugins/sparkline/jquery.sparkline.min.js"></script>
@@ -27,6 +29,7 @@
 
     <script src="/static/AdminLTE-2.3.7/bootstrap/js/bootstrap.min.js"></script>
     <script src="/static/AdminLTE-2.3.7/dist/js/app.min.js"></script>
+    <script src="/static/AdminLTE-2.3.7/plugins/datatables/jquery.dataTables.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

diff --git a/src/pybind/mgr/dashboard/rbd_pool.html b/src/pybind/mgr/dashboard/rbd_pool.html
index 0838c6b55f16b4d45331a61b1a5adf21fd1f9252..4aaef0242ab4c957be291e4260763428252e61f7 100644 (file)
--- a/src/pybind/mgr/dashboard/rbd_pool.html
+++ b/src/pybind/mgr/dashboard/rbd_pool.html
@@ -10,14 +10,24 @@
             var refresh = function() {
                 $.get("/rbd_pool_data/" + content_data.pool_name  + "/", function(data) {
                     content_data.images = data;
-                    setTimeout(refresh, 5000);
+                    setTimeout(refresh, 10000);
                 });
             };
 
             console.log(content_data);
 
             rivets.bind($("div#content"), content_data);
-            setTimeout(refresh, 5000);
+            setTimeout(refresh, 10000);
+
+            $('#images').DataTable({
+                'paging'      : true,
+                'pageLength'  : 15,
+                'lengthChange': false,
+                'searching'   : true,
+                'ordering'    : true,
+                'info'        : false,
+                'autoWidth'   : false
+            });
         });
 </script>
 
@@ -34,7 +44,7 @@
             <h3 class="box-title">Images</h3>
         </div>
         <div class="box-body">
-            <table class="table table-bordered">
+            <table id="images" class="table table-bordered">
                 <thead>
                 <tr>
                     <th>Name</th>