Parcourir la source

HUE-7296 [assist] Use the document context popover in the left assist

Johan Ahlen il y a 8 ans
Parent
commit
ef2b8f3f09

+ 32 - 0
desktop/core/src/desktop/static/desktop/js/document/hueFileEntry.js

@@ -85,6 +85,7 @@ var HueFileEntry = (function () {
     self.userGroups = options.userGroups;
     self.superuser = options.superuser;
     self.serverTypeFilter = options.serverTypeFilter || ko.observable({ type: 'all' });
+    self.statsVisible = ko.observable(false);
 
     self.document = ko.observable();
     self.selectedDocsWithDependents = ko.observable([]);
@@ -297,6 +298,37 @@ var HueFileEntry = (function () {
     }
   };
 
+  HueFileEntry.prototype.showContextPopover = function (entry, event, positionAdjustment) {
+    var self = this;
+    var $source = $(event.target);
+    var offset = $source.offset();
+    if (positionAdjustment) {
+      offset.left += positionAdjustment.left;
+      offset.top += positionAdjustment.top;
+    }
+
+    self.statsVisible(true);
+    huePubSub.publish('context.popover.show', {
+      data: {
+        type: 'hue',
+        definition: self.definition()
+      },
+      showInAssistEnabled: false,
+      orientation: 'right',
+      pinEnabled: false,
+      source: {
+        element: event.target,
+        left: offset.left,
+        top: offset.top - 3,
+        right: offset.left + $source.width() + 1,
+        bottom: offset.top + $source.height() - 3
+      }
+    });
+    huePubSub.subscribeOnce('context.popover.hidden', function () {
+      self.statsVisible(false);
+    });
+  };
+
   HueFileEntry.prototype.addDirectoryParamToUrl = function (url) {
     var self = this;
 

+ 2 - 17
desktop/core/src/desktop/templates/assist.mako

@@ -179,6 +179,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
     <li><a href="javascript: void(0);" data-bind="click: open"><i class="fa fa-fw fa-folder-open-o"></i> ${ _('Open folder') }</a></li>
     <!-- /ko -->
     <!-- ko if: definition().type !== 'directory' -->
+    <li><a href="javascript: void(0);" data-bind="click: function(data) { showContextPopover(data, { target: $parentContext.$contextSourceElement }, { left: 4, top: 2 }); }"><i class="fa fa-fw fa-info"></i> ${ _('Show details') }</a></li>
     <li><a href="javascript: void(0);" data-bind="click: open"><i class="fa fa-fw fa-edit"></i> ${ _('Open document') }</a></li>
     <!-- /ko -->
   </script>
@@ -526,20 +527,6 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
     <!-- /ko -->
   </script>
 
-  <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>
-      <div><div class="assist-details-header">${ _('Modified') }</div><div class="assist-details-value" data-bind="text: localeFormat(last_modified)"></div></div>
-      <div><div class="assist-details-header">${ _('Owner') }</div><div class="assist-details-value" data-bind="text: owner"></div></div>
-    </div>
-    <!-- /ko -->
-  </script>
-
-  <script type="text/html" id="file-details-title">
-    <span data-bind="text: definition().name"></span>
-  </script>
-
   <script type="text/html" id="assist-document-header-actions">
     <div class="assist-db-header-actions">
       <!-- ko if: !loading() && availableTypeFilters().length > 1 -->
@@ -576,9 +563,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
          <ul class="assist-tables" data-bind="foreachVisible: {data: filteredEntries, minHeight: 27, container: '.assist-file-scrollable' }">
            <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, visibleOnHover: { 'selector': '.assist-file-actions' }">
              <div class="assist-file-actions table-actions">
-               <a 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>
+               <a class="inactive-action" href="javascript:void(0)" data-bind="click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-fw fa-info" title="${_('Show details')}"></i></a>
              </div>
              <a href="javascript:void(0)" class="assist-entry assist-document-link" data-bind="click: open, attr: {'title': name }">
                <!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: false } } --><!-- /ko -->

+ 6 - 1
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -286,7 +286,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="context-document-details">
-    <div class="sql-context-flex-fill" data-bind="niceScroll">
+    <div class="sql-context-flex-fill" style="overflow: auto;" data-bind="niceScroll">
       <div style="padding: 8px">
         <!-- ko with: documentContents -->
         <!-- ko if: typeof snippets !== 'undefined' -->
@@ -1261,6 +1261,7 @@ from metadata.conf import has_navigator
         self.isHdfs = params.data.type === 'hdfs';
         self.isAsterisk = params.data.type === 'asterisk';
         self.isView = params.data.type === 'view';
+        self.isDocument = params.data.type.toLowerCase() === 'hue';
 
         if ((self.isColumn || self.isComplex) && self.data.tables && self.data.tables.length > 0) {
           var identifierChain = self.data.identifierChain;
@@ -1322,6 +1323,10 @@ from metadata.conf import has_navigator
           self.contents = new AsteriskContextTabs(self.data, self.sourceType, self.defaultDatabase);
           self.title = '*';
           self.iconClass = 'fa-table';
+        } else if (self.isDocument) {
+          self.contents = new DocumentContext(self.data.definition);
+          self.title = self.data.definition.name;
+          self.iconClass = 'fa-file-o';
         } else {
           self.title = '';
           self.iconClass = 'fa-info'