Bläddra i källkod

HUE-6815 [frontend] Add config flag to enable the new global search

Enabled by setting use_new_global_search=true in the .ini file
Johan Ahlen 8 år sedan
förälder
incheckning
d6d4d8db68

+ 3 - 0
desktop/conf.dist/hue.ini

@@ -172,6 +172,9 @@
   # Choose whether to show the new SQL editor.
   ## use_new_editor=true
 
+  # Choose whether to enable the new global search or not.
+  ## use_new_global_search=false
+
   # Choose whether to enable SQL syntax check or not
   ## enable_sql_syntax_check=false
 

+ 3 - 1
desktop/conf/pseudo-distributed.ini.tmpl

@@ -176,10 +176,12 @@
   # Choose whether to show the new SQL editor.
   ## use_new_editor=true
 
+  # Choose whether to enable the new global search or not.
+  ## use_new_global_search=false
+
   # Choose whether to enable the new SQL syntax checker or not
   ## enable_sql_syntax_check=false
 
-
   # Choose whether to show the improved assist panel and the right context panel
   ## use_new_side_panels=false
 

+ 7 - 0
desktop/core/src/desktop/conf.py

@@ -1300,6 +1300,13 @@ ENABLE_SQL_SYNTAX_CHECK = Config( # To remove when syntax check is ready
   help=_('Choose whether to enable SQL syntax check or not.')
 )
 
+USE_NEW_GLOBAL_SEARCH = Config( # To remove when the new global search is ready
+  key='use_new_global_search',
+  default=False,
+  type=coerce_bool,
+  help=_('Choose whether to use the new global search or not.')
+)
+
 USE_NEW_AUTOCOMPLETER = Config( # This now refers to the new autocomplete dropdown
   key='use_new_autocompleter',
   default=True,

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 17 - 0
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -271,6 +271,12 @@ body {
   margin-left: 17px;
 }
 
+.top-nav-middle .search-container-top-old {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+}
+
 .top-nav-middle .search-container-top {
   position: relative;
   margin-left: auto;
@@ -278,6 +284,7 @@ body {
   max-width: 600px;
 }
 
+.search-container-top-old,
 .search-container {
   .display-flex;
   .flex(1 1 44px);
@@ -285,6 +292,14 @@ body {
   margin: 8px 10px 0 10px;
 }
 
+.search-container-top-old > input {
+  .flex(1 1 100%);
+  border-radius: 4px;
+  border: 1px solid @cui-gray-300;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+
 .search-container > input {
   .flex(1 1 100%);
   border-radius: 4px 0 0 4px;
@@ -338,6 +353,7 @@ body {
   }
 }
 
+.search-container-top-old > a,
 .search-container > a {
   .flex(0 0 31px);
   margin-bottom: 0;
@@ -353,6 +369,7 @@ body {
   width: 31px;
 }
 
+.search-container-top-old > a > i,
 .search-container > a > i {
   margin-left: 8px;
 }

+ 5 - 1
desktop/core/src/desktop/templates/hue.mako

@@ -199,7 +199,11 @@ ${ hueIcons.symbols() }
         </div>
         <!-- /ko -->
 
-        <div class="search-container-top" data-bind="component: 'hue-global-search'"></div>
+        % if conf.USE_NEW_GLOBAL_SEARCH.get():
+          <div class="search-container-top" data-bind="component: 'hue-global-search'"></div>
+        %else:
+          <div class="search-container-top-old" data-bind="component: 'hue-global-search-old'"></div>
+        % endif
       </div>
 
       <div class="top-nav-right">

+ 160 - 17
desktop/core/src/desktop/templates/ko_components.mako

@@ -592,23 +592,6 @@ from desktop.views import _ko
 
   <script type="text/javascript">
     (function () {
-      var SEARCH_FACET_ICON = 'fa-tags';
-      var SEARCH_TYPE_ICONS = {
-        'DATABASE': 'fa-database',
-        'TABLE': 'fa-table',
-        'VIEW': 'fa-eye',
-        'FIELD': 'fa-columns',
-        'PARTITION': 'fa-th',
-        'SOURCE': 'fa-server',
-        'OPERATION': 'fa-cogs',
-        'OPERATION_EXECUTION': 'fa-cog',
-        'DIRECTORY': 'fa-folder-o',
-        'FILE': 'fa-file-o',
-        'SUB_OPERATION': 'fa-code-fork',
-        'COLLECTION': 'fa-search',
-        'HBASE': 'fa-th-large',
-        'HUE': 'fa-file-o'
-      };
 
       var FACETS = [
         'type', 'tags'
@@ -898,4 +881,164 @@ from desktop.views import _ko
       });
     })();
   </script>
+
+  <script type="text/html" id="hue-global-search-old-template">
+    <input placeholder="${ _('Search data and saved documents...') }" type="text"
+           data-bind="autocomplete: {
+                source: searchAutocompleteSource,
+                itemTemplate: 'top-search-autocomp-item',
+                noMatchTemplate: 'top-search-autocomp-no-match',
+                classPrefix: 'nav-',
+                showOnFocus: true,
+                closeOnEnter: false,
+                onSelect: mainSearchSelect,
+                reopenPattern: /.*:$/
+              },
+              hasFocus: searchHasFocus,
+              clearable: { value: searchInput, onClear: function () { searchActive(false); huePubSub.publish('autocomplete.close'); } },
+              textInput: searchInput,
+              valueUpdate: 'afterkeydown'">
+  </script>
+
+  <script type="text/html" id="top-search-autocomp-item">
+    <a href="javascript:void(0);">
+      <div class="nav-autocomplete-item-link">
+        <div class="nav-search-result-icon"><i class="fa fa-fw" data-bind="css: icon"></i></div>
+        <div class="nav-search-result-text">
+          <div class="nav-search-result-header" data-bind="html: label, style: { 'padding-top': description ? 0 : '9px' }"></div>
+          <!-- ko if: description -->
+          <div class="nav-search-result-description" data-bind="html: description"></div>
+          <!-- /ko -->
+        </div>
+      </div>
+    </a>
+  </script>
+
+  <script type="text/html" id="top-search-autocomp-no-match">
+    <div class="nav-autocomplete-item-link" style="height: 30px;">
+      <div class="nav-autocomplete-empty">${ _('No match found') }</div>
+    </div>
+  </script>
+
+  <script type="text/javascript">
+    (function () {
+
+      var SEARCH_FACET_ICON = 'fa-tags';
+      var SEARCH_TYPE_ICONS = {
+        'DATABASE': 'fa-database',
+        'TABLE': 'fa-table',
+        'VIEW': 'fa-eye',
+        'FIELD': 'fa-columns',
+        'PARTITION': 'fa-th',
+        'SOURCE': 'fa-server',
+        'OPERATION': 'fa-cogs',
+        'OPERATION_EXECUTION': 'fa-cog',
+        'DIRECTORY': 'fa-folder-o',
+        'FILE': 'fa-file-o',
+        'SUB_OPERATION': 'fa-code-fork',
+        'COLLECTION': 'fa-search',
+        'HBASE': 'fa-th-large',
+        'HUE': 'fa-file-o'
+      };
+
+      var GlobalSearchOld = function (params) {
+        var self = this;
+        self.apiHelper = ApiHelper.getInstance();
+        self.searchHasFocus = ko.observable(false);
+        self.searchInput = ko.observable();
+        self.searchActive = ko.observable(false);
+      };
+
+      GlobalSearchOld.prototype.mainSearchSelect = function (entry) {
+        if (entry.data && entry.data.link) {
+          huePubSub.publish('open.link', entry.data.link);
+        } else if (!/:\s*$/.test(entry.value)) {
+          huePubSub.publish('assist.show.sql');
+          huePubSub.publish('assist.db.search', entry.value);
+        }
+      };
+
+      GlobalSearchOld.prototype.searchAutocompleteSource = function (request, callback) {
+        var apiHelper = ApiHelper.getInstance();
+        // TODO: Extract complete contents to common module (shared with nav search autocomplete)
+        var facetMatch = request.term.match(/([a-z]+):\s*(\S+)?$/i);
+        var isFacet = facetMatch !== null;
+        var partialMatch = isFacet ? null : request.term.match(/\S+$/);
+        var partial = isFacet && facetMatch[2] ? facetMatch[2] : (partialMatch ? partialMatch[0] : '');
+        var beforePartial = request.term.substring(0, request.term.length - partial.length);
+
+        apiHelper.globalSearchAutocomplete({
+          query:  request.term,
+          successCallback: function (data) {
+            var values = [];
+            var facetPartialRe = new RegExp(partial.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); // Protect for 'tags:*axe'
+
+            if (typeof data.resultsHuedocuments !== 'undefined') {
+              data.resultsHuedocuments.forEach(function (result) {
+                values.push({ data: { label: result.hue_name, icon: SEARCH_TYPE_ICONS[result.type],  description: result.hue_description, link: result.link }, value: beforePartial + result.originalName });
+              });
+            }
+            if (values.length > 0) {
+              values.push({ divider: true });
+            }
+
+            if (isFacet && typeof data.facets !== 'undefined') { // Is typed facet, e.g. type: type:bla
+              var facetInQuery = facetMatch[1];
+              if (typeof data.facets[facetInQuery] !== 'undefined') {
+                $.map(data.facets[facetInQuery], function (count, value) {
+                  if (facetPartialRe.test(value)) {
+                    values.push({ data: { label: facetInQuery + ':' + value, icon: SEARCH_FACET_ICON, description: count }, value: beforePartial + value})
+                  }
+                });
+              }
+            } else {
+              if (typeof data.facets !== 'undefined') {
+                Object.keys(data.facets).forEach(function (facet) {
+                  if (facetPartialRe.test(facet)) {
+                    if (Object.keys(data.facets[facet]).length > 0) {
+                      values.push({ data: { label: facet + ':', icon: SEARCH_FACET_ICON, description: $.map(data.facets[facet], function (key, value) { return value + ' (' + key + ')'; }).join(', ') }, value: beforePartial + facet + ':'});
+                    } else { // Potential facet from the list
+                      values.push({ data: { label: facet + ':', icon: SEARCH_FACET_ICON, description: '' }, value: beforePartial + facet + ':'});
+                    }
+                  } else if (partial.length > 0) {
+                    Object.keys(data.facets[facet]).forEach(function (facetValue) {
+                      if (facetValue.indexOf(partial) !== -1) {
+                        values.push({ data: { label: facet + ':' + facetValue, icon: SEARCH_FACET_ICON, description: facetValue }, value: beforePartial + facet + ':' + facetValue });
+                      }
+                    });
+                  }
+                });
+              }
+            }
+
+            if (values.length > 0) {
+              values.push({ divider: true });
+            }
+            if (typeof data.results !== 'undefined') {
+              data.results.forEach(function (result) {
+                values.push({ data: { label: result.hue_name, icon: SEARCH_TYPE_ICONS[result.type],  description: result.hue_description }, value: beforePartial + result.originalName });
+              });
+            }
+
+            if (values.length > 0 && values[values.length - 1].divider) {
+              values.pop();
+            }
+            if (values.length === 0) {
+              values.push({ noMatch: true });
+            }
+            callback(values);
+          },
+          silenceErrors: true,
+          errorCallback: function () {
+            callback([]);
+          }
+        });
+      };
+
+      ko.components.register('hue-global-search-old', {
+        viewModel: GlobalSearchOld,
+        template: {element: 'hue-global-search-old-template'}
+      });
+    })();
+  </script>
 </%def>

Vissa filer visades inte eftersom för många filer har ändrats