Browse Source

HUE-1074 [impala] Infinite scroll on result page

Added infite scroll to result page to both Impala and Beeswax
Changed jHueScrollUp plugin to accept scrolling elements too
Enrico Berti 12 years ago
parent
commit
46e1871

+ 41 - 13
apps/beeswax/src/beeswax/templates/watch_results.mako

@@ -171,18 +171,14 @@ ${layout.menubar(section='query')}
               % endfor
             </tbody>
             </table>
-            <div class="pagination pull-right">
-              <ul>
-              % if start_row != 0:
-                  % if app_name != 'impala':
-                      <li class="prev"><a title="${_('Beginning of List')}" href="${ url(app_name + ':view_results', query.id, 0) }${'?context=' + context_param or '' | n}">&larr; ${_('Beginning of List')}</a></li>
-                  % endif
-              % endif
-              % if has_more and (len(results) == 100 or app_name == 'impala'):
-                  <li><a title="${_('Next page')}" href= "${ url(app_name + ':view_results', query.id, next_row) }${'?context=' + context_param or '' | n }">${_('Next Page')} &rarr;</a></li>
-              % endif
-              </ul>
-            </div>
+
+             <div style="text-align: center; padding: 5px; height: 30px">
+               <span class="noMore hide"
+                     style="color:#999999">${ _('You have reached the last record for this query.') }</span><img
+                     src="/static/art/spinner.gif"
+                     class="spinner"
+                     style="display: none;"/>
+             </div>
             % endif
         </div>
 
@@ -257,8 +253,9 @@ ${layout.menubar(section='query')}
 
 
 <script type="text/javascript" charset="utf-8">
+
     $(document).ready(function () {
-      $(".resultTable").dataTable({
+      var dataTable = $(".resultTable").dataTable({
         "bPaginate": false,
         "bLengthChange": false,
         "bInfo": false,
@@ -368,6 +365,37 @@ ${layout.menubar(section='query')}
           $("table").replaceWith("${ _('Download results from the left.') }");
         % endif
       % endif
+
+      // enable infinite scroll instead of pagination
+      var _nextJsonSet = "${ next_json_set }";
+      var _hasMore = ${ has_more and 'true' or 'false' };
+      var _dt = $("div.dataTables_wrapper");
+      _dt.on("scroll", function (e) {
+        if (_dt.scrollTop() + _dt.outerHeight() + 20 > _dt[0].scrollHeight && !_dt.data("isLoading") && _hasMore) {
+          _dt.data("isLoading", true);
+          _dt.animate({opacity: '0.55'}, 200);
+          $(".spinner").show();
+          $.getJSON(_nextJsonSet, function (data) {
+            _hasMore = data.has_more;
+            if (!_hasMore) {
+              $(".noMore").removeClass("hide");
+            }
+            _nextJsonSet = data.next_json_set;
+            var _cnt = 0;
+            for (var i = 0; i < data.results.length; i++) {
+              var row = data.results[i];
+              row.unshift(data.start_row + _cnt);
+              dataTable.fnAddData(row);
+              _cnt++;
+            }
+            _dt.data("isLoading", false);
+            _dt.animate({opacity: '1'}, 50);
+            $(".spinner").hide();
+          });
+        }
+      });
+      _dt.jHueScrollUp();
+
     });
 </script>
 

+ 17 - 0
apps/beeswax/src/beeswax/views.py

@@ -609,8 +609,25 @@ def view_results(request, id, first_row=0):
       'download_urls': download_urls,
       'save_form': save_form,
       'can_save': query_history.owner == request.user and not download,
+      'next_json_set': reverse(get_app_name(request) + ':view_results', kwargs={
+        'id': str(id),
+        'first_row': results.start_row + len(data)
+      }) + ('?context=' + context_param or '') + '&format=json'
     })
 
+  if request.GET.get('format') == 'json':
+    context = {
+      'results': data,
+      'has_more': results.has_more,
+      'next_row': results.start_row + len(data),
+      'start_row': results.start_row,
+      'next_json_set': reverse(get_app_name(request) + ':view_results', kwargs={
+        'id': str(id),
+        'first_row': results.start_row + len(data)
+      }) + ('?context=' + context_param or '') + '&format=json'
+    }
+    return HttpResponse(json.dumps(context), mimetype="application/json")
+
   return render('watch_results.mako', request, context)
 
 

+ 18 - 7
desktop/core/static/js/Source/jHue/jquery.scrollup.js

@@ -52,14 +52,25 @@
 
     var link = $("<a/>").attr("id", "jHueScrollUpAnchor").attr("href", "javascript:void(0)").html("<i class='icon-chevron-up'></i>").appendTo("body");
 
-    $(window).scroll(function () {
-      $(($(window).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
-    });
+    if ($(_this.element).is("body")) {
+      $(window).scroll(function () {
+        $(($(window).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
+      });
+      link.click(function (event) {
+        $("body, html").animate({scrollTop: $(_this.element).position().top}, 300);
+        return false;
+      });
+    }
+    else {
+      $(_this.element).scroll(function () {
+        $(($(_this.element).scrollTop() > _this.options.threshold) ? link.fadeIn(200) : link.fadeOut(200));
+      });
+      link.click(function (event) {
+        $(_this.element).animate({scrollTop: 0}, 300);
+        return false;
+      });
+    }
 
-    link.click(function (event) {
-      $("body, html").animate({scrollTop: $(_this.element).position().top}, 300);
-      return false;
-    });
   };
 
   $.fn[pluginName] = function (options) {