Просмотр исходного кода

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 лет назад
Родитель
Сommit
3da5445

+ 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);
       }
       }