Bläddra i källkod

HUE-1856 [beeswax] Multi and single query execution UX

Fixed scrollup plugin to work if called more than once
Added second click to scroll to top functionality
Fixed log scrolling and sizing for multiple queries
Removed columns on query execution
Enrico Berti 12 år sedan
förälder
incheckning
6da9621f4a

+ 22 - 10
apps/beeswax/src/beeswax/templates/execute.mako

@@ -274,12 +274,12 @@ ${layout.menubar(section='query')}
         <!-- ko if: !query.explain() -->
         <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
         <!-- /ko -->
-        <!-- ko if: !query.explain() -->
+        <!-- ko if: !query.explain() && !query.isRunning() -->
         <li><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
         <li><a href="#results" data-toggle="tab">${_('Results')}</a></li>
         <li><a href="#chart" data-toggle="tab">${_('Chart')}</a></li>
         <!-- /ko -->
-        <!-- ko if: query.explain() -->
+        <!-- ko if: query.explain() && !query.isRunning() -->
         <li><a href="#explanation" data-toggle="tab">${_('Explanation')}</a></li>
         <!-- /ko -->
       </ul>
@@ -708,6 +708,10 @@ ${layout.menubar(section='query')}
     white-space: nowrap;
   }
 
+  .tab-content {
+    min-height: 100px;
+  }
+
 </style>
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
@@ -884,6 +888,10 @@ $(document).ready(function () {
   });
 
   $("a[data-toggle='tab']").on("shown", function (e) {
+    if ($(e.target).attr("href") == "#log") {
+      logsAtEnd = true;
+      window.setTimeout(resizeLogs, 150);
+    }
     if ($(e.target).attr("href") == "#results" && $(e.relatedTarget).attr("href") == "#columns") {
       if ($(".resultTable .columnSelected").length > 0) {
         var _t = $(".resultTable");
@@ -920,6 +928,9 @@ function reinitializeTable () {
       firstColumnTooltip: true
     });
     $($("a[data-toggle='tab']").parent(".active").find("a").attr("href")).height($(".dataTables_wrapper").height());
+    $(".dataTables_wrapper").jHueScrollUp({
+      secondClickScrollToTop: true
+    });
   }, 400)
 }
 
@@ -1146,14 +1157,13 @@ $(document).one('fetched.query', function () {
 
 
 // Logs
+var logsAtEnd = true;
 $(document).ready(function () {
   var labels = {
     MRJOB: "${_('MR Job')}",
     MRJOBS: "${_('MR Jobs')}"
   };
 
-  var logsAtEnd = true;
-
   $(window).resize(function () {
     resizeLogs();
   });
@@ -1343,11 +1353,6 @@ $(document).ready(function () {
     }
   });
 
-  function resizeLogs() {
-    // Use fixed subtraction since logs aren't always visible.
-    $("#log pre").css("overflow", "auto").height($(window).height() - $("#log pre").offset().top - 40);
-  }
-
   viewModel.query.watch.logs.subscribe(function(val){
     if (logsAtEnd) {
       var _logsEl = $("#log pre");
@@ -1356,6 +1361,11 @@ $(document).ready(function () {
   });
 });
 
+function resizeLogs() {
+  // Use fixed subtraction since logs aren't always visible.
+  $("#log").height($(window).height() - $("#log pre").offset().top - 10);
+  $("#log pre").css("overflow", "auto").height($(window).height() - $("#log pre").offset().top - 50);
+}
 
 // Result Datatable
 function cleanResultsTable() {
@@ -1443,7 +1453,9 @@ function resultsTable(e, data) {
     });
     addResults(viewModel, dataTable, index, pageSize);
     index += pageSize;
-    dataTableEl.jHueScrollUp();
+    dataTableEl.jHueScrollUp({
+      secondClickScrollToTop: true
+    });
   }
 }
 

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

@@ -412,6 +412,7 @@ function BeeswaxViewModel(server, query_id) {
       type: 'POST',
       success: function(data) {
         self.query.errors.removeAll();
+        self.query.watch.logs.removeAll();
         self.query.statement(data.statement);
         self.query.watch.url(data.watch_url);
         self.query.results.url('/' + self.server() + '/results/' + self.query.id() + '/0?format=json');
@@ -658,7 +659,6 @@ function BeeswaxViewModel(server, query_id) {
 function showSection(section) {
   $('.section').hide();
   $('#' + section).show();
-  $(window).scrollTop(0);
 }
 
 

+ 28 - 14
desktop/core/static/js/jquery.scrollup.js

@@ -22,13 +22,15 @@
  *
  *   options:
  *    - threshold: (default 100) value in pixels, scroll amount before the link appears
+ *    - secondClickScrollToTop: (default false) if specified, the anchor stays for longer and you can re-click on it to scroll to this element
  */
 
 (function ($, window, document, undefined) {
 
   var pluginName = "jHueScrollUp",
       defaults = {
-        threshold: 100 // it displays it after 100 px of scroll
+        threshold: 100, // it displays it after 100 px of scroll
+        secondClickScrollToTop: false
       };
 
   function Plugin(element, options) {
@@ -46,12 +48,12 @@
   Plugin.prototype.init = function () {
     var _this = this;
 
+    var link = $("<a/>").attr("id", "jHueScrollUpAnchor").attr("href", "javascript:void(0)").html("<i class='fa fa-chevron-up'></i>").appendTo("body");
     if ($("#jHueScrollUpAnchor").length > 0) { // just one scroll up per page
-      return;
+      link = $("#jHueScrollUpAnchor");
+      link.off("click");
     }
 
-    var link = $("<a/>").attr("id", "jHueScrollUpAnchor").attr("href", "javascript:void(0)").html("<i class='fa fa-chevron-up'></i>").appendTo("body");
-
     if ($(_this.element).is("body")) {
       $(window).scroll(function () {
         $(($(window).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
@@ -63,24 +65,36 @@
     }
     else {
       $(_this.element).scroll(function () {
-        $(($(_this.element).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
+        var _fadeOutMs = 200;
+        if (_this.options.secondClickScrollToTop) {
+          _fadeOutMs = 1000;
+        }
+        $(($(_this.element).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(_fadeOutMs));
       });
-      link.click(function (event) {
-        $(_this.element).animate({scrollTop: 0}, 300);
+      link.on("click", function (event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (_this.options.secondClickScrollToTop) {
+          if ($(_this.element).data("lastClick") == null || (new Date()).getTime() - $(_this.element).data("lastClick") > 1500) {
+            $(_this.element).animate({scrollTop: 0}, 300);
+          }
+          else {
+            $("body, html").animate({scrollTop: 0}, 300);
+            link.fadeOut(200);
+          }
+          $(_this.element).data("lastClick", (new Date()).getTime());
+        }
+        else {
+          $(_this.element).animate({scrollTop: 0}, 300);
+        }
         return false;
       });
     }
-
   };
 
   $.fn[pluginName] = function (options) {
     return this.each(function () {
-      if (!$.data(this, 'plugin_' + pluginName)) {
-        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
-      }
-      else {
-        $.data(this, 'plugin_' + pluginName).setOptions(options);
-      }
+      $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
     });
   }