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

HUE-2451 [dashboard] Use the simple Ace editor as the query input in the search bar

Johan Ahlen 8 éve
szülő
commit
da01616a68

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/components/hue-simple-ace.less

@@ -17,6 +17,7 @@
 */
 
 .simple-ace-single-line {
+  background-color: @cui-white;
   position: relative;
   border: 1px solid @cui-gray-300;
   border-radius: 4px;

+ 103 - 7
desktop/core/src/desktop/templates/ko_components/ko_simple_ace_editor.mako

@@ -42,6 +42,16 @@ from desktop.views import _ko
     (function () {
       var normalizedColors = HueColors.getNormalizedColors();
 
+      // TODO: Autocomplete colors should be global
+      var COLORS = {
+        ALL: HueColors.BLUE,
+        FIELD: normalizedColors['green'][2],
+        FUNCTION: normalizedColors['purple-gray'][3],
+        KEYWORD: normalizedColors['blue'][4]
+      };
+
+      var DEFAULT_POPULAR = ko.observable(false);
+
       var SolrFormulaAutocompleter = (function () {
         var SOLR_FUNCTIONS = {
           abs: {
@@ -455,12 +465,6 @@ from desktop.views import _ko
           }
         };
 
-        var COLORS = {
-          ALL: HueColors.BLUE,
-          FIELD: normalizedColors['green'][2],
-          FUNCTION: normalizedColors['purple-gray'][3]
-        };
-
         var CATEGORIES = {
           ALL: { id: 'all', color: COLORS.ALL, label: AutocompleterGlobals.i18n.category.all },
           FIELD: { id: 'field', weight: 1000, color: COLORS.FIELD, label: AutocompleterGlobals.i18n.category.field, detailsTemplate: 'solr-field' },
@@ -567,8 +571,100 @@ from desktop.views import _ko
         return SolrFormulaAutocompleter;
       })();
 
+      var SolrQueryAutocompleter = (function () {
+
+        var CATEGORIES = {
+          ALL: { id: 'all', color: COLORS.ALL, label: AutocompleterGlobals.i18n.category.all },
+          FIELD: { id: 'field', weight: 1000, color: COLORS.FIELD, label: AutocompleterGlobals.i18n.category.field, detailsTemplate: 'solr-field' },
+          KEYWORD: { id: 'keyword', weight: 0, color: COLORS.KEYWORD, label: AutocompleterGlobals.i18n.category.keyword, detailsTemplate: 'keyword' }
+        };
+
+        var SolrQuerySuggestions = function (fieldAccessor) {
+          var self = this;
+          self.entries = ko.observableArray();
+          self.fieldAccessor = fieldAccessor;
+
+          self.filtered = ko.pureComputed(function () {
+            var result = self.entries();
+
+            if (self.filter()) {
+              result = SqlUtils.autocompleteFilter(self.filter(), result);
+              huePubSub.publish('hue.ace.autocompleter.match.updated');
+            }
+
+            SqlUtils.sortSuggestions(result, self.filter(), self.sortOverride);
+
+            return result;
+          });
+
+          self.availableCategories = ko.pureComputed(function () {
+            // TODO: Implement autocomplete logic
+            return [CATEGORIES.ALL];
+          });
+
+          self.loading = ko.observable(false);
+          self.filter = ko.observable();
+          self.cancelRequests = function () {};
+        };
+
+        SolrQuerySuggestions.prototype.update = function (parseResult) {
+          var self = this;
+          var syncEntries = [];
+
+          if (parseResult.suggestFields) {
+            self.fieldAccessor().forEach(function (field) {
+              syncEntries.push({
+                category: CATEGORIES.FIELD,
+                value: field.name(),
+                meta: field.type(),
+                weightAdjust: 0,
+                popular: DEFAULT_POPULAR,
+                details: field
+              })
+            });
+          }
+
+          if (parseResult.suggestKeywords) {
+            parseResult.suggestKeywords.forEach(function (keyword) {
+              syncEntries.push({
+                category: CATEGORIES.KEYWORD,
+                value: keyword,
+                meta: AutocompleterGlobals.i18n.meta.keyword,
+                weightAdjust: 0,
+                popular: DEFAULT_POPULAR,
+                details: null
+              })
+            });
+          }
+
+          self.entries(syncEntries);
+        };
+
+        /**
+         * @param {Object} options
+         * @param {Ace} options.editor
+         * @param {Object} options.support
+         * @param {function} options.support.fields - The observable/function containing the fields
+         * @constructor
+         */
+        var SolrQueryAutocompleter = function (options) {
+          var self = this;
+          self.editor = options.editor;
+          self.suggestions = new SolrQuerySuggestions(options.support.fields);
+        };
+
+        SolrQueryAutocompleter.prototype.autocomplete = function () {
+          var self = this;
+          var parseResult = solrQueryParser.autocompleteSolrQuery(self.editor.getTextBeforeCursor(), self.editor.getTextAfterCursor());
+          self.suggestions.update(parseResult);
+        };
+
+        return SolrQueryAutocompleter;
+      })();
+
       var AVAILABLE_AUTOCOMPLETERS = {
-        'solrFormula': SolrFormulaAutocompleter
+        'solrFormula': SolrFormulaAutocompleter,
+        'solrQuery':  SolrQueryAutocompleter
       };
 
       var SimpleAceEditor = function (params, element) {

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


+ 3 - 8
desktop/libs/dashboard/src/dashboard/static/dashboard/less/search.less

@@ -97,15 +97,10 @@
           .simple-ace-single-line {
             height: 30px;
             border-radius: 0 4px 4px 0;
-          }
-
-          input {
-            width: 100% !important;
-            padding-right: 20px;
-          }
 
-          input:not(:first-child) {
-            margin-left: 10px;
+            .ace-editor {
+              margin-top: 2px;
+            }
           }
         }
       }

+ 2 - 1
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -105,7 +105,8 @@ from dashboard.conf import USE_GRIDSTER, HAS_REPORT_ENABLED
           </div>
           <div class="search-bar-query" data-bind="foreach: query.qs">
 
-            <input data-bind="clearable: q, valueUpdate:'afterkeydown', typeahead: { target: q, nonBindableSource: queryTypeahead, multipleValues: true, multipleValuesSeparator: ':', extraKeywords: 'AND OR TO', completeSolrRanges: true }, css: {'input-small': $root.query.qs().length > 1, 'flat-left': $index() === 0, 'input-xlarge': $root.collection.supportAnalytics()}" maxlength="4096" type="text" class="search-query">
+            <div data-bind="component: { name: 'hue-simple-ace-editor', params: { value: q, autocomplete: { type: 'solrQuery', support: { fields: ko.observableArray() } }, singleLine: true } }"></div>
+##             <input data-bind="clearable: q, valueUpdate:'afterkeydown', typeahead: { target: q, nonBindableSource: queryTypeahead, multipleValues: true, multipleValuesSeparator: ':', extraKeywords: 'AND OR TO', completeSolrRanges: true }, css: {'input-small': $root.query.qs().length > 1, 'flat-left': $index() === 0, 'input-xlarge': $root.collection.supportAnalytics()}" maxlength="4096" type="text" class="search-query">
             <!-- ko if: $index() >= 1 -->
               <a class="btn flat-left" href="javascript:void(0)" data-bind="click: $root.query.removeQ"><i class="fa fa-minus"></i></a>
             <!-- /ko -->

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