瀏覽代碼

HUE-4548 [editor] Sample popup tab seems off

Fixed popover positioning for elements close to bottom of the window
Fixed metastore displaying of table stats
Introduced HueDataTable on the table stats
Enrico Berti 9 年之前
父節點
當前提交
272fb7d

+ 1 - 0
apps/metastore/src/metastore/templates/metastore.mako

@@ -44,6 +44,7 @@ ${ assist.assistPanel() }
 <script src="${ static('desktop/js/nv.d3.growingPie.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/nv.d3.growingPieChart.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/jquery.hiveautocomplete.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/js/jquery.huedatatable.js') }"></script>
 
 <link rel="stylesheet" href="${ static('desktop/ext/css/bootstrap-editable.css') }">
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/css">

+ 1 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1204,7 +1204,7 @@ a#advanced-btn:hover {
 }
 
 .jHueTableExtenderClonedContainerColumn {
-  border-right: 1px solid #CCC;
+  border-right: 1px solid #e5e5e5;
 }
 
 #jHueTableExtenderNavigator {

+ 1 - 1
desktop/core/src/desktop/static/desktop/js/jquery.huedatatable.js

@@ -214,7 +214,7 @@
         endCol = Math.min(aoColumns.length, endCol + 1);
 
         var rowHeight = 29;
-        var invisibleOffset = aoColumns.length < 100 ? 10 : 1;
+        var invisibleOffset = $t.data('oInit')['forceInvisible'] ? $t.data('oInit')['forceInvisible'] : (aoColumns.length < 100 ? 10 : 1);
         var scrollable = $t.parents($t.data('oInit')['scrollable']);
         var visibleRows = Math.ceil((scrollable.height() - Math.max($t.offset().top, 0)) / rowHeight);
 

+ 12 - 5
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -24,6 +24,8 @@
     defaults = {
       fixedHeader: false,
       fixedFirstColumn: false,
+      fixedFirstColumnTopMargin: 0,
+      headerSorting: true,
       lockSelectedRow: false,
       firstColumnTooltip: false,
       classToRemove: 'resultTable',
@@ -280,11 +282,14 @@
     clonedCellTHead.appendTo(clonedCell);
     var clonedCellTH = originalTh.clone();
     clonedCellTH.appendTo(clonedCellTHead);
-    clonedCellTH.width(originalTh.width()).css("background-color", "#FFFFFF");
+    clonedCellTH.width(originalTh.width()).css({
+      "background-color": "#FFFFFF",
+      "border-color": "transparent"
+    });
     clonedCellTH.click(function () {
       originalTh.click();
     });
-    $('<tbody>').appendTo(clonedCell)
+    $('<tbody>').appendTo(clonedCell);
 
     var clonedCellContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth());
 
@@ -345,10 +350,10 @@
     });
 
     $pluginElement.parent().scroll(function () {
-      clonedTableContainer.css("marginTop", (-$pluginElement.parent().scrollTop()) + "px");
+      clonedTableContainer.css("marginTop", (-$pluginElement.parent().scrollTop() + plugin.options.fixedFirstColumnTopMargin) + "px");
     });
 
-    clonedTableContainer.css("marginTop", (-$pluginElement.parent().scrollTop()) + "px");
+    clonedTableContainer.css("marginTop", (-$pluginElement.parent().scrollTop() + plugin.options.fixedFirstColumnTopMargin) + "px");
 
     function positionClones() {
       var pos = plugin.options.stickToTopPosition;
@@ -409,7 +414,9 @@
         originalTh.removeAttr("data-bind");
         clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF").click(function () {
           originalTh.click();
-          clonedTable.find("thead>tr th").attr("class", "sorting");
+          if (plugin.options.headerSorting) {
+            clonedTable.find("thead>tr th").attr("class", "sorting");
+          }
           $(this).attr("class", originalTh.attr("class"));
         });
       });

+ 49 - 19
desktop/core/src/desktop/templates/table_stats.mako

@@ -36,6 +36,10 @@ from desktop.views import _ko
       background-color: #FFF !important;
       border: none !important;
     }
+
+    .samples-table tr td {
+      white-space: nowrap;
+    }
   </style>
 
   <script type="text/html" id="table-stats">
@@ -124,7 +128,6 @@ from desktop.views import _ko
               <div class="alert">${ _('The selected table has no data.') }</div>
               <!-- /ko -->
               <!-- ko if: rows.length > 0 -->
-              <div class="dataTables_wrapper" style="max-height: 300px; overflow: auto">
               <table id="samples-table" class="samples-table table table-striped table-condensed">
                 <thead>
                 <tr>
@@ -135,17 +138,8 @@ from desktop.views import _ko
                 </tr>
                 </thead>
                 <tbody>
-                <!-- ko foreach: rows -->
-                <tr>
-                  <td data-bind="text: $index()+1"></td>
-                  <!-- ko foreach: $data -->
-                  <td style="white-space: pre;" data-bind="text: $data"></td>
-                  <!-- /ko -->
-                </tr>
-                <!-- /ko -->
                 </tbody>
               </table>
-              </div>
               <!-- /ko -->
               <!-- /ko -->
             </div>
@@ -231,9 +225,9 @@ from desktop.views import _ko
               } else {
                 lastOffset.top = newTop - 210;
               }
-              self.popoverArrowTop($popover.outerHeight() / 2 + (lastOffset.top < 0 ? lastOffset.top - 10 : 0));
+              self.popoverArrowTop($popover.outerHeight() / 2 + (lastOffset.top < 0 ? lastOffset.top - 10 : 0) + (lastOffset.top > $(window).height() - $popover.outerHeight() ? lastOffset.top - ($(window).height() - $popover.outerHeight()) : 0));
 
-              lastOffset.top = Math.max(lastOffset.top, 10);
+              lastOffset.top = Math.min(Math.max(lastOffset.top, 10), $(window).height() - $popover.outerHeight());
               self.popoverTop(lastOffset.top);
               self.popoverLeft(lastOffset.left);
               if (self.popoverArrowTop() < 80) {
@@ -285,23 +279,47 @@ from desktop.views import _ko
             ko.renderTemplate('stats-popover', self, {
               afterRender: function(renderedElement) {
 
-                huePubSub.subscribe('sample.rendered', function () {
+                huePubSub.subscribe('sample.rendered', function (data) {
                   window.setTimeout(function () {
-                    $('.samples-table').hueDataTable({
-                      "oLanguage": {
-                        "sEmptyTable": "${_('No data available')}",
-                        "sZeroRecords": "${_('No matching records')}"
+                    var $t = $('.samples-table');
+                    if ($t.parent().hasClass('dataTables_wrapper')) {
+                      if ($t.parent().data('scrollFnDt')) {
+                        $t.parent().off('scroll', $t.parent().data('scrollFnDt'));
+                      }
+                      $t.unwrap();
+                      if ($t.children('tbody').length > 0) {
+                        $t.children('tbody').empty();
                       }
+                      else {
+                        $t.children('tr').remove();
+                      }
+                      $t.data('isScrollAttached', null);
+                      $t.data('data', []);
+                    }
+                    var dt = $t.hueDataTable({
+                      i18n: {
+                        NO_RESULTS: "${_('No results found.')}",
+                        OF: "${_('of')}"
+                      },
+                      fnDrawCallback: function (oSettings) {
+                      },
+                      scrollable: '.dataTables_wrapper',
+                      forceInvisible: 10
                     });
-                    $('.samples-table').jHueTableExtender({
+
+                    $t.parents('.dataTables_wrapper').jHueTableScroller().height(350);
+                    $t.jHueTableExtender({
                       fixedHeader: true,
                       fixedFirstColumn: true,
+                      fixedFirstColumnTopMargin: -1,
+                      headerSorting: false,
                       includeNavigator: false,
                       parentId: 'sampleTab',
                       classToRemove: 'samples-table',
                       clonedContainerPosition: "absolute"
                     });
-                    $('.samples-table').parents('.dataTables_wrapper').niceScroll({
+
+                    $t.parents('.dataTables_wrapper').niceScroll({
                       cursorcolor: "#CCC",
                       cursorborder: "1px solid #CCC",
                       cursoropacitymin: 0,
@@ -311,6 +329,18 @@ from desktop.views import _ko
                       cursorminheight: 20,
                       horizrailenabled: true
                     });
+
+                    if (data && data.rows) {
+                      var _tempData = [];
+                      $.each(data.rows, function (index, row) {
+                        var _row = row.slice(0); // need to clone the array otherwise it messes with the caches
+                        _row.unshift(index + 1);
+                        _tempData.push(_row);
+                      });
+                      if (_tempData.length > 0) {
+                        dt.fnAddData(_tempData);
+                      }
+                    }
                   }, 0);
                 });