From 48c61cd6aa3feae6a4a71d2d1bb6d01a3d50c7b7 Mon Sep 17 00:00:00 2001
From: Tsuyoshi Ozawa <ozawa@apache.org>
Date: Tue, 23 Feb 2016 19:30:58 +0900
Subject: [PATCH] HDFS-9084. Pagination, sorting and filtering of
 files/directories in the HDFS Web UI. (Contributed by Ravi Prakash)

---
 hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt   |  3 ++
 .../src/main/webapps/hdfs/explorer.html       | 15 +++++---
 .../src/main/webapps/hdfs/explorer.js         | 38 +++++++++++++++++++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt b/hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt
index 256df39fad..440b7e82cc 100644
--- a/hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt
+++ b/hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt
@@ -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
diff --git a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
index e66e1e7ec2..5106006c0e 100644
--- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
+++ b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
@@ -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">
diff --git a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
index 0c682097e0..baca798fe1 100644
--- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
+++ b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
@@ -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');