瀏覽代碼

HUE-6341 [frontend] Enable navigation from the top search autocomplete dropdown

This allows the user to click the autocomplete entries to open them except for facet suggestions.
Johan Ahlen 8 年之前
父節點
當前提交
b1d846c37d

+ 1 - 1
desktop/core/src/desktop/api2.py

@@ -639,7 +639,7 @@ def search_entities_interactive(request):
     limit = int(request.POST.get('limit', 25))
     entities = _search(user=request.user, search_text=search_text, limit=limit)
     response = {
-      'results': [{'hue_name': e.name, 'hue_description': e.description, 'type': 'HUE', 'originalName': e.name} for e in entities['documents']],
+      'results': [{'hue_name': e.name, 'hue_description': e.description, 'link': '/home?uuid=%s' % e.uuid, 'type': 'HUE', 'originalName': e.name } for e in entities['documents']],
       'count': len(entities['documents']),
       'status': 0
     }

文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 1 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -294,7 +294,7 @@
             options.valueObservable(ui.item.value);
           }
           if (options.onSelect) {
-            options.onSelect();
+            options.onSelect(ui.item);
           }
           if (oldSelect) {
             oldSelect(event, ui);

+ 12 - 1
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -250,12 +250,13 @@ body {
   margin-left: 17px;
 }
 
-.top-nav-middle .search-container {
+.top-nav-middle .search-container-top {
   margin-left: auto;
   margin-right: auto;
   max-width: 600px;
 }
 
+.search-container-top,
 .search-container {
   .display-flex;
   .flex(1 1 37px);
@@ -272,6 +273,15 @@ body {
   margin-bottom: 0;
 }
 
+.search-container-top > input {
+  .flex(1 1 100%);
+  border-radius: 4px 0 0 4px;
+  border: 1px solid @cui-gray-300;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+
+.search-container-top > a,
 .search-container > a {
   .flex(0 0 31px);
   margin-bottom: 0;
@@ -287,6 +297,7 @@ body {
   width: 31px;
 }
 
+.search-container-top > a > i,
 .search-container > a > i {
   margin-left: 8px;
 }

+ 18 - 13
desktop/core/src/desktop/templates/assist.mako

@@ -1458,19 +1458,24 @@ from notebook.conf import get_ordered_interpreters
             var appConfig = clusterConfig['app_config'];
 
             if (appConfig['editor']) {
-              panels.push(
-                new AssistInnerPanel({
-                  panelData: new AssistDbPanel($.extend({
-                    apiHelper: self.apiHelper,
-                    i18n: i18n
-                  }, params.sql)),
+              var sqlPanel = new AssistInnerPanel({
+                panelData: new AssistDbPanel($.extend({
                   apiHelper: self.apiHelper,
-                  name: '${ _("SQL") }',
-                  type: 'sql',
-                  icon: 'fa-database',
-                  minHeight: 75
-                })
-              );
+                  i18n: i18n
+                }, params.sql)),
+                apiHelper: self.apiHelper,
+                name: '${ _("SQL") }',
+                type: 'sql',
+                icon: 'fa-database',
+                minHeight: 75
+              })
+              panels.push(sqlPanel);
+
+              huePubSub.subscribe('assist.show.sql', function () {
+                if (self.visiblePanel !== sqlPanel) {
+                  self.visiblePanel(sqlPanel);
+                }
+              });
             }
 
             if (self.tabsEnabled) {
@@ -1589,7 +1594,7 @@ from notebook.conf import get_ordered_interpreters
 
           var lastFoundPanel = self.availablePanels().filter(function (panel) { return panel.type === self.lastOpenPanelType() });
           var dbPanel = self.availablePanels().filter(function (panel) { return panel.type === 'sql' });
-          if (lastFoundPanel.length === 1) {
+          if (lastFoundPanel.length === 1 && dbPanel.length > 0) {
             dbPanel[0].panelData.init(); // always forces the db panel to load
           }
 

+ 11 - 2
desktop/core/src/desktop/templates/assist_search.mako

@@ -175,6 +175,13 @@ from notebook.conf import ENABLE_QUERY_BUILDER
 
         var lastQuery = -1;
 
+        huePubSub.subscribe('assist.db.search', function (query) {
+          self.searchInput.extend({ rateLimit: 0 });
+          self.searchInput(query);
+          self.searchInput.extend({ rateLimit: 500 });
+          self.performSearch(true);
+        });
+
         self.assistPanel.visiblePanel.subscribe(function(newValue) {
           if (self.navigatorEnabled() && self.searchActive()) {
             lastQuery = 'refresh';
@@ -182,8 +189,10 @@ from notebook.conf import ENABLE_QUERY_BUILDER
           }
         });
 
-        self.performSearch = function () {
-          huePubSub.publish('autocomplete.close');
+        self.performSearch = function (noClose) {
+          if (!noClose) {
+            huePubSub.publish('autocomplete.close');
+          }
           if (self.searchInput() === '') {
             self.searchActive(false);
             return;

+ 34 - 7
desktop/core/src/desktop/templates/hue.mako

@@ -148,23 +148,43 @@ ${ hueIcons.symbols() }
 
 
       <div class="top-nav-middle">
-        <div class="search-container">
+        <div class="search-container-top">
           <input placeholder="${ _('Search all data and saved documents...') }" type="text"
             data-bind="autocomplete: {
                 source: searchAutocompleteSource,
-                itemTemplate: 'nav-search-autocomp-item',
-                noMatchTemplate: 'nav-search-autocomp-no-match',
+                itemTemplate: 'top-search-autocomp-item',
+                noMatchTemplate: 'top-search-autocomp-no-match',
                 classPrefix: 'nav-',
                 showOnFocus: true,
-                onEnter: performSearch,
+                onSelect: mainSearchSelect,
                 reopenPattern: /.*:$/
               },
               hasFocus: searchHasFocus,
               clearable: { value: searchInput, onClear: function () { searchActive(false); huePubSub.publish('autocomplete.close'); } },
               textInput: searchInput,
               valueUpdate: 'afterkeydown'">
-          <a class="inactive-action" data-bind="click: performSearch"><i class="fa fa-search" data-bind="css: { 'blue': searchHasFocus() || searchActive() }"></i></a>
         </div>
+
+        <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>
+
       </div>
 
       <div class="top-nav-right">
@@ -1092,7 +1112,7 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
 
               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 }, value: beforePartial + result.originalName });
+                  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) {
@@ -1153,7 +1173,14 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
         };
       }
 
-      TopNavViewModel.prototype.performSearch = function () { };
+      TopNavViewModel.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);
+        }
+      };
 
       var topNavViewModel = new TopNavViewModel(onePageViewModel);
       ko.applyBindings(topNavViewModel, $('.top-nav')[0]);

部分文件因文件數量過多而無法顯示