Apache
/
hadoop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HDFS-9084. Pagination, sorting and filtering of files/directories in the HDFS Web UI. (Contributed by Ravi Prakash)

This commit is contained in:
Tsuyoshi Ozawa 2016-02-23 19:30:58 +09:00
parent de09f41147
commit 48c61cd6aa
3 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt
View File

@ -1951,6 +1951,9 @@ Release 2.8.0 - UNRELEASED
HDFS-9764. DistCp doesn't print value for several arguments including
-numListstatusThreads. (Wei-Chiu Chuang via Yongjun Zhang)
HDFS-9084. Pagination, sorting and filtering of files/directories in the
HDFS Web UI. (Ravi Prakash via ozawa)
OPTIMIZATIONS
HDFS-8026. Trace FSOutputSummer#writeChecksumChunks rather than

15
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
View File

@ -21,6 +21,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="/static/bootstrap-3.0.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/static/bootstrap-3.0.2/css/bootstrap-editable.css"/>
<link rel="stylesheet" type="text/css" href="/static/dataTables.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/static/hadoop.css" />
<title>Browsing HDFS</title>
</head>
@ -211,15 +212,15 @@ <h4 class="modal-title" id="delete-modal-title">Delete</h4>
</script>
<script type="text/x-dust-template" id="tmpl-explorer">
<table class="table">
<table class="table" id="table-explorer">
<thead>
<tr>
<th>Permission</th>
<th title="Permissions">Permission</th>
<th>Owner</th>
<th>Group</th>
<th>Size</th>
<th>Last Modified</th>
<th>Replication</th>
<th title="Last Modified">Last Modified</th>
<th title="Replication">Replication</th>
<th>Block Size</th>
<th>Name</th>
<th></th>
@ -235,8 +236,8 @@ <h4 class="modal-title" id="delete-modal-title">Delete</h4>
</span></td>
<td><span class="explorer-owner-links">{owner}</span></td>
<td><span class="explorer-group-links">{group}</span></td>
<td>{length|fmt_bytes}</td>
<td>{#helper_date_tostring value="{modificationTime}"/}</td>
<td>{length}</td>
<td>{modificationTime}</td>
<td><span class="explorer-replication-links">{replication}</span></td>
<td>{blockSize|fmt_bytes}</td>
<td><a inode-type="{type}" class="explorer-browse-links">{pathSuffix}</a></td>
@ -263,8 +264,10 @@ <h4 class="modal-title" id="delete-modal-title">Delete</h4>
</p>
</script>
<script type="text/javascript" src="/static/jquery-1.10.2.min.js">
</script><script type="text/javascript" src="/static/jquery.dataTables.min.js">
</script><script type="text/javascript" src="/static/bootstrap-3.0.2/js/bootstrap.min.js">
</script><script type="text/javascript" src="/static/bootstrap-3.0.2/js/bootstrap-editable.min.js">
</script><script type="text/javascript" src="/static/dataTables.bootstrap.js">
</script><script type="text/javascript" src="/static/dust-full-2.0.0.min.js">
</script><script type="text/javascript" src="/static/dust-helpers-1.1.1.min.js">
</script><script type="text/javascript" src="/static/dfs-dust.js">

38
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
View File

@ -237,6 +237,28 @@
});
}
function func_size_render(data, type, row, meta) {
if(type == 'display') {
return dust.filters.fmt_bytes(data);
}
else return data;
}
// Change the format of date-time depending on how old the
// the timestamp is. If older than 6 months, no need to be
// show exact time.
function func_time_render(data, type, row, meta) {
if(type == 'display') {
var cutoff = moment().subtract(6, 'months').unix() * 1000;
if(data < cutoff) {
return moment(Number(data)).format('MMM DD YYYY');
} else {
return moment(Number(data)).format('MMM DD HH:mm');
}
}
return data;
}
function browse_directory(dir) {
var HELPERS = {
'helper_date_tostring' : function (chunk, ctx, bodies, params) {
@ -259,6 +281,22 @@
dust.render('explorer', base.push(d), function(err, out) {
$('#panel').html(out);
$('#table-explorer').dataTable( {
'lengthMenu': [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
'columns': [
{'searchable': false }, //Permissions
null, //Owner
null, //Group
{ 'searchable': false, 'render': func_size_render}, //Size
{ 'searchable': false, 'render': func_time_render}, //Last Modified
{ 'searchable': false }, //Replication
null, //Block Size
null, //Name
{ 'sortable' : false } //Trash
],
"deferRender": true
});
$('.explorer-browse-links').click(function() {
var type = $(this).attr('inode-type');
var path = $(this).closest('tr').attr('inode-path');