Forráskód Böngészése

HUE-7506 [editor] Use the inline autocomplete in the result column search

Johan Ahlen 8 éve
szülő
commit
127a23f

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -567,6 +567,7 @@ ul.errorlist {
   position: relative;
   border-radius: 4px;
   border: 1px solid @cui-gray-300;
+  background-color: @cui-white;
 
   > div {
     position:absolute;

+ 5 - 0
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -82,6 +82,11 @@ from metadata.conf import has_optimizer, OPTIMIZER
 
     var ENABLE_SQL_SYNTAX_CHECK = '${ conf.ENABLE_SQL_SYNTAX_CHECK.get() }' === 'True';
 
+
+    window.SQL_COLUMNS_KNOWN_FACET_VALUES = {
+      'type': {'array': -1, 'boolean': -1, 'bigint': -1, 'binary': -1, 'char': -1, 'date': -1, 'double': -1, 'decimal': -1, 'float': -1, 'int': -1, 'map': -1, 'real': -1, 'smallint': -1, 'string': -1, 'struct': -1, 'timestamp': -1, 'tinyint': -1, 'varchar': -1 }
+    };
+
     var DocumentTypeGlobals = {
       'all': '${_('All')}',
       'directory': '${ _('Directory') }',

+ 0 - 4
desktop/core/src/desktop/templates/ko_components/ko_sql_columns_table.mako

@@ -93,10 +93,6 @@ from desktop.views import _ko
   <script type="text/javascript">
     (function () {
 
-      window.SQL_COLUMNS_KNOWN_FACET_VALUES = {
-        'type': {'array': -1, 'boolean': -1, 'bigint': -1, 'binary': -1, 'char': -1, 'date': -1, 'double': -1, 'decimal': -1, 'float': -1, 'int': -1, 'map': -1, 'real': -1, 'smallint': -1, 'string': -1, 'struct': -1, 'timestamp': -1, 'tinyint': -1, 'varchar': -1 }
-      };
-
       function SqlColumnsTable(params) {
         var self = this;
         self.columns = params.columns;

+ 55 - 33
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -34,6 +34,28 @@ var EditorViewModel = (function() {
       .extend("throttle", 100);
     self.handle = ko.observable(typeof result.handle != "undefined" && result.handle != null ? result.handle : {});
     self.meta = ko.observableArray(typeof result.meta != "undefined" && result.meta != null ? result.meta : []);
+
+    var adaptMeta = function () {
+      var i = 0;
+      self.meta().forEach(function (item) {
+        if (typeof item.checked === 'undefined') {
+          item.checked = ko.observable(true);
+          item.checked.subscribe(function () {
+            self.filteredMetaChecked(self.filteredMeta().some(function (item) { return item.checked(); }));
+          });
+        }
+        item.type = item.type.replace(/_type/i, '').toLowerCase();
+        if (typeof item.originalIndex === 'undefined') {
+          item.originalIndex = i;
+        }
+        i++;
+      })
+    };
+
+    adaptMeta();
+    self.meta.subscribe(adaptMeta);
+
+
     self.rows = ko.observable(typeof result.rows != "undefined" && result.rows != null ? result.rows : null);
     self.hasMore = ko.observable(typeof result.hasMore != "undefined" && result.hasMore != null ? result.hasMore : false);
     self.statement_id = ko.observable(typeof result.statement_id != "undefined" && result.statement_id != null ? result.statement_id : 0);
@@ -54,47 +76,47 @@ var EditorViewModel = (function() {
         return item.name != ''
       });
     });
-    self.metaFilter = ko.observable('');
+    self.metaFilter = ko.observable();
+
     self.isMetaFilterVisible = ko.observable(false);
     self.filteredMetaChecked = ko.observable(true);
     self.filteredMeta = ko.pureComputed(function () {
-      return ko.utils.arrayFilter(self.meta(), function (item, i) {
-        if (typeof item.checked === 'undefined') {
-          item.checked = ko.observable(true);
-          item.checked.subscribe(function () {
-            self.filteredMetaChecked(ko.utils.arrayFilter(self.filteredMeta(), function (item) {
-                return !item.checked();
-              }).length == 0);
-          });
+      if (!self.metaFilter() || self.metaFilter().query === '') {
+        return self.meta();
+      }
+
+      return self.meta().filter(function (item) {
+        var facets = self.metaFilter().facets;
+        var isFacetMatch = !facets || Object.keys(facets).length === 0 || !facets['type']; // So far only type facet is used for SQL
+        var isTextMatch = !self.metaFilter().text || self.metaFilter().text.length === 0;
+        var match = true;
+
+        if (!isFacetMatch) {
+          match = !!facets['type'][item.type];
         }
-        if (typeof item.originalIndex === 'undefined') {
-          item.originalIndex = i;
+
+        if (match && !isTextMatch) {
+          match = self.metaFilter().text.every(function (text) {
+            return item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
+          });
         }
-        var metaFilterValue = self.metaFilter().toLowerCase();
-        var metaFilterValues = metaFilterValue.split(' ');
-        var toBeReturned = item.name !== '';
-        var hasPartial = false;
-        metaFilterValues.forEach(function (partial) {
-          if (partial.indexOf('column:') > -1) {
-            partial = $.trim(partial.split('column:')[1]);
-            toBeReturned = toBeReturned && item.name.toLowerCase().indexOf(partial) > -1;
-            hasPartial = true;
-          }
-          if (partial.indexOf('type:') > -1) {
-            partial = $.trim(partial.split('type:')[1]);
-            toBeReturned = toBeReturned && item.type.toLowerCase().indexOf(partial) > -1;
-            hasPartial = true;
-          }
-          if (partial.indexOf('column:') === -1 && partial.indexOf('type:') === -1) {
-            if (!hasPartial) {
-              toBeReturned = toBeReturned && (item.name.toLowerCase().indexOf(partial) > -1 || item.type.toLowerCase().indexOf(partial) > -1);
-            }
-          }
-        });
-        return toBeReturned;
+        return match;
       });
     });
 
+    self.autocompleteFromEntries = function (nonPartial, partial) {
+      var result = [];
+      var partialLower = partial.toLowerCase();
+      self.meta().forEach(function (column) {
+        if (column.name.toLowerCase().indexOf(partialLower) === 0) {
+          result.push(nonPartial + partial + column.name.substring(partial.length))
+        } else if (column.name.toLowerCase().indexOf('.' + partialLower) !== -1) {
+          result.push(nonPartial + partial + column.name.substring(partial.length + column.name.toLowerCase().indexOf('.' + partialLower) + 1))
+        }
+      });
+
+      return result;
+    };
     self.clickFilteredMetaCheck = function () {
       self.filteredMeta().forEach(function (item) {
         item.checked(self.filteredMetaChecked());

+ 16 - 4
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1371,14 +1371,26 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
           </th>
         </tr>
         <tr data-bind="visible: result.isMetaFilterVisible">
-          <td colspan="3"><input class="meta-filter" type="text" data-bind="blurHide: result.isMetaFilterVisible, clearable: result.metaFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }" title="${ _('Type column:xxx or type:yyy for specific filters.') }" style="width: 257px" /></td>
+          <td colspan="3" class="context-popover-inline-autocomplete">
+            <!-- ko component: {
+              name: 'inline-autocomplete',
+              params: {
+                placeHolder: '${ _ko('Filter columns...') }',
+                querySpec: result.metaFilter,
+                facets: Object.keys(SQL_COLUMNS_KNOWN_FACET_VALUES),
+                knownFacetValues: SQL_COLUMNS_KNOWN_FACET_VALUES,
+                autocompleteFromEntries: result.autocompleteFromEntries
+              }
+            } --><!-- /ko -->
+            ##<input class="meta-filter" type="text" data-bind="blurHide: result.isMetaFilterVisible, clearable: result.metaFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Filter columns...') }" title="${ _('Type column:xxx or type:yyy for specific filters.') }" style="width: 257px" />
+          </td>
         </tr>
       </thead>
       <tbody class="unstyled filtered-meta" data-bind="foreach: result.filteredMeta">
         <tr data-bind="visible: name != ''">
-          <td><input class="no-margin-top" type="checkbox" data-bind="event: { change: function(){ toggleColumn($element, $data.originalIndex, $parent);} }, checked: $data.checked" /></td>
-          <td><a class="pointer" data-bind="click: function(){ scrollToColumn($element, $data.originalIndex); }, attr: { title: $data.name + ' - ' + $data.type}"><span data-bind="text: $data.name"></span></a></td>
-          <td><span data-bind="text: $data.type" class="muted margin-left-20"></span></td>
+          <td><input class="no-margin-top" type="checkbox" data-bind="event: { change: function(){ toggleColumn($element, originalIndex, $parent);} }, checked: checked" /></td>
+          <td><a class="pointer" data-bind="click: function(){ scrollToColumn($element, $data.originalIndex); }, attr: { title: name + ' - ' + type}"><span data-bind="text: name"></span></a></td>
+          <td><span data-bind="text: type" class="muted margin-left-20"></span></td>
         </tr>
       </tbody>
       <tfoot>

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott