|
@@ -27,7 +27,7 @@ ${ layout.menubar(section='hdfs') }
|
|
|
|
|
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
<style type="text/css">
|
|
|
- #nav-bar ul {
|
|
|
|
|
|
|
+ #hdfsTree ul {
|
|
|
list-style-type: none;
|
|
list-style-type: none;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
}
|
|
}
|
|
@@ -35,6 +35,7 @@ ${ layout.menubar(section='hdfs') }
|
|
|
.tree {
|
|
.tree {
|
|
|
margin-left: 0 !important;
|
|
margin-left: 0 !important;
|
|
|
padding-left: 0 !important;
|
|
padding-left: 0 !important;
|
|
|
|
|
+ min-height: 300px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.node-row {
|
|
.node-row {
|
|
@@ -53,13 +54,7 @@ ${ layout.menubar(section='hdfs') }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.node-row.selected {
|
|
.node-row.selected {
|
|
|
- border: 1px dashed #CCCCCC;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- #aclPopover {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- z-index: 1028;
|
|
|
|
|
- # # under the top menu
|
|
|
|
|
|
|
+ background-color: #F6F6F6;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.loading-popover {
|
|
.loading-popover {
|
|
@@ -69,9 +64,18 @@ ${ layout.menubar(section='hdfs') }
|
|
|
color: #999999;
|
|
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>
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -96,88 +100,92 @@ ${ layout.menubar(section='hdfs') }
|
|
|
|
|
|
|
|
<div class="container-fluid">
|
|
<div class="container-fluid">
|
|
|
<div class="row-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="card-body">
|
|
|
<div class="row-fluid">
|
|
<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>
|
|
|
|
|
- <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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
<script type="text/html" id="tree-template">
|
|
<script type="text/html" id="tree-template">
|
|
|
<!-- ko if: nodes != null -->
|
|
<!-- ko if: nodes != null -->
|
|
|
<ul class="tree" data-bind="foreach: nodes">
|
|
<ul class="tree" data-bind="foreach: nodes">
|
|
@@ -221,7 +229,7 @@ ${ layout.menubar(section='hdfs') }
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/html" id="node-name-template">
|
|
<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="
|
|
<i data-bind="
|
|
|
css: {
|
|
css: {
|
|
|
'fa': true,
|
|
'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="/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="/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">
|
|
<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;
|
|
var viewModel;
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
$(document).ready(function () {
|
|
@@ -278,11 +277,42 @@ ${ layout.menubar(section='hdfs') }
|
|
|
|
|
|
|
|
viewModel.init();
|
|
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>
|
|
</script>
|
|
|
|
|
|