Browse Source

HUE-4082 [assist] Fix issue with blank assist

This takes care of the issue where the assist is always blank in Safari and it is also likely to take care of the sporadic and rarely blank assist seen in other browsers.
Johan Ahlen 9 years ago
parent
commit
f560e672e3

+ 27 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1308,6 +1308,33 @@
     }
     }
   };
   };
 
 
+  ko.bindingHandlers.assistInnerPanelResizer = {
+    init: function (element, valueAccessor) {
+      var $element = $(element);
+      var $parent = $element.parent();
+
+      var lastParentHeight = -1;
+      var setHeightToParentHeight = function () {
+        if (lastParentHeight !== $parent.height()) {
+          lastParentHeight = $parent.height();
+          $element.css('height', lastParentHeight + 'px');
+        }
+      };
+
+      setHeightToParentHeight();
+
+      $(window).on('resize', setHeightToParentHeight);
+      var pubSub = huePubSub.subscribe('assist.forceRender', setHeightToParentHeight);
+      var interval = window.setInterval(setHeightToParentHeight, 500);
+
+      ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
+        $(window).off('resize', setHeightToParentHeight);
+        pubSub.remove();
+        window.clearInterval(interval);
+      });
+    }
+  };
+
   ko.bindingHandlers.assistVerticalResizer = {
   ko.bindingHandlers.assistVerticalResizer = {
     init: function (element, valueAccessor) {
     init: function (element, valueAccessor) {
       var $container = $(element);
       var $container = $(element);

+ 67 - 72
desktop/core/src/desktop/templates/assist.mako

@@ -72,10 +72,9 @@ from metadata.conf import has_navigator
     }
     }
 
 
     .assist-inner-panel {
     .assist-inner-panel {
-      overflow: hidden;
-      height: 100%;
       position: relative;
       position: relative;
       padding: 0 0 0 10px;
       padding: 0 0 0 10px;
+      overflow: hidden;
       margin-right: 1px;
       margin-right: 1px;
     }
     }
 
 
@@ -509,21 +508,19 @@ from metadata.conf import has_navigator
   </script>
   </script>
 
 
   <script type="text/html" id="assist-hive-inner-panel">
   <script type="text/html" id="assist-hive-inner-panel">
-    <div class="assist-inner-panel">
-      <div class="assist-flex-panel">
-        <!-- ko template: { if: breadcrumb() !== null, name: 'assist-db-breadcrumb' } --><!-- /ko -->
-        <!-- ko template: { ifnot: selectedSource, name: 'assist-sources-template' } --><!-- /ko -->
-        <!-- ko with: selectedSource -->
-        <!-- ko template: { ifnot: selectedDatabase, name: 'assist-databases-template' }--><!-- /ko -->
-        <!-- ko with: selectedDatabase -->
-        <!-- ko template: { name: "assist-tables-template" } --><!-- /ko -->
-        <!-- /ko -->
-        <!-- /ko -->
-      </div>
-      <!-- ko with: $parents[1] -->
-      <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
+    <div class="assist-flex-panel">
+      <!-- ko template: { if: breadcrumb() !== null, name: 'assist-db-breadcrumb' } --><!-- /ko -->
+      <!-- ko template: { ifnot: selectedSource, name: 'assist-sources-template' } --><!-- /ko -->
+      <!-- ko with: selectedSource -->
+      <!-- ko template: { ifnot: selectedDatabase, name: 'assist-databases-template' }--><!-- /ko -->
+      <!-- ko with: selectedDatabase -->
+      <!-- ko template: { name: "assist-tables-template" } --><!-- /ko -->
+      <!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
     </div>
     </div>
+    <!-- ko with: $parents[1] -->
+    <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
+    <!-- /ko -->
   </script>
   </script>
 
 
   <script type="text/html" id="hdfs-details-content">
   <script type="text/html" id="hdfs-details-content">
@@ -551,63 +548,61 @@ from metadata.conf import has_navigator
   </script>
   </script>
 
 
   <script type="text/html" id="assist-hdfs-inner-panel">
   <script type="text/html" id="assist-hdfs-inner-panel">
-    <div class="assist-inner-panel">
-      <div class="assist-flex-panel">
-        <!-- ko with: selectedHdfsEntry -->
-        <div class="assist-flex-header assist-breadcrumb" >
-          <!-- ko if: parent !== null -->
-          <a href="javascript: void(0);" data-bind="click: function () { huePubSub.publish('assist.selectHdfsEntry', parent); }">
-            <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: path"></span>
-          </a>
-          <!-- /ko -->
-          <!-- ko if: parent === null -->
-          <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;" data-bind="text: path"></span>
-          </div>
-          <!-- /ko -->
-          <!-- ko template: 'assist-hdfs-header-actions' --><!-- /ko -->
+    <div class="assist-flex-panel">
+      <!-- ko with: selectedHdfsEntry -->
+      <div class="assist-flex-header assist-breadcrumb" >
+        <!-- ko if: parent !== null -->
+        <a href="javascript: void(0);" data-bind="click: function () { huePubSub.publish('assist.selectHdfsEntry', parent); }">
+          <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: path"></span>
+        </a>
+        <!-- /ko -->
+        <!-- ko if: parent === null -->
+        <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;" data-bind="text: path"></span>
         </div>
         </div>
-        <div class="assist-flex-fill assist-hdfs-scrollable">
-          <div data-bind="visible: ! loading() && ! hasErrors()">
-            <ul class="assist-tables" data-bind="foreachVisible: {data: entries, minHeight: 20, container: '.assist-hdfs-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: 'hdfs-details-content', titleTemplate: 'hdfs-details-title', minWidth: '320px' }">
-                    <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: toggleOpen, dblClick: dblClick }, attr: {'title': definition.name }">
-                  <!-- ko if: definition.type === 'dir' -->
-                  <i class="fa fa-fw fa-folder-o muted valign-middle"></i>
-                  <!-- /ko -->
-                  <!-- ko if: definition.type === 'file' -->
-                  <i class="fa fa-fw fa-file-o muted valign-middle"></i>
-                  <!-- /ko -->
-                  <span draggable="true" data-bind="text: definition.name, draggableText: { text: '\'' + path + '\'', meta: {'type': 'hdfs', 'definition': definition} }"></span>
+        <!-- /ko -->
+        <!-- ko template: 'assist-hdfs-header-actions' --><!-- /ko -->
+      </div>
+      <div class="assist-flex-fill assist-hdfs-scrollable">
+        <div data-bind="visible: ! loading() && ! hasErrors()">
+          <ul class="assist-tables" data-bind="foreachVisible: {data: entries, minHeight: 20, container: '.assist-hdfs-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: 'hdfs-details-content', titleTemplate: 'hdfs-details-title', minWidth: '320px' }">
+                  <i class='fa fa-info' title="${ _('Details') }"></i>
                 </a>
                 </a>
-              </li>
-            </ul>
-            <!-- ko if: !loading() && entries().length === 0 -->
-            <ul class="assist-tables">
-              <li class="assist-entry" style="font-style: italic;">${_('Empty directory')}</li>
-            </ul>
-            <!-- /ko -->
-          </div>
-          <!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko -->
-          <div class="assist-errors" data-bind="visible: ! loading() && hasErrors()">
-            <span>${ _('Error loading contents.') }</span>
-          </div>
+              </div>
+
+              <a href="javascript:void(0)" class="assist-entry assist-table-link" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.name }">
+                <!-- ko if: definition.type === 'dir' -->
+                <i class="fa fa-fw fa-folder-o muted valign-middle"></i>
+                <!-- /ko -->
+                <!-- ko if: definition.type === 'file' -->
+                <i class="fa fa-fw fa-file-o muted valign-middle"></i>
+                <!-- /ko -->
+                <span draggable="true" data-bind="text: definition.name, draggableText: { text: '\'' + path + '\'', meta: {'type': 'hdfs', 'definition': definition} }"></span>
+              </a>
+            </li>
+          </ul>
+          <!-- ko if: !loading() && entries().length === 0 -->
+          <ul class="assist-tables">
+            <li class="assist-entry" style="font-style: italic;">${_('Empty directory')}</li>
+          </ul>
+          <!-- /ko -->
+        </div>
+        <!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko -->
+        <div class="assist-errors" data-bind="visible: ! loading() && hasErrors()">
+          <span>${ _('Error loading contents.') }</span>
         </div>
         </div>
-        <!-- /ko -->
       </div>
       </div>
-      <!-- ko with: $parents[1] -->
-      <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
     </div>
     </div>
+    <!-- ko with: $parents[1] -->
+    <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
+    <!-- /ko -->
   </script>
   </script>
 
 
   <script type="text/html" id="file-details-content">
   <script type="text/html" id="file-details-content">
@@ -680,10 +675,8 @@ from metadata.conf import has_navigator
   </script>
   </script>
 
 
   <script type="text/html" id="assist-documents-inner-panel">
   <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 class="assist-flex-panel">
+      <!-- ko template: 'assist-file-panel' --><!-- /ko -->
     </div>
     </div>
   </script>
   </script>
 
 
@@ -862,8 +855,10 @@ from metadata.conf import has_navigator
         <!-- /ko -->
         <!-- /ko -->
       </div>
       </div>
       <!-- /ko -->
       <!-- /ko -->
-      <div style="position: relative; flex: 1 1 100%; overflow: hidden; padding-top: 10px;" data-bind="style: { 'padding-top': availablePanels.length > 1 ? '10px' : '5px' }, with: visiblePanel">
-        <!-- ko template: { name: templateName, data: panelData } --><!-- /ko -->
+      <div style="position: relative; flex: 1 1 100%; overflow: hidden; padding-top: 10px;" data-bind="style: { 'padding-top': availablePanels.length > 1 ? '10px' : '5px' }">
+        <div class="assist-inner-panel" data-bind="assistInnerPanelResizer, with: visiblePanel">
+          <!-- ko template: { name: templateName, data: panelData } --><!-- /ko -->
+        </div>
       </div>
       </div>
     </div>
     </div>
   </script>
   </script>