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

This commit is contained in:
Haohui Mai 2015-07-23 10:25:32 -07:00
parent c020b62cf8
commit ddc867ceb9
6 changed files with 126 additions and 25 deletions

View File

@ -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

View File

@ -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>

View File

@ -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">

View File

@ -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;
}

View File

@ -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;
}

File diff suppressed because one or more lines are too long