瀏覽代碼

[security] Added path autocomplete

Enrico Berti 11 年之前
父節點
當前提交
6f59182379

+ 1 - 1
apps/filebrowser/src/filebrowser/templates/fb_components.mako

@@ -29,7 +29,7 @@ from django.utils.translation import ugettext as _
                 <li data-bind="visible: label == '/'"><a href="#" data-bind="click: show"><span class="divider" data-bind="text: label"></span></a></li>
                 <li data-bind="visible: label != '/'"><a href="#" data-bind="text: label, click: show"></a><span class="divider">/</span></li>
             </ul>
-            <input id="hueBreadcrumbText" type="text" class="input-xxlarge" style="margin-top:4px;margin-right:4px;display:none" data-bind="value: currentPath" />
+            <input id="hueBreadcrumbText" type="text" class="input-xxlarge" style="margin-top:4px;margin-right:4px;display:none" data-bind="value: currentPath" autocomplete="off" />
         </li>
         <li class="pull-right">
           <a href="${url('filebrowser.views.view', path=urlencode(path))}?default_to_trash" style="line-height:18px" title="${_('View trash')}">

+ 1 - 1
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -1353,4 +1353,4 @@ from django.utils.translation import ugettext as _
     });
   }());
   </script>
-</%def>
+</%def>

+ 124 - 94
apps/security/src/security/templates/hdfs.mako

@@ -27,7 +27,7 @@ ${ layout.menubar(section='hdfs') }
 
 
 <style type="text/css">
-  #nav-bar ul {
+  #hdfsTree ul {
     list-style-type: none;
     padding: 0;
   }
@@ -35,6 +35,7 @@ ${ layout.menubar(section='hdfs') }
   .tree {
     margin-left: 0 !important;
     padding-left: 0 !important;
+    min-height: 300px;
   }
 
   .node-row {
@@ -53,13 +54,7 @@ ${ layout.menubar(section='hdfs') }
   }
 
   .node-row.selected {
-    border: 1px dashed #CCCCCC;
-  }
-
-  #aclPopover {
-    position: absolute;
-    z-index: 1028;
-    # # under the top menu
+    background-color: #F6F6F6;
   }
 
   .loading-popover {
@@ -69,9 +64,18 @@ ${ layout.menubar(section='hdfs') }
     color: #999999;
   }
 
-  .popover-title {
-    word-break: break-all;
+  .path-container {
+    background-color: #FFF;
+    padding-top: 8px;
+  }
+
+  .acl-panel {
+    border-left: 1px solid #CCC;
+    padding-top: 6px;
+    padding-left: 6px;
+    min-height: 300px;
   }
+
 </style>
 
 
@@ -96,88 +100,92 @@ ${ layout.menubar(section='hdfs') }
 
 <div class="container-fluid">
   <div class="row-fluid">
-    <div class="span2">
-      <div class="sidebar-nav">
-        <ul class="nav nav-list">
-          <li class="nav-header">${ _('ACLs') }</li>
-          <li class="active"><a href="#edits"><i class="fa fa-pencil"></i> ${ _('Edit') }</a></li>
-          <li><a href="#view"><i class="fa fa-eye"></i> ${ _('View') }</a></li>
-          <li class="nav-header"><i class="fa fa-group"></i> ${ _('Users') }
-            </br>
-            <input type="checkbox" checked="checked"> ${_('Me')}
-            </br>          
-            <select data-bind="options: availableHadoopUsers, value: doAs" size="10"></select>
-          </li>          
-          <li class="nav-header"><i class="fa fa-group"></i> ${ _('Groups') }
-            </br>
-            <input type="checkbox" checked="checked"> ${_('Me')}
-            </br>
-            <select data-bind="options: availableHadoopGroups" size="10" multiple="true"></select>
-          </li>    
-        </ul>
-      </div>
-    </div>
-    <div class="span10">
-      <div id="edit" class="section card card-small">
-        <h1 class="card-heading simple">${ _('Edit ACLs') }</h1>
+    <div class="span12">
+      <div class="card card-small">
+        <h1 class="card-heading simple">
+          <div class="pull-right">
+            <div class="btn-group pull-right">
+              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+                View as...
+                <span class="caret"></span>
+              </a>
+              <ul class="dropdown-menu">
+                <li><a href="#"><strong>USERS</strong></a></li>
+                <li><a href="#">My user</a></li>
+                <!-- ko foreach: availableHadoopUsers -->
+                  <li><a href="#" data-bind="text: $data"></a></li>
+                <!-- /ko -->
+                <li class="divider"></li>
+                <li><a href="#"><strong>GROUPS</strong></a></li>
+                <li><a href="#">My group</a></li>
+                <!-- ko foreach: availableHadoopGroups -->
+                  <li><a href="#" data-bind="text: $data"></a></li>
+                <!-- /ko -->
+              </ul>
+            </div>
+          </div>
+          ${ _('HDFS ACLs') }
+        </h1>
         <div class="card-body">
           <div class="row-fluid">
-            <div class="span8">
-              <input type="text" class="input-xxlarge" data-bind="value: $root.assist.path, valueUpdate: 'afterkeydown'"/>
-              <div id="nav-bar" data-bind="template: { name: 'tree-template', data: $root.assist.treeData }"></div>
-            </div>
-            <div class="span4">
-
-              <div id="aclPopover" class="popover right">
-                <div class="arrow"></div>
-                <h3 class="popover-title"><a data-bind="attr: { href: '/filebrowser/view' + $root.assist.path() }" target="_blank" title="${ _('Open in File Browser') }"><span data-bind="text:$root.assist.path"></span> <i class="fa fa-external-link"></i></a></h3>
-                <div class="popover-content">
-                  <p>
-                    <div class="left" data-bind="visible: !$root.assist.isLoadingAcls()">
-                      <i class="fa fa-user" style="color: #999999"></i> <strong><span data-bind="text: $root.assist.owner"></span></strong>&nbsp;&nbsp;
-                      <i class="fa fa-users" style="color: #999999"></i> <strong><span data-bind="text: $root.assist.group"></span></strong>
-
-                      <a href="javascript: void(0)"><i class="fa fa-header"></i> View in text</a>
-
-                      <br/>
-                      <div data-bind="foreach: $root.assist.regularAcls">
-                        <div data-bind="template: {name: 'acl-edition'}"></div>
-                      </div>
-
-                      <a href="javascript: void(0)" data-bind="click: $root.assist.addAcl"><i class="fa fa-plus"></i></a>
-
-                      <br/>
-
-                      Default (<i class="fa fa-times"></i> bulk delete?)
-                      <div data-bind="foreach: $root.assist.defaultAcls">
-                        <div data-bind="template: {name: 'acl-edition'}"></div>
-                      </div>
-                      <a href="javascript: void(0)" data-bind="click: $root.assist.addDefaultAcl"><i class="fa fa-plus"></i></a>
-
-                      <div data-bind="visible: $root.assist.changedAcls().length">
-                        <button type="button" data-bind="click: $root.assist.updateAcls" rel="tooltip" data-placement="bottom" data-loading-text="${ _('Saving...') }" data-original-title="${ _('Save') }" class="btn">
-                          <i class="fa fa-save"></i>
-                        </button>
-                      </div>
-                    </div>
-                    <div class="loading-popover center" data-bind="visible: $root.assist.isLoadingAcls()"><i class="fa fa-spinner fa-spin fa-5x"></i></div>
-                  </p>
+            <div class="span9">
+              <div class="path-container">
+                <div class="input-append span12">
+                  <input id="path" type="text" style="width: 96%" data-bind="value: $root.assist.path, valueUpdate: 'afterkeydown'" autocomplete="off"/>
+                  <a data-bind="attr: { href: '/filebrowser/view' + $root.assist.path() }" target="_blank" title="${ _('Open in File Browser') }" class="btn btn-inverse"><i class="fa fa-external-link"></i></a>
                 </div>
               </div>
+              <div class="path-container-ghost hide"></div>
+              <div id="hdfsTree" data-bind="template: { name: 'tree-template', data: $root.assist.treeData }"></div>
+            </div>
+            <div class="span3">
+              <div class="acl-panel" data-bind="visible: !$root.assist.isLoadingAcls()">
+                <h4>${_('Selected ACL')}</h4>
+                <dl>
+                  <dt>${_('Path')}</dt>
+                  <dd><a data-bind="attr: { href: '/filebrowser/view' + $root.assist.path() }, text: $root.assist.path()" target="_blank" title="${ _('Open in File Browser') }"></a></dd>
+                  <dt>${_('User')}</dt>
+                  <dd><i class="fa fa-user" style="color: #999999"></i> <span data-bind="text: $root.assist.owner"></span></dd>
+                  <dt>${_('Group')}</dt>
+                  <dd><i class="fa fa-users" style="color: #999999"></i> <span data-bind="text: $root.assist.group"></span></dd>
+                  </dl>
+
+                  <a href="javascript: void(0)"><i class="fa fa-header"></i> View in text</a>
+
+                  <br/>
+                  <div data-bind="foreach: $root.assist.regularAcls">
+                    <div data-bind="template: {name: 'acl-edition'}"></div>
+                  </div>
+
+                  <a href="javascript: void(0)" data-bind="click: $root.assist.addAcl"><i class="fa fa-plus"></i></a>
+
+                  <br/>
+
+                  Default (<i class="fa fa-times"></i> bulk delete?)
+                  <div data-bind="foreach: $root.assist.defaultAcls">
+                    <div data-bind="template: {name: 'acl-edition'}"></div>
+                  </div>
+                  <a href="javascript: void(0)" data-bind="click: $root.assist.addDefaultAcl"><i class="fa fa-plus"></i></a>
+
+                  <div data-bind="visible: $root.assist.changedAcls().length">
+                    <button type="button" data-bind="click: $root.assist.updateAcls" rel="tooltip" data-placement="bottom" data-loading-text="${ _('Saving...') }" data-original-title="${ _('Save') }" class="btn">
+                      <i class="fa fa-save"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="loading-popover center" data-bind="visible: $root.assist.isLoadingAcls()"><i class="fa fa-spinner fa-spin fa-5x"></i></div>
+
 
             </div>
           </div>
+          </div>
         </div>
-      </div>
-
-      <div id="listDataset" class="section card card-small hide">
-        <div class="alert alert-info"><h3>${ _('Existing datasets') }</h3></div>
-      </div>
     </div>
-
   </div>
 </div>
 
+
+
 <script type="text/html" id="tree-template">
 <!-- ko if: nodes != null -->
 <ul class="tree" data-bind="foreach: nodes">
@@ -221,7 +229,7 @@ ${ layout.menubar(section='hdfs') }
 </script>
 
 <script type="text/html" id="node-name-template">
-    <div class="node-row" data-bind="click: $root.assist.setPath,style: { backgroundColor: aclBit() ? '#F6F6F6': '' }, css:{selected: $root.assist.path() == path()}">
+    <div class="node-row" data-bind="click: $root.assist.setPath, event : { dblclick: $root.assist.openPath },  style: { border: aclBit() ? '1px dashed #CCCCCC': '' }, css:{selected: $root.assist.path() == path()}">
       <i data-bind="
       css: {
           'fa': true,
@@ -242,6 +250,7 @@ ${ layout.menubar(section='hdfs') }
 <script src="/static/ext/js/knockout.mapping-2.3.2.js" type="text/javascript" charset="utf-8"></script>
 
 <script src="/security/static/js/hdfs.ko.js" type="text/javascript" charset="utf-8"></script>
+<script src="/static/js/jquery.hdfsautocomplete.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript">
 
@@ -260,16 +269,6 @@ ${ layout.menubar(section='hdfs') }
     }
   };
 
-  function movePopover() {
-    var _selectedRow = $(".node-row.selected");
-    if (_selectedRow.length > 0) {
-      $("#aclPopover")
-          .css("left", _selectedRow.offset().left + _selectedRow.width())
-          .css("top", _selectedRow.offset().top - $("#aclPopover").outerHeight() / 2 + _selectedRow.outerHeight() / 2)
-          .show();
-    }
-  }
-
   var viewModel;
 
   $(document).ready(function () {
@@ -278,11 +277,42 @@ ${ layout.menubar(section='hdfs') }
 
     viewModel.init();
 
-    $(document).on("click", ".node-row", function () {
-      movePopover();
+    //$(document).on("loaded.acls", movePopover);
+
+    $("#path").jHueHdfsAutocomplete({
+      home: viewModel.assist.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')}"
+    });
+
+
+    $(".path-container").data("originalWidth", $(".path-container").width());
+    $(".acl-panel").data("originalWidth", $(".acl-panel").width());
+    $(".path-container-ghost").height($(".path-container").outerHeight());
+    resetPathContainer();
+
+    $(window).scroll(function () {
+      if ($(window).scrollTop() > 85) {
+        $(".path-container").width($(".path-container").data("originalWidth"));
+        $(".acl-panel").width($(".acl-panel").data("originalWidth"));
+        $(".path-container").css("position", "fixed").css("top", "70px");
+        $(".acl-panel").css("position", "fixed").css("top", "70px");
+        $(".path-container-ghost").removeClass("hide");
+      }
+      else {
+        resetPathContainer();
+      }
     });
 
-    $(document).on("loaded.acls", movePopover);
+    function resetPathContainer() {
+      $(".path-container").attr("style", "min-width: 190px");
+      $(".acl-panel").attr("style", "min-width: 190px");
+      $(".path-container").data("originalWidth", $(".path-container").width());
+      $(".acl-panel").data("originalWidth", $(".acl-panel").width());
+      $(".path-container-ghost").addClass("hide");
+    }
   });
 </script>
 

+ 4 - 0
apps/security/static/js/hdfs.ko.js

@@ -153,6 +153,10 @@ var Assist = function (vm, assist) {
     self.path(obj.path());
   }
 
+  self.openPath = function (obj) {
+    window.open("/filebrowser/view" + obj.path(), '_blank');
+  }
+
   self.loadParents = function(breadcrumbs) {
     if (typeof breadcrumbs != "undefined" && breadcrumbs != null) {
       breadcrumbs.forEach(function (crumb, idx) {

+ 16 - 1
desktop/core/static/css/hue3.css

@@ -1695,4 +1695,19 @@ border-bottom-left-radius: 0px;
 
 .actionbar-actions {
   margin: 0px 0px 10px 0px;
-}
+}
+
+
+#jHueHdfsAutocomplete ul li {
+  cursor: pointer;
+}
+
+#jHueHdfsAutocomplete ul li:hover,  #jHueHdfsAutocomplete ul li.active {
+  color: #FFFFFF;
+  background: #338BB8;
+}
+
+#jHueHdfsAutocomplete .popover-content {
+  max-height: 200px;
+  overflow-y: auto;
+}

+ 1 - 1
desktop/core/static/js/jquery.hdfsautocomplete.js

@@ -205,7 +205,7 @@
             }
           });
           window.setTimeout(function () {
-            $("#jHueHdfsAutocomplete").css("top", _el.position().top + _el.outerHeight()).css("left", _el.position().left).width(_el.width());
+            $("#jHueHdfsAutocomplete").css("top", _el.offset().top + _el.outerHeight()).css("left", _el.offset().left).width(_el.width());
             $("#jHueHdfsAutocomplete").find("ul").empty().html(_currentFiles.join(""));
             $("#jHueHdfsAutocomplete").find("li").on("click", function (e) {
               smartTooltipMaker();