Bläddra i källkod

[security] Scroll to path on HDFS tree

Enrico Berti 11 år sedan
förälder
incheckning
1653639f40

+ 17 - 2
apps/security/src/security/templates/hdfs.mako

@@ -152,7 +152,7 @@ ${ layout.menubar(section='hdfs') }
                 </div>
               </div>
               <div class="path-container-ghost hide"></div>
-              ${ tree.render(id='hdfsTree', data='$root.assist.treeData') }
+              ${ tree.render(id='hdfsTree', data='$root.assist.treeData', afterRender='$root.assist.afterRender') }
             </div>
             <div class="span4">
               <div class="acl-panel" data-bind="visible: !$root.assist.isLoadingAcls()">
@@ -233,7 +233,7 @@ ${ layout.menubar(section='hdfs') }
 </%def>
 
 
-${ tree.import_templates(itemClick='$root.assist.setPath', itemDblClick='$root.assist.openPath', itemSelected='$root.assist.path() == path()', iconModifier=treeIcons, styleModifier='aclBit', styleModifierPullRight=aclBitPullRight) }
+${ tree.import_templates(itemClick='$root.assist.setPath', itemDblClick='$root.assist.openPath', itemSelected='$root.assist.path() == path()', iconModifier=treeIcons, styleModifier='aclBit', styleModifierPullRight=aclBitPullRight, anchorProperty='path') }
 
 
 <script src="/static/ext/js/knockout-min.js" type="text/javascript" charset="utf-8"></script>
@@ -275,12 +275,27 @@ ${ tree.import_templates(itemClick='$root.assist.setPath', itemDblClick='$root.a
 
     $("#path").jHueHdfsAutocomplete({
       home: viewModel.assist.path(),
+      onPathChange: function (path) {
+        viewModel.assist.path(path);
+      },
       onEnter: function (el) {
         viewModel.assist.path(el.val());
       },
       smartTooltip: "${_('Did you know? You can use the tab key or CTRL + Space to autocomplete file and folder names')}"
     });
 
+    $(document).on("rendered.tree", function() {
+      var _path = viewModel.assist.path();
+      if (_path[_path.length-1] == "/"){
+        _path = _path.substr(0, _path.length - 1);
+      }
+      if ($("a.anchor[href^='"+_path+"']").length > 0){
+        $("html, body").animate({
+          scrollTop: ($("a.anchor[href^='"+_path+"']").position().top - 140)+"px"
+        });
+      }
+    });
+
 
     $(".path-container").data("originalWidth", $(".path-container").width());
     $(".acl-panel").data("originalWidth", $(".acl-panel").width());

+ 13 - 7
apps/security/static/js/hdfs.ko.js

@@ -110,6 +110,10 @@ var Assist = function (vm, assist) {
   self.owner = ko.observable('');
   self.group = ko.observable('');
 
+  self.afterRender = function() {
+    $(document).trigger("rendered.tree");
+  }
+
 
   self.addAcl = function () {
     var newAcl = parseAcl('group::---');
@@ -132,13 +136,15 @@ var Assist = function (vm, assist) {
   };
 
   self.convertItemToObject = function (item) {
-    var _path = item.path;
-    var _parent = _path.substr(0, _path.lastIndexOf("/"));
-    if (_parent == "") {
-      _parent = "/";
-    }
-    if (_path != "/") {
-      self.growingTree(self.traversePath(self.growingTree(), _parent, item));
+    if (item.path != null) {
+      var _path = item.path;
+      var _parent = _path.substr(0, _path.lastIndexOf("/"));
+      if (_parent == "") {
+        _parent = "/";
+      }
+      if (_path != "/") {
+        self.growingTree(self.traversePath(self.growingTree(), _parent, item));
+      }
     }
   }
 

+ 6 - 3
desktop/core/src/desktop/templates/common_tree.mako

@@ -25,7 +25,7 @@
   from django.utils.translation import ugettext as _
 %>
 
-<%def name="import_templates(itemClick=None, itemDblClick=None, itemSelected=None, iconModifier=None, styleModifier=None, styleModifierPullRight=None, limitCount=None, limitFunction=None)">
+<%def name="import_templates(itemClick=None, itemDblClick=None, itemSelected=None, iconModifier=None, styleModifier=None, styleModifierPullRight=None, limitCount=None, limitFunction=None, anchorProperty=None)">
 
   <script src="/static/js/ko.tree.js" type="text/javascript" charset="utf-8"></script>
 
@@ -100,6 +100,9 @@
           style: { color: '#999999'}
         %endif
         "></i>
+      %if anchorProperty:
+        <a href="#" class="anchor" data-bind="attr: {href: ${anchorProperty}}"></a>
+      %endif
       <strong><a style="display: inline-block" data-bind="text:name"></a></strong>
 
       %if styleModifierPullRight:
@@ -110,7 +113,7 @@
 
 </%def>
 
-<%def name="render(id=None, data=None)">
-  <div id="${id}" data-bind="template: { name: 'tree-template', data: ${data} }"></div>
+<%def name="render(id=None, data=None, afterRender='void(0)')">
+  <div id="${id}" data-bind="template: { name: 'tree-template', data: ${data}, afterRender: ${afterRender} }"></div>
 </%def>
 

+ 7 - 0
desktop/core/static/js/jquery.hdfsautocomplete.js

@@ -26,6 +26,8 @@
         },
         onBlur: function () {
         },
+        onPathChange: function () {
+        },
         smartTooltip: "",
         smartTooltipThreshold: 10 // needs 10 up/down or click actions and no tab to activate the smart tooltip
       };
@@ -110,6 +112,10 @@
       }
     }
 
+    $(window).on("scroll", function(){
+      $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
+    });
+
     var _hdfsAutocompleteSelectedIndex = -1;
     var _filterTimeout = -1;
     _el.keyup(function (e) {
@@ -220,6 +226,7 @@
               }
               if ($(this).html().indexOf("folder") > -1) {
                 _el.val(_el.val() + "/");
+                _this.options.onPathChange(_el.val());
                 showHdfsAutocomplete();
               }
               else {