Ver Fonte

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 há 9 anos atrás
pai
commit
272fb7dc37

+ 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.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/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.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('desktop/ext/css/bootstrap-editable.css') }">
 <link rel="stylesheet" href="${ static('metastore/css/metastore.css') }" type="text/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 {
 .jHueTableExtenderClonedContainerColumn {
-  border-right: 1px solid #CCC;
+  border-right: 1px solid #e5e5e5;
 }
 }
 
 
 #jHueTableExtenderNavigator {
 #jHueTableExtenderNavigator {

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

@@ -214,7 +214,7 @@
         endCol = Math.min(aoColumns.length, endCol + 1);
         endCol = Math.min(aoColumns.length, endCol + 1);
 
 
         var rowHeight = 29;
         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 scrollable = $t.parents($t.data('oInit')['scrollable']);
         var visibleRows = Math.ceil((scrollable.height() - Math.max($t.offset().top, 0)) / rowHeight);
         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 = {
     defaults = {
       fixedHeader: false,
       fixedHeader: false,
       fixedFirstColumn: false,
       fixedFirstColumn: false,
+      fixedFirstColumnTopMargin: 0,
+      headerSorting: true,
       lockSelectedRow: false,
       lockSelectedRow: false,
       firstColumnTooltip: false,
       firstColumnTooltip: false,
       classToRemove: 'resultTable',
       classToRemove: 'resultTable',
@@ -280,11 +282,14 @@
     clonedCellTHead.appendTo(clonedCell);
     clonedCellTHead.appendTo(clonedCell);
     var clonedCellTH = originalTh.clone();
     var clonedCellTH = originalTh.clone();
     clonedCellTH.appendTo(clonedCellTHead);
     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 () {
     clonedCellTH.click(function () {
       originalTh.click();
       originalTh.click();
     });
     });
-    $('<tbody>').appendTo(clonedCell)
+    $('<tbody>').appendTo(clonedCell);
 
 
     var clonedCellContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth());
     var clonedCellContainer = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth());
 
 
@@ -345,10 +350,10 @@
     });
     });
 
 
     $pluginElement.parent().scroll(function () {
     $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() {
     function positionClones() {
       var pos = plugin.options.stickToTopPosition;
       var pos = plugin.options.stickToTopPosition;
@@ -409,7 +414,9 @@
         originalTh.removeAttr("data-bind");
         originalTh.removeAttr("data-bind");
         clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF").click(function () {
         clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF").click(function () {
           originalTh.click();
           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"));
           $(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;
       background-color: #FFF !important;
       border: none !important;
       border: none !important;
     }
     }
+
+    .samples-table tr td {
+      white-space: nowrap;
+    }
   </style>
   </style>
 
 
   <script type="text/html" id="table-stats">
   <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>
               <div class="alert">${ _('The selected table has no data.') }</div>
               <!-- /ko -->
               <!-- /ko -->
               <!-- ko if: rows.length > 0 -->
               <!-- 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">
               <table id="samples-table" class="samples-table table table-striped table-condensed">
                 <thead>
                 <thead>
                 <tr>
                 <tr>
@@ -135,17 +138,8 @@ from desktop.views import _ko
                 </tr>
                 </tr>
                 </thead>
                 </thead>
                 <tbody>
                 <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>
                 </tbody>
               </table>
               </table>
-              </div>
               <!-- /ko -->
               <!-- /ko -->
               <!-- /ko -->
               <!-- /ko -->
             </div>
             </div>
@@ -231,9 +225,9 @@ from desktop.views import _ko
               } else {
               } else {
                 lastOffset.top = newTop - 210;
                 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.popoverTop(lastOffset.top);
               self.popoverLeft(lastOffset.left);
               self.popoverLeft(lastOffset.left);
               if (self.popoverArrowTop() < 80) {
               if (self.popoverArrowTop() < 80) {
@@ -285,23 +279,47 @@ from desktop.views import _ko
             ko.renderTemplate('stats-popover', self, {
             ko.renderTemplate('stats-popover', self, {
               afterRender: function(renderedElement) {
               afterRender: function(renderedElement) {
 
 
-                huePubSub.subscribe('sample.rendered', function () {
+                huePubSub.subscribe('sample.rendered', function (data) {
                   window.setTimeout(function () {
                   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,
                       fixedHeader: true,
                       fixedFirstColumn: true,
                       fixedFirstColumn: true,
+                      fixedFirstColumnTopMargin: -1,
+                      headerSorting: false,
                       includeNavigator: false,
                       includeNavigator: false,
                       parentId: 'sampleTab',
                       parentId: 'sampleTab',
                       classToRemove: 'samples-table',
                       classToRemove: 'samples-table',
                       clonedContainerPosition: "absolute"
                       clonedContainerPosition: "absolute"
                     });
                     });
-                    $('.samples-table').parents('.dataTables_wrapper').niceScroll({
+
+                    $t.parents('.dataTables_wrapper').niceScroll({
                       cursorcolor: "#CCC",
                       cursorcolor: "#CCC",
                       cursorborder: "1px solid #CCC",
                       cursorborder: "1px solid #CCC",
                       cursoropacitymin: 0,
                       cursoropacitymin: 0,
@@ -311,6 +329,18 @@ from desktop.views import _ko
                       cursorminheight: 20,
                       cursorminheight: 20,
                       horizrailenabled: true
                       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);
                   }, 0);
                 });
                 });