Ver Fonte

HUE-9291 [editor] Add live filtering of streaming data in the result grid

Johan Ahlen há 5 anos atrás
pai
commit
efadcdca9f

+ 25 - 5
desktop/core/src/desktop/js/apps/notebook2/components/resultGrid/ko.resultGrid.js

@@ -68,11 +68,20 @@ const TEMPLATE = `
           params: {
             gridSideBtn: false,
             snippet: $data,
-            notebook: $parent 
-          } 
+            notebook: $parent
+          }
         }
       " style="display:inline-block;"></div>
   <!-- /ko -->
+
+  <!-- ko if: streaming -->
+  <form autocomplete="off" class="inline-block">
+    <input class="input-small search-input" style="margin-left: 10px;" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="${ I18n('Live filter') }" data-bind="
+        textInput: filter,
+        clearable: filter
+      "/>
+  </form>
+  <!-- /ko -->
 </div>
 
 <div class="split-result-container">
@@ -152,7 +161,7 @@ const TEMPLATE = `
         onPosition: function() { redrawFixedHeaders(); }
       }
     "><div class="resize-bar"></div></div>
-    
+
   <div class="split-result-content" data-bind="delayedOverflow: 'slow', css: resultsKlass">
     <table class="table table-condensed resultTable">
       <thead>
@@ -161,7 +170,7 @@ const TEMPLATE = `
             text: ($index() == 0 ? '&nbsp;' : $data.name),
             css: typeof cssClass != 'undefined' ? cssClass : 'sort-string',
             attr: { title: $data.type },
-            style: { 
+            style: {
               'width': $index() == 0 ? '1%' : '',
               'height': $index() == 0 ? '32px' : ''
             },
@@ -196,6 +205,14 @@ class ResultGrid extends DisposableComponent {
     this.fetchResult = params.fetchResult;
     this.streaming = params.streaming;
 
+    this.filter = ko.observable().extend({ throttle: 100 });
+
+    this.filter.subscribe(filter => {
+      if (this.hueDatatable) {
+        this.hueDatatable.setFilter(filter);
+      }
+    });
+
     const trackedObservables = {
       columnsVisible: false,
       isMetaFilterVisible: false
@@ -400,6 +417,9 @@ class ResultGrid extends DisposableComponent {
     $resultTable.addClass('dt');
 
     this.hueDatatable = this.createHueDatatable($resultTable);
+    if (this.filter()) {
+      this.hueDatatable.setFilter(this.filter());
+    }
 
     const $dataTablesWrapper = $resultTable.parents('.dataTables_wrapper');
 
@@ -579,7 +599,7 @@ class ResultGrid extends DisposableComponent {
         dataTable = this.createDatatable();
         $resultTable.data('rendered', true);
       } else {
-        dataTable = $resultTable.hueDataTable();
+        dataTable = this.hueDatatable;
       }
       try {
         dataTable.fnAddData(

+ 37 - 3
desktop/core/src/desktop/js/jquery/plugins/jquery.huedatatable.js

@@ -426,6 +426,8 @@ $.fn.hueDataTable = function(oInit) {
 
   self.isDrawing = false;
 
+  this.lowerCaseFilter = '';
+
   self.fnDraw = function(force) {
     const aoColumns = self.$table.data('aoColumns');
     if (!self.isDrawing && aoColumns) {
@@ -640,18 +642,48 @@ $.fn.hueDataTable = function(oInit) {
     }
   };
 
+  const applyFilter = () => {
+    const data = this.$table.data('originalData');
+
+    if (!this.lowerCaseFilter || !data.length) {
+      this.$table.data('data', data);
+    } else {
+      this.$table.data(
+        'data',
+        data.filter(row =>
+          row.some(
+            (col, idx) => idx > 0 && ('' + col).toLowerCase().indexOf(this.lowerCaseFilter) !== -1
+          )
+        )
+      );
+    }
+  };
+
+  this.setFilter = filter => {
+    this.lowerCaseFilter = filter.toLowerCase();
+    if (this.$table.children('tbody').length > 0) {
+      this.$table.children('tbody').empty();
+    }
+
+    applyFilter();
+
+    this.fnDraw(true);
+  };
+
   self.fnAddData = function(mData, bRedraw, streaming, streamRecordLimit) {
     const $t = self.$table;
 
     if ($t) {
       const aoColumns = $t.data('aoColumns') || [];
       const newData = streaming
-        ? mData.reverse().concat($t.data('data'))
-        : $t.data('data').concat(mData);
+        ? mData.reverse().concat($t.data('originalData'))
+        : $t.data('originalData').concat(mData);
       if (streaming && streamRecordLimit) {
         newData.splice(streamRecordLimit);
       }
-      $t.data('data', newData);
+      $t.data('originalData', newData);
+
+      applyFilter();
 
       if (mData.length === 0) {
         return;
@@ -693,6 +725,7 @@ $.fn.hueDataTable = function(oInit) {
         $t.children('tr').remove();
       }
       $t.data('data', []);
+      $t.data('originalData', []);
       $t.data('aoRows', []);
       $t.data('aoColumns', []);
       $t.data('fnDraws', 0);
@@ -722,6 +755,7 @@ $.fn.hueDataTable = function(oInit) {
     }
     $('.hue-datatable-search').remove();
     self.$table.data('data', []);
+    self.$table.data('originalData', []);
     self.$table.data('aoRows', []);
     self.$table.data('aoColumns', []);
     self.$table.data('fnDraws', 0);

Diff do ficheiro suprimidas por serem muito extensas
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css


+ 7 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook2.less

@@ -268,6 +268,13 @@
   .snippet-tab-actions {
     padding: 10px 5px 5px 5px;
     height: 30px;
+  }
+
+  .snippet-tab-actions-append,
+  .snippet-tab-actions {
+    form {
+      margin: 0;
+    }
 
     .search-input {
       margin: 0;

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff