Browse Source

HUE-8330 [assist] Add filter and spinner to namespace selection

Johan Ahlen 7 years ago
parent
commit
ea67d37a93

+ 24 - 4
desktop/core/src/desktop/static/desktop/js/assist/assistDbSource.js

@@ -40,6 +40,30 @@ var AssistDbSource = (function () {
     self.loading = ko.observable(false);
     self.loading = ko.observable(false);
     self.hasErrors = ko.observable(false);
     self.hasErrors = ko.observable(false);
 
 
+    self.filter = {
+      querySpec: ko.observable({}).extend({ rateLimit: 300 })
+    };
+
+    self.filteredNamespaces = ko.pureComputed(function () {
+      if (!self.filter.querySpec() || typeof self.filter.querySpec().query === 'undefined' || !self.filter.querySpec().query) {
+        return self.namespaces();
+      }
+      return self.namespaces().filter(function (namespace) {
+        return namespace.name.toLowerCase().indexOf(self.filter.querySpec().query.toLowerCase()) !== -1
+      });
+    });
+
+    self.autocompleteFromNamespaces = function (nonPartial, partial) {
+      var result = [];
+      var partialLower = partial.toLowerCase();
+      self.namespaces().forEach(function (namespace) {
+        if (namespace.name.toLowerCase().indexOf(partialLower) === 0) {
+          result.push(nonPartial + partial + namespace.name.substring(partial.length))
+        }
+      });
+      return result;
+    };
+
     self.selectedNamespace.subscribe(function (namespace) {
     self.selectedNamespace.subscribe(function (namespace) {
       if (namespace && !namespace.loaded() && !namespace.loading()) {
       if (namespace && !namespace.loaded() && !namespace.loading()) {
         namespace.initDatabases();
         namespace.initDatabases();
@@ -144,10 +168,6 @@ var AssistDbNamespace = (function () {
       querySpec: ko.observable({}).extend({ rateLimit: 300 })
       querySpec: ko.observable({}).extend({ rateLimit: 300 })
     };
     };
 
 
-    self.filterActive = ko.pureComputed(function () {
-      return self.filter.querySpec() && self.filter.querySpec().query !== '';
-    });
-
     self.hasEntries = ko.pureComputed(function() {
     self.hasEntries = ko.pureComputed(function() {
       return self.databases().length > 0;
       return self.databases().length > 0;
     });
     });

+ 57 - 30
desktop/core/src/desktop/templates/assist.mako

@@ -742,36 +742,6 @@ from desktop.views import _ko
     <!-- /ko -->
     <!-- /ko -->
   </script>
   </script>
 
 
-  <script type="text/html" id="assist-sources-template">
-    <div class="assist-flex-header">
-      <div class="assist-inner-header">
-        ${_('Sources')}
-      </div>
-    </div>
-    <div class="assist-flex-fill">
-      <ul class="assist-tables" data-bind="foreach: sources">
-        <li class="assist-table">
-          <a class="assist-table-link" href="javascript: void(0);" data-bind="click: function () { $parent.selectedSource($data); }"><i class="fa fa-fw fa-server muted valign-middle"></i> <span data-bind="text: name"></span></a>
-        </li>
-      </ul>
-    </div>
-  </script>
-
-  <script type="text/html" id="assist-namespaces-template">
-    <div class="assist-flex-header">
-      <div class="assist-inner-header">
-        ${_('Namespaces')}
-      </div>
-    </div>
-    <div class="assist-flex-fill">
-      <ul class="assist-tables" data-bind="foreach: namespaces">
-        <li class="assist-table">
-          <a class="assist-table-link" href="javascript: void(0);" data-bind="click: function () { $parent.selectedNamespace($data); }"><i class="fa fa-fw fa-snowflake-o muted valign-middle"></i> <span data-bind="text: name"></span></a>
-        </li>
-      </ul>
-    </div>
-  </script>
-
   <script type="text/html" id="ask-for-invalidate-title">
   <script type="text/html" id="ask-for-invalidate-title">
     &nbsp;<a class="pull-right pointer close-popover inactive-action">&times;</a>
     &nbsp;<a class="pull-right pointer close-popover inactive-action">&times;</a>
   </script>
   </script>
@@ -830,6 +800,63 @@ from desktop.views import _ko
     </div>
     </div>
   </script>
   </script>
 
 
+  <script type="text/html" id="assist-sources-template">
+    <div class="assist-flex-header">
+      <div class="assist-inner-header">
+        ${_('Sources')}
+      </div>
+    </div>
+    <div class="assist-flex-fill">
+      <ul class="assist-tables" data-bind="foreach: sources">
+        <li class="assist-table">
+          <a class="assist-table-link" href="javascript: void(0);" data-bind="click: function () { $parent.selectedSource($data); }"><i class="fa fa-fw fa-server muted valign-middle"></i> <span data-bind="text: name"></span></a>
+        </li>
+      </ul>
+    </div>
+  </script>
+
+  <script type="text/html" id="assist-namespaces-template">
+    <div class="assist-flex-header">
+      <div class="assist-inner-header">
+        ${_('Namespaces')}
+      </div>
+    </div>
+    <div class="assist-flex-search" data-bind="visible: hasNamespaces() && !hasErrors()">
+      <div class="assist-filter">
+        <!-- ko component: {
+            name: 'inline-autocomplete',
+            params: {
+              querySpec: filter.querySpec,
+              facets: [],
+              knownFacetValues: {},
+              autocompleteFromEntries: autocompleteFromNamespaces
+            }
+          } --><!-- /ko -->
+      </div>
+    </div>
+    <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: !hasErrors() && !loading() && hasNamespaces(), delayedOverflow">
+      <!-- ko if: !loading() && filteredNamespaces().length == 0 -->
+      <ul class="assist-tables">
+        <li class="assist-entry no-entries">${_('No results found')}</li>
+      </ul>
+      <!-- /ko -->
+      <ul class="assist-tables" data-bind="foreach: filteredNamespaces">
+        <li class="assist-table">
+          <a class="assist-table-link" href="javascript: void(0);" data-bind="click: function () { $parent.selectedNamespace($data); }"><i class="fa fa-fw fa-snowflake-o muted valign-middle"></i> <span data-bind="text: name"></span></a>
+        </li>
+      </ul>
+    </div>
+    <div class="assist-flex-fill" data-bind="visible: loading">
+      <!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko -->
+    </div>
+    <div class="assist-flex-fill" data-bind="visible: hasErrors() && !loading()">
+      <span class="assist-errors">${ _('Error loading namespaces.') }</span>
+    </div>
+    <div class="assist-flex-fill" data-bind="visible: !hasErrors() && !loading() && !hasNamespaces()">
+      <span class="assist-errors">${ _('No namespaces found.') }</span>
+    </div>
+  </script>
+
   <script type="text/html" id="assist-databases-template">
   <script type="text/html" id="assist-databases-template">
     <div class="assist-flex-header" data-bind="visibleOnHover: { selector: '.hover-actions', override: loading() }">
     <div class="assist-flex-header" data-bind="visibleOnHover: { selector: '.hover-actions', override: loading() }">
       <div class="assist-inner-header">
       <div class="assist-inner-header">