Browse Source

HUE-3897 [metastore] Add column search on the table page

Enrico Berti 9 years ago
parent
commit
814e08a953

+ 14 - 0
apps/metastore/src/metastore/static/metastore/js/metastore.ko.js

@@ -357,7 +357,21 @@
 
 
     self.loadingDetails = ko.observable(false);
     self.loadingDetails = ko.observable(false);
     self.loadingColumns = ko.observable(false);
     self.loadingColumns = ko.observable(false);
+    self.columnQuery = ko.observable('').extend({rateLimit: 150});
     self.columns = ko.observableArray();
     self.columns = ko.observableArray();
+    self.filteredColumns = ko.computed(function () {
+      var returned = self.columns();
+      if (self.columnQuery() !== '') {
+        returned = $.grep(self.columns(), function (column) {
+          return column.name().toLowerCase().indexOf(self.columnQuery()) > -1
+            || (column.comment() && column.comment().toLowerCase().indexOf(self.columnQuery()) > -1);
+        });
+      }
+      return returned.sort(function (a, b) {
+        return a.name().toLowerCase().localeCompare(b.name().toLowerCase());
+      });
+    });
+
     self.favouriteColumns = ko.observableArray();
     self.favouriteColumns = ko.observableArray();
     self.samples = new MetastoreTableSamples({
     self.samples = new MetastoreTableSamples({
       apiHelper: self.apiHelper,
       apiHelper: self.apiHelper,

+ 6 - 2
apps/metastore/src/metastore/templates/metastore.mako

@@ -680,7 +680,7 @@ ${ assist.assistPanel() }
 </script>
 </script>
 
 
 <script type="text/html" id="metastore-columns-tab">
 <script type="text/html" id="metastore-columns-tab">
-  <!-- ko with: columns -->
+  <!-- ko with: filteredColumns -->
   <!-- ko template: "metastore-columns-table" --><!-- /ko -->
   <!-- ko template: "metastore-columns-table" --><!-- /ko -->
   <!-- /ko -->
   <!-- /ko -->
 </script>
 </script>
@@ -803,6 +803,11 @@ ${ assist.assistPanel() }
         <li class="pull-right"><a class="pointer" data-bind="click: function () { location.href = '/notebook/browse/' + $root.database().name + '/' + $root.database().table().name; }"><i class="fa fa-external-link"></i> ${ _('Open in editor') }</a>
         <li class="pull-right"><a class="pointer" data-bind="click: function () { location.href = '/notebook/browse/' + $root.database().name + '/' + $root.database().table().name; }"><i class="fa fa-external-link"></i> ${ _('Open in editor') }</a>
       <!-- /ko -->
       <!-- /ko -->
     <!-- /ko -->
     <!-- /ko -->
+    <!-- ko if: $root.currentTab() == 'table-columns' -->
+    <li class="pull-right">
+      <input class="input-xlarge search-query margin-left-10" type="text" placeholder="${ _('Search for a column...') }" data-bind="clearable: columnQuery, value: columnQuery, valueUpdate: 'afterkeydown'"/>
+    </li>
+    <!-- /ko -->
   </ul>
   </ul>
 
 
   <div class="tab-content margin-top-10" style="border: none; overflow: hidden">
   <div class="tab-content margin-top-10" style="border: none; overflow: hidden">
@@ -816,7 +821,6 @@ ${ assist.assistPanel() }
       <!-- ko if: $root.currentTab() == 'table-columns' -->
       <!-- ko if: $root.currentTab() == 'table-columns' -->
       <!-- ko template: 'metastore-columns-tab' --><!-- /ko -->
       <!-- ko template: 'metastore-columns-tab' --><!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
-
     </div>
     </div>
 
 
     <div class="tab-pane" id="partitions">
     <div class="tab-pane" id="partitions">