Browse Source

HUE-1796 [dbquery] Interactive feedback when sumitting queries

Added feedback when submitting the query
Added collapse query panel to maximise the result screen estate
Fixed table extender plugin
Enrico Berti 12 years ago
parent
commit
d1b62c8

+ 46 - 2
apps/rdbms/src/rdbms/templates/execute.mako

@@ -56,8 +56,9 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     <div class="span10">
     <div class="span10">
     <div id="query">
     <div id="query">
       <div class="card card-small">
       <div class="card card-small">
-        <div style="margin-bottom: 30px">
+        <div style="margin-bottom: 10px">
           <h1 class="card-heading simple">
           <h1 class="card-heading simple">
+            <a id="collapse-editor" href="javascript:void(0)" class="pull-right"><i class="fa fa-caret-up"></i></a>
             ${ _('Query Editor') }
             ${ _('Query Editor') }
             % if can_edit_name:
             % if can_edit_name:
               :
               :
@@ -98,7 +99,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
               <textarea class="hide" tabindex="1" name="query" id="queryField"></textarea>
               <textarea class="hide" tabindex="1" name="query" id="queryField"></textarea>
 
 
               <div class="actions">
               <div class="actions">
-                <button data-bind="click: tryExecuteQuery" type="button" id="executeQuery" class="btn btn-primary" tabindex="2">${_('Execute')}</button>
+                <button data-bind="click: tryExecuteQuery" type="button" id="executeQuery" class="btn btn-primary disable-feedback" tabindex="2">${_('Execute')}</button>
                 <button data-bind="click: trySaveQuery, css: {'hide': !$root.query.id() || $root.query.id() == -1}" type="button" class="btn hide">${_('Save')}</button>
                 <button data-bind="click: trySaveQuery, css: {'hide': !$root.query.id() || $root.query.id() == -1}" type="button" class="btn hide">${_('Save')}</button>
                 <button data-bind="click: trySaveAsQuery" type="button" class="btn">${_('Save as...')}</button>
                 <button data-bind="click: trySaveAsQuery" type="button" class="btn">${_('Save as...')}</button>
                 <button data-bind="click: tryExplainQuery" type="button" id="explainQuery" class="btn">${_('Explain')}</button>
                 <button data-bind="click: tryExplainQuery" type="button" id="explainQuery" class="btn">${_('Explain')}</button>
@@ -134,6 +135,17 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
+
+    <div data-bind="css: {'hide': !isExecuting()}" class="hide">
+      <div class="card card-small scrollable">
+        <div class="row-fluid">
+          <div class="span10 offset1 center" style="padding: 30px">
+            <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 60px; color: #DDD"></i><!--<![endif]-->
+            <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   </div>
   <div class="span2" id="navigator">
   <div class="span2" id="navigator">
       <div class="card card-small">
       <div class="card card-small">
@@ -531,6 +543,31 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       'html': true
       'html': true
     });
     });
 
 
+    $("#collapse-editor").on("click", function () {
+      if ($("#query .card-body").is(":visible")) {
+        $("#query .card-body").slideUp(100, function () {
+          $(".dataTables_wrapper").jHueTableScroller();
+          $(".resultTable").jHueTableExtender({
+            hintElement: "#jumpToColumnAlert",
+            fixedHeader: true,
+            firstColumnTooltip: true
+          });
+        });
+        $("#collapse-editor i").removeClass("fa-caret-up").addClass("fa-caret-down");
+      }
+      else {
+        $("#query .card-body").slideDown(100, function () {
+          $(".dataTables_wrapper").jHueTableScroller();
+          $(".resultTable").jHueTableExtender({
+            hintElement: "#jumpToColumnAlert",
+            fixedHeader: true,
+            firstColumnTooltip: true
+          });
+        });
+        $("#collapse-editor i").removeClass("fa-caret-down").addClass("fa-caret-up");
+      }
+    });
+
   });
   });
 
 
   function modal(el) {
   function modal(el) {
@@ -725,6 +762,11 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
     }
     }
   }
   }
 
 
+  function waitingResultsTable() {
+    $("#executeQuery").attr("data-loading-text", $("#executeQuery").text() + " ...");
+    $("#executeQuery").button("loading");
+  }
+
   function addResults(viewModel, dataTable, index, pageSize) {
   function addResults(viewModel, dataTable, index, pageSize) {
     $.each(viewModel.rows.slice(index, index+pageSize), function(row_index, row) {
     $.each(viewModel.rows.slice(index, index+pageSize), function(row_index, row) {
       var ordered_row = [];
       var ordered_row = [];
@@ -770,8 +812,10 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
       index += pageSize;
       index += pageSize;
 
 
       $(".resultTable").width($(".resultTable").parent().width());
       $(".resultTable").width($(".resultTable").parent().width());
+      $("#executeQuery").button("reset");
     }
     }
   }
   }
+  $(document).on('start_execution.query', waitingResultsTable);
   $(document).on('execute.query', cleanResultsTable);
   $(document).on('execute.query', cleanResultsTable);
   $(document).on('explain.query', cleanResultsTable);
   $(document).on('explain.query', cleanResultsTable);
   $(document).on('executed.query', resultsTable);
   $(document).on('executed.query', resultsTable);

+ 4 - 0
apps/rdbms/static/js/rdbms.vm.js

@@ -32,6 +32,7 @@ function RdbmsViewModel() {
   self.rows = ko.observableArray();
   self.rows = ko.observableArray();
   self.columns = ko.observableArray();
   self.columns = ko.observableArray();
   self.resultsEmpty = ko.observable(false);
   self.resultsEmpty = ko.observable(false);
+  self.isExecuting = ko.observable(false);
 
 
   self.server = ko.computed({
   self.server = ko.computed({
     'read': function() {
     'read': function() {
@@ -212,6 +213,8 @@ function RdbmsViewModel() {
   };
   };
 
 
   self.executeQuery = function() {
   self.executeQuery = function() {
+    $(document).trigger('start_execution.query');
+    self.isExecuting(true);
     var data = ko.mapping.toJS(self.query);
     var data = ko.mapping.toJS(self.query);
     data.database = self.database();
     data.database = self.database();
     data.server = self.server().name();
     data.server = self.server().name();
@@ -226,6 +229,7 @@ function RdbmsViewModel() {
           self.updateResults(data.results);
           self.updateResults(data.results);
           self.query.id(data.design);
           self.query.id(data.design);
           self.resultsEmpty(data.results.rows.length === 0);
           self.resultsEmpty(data.results.rows.length === 0);
+          self.isExecuting(false);
           $(document).trigger('executed.query', data);
           $(document).trigger('executed.query', data);
         } else {
         } else {
           self.query.errors.push(data.message);
           self.query.errors.push(data.message);

+ 42 - 36
desktop/core/static/js/jquery.tableextender.js

@@ -55,6 +55,7 @@
 
 
   Plugin.prototype.setOptions = function (options) {
   Plugin.prototype.setOptions = function (options) {
     this.options = $.extend({}, defaults, options);
     this.options = $.extend({}, defaults, options);
+    drawHeader(this);
   };
   };
 
 
   Plugin.prototype.init = function () {
   Plugin.prototype.init = function () {
@@ -139,49 +140,54 @@
     }
     }
 
 
     if (_this.options.fixedHeader) {
     if (_this.options.fixedHeader) {
-      var clonedTable = $(_this.element).clone();
-      clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
-      clonedTable.removeClass("resultTable").find("tbody").remove();
-      $(_this.element).find("thead>tr th").each(function (i) {
-        var originalTh = $(this);
-        clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
-        clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
-          originalTh.click();
-          clonedTable.find("thead>tr th").attr("class", "sorting");
-          $(this).attr("class", originalTh.attr("class"));
-        });
-      });
-      var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
-      clonedTable.appendTo(clonedTableContainer);
-
-      var clonedTableVisibleContainer = $("<div>").width($(_this.element).parent().width()).css("overflow-x", "hidden");
-      clonedTableVisibleContainer.css("position", "fixed");
+      drawHeader(_this);
+    }
 
 
-      clonedTableContainer.appendTo(clonedTableVisibleContainer);
-      clonedTableVisibleContainer.prependTo($(_this.element).parent());
+  };
 
 
-      $(_this.element).parent().scroll(function () {
-        clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
+  function drawHeader(_this) {
+    $(".jHueTableExtenderClonedContainer").remove();
+    var clonedTable = $(_this.element).clone();
+    clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
+    clonedTable.removeClass("resultTable").find("tbody").remove();
+    $(_this.element).find("thead>tr th").each(function (i) {
+      var originalTh = $(this);
+      clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
+      clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
+        originalTh.click();
+        clonedTable.find("thead>tr th").attr("class", "sorting");
+        $(this).attr("class", originalTh.attr("class"));
       });
       });
+    });
+    var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
+    clonedTable.appendTo(clonedTableContainer);
 
 
-      $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+    var clonedTableVisibleContainer = $("<div>").addClass("jHueTableExtenderClonedContainer").width($(_this.element).parent().width()).css("overflow-x", "hidden");
+    clonedTableVisibleContainer.css("position", "fixed");
 
 
-      window.setInterval(function () {
-        if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
-          clonedTableVisibleContainer.width($(_this.element).parent().width());
-          $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
-          $(_this.element).find("thead>tr th").each(function (i) {
-            clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
-          });
-        }
-      }, 250);
+    clonedTableContainer.appendTo(clonedTableVisibleContainer);
+    clonedTableVisibleContainer.prependTo($(_this.element).parent());
 
 
-      $(_this.element).parent().resize(function () {
-        clonedTableVisibleContainer.width($(this).width());
-      });
-    }
+    $(_this.element).parent().scroll(function () {
+      clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
+    });
 
 
-  };
+    $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+
+    window.setInterval(function () {
+      if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
+        clonedTableVisibleContainer.width($(_this.element).parent().width());
+        $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+        $(_this.element).find("thead>tr th").each(function (i) {
+          clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
+        });
+      }
+    }, 250);
+
+    $(_this.element).parent().resize(function () {
+      clonedTableVisibleContainer.width($(this).width());
+    });
+  }
 
 
   function getSelection() {
   function getSelection() {
     var t = '';
     var t = '';

+ 33 - 31
desktop/core/static/js/jquery.tablescroller.js

@@ -42,6 +42,7 @@
 
 
   Plugin.prototype.setOptions = function (options) {
   Plugin.prototype.setOptions = function (options) {
     this.options = $.extend({}, defaults, options);
     this.options = $.extend({}, defaults, options);
+    resizeScrollingTable(this);
   };
   };
 
 
   Plugin.prototype.init = function () {
   Plugin.prototype.init = function () {
@@ -51,7 +52,7 @@
 
 
     var disableScrollingTable = $(_this.element).find("table").eq(0).data("tablescroller-disable");
     var disableScrollingTable = $(_this.element).find("table").eq(0).data("tablescroller-disable");
     if (disableScrollingTable == null || disableScrollingTable != true) {
     if (disableScrollingTable == null || disableScrollingTable != true) {
-      resizeScrollingTable(_this.element);
+      resizeScrollingTable(_this);
       var _resizeTimeout = -1;
       var _resizeTimeout = -1;
       var winWidth = $(window).width();
       var winWidth = $(window).width();
       var winHeight = $(window).height();
       var winHeight = $(window).height();
@@ -60,7 +61,7 @@
         _resizeTimeout = window.setTimeout(function(){
         _resizeTimeout = window.setTimeout(function(){
           // prevents endless loop in IE8
           // prevents endless loop in IE8
           if (winWidth != $(window).width() || winHeight != $(window).height()) {
           if (winWidth != $(window).width() || winHeight != $(window).height()) {
-            resizeScrollingTable(_this.element);
+            resizeScrollingTable(_this);
             winWidth = $(window).width();
             winWidth = $(window).width();
             winHeight = $(window).height();
             winHeight = $(window).height();
           }
           }
@@ -68,44 +69,45 @@
       });
       });
     }
     }
 
 
-    function resizeScrollingTable(el) {
-      $(el).css("overflow-y", "").css("height", "");
-      var heightAfter = _this.options.heightAfterCorrection;
-      $(el).nextAll(":visible").each(function () {
-        heightAfter += $(this).outerHeight(true);
-      });
+  };
+  function resizeScrollingTable(_this) {
+    var el = _this.element;
+    $(el).css("overflow-y", "").css("height", "");
+    var heightAfter = _this.options.heightAfterCorrection;
+    $(el).nextAll(":visible").each(function () {
+      heightAfter += $(this).outerHeight(true);
+    });
 
 
-      var heightCondition = $(el).height() > ($(window).height() - $(el).offset().top - heightAfter);
-      var enforceHeight = $(_this.element).find("table").eq(0).data("tablescroller-enforce-height");
-      if (enforceHeight !== undefined && enforceHeight == true) {
-        heightCondition = true;
-      }
+    var heightCondition = $(el).height() > ($(window).height() - $(el).offset().top - heightAfter);
+    var enforceHeight = $(_this.element).find("table").eq(0).data("tablescroller-enforce-height");
+    if (enforceHeight !== undefined && enforceHeight == true) {
+      heightCondition = true;
+    }
 
 
-      if (heightCondition) {
-        var specificMinHeight = $(el).find("table").eq(0).data("tablescroller-min-height");
-        var minHeightVal = _this.options.minHeight;
-        if (!isNaN(parseFloat(specificMinHeight)) && isFinite(specificMinHeight)) {
-          minHeightVal = parseFloat(specificMinHeight);
+    if (heightCondition) {
+      var specificMinHeight = $(el).find("table").eq(0).data("tablescroller-min-height");
+      var minHeightVal = _this.options.minHeight;
+      if (!isNaN(parseFloat(specificMinHeight)) && isFinite(specificMinHeight)) {
+        minHeightVal = parseFloat(specificMinHeight);
+      }
+      var disableMinHeight = $(_this.element).find("table").eq(0).data("tablescroller-min-height-disable");
+      if (disableMinHeight != null && disableMinHeight == true) {
+        if (heightCondition) {
+          $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
         }
         }
-        var disableMinHeight = $(_this.element).find("table").eq(0).data("tablescroller-min-height-disable");
-        if (disableMinHeight != null && disableMinHeight == true) {
-          if (heightCondition) {
-            $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
-          }
+      }
+      else {
+        if (($(window).height() - $(el).offset().top - heightAfter) > minHeightVal){
+          $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
         }
         }
         else {
         else {
-          if (($(window).height() - $(el).offset().top - heightAfter) > minHeightVal){
-            $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
-          }
-          else {
-            if ($(el).data("original-height") > minHeightVal){
-              $(el).css("overflow-y", "auto").height(minHeightVal);
-            }
+          if ($(el).data("original-height") > minHeightVal){
+            $(el).css("overflow-y", "auto").height(minHeightVal);
           }
           }
         }
         }
       }
       }
     }
     }
-  };
+  }
 
 
   $.fn[pluginName] = function (options) {
   $.fn[pluginName] = function (options) {
     return this.each(function () {
     return this.each(function () {