Pārlūkot izejas kodu

HUE-1830 [beeswax] Infinite scroll is broken

Fixed double headers and wrong columns
Removed column wrapping
Added minimum result table height to be as big as the screen
Enrico Berti 12 gadi atpakaļ
vecāks
revīzija
3da5445

+ 11 - 1
apps/beeswax/src/beeswax/templates/execute.mako

@@ -297,7 +297,7 @@ ${layout.menubar(section='query')}
         </div>
         <div class="tab-pane" id="results">
           <div data-bind="css: {'hide': $root.query.results.rows().length == 0}" class="hide">
-            <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0" data-tablescroller-min-height-disable="true" data-tablescroller-enforce-height="true">
+            <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0" data-tablescroller-enforce-height="true">
               <thead>
               <tr data-bind="foreach: $root.query.results.columns">
                 <th data-bind="text: $data.name, css: { 'sort-numeric': $.inArray($data.type, ['TINYINT_TYPE', 'SMALLINT_TYPE', 'INT_TYPE', 'BIGINT_TYPE', 'FLOAT_TYPE', 'DOUBLE_TYPE', 'DECIMAL_TYPE']) > -1, 'sort-date': $.inArray($data.type, ['TIMESTAMP_TYPE', 'DATE_TYPE']) > -1, 'sort-string': $.inArray($data.type, ['TINYINT_TYPE', 'SMALLINT_TYPE', 'INT_TYPE', 'BIGINT_TYPE', 'FLOAT_TYPE', 'DOUBLE_TYPE', 'DECIMAL_TYPE', 'TIMESTAMP_TYPE', 'DATE_TYPE']) == -1 }"></th>
@@ -688,6 +688,10 @@ ${layout.menubar(section='query')}
     height: 200px;
   }
 
+  .resultTable td, .resultTable th {
+    white-space: nowrap;
+  }
+
 </style>
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
@@ -890,6 +894,7 @@ function getHighlightedQuery() {
 function reinitializeTable () {
   window.setTimeout(function(){
     $(".dataTables_wrapper").jHueTableScroller({
+      minHeight: $(window).height() - 190,
       heightAfterCorrection: 0
     });
     $(".resultTable").jHueTableExtender({
@@ -1418,6 +1423,7 @@ function resultsTable(e, data) {
     });
     addResults(viewModel, dataTable, index, pageSize);
     index += pageSize;
+    dataTableEl.jHueScrollUp();
   }
 }
 
@@ -1486,6 +1492,9 @@ function tryExecuteQuery() {
   $(".tooltip").remove();
   var query = getHighlightedQuery() || codeMirror.getValue();
   viewModel.query.query(query);
+  if ($(".dataTables_wrapper").length > 0) { // forces results to be up
+    $(".dataTables_wrapper").scrollTop(0);
+  }
   if (viewModel.query.isParameterized()) {
     viewModel.fetchParameters();
   } else {
@@ -1734,6 +1743,7 @@ $(document).ready(function () {
         $('.resultsContainer .watch-query').hide();
         $('.resultsContainer .view-query-results').show();
         clickHard('.resultsContainer .nav-tabs a[href="#results"]');
+        $("html, body").animate({ scrollTop: ($(".resultsContainer").position().top - 80) + "px" });
       }
     },
     'query/explanation': function () {

+ 3 - 1
apps/beeswax/static/js/beeswax.vm.js

@@ -450,7 +450,9 @@ function BeeswaxViewModel(server, query_id) {
       type: 'GET',
       success: function(data) {
         self.query.isRunning(false);
-        self.query.results.columns(data.columns);
+        if (self.query.results.columns().length == 0){
+          self.query.results.columns(data.columns);
+        }
         self.query.results.rows.push.apply(self.query.results.rows, data.results);
         self.query.results.empty(self.query.results.rows().length == 0);
         if (data.has_more) {

+ 2 - 2
desktop/core/static/js/jquery.tableextender.js

@@ -95,8 +95,8 @@
           $(event.target.parentNode).addClass("rowSelected");
           $(event.target.parentNode).find("td").addClass("rowSelected");
           jHueTableExtenderNavigator
-              .css("left", (event.clientX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.clientX - jHueTableExtenderNavigator.width() - 10 : event.clientX) + "px")
-              .css("top", (event.clientY + 10) + "px").show();
+              .css("left", (event.pageX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.pageX - jHueTableExtenderNavigator.width() - 10 : event.pageX) + "px")
+              .css("top", (event.pageY + 10) + "px").show();
           jHueTableExtenderNavigator.find("input").focus();
         }, 100);
       }