浏览代码

HUE-6756 [home] Add a type filter to the home document browser

Johan Ahlen 8 年之前
父节点
当前提交
00854cd9f6

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/home.css


+ 2 - 2
desktop/core/src/desktop/static/desktop/js/apiHelper.js

@@ -679,7 +679,7 @@ var ApiHelper = (function () {
     if (options.uuid) {
       id += options.uuid;
     }
-    if (options.type) {
+    if (options.type && options.type !== 'all') {
       id += options.type;
     }
 
@@ -700,7 +700,7 @@ var ApiHelper = (function () {
       uuid: options.uuid
     };
 
-    if (options.type) {
+    if (options.type && options.type !== 'all') {
       data.type = ['directory', options.type];
     }
 

+ 3 - 3
desktop/core/src/desktop/static/desktop/js/document/hueFileEntry.js

@@ -84,7 +84,7 @@ var HueFileEntry = (function () {
     self.user = options.user;
     self.userGroups = options.userGroups;
     self.superuser = options.superuser;
-    self.serverTypeFilter = options.serverTypeFilter;
+    self.serverTypeFilter = options.serverTypeFilter || ko.observable({ type: 'all' });
 
     self.document = ko.observable();
     self.selectedDocsWithDependents = ko.observable([]);
@@ -455,7 +455,7 @@ var HueFileEntry = (function () {
     self.apiHelper.searchDocuments({
       uuid: owner.uuid,
       query: query,
-      type: self.serverTypeFilter(),
+      type: self.serverTypeFilter().type,
       successCallback: function (data) {
         resultEntry.hasErrors(false);
         var newEntries = [];
@@ -526,7 +526,7 @@ var HueFileEntry = (function () {
     if (self.app === 'documents') {
       self.apiHelper.fetchDocuments({
         uuid: self.definition().uuid,
-        type: self.serverTypeFilter(),
+        type: self.serverTypeFilter().type,
         successCallback: function(data) {
           self.definition(data.document);
           self.hasErrors(false);

+ 48 - 1
desktop/core/src/desktop/static/desktop/js/home2.vm.js

@@ -33,10 +33,45 @@ var HomeViewModel = (function () {
     // Uncomment to enable the assist panel
     // self.apiHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
 
+    self.serverTypeFilter = ko.observable();
+    self.allDocumentTypes = ko.observableArray();
+
+    var initialType = window.location.getParameter('type') !== '' ? window.location.getParameter('type') : 'all';
+    var availableTypes = $.map(DocumentTypeGlobals, function (value, key) {
+      var type = {
+        type: key,
+        label: value
+      };
+      if (initialType === type.type) {
+        self.serverTypeFilter(type);
+      }
+      return type;
+    });
+
+    if (!self.serverTypeFilter()) {
+      var unknownType = {
+        type: initialType,
+        label: initialType
+      };
+      self.serverTypeFilter(unknownType);
+      availableTypes.push(unknownType);
+    }
+
+    availableTypes.sort(function (a, b) {
+      if (a.type === 'all') {
+        return -1;
+      }
+      if (b.type === 'all') {
+        return 1;
+      }
+      return a.label.localeCompare(b.label);
+    });
+    self.allDocumentTypes(availableTypes);
+
     self.activeEntry = ko.observable();
     self.trashEntry = ko.observable();
     self.activeEntry(new HueFileEntry({
-      serverTypeFilter: ko.observable(window.location.getParameter('type') !== '' ? window.location.getParameter('type') : null),
+      serverTypeFilter: self.serverTypeFilter,
       activeEntry: self.activeEntry,
       trashEntry: self.trashEntry,
       apiHelper: self.apiHelper,
@@ -49,6 +84,18 @@ var HomeViewModel = (function () {
       }
     }));
 
+    self.serverTypeFilter.subscribe(function (newVal) {
+      if (self.activeEntry()) {
+        self.activeEntry().entries([]);
+        self.activeEntry().load();
+        if (!newVal || newVal.type === 'all') {
+          hueUtils.removeURLParameter('type');
+        } else {
+          hueUtils.changeURLParameter('type', newVal.type);
+        }
+      }
+    });
+
     self.shareFormDocId = ko.observable('');
     self.exportFormDocIds = ko.observable('');
 

+ 10 - 0
desktop/core/src/desktop/static/desktop/less/home.less

@@ -158,6 +158,16 @@
   margin-left: 5px;
 }
 
+.doc-browser-action .dropdown-menu {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.doc-browser-type-filter {
+  font-size: 15px;
+  line-height: 50px;
+}
+
 .doc-browser-row {
   .display-flex();
   .flex-wrap(nowrap);

+ 0 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -1131,7 +1131,6 @@ from notebook.conf import get_ordered_interpreters
         var root = new HueFileEntry({
           activeEntry: self.activeEntry,
           trashEntry: ko.observable(),
-          serverTypeFilter: ko.observable(),
           apiHelper: options.apiHelper,
           app: 'documents',
           user: options.user,

+ 1 - 1
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -87,7 +87,7 @@ from metadata.conf import has_optimizer, OPTIMIZER
       'query-java': '${_('Java Job')}',
       'query-pig': '${_('Pig Script')}',
       'query-shell': '${_('Shell Script')}',
-      'query-distcp': '${_('DistCp Job')}',
+      'query-distcp': '${_('DistCp Job')}'
     };
 
     // jHue plugins global configuration

+ 2 - 1
desktop/core/src/desktop/templates/document_browser.mako

@@ -320,7 +320,8 @@ from desktop.views import _ko
           <div class="doc-browser-action doc-browser-search-container"><input class="clearable" type="text" placeholder="${ _('Search for name, description, etc...') }" data-bind="hasFocus: searchFocus, textInput: searchQuery, clearable: searchQuery"></div>
           <!-- /ko -->
           <!-- ko with: activeEntry -->
-          <div><a class="inactive-action doc-browser-action" title="${_('Search')}" href="javascript:void(0);" data-bind="tooltip: { placement: 'bottom', delay: 750 }, toggle: $parent.searchVisible, click: function () { $parent.searchFocus($parent.searchVisible()) }, css: { 'blue' : ($parent.searchVisible() || $parent.searchQuery()) }"><i class="fa fa-fw fa-search"></i></a></div>
+          <div class="doc-browser-action doc-browser-type-filter margin-right-10" data-bind="component: { name: 'hue-drop-down', params: { value: serverTypeFilter, entries: $root.allDocumentTypes, linkTitle: '${ _ko('Type filter') }' } }"><</div>
+          <div><a class="inactive-action doc-browser-action margin-right-20" title="${_('Search')}" href="javascript:void(0);" data-bind="tooltip: { placement: 'bottom', delay: 750 }, toggle: $parent.searchVisible, click: function () { $parent.searchFocus($parent.searchVisible()) }, css: { 'blue' : ($parent.searchVisible() || $parent.searchQuery()) }"><i class="fa fa-fw fa-search"></i></a></div>
           <!-- ko if: app === 'documents' -->
           <div>
             <span class="dropdown">

部分文件因为文件数量过多而无法显示