Explorar o código

[assist] Change the documents panel to a list instead of a tree

This also adds a generic template for this type of panel layout, it can later be re-used for HDFS once those entries are switched to use hueFileEntry.js
Johan Ahlen %!s(int64=9) %!d(string=hai) anos
pai
achega
bd74c64d36

+ 0 - 98
desktop/core/src/desktop/static/desktop/js/assist/assistDocuments.js

@@ -1,98 +0,0 @@
-// Licensed to Cloudera, Inc. under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  Cloudera, Inc. licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-(function (root, factory) {
-  if(typeof define === "function" && define.amd) {
-    define(['knockout'], factory);
-  } else {
-    root.AssistDocuments = factory(ko);
-  }
-}(this, function (ko) {
-
-  /**
-   * @param {object} definition
-   * @constructor
-   */
-  function AssistDocument(definition) {
-    var self = this;
-    self.definition = definition;
-  }
-
-  /**
-   * @param {AssistDocument[]} documents
-   * @constructor
-   */
-  function AssistDocumentType(name, type, documents) {
-    var self = this;
-    self.name = name || type;
-    self.type = type;
-    self.documents = documents;
-    self.open = ko.observable(false);
-  }
-
-  /**
-   * @param {AssistHelper} assistHelper
-   * @param {object} i18n
-   * @constructor
-   */
-  function AssistDocuments (assistHelper, i18n) {
-    var self = this;
-    self.assistHelper = assistHelper;
-    self.i18n = i18n;
-    self.loading = ko.observable(false);
-    self.hasErrors = ko.observable(false);
-    self.availableTypes = ko.observableArray();
-  }
-
-  AssistDocuments.prototype.load = function() {
-    var self = this;
-    if (self.loading()) {
-      return;
-    }
-    self.loading(true);
-
-    var successCallback = function(data) {
-      self.hasErrors(false);
-      var documentsByType = {};
-      $.each(data.documents, function (idx, document) {
-        if (!documentsByType[document.type]) {
-          documentsByType[document.type] = [];
-        }
-        documentsByType[document.type].push(new AssistDocument(document));
-      });
-
-      var types = [];
-      $.each(documentsByType, function (key, value) {
-        types.push(new AssistDocumentType(self.i18n.documentTypes[key], key, value))
-      });
-
-      self.availableTypes(types);
-      self.loading(false);
-    };
-
-    var errorCallback = function () {
-      self.hasErrors(true);
-      self.loading(false);
-    };
-
-    self.assistHelper.fetchDocuments({
-      successCallback: successCallback,
-      errorCallback: errorCallback
-    });
-  };
-
-  return AssistDocuments;
-}));

+ 77 - 54
desktop/core/src/desktop/templates/assist.mako

@@ -459,7 +459,7 @@ from desktop.views import _ko
     </div>
   </script>
 
-  <script type="text/html" id="document-details-content">
+  <script type="text/html" id="file-details-content">
     <!-- ko with: definition -->
     <div class="assist-details-wrap">
       <div><div class="assist-details-header">${ _('Description') }</div><div class="assist-details-value" data-bind="text: description"></div></div>
@@ -469,61 +469,73 @@ from desktop.views import _ko
     <!-- /ko -->
   </script>
 
-  <script type="text/html" id="document-details-title">
-    <span data-bind="text: definition.name"></span>
+  <script type="text/html" id="file-details-title">
+    <span data-bind="text: name"></span>
   </script>
 
-  <script type="text/html" id="assist-documents-inner-panel">
-    <div class="assist-inner-panel">
-      <!-- ko with: documents -->
-      <ul class="nav assist-tables assist-stretchable-list" data-bind="visible: ! hasErrors(), stretchDown, foreach: availableTypes">
-        <li class="assist-table">
-          <a class="assist-entry assist-table-link" href="javascript: void(0);" data-bind="click: function () { open(! open()) }">
-            <!-- ko if: type == 'query-hive' || type == 'query' -->
-            <img src="${ static('beeswax/art/icon_beeswax_48.png') }" class="assist-icon"/>
-            <!-- /ko -->
-            <!-- ko if: type == 'query-impala' -->
-            <img src="${ static('impala/art/icon_impala_48.png') }" class="assist-icon"/>
-            <!-- /ko -->
-            <!-- ko if: type == 'notebook' -->
-            <i class="fa fa-fw fa-tags muted valign-middle"></i>
-            <!-- /ko -->
-            <!-- ko if: type == 'oozie-workflow2' -->
-            <img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="assist-icon"/>
-            <!-- /ko -->
-            <!-- ko if: type == 'oozie-coordinator2' -->
-            <img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="assist-icon"/>
-            <!-- /ko -->
-            <!-- ko if: type == 'oozie-bundle2' -->
-            <img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="assist-icon"/>
-            <!-- /ko -->
-            <!-- ko if: type == 'search-dashboard' -->
-            <i class="fa fa-fw fa-search muted valign-middle"></i>
-            <!-- /ko -->
+  <script type="text/html" id="assist-file-panel">
+    <div class="assist-flex-header assist-breadcrumb">
+      <!-- ko with: activeEntry -->
+      <!-- ko ifnot: isRoot -->
+      <a href="javascript: void(0);" data-bind="click: function () { parent.makeActive(); }">
+        <i class="fa fa-chevron-left" style="font-size: 15px;margin-right:8px;"></i>
+        <i class="fa fa-folder-o" style="font-size: 14px; line-height: 16px; vertical-align: top; margin-right:4px;"></i>
+        <span style="font-size: 14px;line-height: 16px;vertical-align: top;" data-bind="text: name"></span>
+      </a>
+      <!-- /ko -->
 
-            <span data-bind="text: name"></span>
-          </a>
-          <ul data-bind="slideVisible: open, foreach: documents">
-            <li style="position: relative;" data-bind="visibleOnHover: { 'selector': '.assist-actions' }">
-              <div class="assist-actions table-actions" style="opacity: 0;" >
-                <a style="padding: 0 3px;" class="inactive-action" href="javascript:void(0);" data-bind="templatePopover : { contentTemplate: 'document-details-content', titleTemplate: 'document-details-title', minWidth: '350px' }">
-                  <i class='fa fa-info' title="${ _('Details') }"></i>
-                </a>
-              </div>
-              <a data-bind="attr: {'href': definition.absoluteUrl }, text: definition.name"></a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <ul class="nav assist-tables" data-bind="visible: hasErrors">
-        <li class="assist-errors">
-          <span>${ _('Error loading documents.') }</span>
-        </li>
-      </ul>
+      <!-- ko if: isRoot -->
+      <div>
+        <i class="fa fa-folder-o" style="font-size: 14px; line-height: 16px;vertical-align: top;margin-right:4px;"></i>
+        <span style="font-size: 14px;line-height: 16px;vertical-align: top;">/</span>
+      </div>
+      <!-- /ko -->
+      <!-- /ko -->
+    </div>
+    <div class="assist-flex-fill assist-file-scrollable">
+      <!-- ko with: activeEntry -->
+      <div data-bind="visible: ! loading() && ! hasErrors() && entries().length > 0">
+         <ul class="assist-tables" data-bind="foreachVisible: {data: entries, minHeight: 20, container: '.assist-file-scrollable' }">
+           <li class="assist-entry assist-table-link" style="position: relative;" data-bind="visibleOnHover: { 'selector': '.assist-actions' }">
+             <div class="assist-actions table-actions" style="opacity: 0;" >
+               <a style="padding: 0 3px;" class="inactive-action" href="javascript:void(0);" data-bind="templatePopover : { contentTemplate: 'file-details-content', titleTemplate: 'file-details-title', minWidth: '350px' }">
+                 <i class='fa fa-info' title="${ _('Details') }"></i>
+               </a>
+             </div>
+             <a href="javascript:void(0)" class="assist-entry assist-table-link" data-bind="multiClick: { click: makeActive, dblClick: open }, attr: {'title': name }">
+               <!-- ko if: isDirectory -->
+               <i class="fa fa-fw fa-folder-o muted valign-middle"></i>
+               <!-- /ko -->
+               <!-- ko ifnot: isDirectory -->
+               <i class="fa fa-fw fa-file-o muted valign-middle"></i>
+               <!-- /ko -->
+               <span data-bind="text: name"></span>
+             </a>
+           </li>
+         </ul>
+      </div>
+      <div data-bind="visible:  !loading() && ! hasErrors() && entries().length === 0">
+        <span style="font-style: italic;">${_('Empty directory')}</span>
+      </div>
+      <div class="center" data-bind="visible: loading() && ! hasErrors()">
+        <!--[if !IE]><!--><i class="fa fa-spinner fa-spin" style="font-size: 20px; color: #BBB"></i><!--<![endif]-->
+        <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }"/><![endif]-->
+      </div>
+      <div class="assist-errors" data-bind="visible: ! loading() && hasErrors()">
+        <span>${ _('Error loading contents.') }</span>
+      </div>
       <!-- /ko -->
     </div>
   </script>
 
+  <script type="text/html" id="assist-documents-inner-panel">
+    <div class="assist-inner-panel">
+      <div class="assist-flex-panel">
+        <!-- ko template: 'assist-file-panel' --><!-- /ko -->
+      </div>
+    </div>
+  </script>
+
   <script type="text/html" id="assist-sources-template">
     <div class="assist-flex-header">
       <div class="assist-inner-header">
@@ -682,14 +694,14 @@ from desktop.views import _ko
           'knockout',
           'desktop/js/assist/assistDbSource',
           'desktop/js/assist/assistHdfsEntry',
-          'desktop/js/assist/assistDocuments',
           'desktop/js/assist/assistHelper',
+          'desktop/js/fileBrowser/hueFileEntry',
           'tableStats'
         ], factory);
       } else {
-        factory(ko, AssistDbSource, AssistHdfsEntry, AssistDocuments, AssistHelper);
+        factory(ko, AssistDbSource, AssistHdfsEntry, AssistHelper, HueFileEntry);
       }
-    }(function (ko, AssistDbSource, AssistHdfsEntry, AssistDocuments, AssistHelper) {
+    }(function (ko, AssistDbSource, AssistHdfsEntry, AssistHelper, HueFileEntry) {
 
       /**
        * @param {Object} options
@@ -838,8 +850,19 @@ from desktop.views import _ko
        **/
       function AssistDocumentsPanel (options) {
         var self = this;
-        self.documents = new AssistDocuments(options.assistHelper, options.i18n);
-        self.documents.load();
+
+        self.activeEntry = ko.observable();
+        self.activeEntry(new HueFileEntry({
+          activeEntry: self.activeEntry,
+          assistHelper: options.assistHelper,
+          app: 'documents',
+          definition: {
+            name: '/',
+            type: 'directory'
+          }
+        }));
+
+        self.activeEntry().load();
       }
 
       /**