HDFS-8816. Improve visualization for the Datanode tab in the NN UI. Contributed by Haohui Mai.

hadoop-hdfs-project/hadoop-hdfs/CHANGES.txt

@@ -760,6 +760,8 @@ Release 2.8.0 - UNRELEASED
     HDFS-8822. Add SSD storagepolicy tests in TestBlockStoragePolicy#
     testDefaultPolicies (vinayakumarb)
 
+    HDFS-8816. Improve visualization for the Datanode tab in the NN UI. (wheat9)
+
   OPTIMIZATIONS
 
     HDFS-8026. Trace FSOutputSummer#writeChecksumChunks rather than

hadoop-hdfs-project/hadoop-hdfs/pom.xml

@@ -386,6 +386,7 @@ http://maven.apache.org/xsd/maven-4.0.0.xsd">
             <exclude>src/contrib/**</exclude>
             <exclude>src/site/resources/images/*</exclude>
             <exclude>src/main/webapps/static/bootstrap-3.0.2/**</exclude>
+            <exclude>src/main/webapps/static/moment.min.js</exclude>
             <exclude>src/main/webapps/static/dust-full-2.0.0.min.js</exclude>
             <exclude>src/main/webapps/static/dust-helpers-1.1.1.min.js</exclude>
             <exclude>src/main/webapps/static/jquery-1.10.2.min.js</exclude>

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html

@@ -280,6 +280,14 @@
 
 <script type="text/x-dust-template" id="tmpl-datanode">
 <div class="page-header"><h1>Datanode Information</h1></div>
+<div>
+  <ul class="dfshealth-node-legend">
+    <li class="dfshealth-node-icon dfshealth-node-alive">In service</li>
+    <li class="dfshealth-node-icon dfshealth-node-down">Down</li>
+    <li class="dfshealth-node-icon dfshealth-node-decommisioned">Decommisioned</li>
+    <li class="dfshealth-node-icon dfshealth-node-down-decommisioned">Decommissioned &amp; dead</li>
+  </ul>
+</div>
 <div class="page-header"><h1><small>In operation</small></h1></div>
 <small>
 <table class="table">
@@ -287,41 +295,34 @@
     <tr>
       <th>Node</th>
       <th>Last contact</th>
-      <th>Admin State</th>
-      <th>Capacity</th>
-      <th>Used</th>
-      <th>Non DFS Used</th>
-      <th>Remaining</th>
+      <th style="width:180px; text-align:center">Capacity</th>
       <th>Blocks</th>
       <th>Block pool used</th>
-      <th>Failed Volumes</th>
       <th>Version</th>
     </tr>
   </thead>
   {#LiveNodes}
   <tr>
-    <td>{name} ({xferaddr})</td>
-    <td>{lastContact}</td>
-    <td>{adminState}</td>
-    <td>{capacity|fmt_bytes}</td>
-    <td>{used|fmt_bytes}</td>
-    <td>{nonDfsUsedSpace|fmt_bytes}</td>
-    <td>{remaining|fmt_bytes}</td>
+    <td class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td>
+    <td ng-value="{lastContact}">{#helper_relative_time value="{lastContact}"/}</td>
+    <td ng-value="{usedPercentage}">
+      <div>
+        <div style="display:inline-block; float: left; padding-right: 10px;">{capacity|fmt_bytes}</div>
+        <div class="clearfix progress dfshealth-node-capacity-bar" title="Non DFS: {nonDfsUsedSpace|fmt_bytes}, Used: {used|fmt_bytes}">
+          <div class="progress-bar {#helper_usage_bar value="{usedPercentage}"/}" style="width: {usedPercentage}%">
+          </div>
+        </div>
+      </div>
+    </td>
     <td>{numBlocks}</td>
     <td>{blockPoolUsed|fmt_bytes} ({blockPoolUsedPercent|fmt_percentage})</td>
-    <td>{volfails}</td>
     <td>{version}</td>
   </tr>
   {/LiveNodes}
   {#DeadNodes}
   <tr class="danger">
-    <td>{name} ({xferaddr})</td>
-    <td>{#helper_lastcontact_tostring value="{lastContact}"/}</td>
-    <td>Dead{?decommissioned}, Decommissioned{/decommissioned}</td>
-    <td>-</td>
-    <td>-</td>
-    <td>-</td>
-    <td>-</td>
+    <td class="dfshealth-node-icon dfshealth-node-{state}">{name} ({xferaddr})</td>
+    <td>{#helper_relative_time value="{lastContact}"/}</td>
     <td>-</td>
     <td>-</td>
     <td>-</td>
@@ -418,6 +419,7 @@
 
 <script type="text/javascript" src="/static/jquery-1.10.2.min.js">
 </script><script type="text/javascript" src="/static/bootstrap-3.0.2/js/bootstrap.min.js">
+</script><script type="text/javascript" src="/static/moment.min.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">

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js

@@ -165,12 +165,24 @@
   }
 
   function load_datanode_info() {
-
     var HELPERS = {
-      'helper_lastcontact_tostring' : function (chunk, ctx, bodies, params) {
+      'helper_relative_time' : function (chunk, ctx, bodies, params) {
         var value = dust.helpers.tap(params.value, chunk, ctx);
-        return chunk.write('' + new Date(Date.now()-1000*Number(value)));
-      }
+        return chunk.write(moment().subtract(Number(value), 'seconds').format('YYYY-MM-DD HH:mm:ss'));
+      },
+      'helper_usage_bar' : function (chunk, ctx, bodies, params) {
+        var value = dust.helpers.tap(params.value, chunk, ctx);
+        var v = Number(value);
+        var r = null;
+        if (v < 70) {
+          r = 'progress-bar-success';
+        } else if (u.usedPercentage < 85) {
+          r = 'progress-bar-warning';
+        } else {
+          r = "progress-bar-danger";
+        }
+        return chunk.write(r);
+      },
     };
 
     function workaround(r) {
@@ -184,8 +196,34 @@
         return res;
       }
 
+      function augment_live_nodes(nodes) {
+        for (var i = 0, e = nodes.length; i < e; ++i) {
+          var n = nodes[i];
+          n.usedPercentage = Math.round((n.used + n.nonDfsUsedSpace) * 1.0 / n.capacity * 100);
+          if (n.adminState === "In Service") {
+            n.state = "alive";
+          } else if (nodes[i].adminState === "Decommission In Progress") {
+            n.state = "decommisioning";
+          } else if (nodes[i].adminState === "Decommissioned") {
+            n.state = "decommissioned";
+          }
+        }
+      }
+
+      function augment_dead_nodes(nodes) {
+        for (var i = 0, e = nodes.length; i < e; ++i) {
+          if (nodes[i].decommissioned) {
+            nodes[i].state = "down-decommissioned";
+          } else {
+            nodes[i].state = "down";
+          }
+        }
+      }
+
       r.LiveNodes = node_map_to_array(JSON.parse(r.LiveNodes));
+      augment_live_nodes(r.LiveNodes);
       r.DeadNodes = node_map_to_array(JSON.parse(r.DeadNodes));
+      augment_dead_nodes(r.DeadNodes);
       r.DecomNodes = node_map_to_array(JSON.parse(r.DecomNodes));
       return r;
     }

hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/hadoop.css

@@ -212,4 +212,55 @@ header.bs-docs-nav, header.bs-docs-nav .navbar-brand {
 #alert-panel {
   margin-top:20px;
   display: none;
+}
+
+.dfshealth-node-capacity-bar {
+    margin-bottom:0;
+    width: 60%;
+}
+
+.dfshealth-node-icon:before {
+    font-size: 10pt;
+    padding-right: 1pt;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.dfshealth-node-alive:before {
+    color: #5fa341;
+    content: "\e013";
+}
+
+.dfshealth-node-decommisioned:before {
+    color: #eea236;
+    content: "\e136";
+}
+
+.dfshealth-node-down:before {
+    color: #c7254e;
+    content: "\e101";
+}
+
+.dfshealth-node-down-decommisioned:before {
+    color: #2e6da6;
+    content: "\e017";
+}
+
+.dfshealth-node-legend {
+    list-style-type: none;
+    text-align: right;
+}
+
+.dfshealth-node-legend li {
+    display: inline;
+    padding: 10pt;
+    padding-left: 10pt;
+}
+
+.dfshealth-node-legend li:before {
+    padding-right: 5pt;
 }