HDFS文件浏览页返回上级目录功能

1、效果预览

Hadoop自带的效果

修改后，多了一个../按钮，点击可以回到上级目录

2、查找页面和JS文件

我们在浏览器上可以看到访问了explorer.html页面，可以尝试使用find命令查找页面。

在NameNode节点上，到hadoop安装目录下，使用find命令查找。

1 [hadoop@hadoop-01 ~]$ cd /app/hadoop-2.7.7/
2 [hadoop@hadoop-01 hadoop-2.7.7]$ 
3 [hadoop@hadoop-01 hadoop-2.7.7]$ find . -name "explorer.*" -exec ls {} \;
4 ./share/hadoop/hdfs/webapps/hdfs/explorer.html
5 ./share/hadoop/hdfs/webapps/hdfs/explorer.js

看到页面和脚本在share/hadoop/hdfs/webapps/hdfs/目录下面。

3、修改代码

修改explorer.html文件，找到“Go!”按钮所在位置，复制“Go!”按钮，修改id和文本内容，粘贴到后面。

<button class="btn btn-default" type="submit" id="btn-nav-directory2"><span class="input-group-btn">../</span></button>

修改explorer.js文件，给“../”按钮添加点击事件。
找到init()函数，添加以下内容：

 1 var cc = function() {
 2     var dir = $('#directory').val();
 3     if(dir == "" || dir == "/") {
 4             return false;
 5     }
 6     var index = dir.lastIndexOf("/");
 7     if(index > 0) {
 8             dir = dir.substring(0, index);
 9     } else if(index == 0) {
10             dir = dir.substring(0, 1);
11     }
12     browse_directory(dir);
13     return true;
14 };
15 
16 $('#btn-nav-directory2').click(cc);

4、测试效果

刷新http://hadoop-01:50070/explorer.html#/

点击“../”即可回到上级目录。