Browse Source

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 years ago
parent
commit
6da9621

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

@@ -274,12 +274,12 @@ ${layout.menubar(section='query')}
         <!-- ko if: !query.explain() -->
         <!-- ko if: !query.explain() -->
         <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
         <li><a href="#log" data-toggle="tab">${_('Log')}</a></li>
         <!-- /ko -->
         <!-- /ko -->
-        <!-- ko if: !query.explain() -->
+        <!-- ko if: !query.explain() && !query.isRunning() -->
         <li><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
         <li><a href="#columns" data-toggle="tab">${_('Columns')}</a></li>
         <li><a href="#results" data-toggle="tab">${_('Results')}</a></li>
         <li><a href="#results" data-toggle="tab">${_('Results')}</a></li>
         <li><a href="#chart" data-toggle="tab">${_('Chart')}</a></li>
         <li><a href="#chart" data-toggle="tab">${_('Chart')}</a></li>
         <!-- /ko -->
         <!-- /ko -->
-        <!-- ko if: query.explain() -->
+        <!-- ko if: query.explain() && !query.isRunning() -->
         <li><a href="#explanation" data-toggle="tab">${_('Explanation')}</a></li>
         <li><a href="#explanation" data-toggle="tab">${_('Explanation')}</a></li>
         <!-- /ko -->
         <!-- /ko -->
       </ul>
       </ul>
@@ -708,6 +708,10 @@ ${layout.menubar(section='query')}
     white-space: nowrap;
     white-space: nowrap;
   }
   }
 
 
+  .tab-content {
+    min-height: 100px;
+  }
+
 </style>
 </style>
 
 
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
 <link href="/static/ext/css/leaflet.css" rel="stylesheet">
@@ -884,6 +888,10 @@ $(document).ready(function () {
   });
   });
 
 
   $("a[data-toggle='tab']").on("shown", function (e) {
   $("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 ($(e.target).attr("href") == "#results" && $(e.relatedTarget).attr("href") == "#columns") {
       if ($(".resultTable .columnSelected").length > 0) {
       if ($(".resultTable .columnSelected").length > 0) {
         var _t = $(".resultTable");
         var _t = $(".resultTable");
@@ -920,6 +928,9 @@ function reinitializeTable () {
       firstColumnTooltip: true
       firstColumnTooltip: true
     });
     });
     $($("a[data-toggle='tab']").parent(".active").find("a").attr("href")).height($(".dataTables_wrapper").height());
     $($("a[data-toggle='tab']").parent(".active").find("a").attr("href")).height($(".dataTables_wrapper").height());
+    $(".dataTables_wrapper").jHueScrollUp({
+      secondClickScrollToTop: true
+    });
   }, 400)
   }, 400)
 }
 }
 
 
@@ -1146,14 +1157,13 @@ $(document).one('fetched.query', function () {
 
 
 
 
 // Logs
 // Logs
+var logsAtEnd = true;
 $(document).ready(function () {
 $(document).ready(function () {
   var labels = {
   var labels = {
     MRJOB: "${_('MR Job')}",
     MRJOB: "${_('MR Job')}",
     MRJOBS: "${_('MR Jobs')}"
     MRJOBS: "${_('MR Jobs')}"
   };
   };
 
 
-  var logsAtEnd = true;
-
   $(window).resize(function () {
   $(window).resize(function () {
     resizeLogs();
     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){
   viewModel.query.watch.logs.subscribe(function(val){
     if (logsAtEnd) {
     if (logsAtEnd) {
       var _logsEl = $("#log pre");
       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
 // Result Datatable
 function cleanResultsTable() {
 function cleanResultsTable() {
@@ -1443,7 +1453,9 @@ function resultsTable(e, data) {
     });
     });
     addResults(viewModel, dataTable, index, pageSize);
     addResults(viewModel, dataTable, index, pageSize);
     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',
       type: 'POST',
       success: function(data) {
       success: function(data) {
         self.query.errors.removeAll();
         self.query.errors.removeAll();
+        self.query.watch.logs.removeAll();
         self.query.statement(data.statement);
         self.query.statement(data.statement);
         self.query.watch.url(data.watch_url);
         self.query.watch.url(data.watch_url);
         self.query.results.url('/' + self.server() + '/results/' + self.query.id() + '/0?format=json');
         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) {
 function showSection(section) {
   $('.section').hide();
   $('.section').hide();
   $('#' + section).show();
   $('#' + section).show();
-  $(window).scrollTop(0);
 }
 }
 
 
 
 

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

@@ -22,13 +22,15 @@
  *
  *
  *   options:
  *   options:
  *    - threshold: (default 100) value in pixels, scroll amount before the link appears
  *    - 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) {
 (function ($, window, document, undefined) {
 
 
   var pluginName = "jHueScrollUp",
   var pluginName = "jHueScrollUp",
       defaults = {
       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) {
   function Plugin(element, options) {
@@ -46,12 +48,12 @@
   Plugin.prototype.init = function () {
   Plugin.prototype.init = function () {
     var _this = this;
     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
     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")) {
     if ($(_this.element).is("body")) {
       $(window).scroll(function () {
       $(window).scroll(function () {
         $(($(window).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
         $(($(window).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
@@ -63,24 +65,36 @@
     }
     }
     else {
     else {
       $(_this.element).scroll(function () {
       $(_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;
         return false;
       });
       });
     }
     }
-
   };
   };
 
 
   $.fn[pluginName] = function (options) {
   $.fn[pluginName] = function (options) {
     return this.each(function () {
     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));
     });
     });
   }
   }