Эх сурвалжийг харах

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 жил өмнө
parent
commit
3da5445a17

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

@@ -297,7 +297,7 @@ ${layout.menubar(section='query')}
         </div>
         </div>
         <div class="tab-pane" id="results">
         <div class="tab-pane" id="results">
           <div data-bind="css: {'hide': $root.query.results.rows().length == 0}" class="hide">
           <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>
               <thead>
               <tr data-bind="foreach: $root.query.results.columns">
               <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>
                 <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;
     height: 200px;
   }
   }
 
 
+  .resultTable td, .resultTable th {
+    white-space: nowrap;
+  }
+
 </style>
 </style>
 
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
@@ -890,6 +894,7 @@ function getHighlightedQuery() {
 function reinitializeTable () {
 function reinitializeTable () {
   window.setTimeout(function(){
   window.setTimeout(function(){
     $(".dataTables_wrapper").jHueTableScroller({
     $(".dataTables_wrapper").jHueTableScroller({
+      minHeight: $(window).height() - 190,
       heightAfterCorrection: 0
       heightAfterCorrection: 0
     });
     });
     $(".resultTable").jHueTableExtender({
     $(".resultTable").jHueTableExtender({
@@ -1418,6 +1423,7 @@ function resultsTable(e, data) {
     });
     });
     addResults(viewModel, dataTable, index, pageSize);
     addResults(viewModel, dataTable, index, pageSize);
     index += pageSize;
     index += pageSize;
+    dataTableEl.jHueScrollUp();
   }
   }
 }
 }
 
 
@@ -1486,6 +1492,9 @@ function tryExecuteQuery() {
   $(".tooltip").remove();
   $(".tooltip").remove();
   var query = getHighlightedQuery() || codeMirror.getValue();
   var query = getHighlightedQuery() || codeMirror.getValue();
   viewModel.query.query(query);
   viewModel.query.query(query);
+  if ($(".dataTables_wrapper").length > 0) { // forces results to be up
+    $(".dataTables_wrapper").scrollTop(0);
+  }
   if (viewModel.query.isParameterized()) {
   if (viewModel.query.isParameterized()) {
     viewModel.fetchParameters();
     viewModel.fetchParameters();
   } else {
   } else {
@@ -1734,6 +1743,7 @@ $(document).ready(function () {
         $('.resultsContainer .watch-query').hide();
         $('.resultsContainer .watch-query').hide();
         $('.resultsContainer .view-query-results').show();
         $('.resultsContainer .view-query-results').show();
         clickHard('.resultsContainer .nav-tabs a[href="#results"]');
         clickHard('.resultsContainer .nav-tabs a[href="#results"]');
+        $("html, body").animate({ scrollTop: ($(".resultsContainer").position().top - 80) + "px" });
       }
       }
     },
     },
     'query/explanation': function () {
     'query/explanation': function () {

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

@@ -450,7 +450,9 @@ function BeeswaxViewModel(server, query_id) {
       type: 'GET',
       type: 'GET',
       success: function(data) {
       success: function(data) {
         self.query.isRunning(false);
         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.rows.push.apply(self.query.results.rows, data.results);
         self.query.results.empty(self.query.results.rows().length == 0);
         self.query.results.empty(self.query.results.rows().length == 0);
         if (data.has_more) {
         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).addClass("rowSelected");
           $(event.target.parentNode).find("td").addClass("rowSelected");
           $(event.target.parentNode).find("td").addClass("rowSelected");
           jHueTableExtenderNavigator
           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();
           jHueTableExtenderNavigator.find("input").focus();
         }, 100);
         }, 100);
       }
       }