metrics: make table widget horizontly scrollable, keep tbody/thead in same table

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/css/cloudstack3.css

@@ -338,6 +338,27 @@ table th div.ui-resizable-handle {
   float: right;
 }
 
+.no-split thead, .no-split tbody {
+  display: block;
+}
+
+.no-split thead {
+  position: absolute;
+}
+
+.no-split tbody {
+  height: 570px;
+  padding-top: 30px;
+}
+
+.horizontal-overflow tbody td, .horizontal-overflow thead th {
+  min-width: 120px;
+}
+
+.horizontal-overflow tbody {
+  overflow: auto;
+}
+
 /** Header, misc*/
 #template {
   display: none;

ui/scripts/metrics.js

@@ -132,7 +132,9 @@
                 console.log("Refreshing Cluster metrics");
             },
             hideSearchBar: true,
-            needsRefresh: true
+            needsRefresh: true,
+            noSplit: true,
+            horizontalOverflow: true
         }
     };
 

ui/scripts/ui/widgets/dataTable.js

@@ -181,7 +181,7 @@
         };
 
         var resizeHeaders = function() {
-            var $thead = $table.closest('div.data-table').find('thead');
+            var $thead = $table.hasClass('no-split') ? $table.find('thead') : $table.closest('div.data-table').find('thead');
             var $tbody = $table.find('tbody');
             var $ths = $thead.find('th');
             var $tds = $tbody.find('tr:first td');

ui/scripts/ui/widgets/listView.js

@@ -1796,6 +1796,16 @@
                 'multiSelect': multiSelect,
                 noActionCol: listViewData.noActionCol
             });
+
+        if (listViewData.noSplit == true) {
+            $table.addClass('no-split');
+        }
+
+        if (listViewData.horizontalOverflow == true) {
+            $table.addClass('horizontal-overflow');
+            $table.parent().css({'overflow-x': 'auto'});
+        }
+
         createFilters($toolbar, listViewData.filters);
                 
         if (listViewData.hideSearchBar != true) {