Explorar o código

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 %!s(int64=12) %!d(string=hai) anos
pai
achega
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) {