HDFS-10534. NameNode WebUI should display DataNode usage histogram. Contributed by Kai Sasaki.
This commit is contained in:
parent
5a5652098c
commit
18e1d68209
@ -402,6 +402,7 @@ http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||
<exclude>src/main/webapps/static/json-bignum.js</exclude>
|
||||
<exclude>src/main/webapps/static/dataTables.bootstrap.css</exclude>
|
||||
<exclude>src/main/webapps/static/dataTables.bootstrap.js</exclude>
|
||||
<exclude>src/main/webapps/static/d3-v4.1.1.min.js</exclude>
|
||||
<exclude>src/test/resources/diskBalancer/data-cluster-3node-3disk.json</exclude>
|
||||
</excludes>
|
||||
</configuration>
|
||||
|
@ -299,6 +299,8 @@
|
||||
<li class="dfshealth-node-icon dfshealth-node-down-maintenance">In Maintenance & dead</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-header"><h1><small>Datanode usage histogram</small></h1></div>
|
||||
<small><div id="datanode-usage-histogram"></div></small>
|
||||
<div class="page-header"><h1><small>In operation</small></h1></div>
|
||||
<small>
|
||||
<table class="table" id="table-datanodes">
|
||||
@ -467,6 +469,7 @@
|
||||
</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">
|
||||
</script><script type="text/javascript" src="/static/d3-v4.1.1.min.js">
|
||||
</script><script type="text/javascript" src="dfshealth.js">
|
||||
</script>
|
||||
</body>
|
||||
|
@ -255,6 +255,70 @@
|
||||
return r;
|
||||
}
|
||||
|
||||
function renderHistogram(dnData) {
|
||||
var data = dnData.LiveNodes.map(function(dn) {
|
||||
return (dn.usedSpace / dn.capacity) * 100.0;
|
||||
});
|
||||
|
||||
var formatCount = d3.format(",.0f");
|
||||
|
||||
var widthCap = $("div.container").width();
|
||||
var heightCap = 150;
|
||||
|
||||
var margin = {top: 10, right: 60, bottom: 30, left: 30},
|
||||
width = widthCap * 0.9,
|
||||
height = heightCap - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.scaleLinear()
|
||||
.domain([0.0, 100.0])
|
||||
.range([0, width]);
|
||||
|
||||
var bins = d3.histogram()
|
||||
.domain(x.domain())
|
||||
.thresholds(x.ticks(20))
|
||||
(data);
|
||||
|
||||
var y = d3.scaleLinear()
|
||||
.domain([0, d3.max(bins, function(d) { return d.length; })])
|
||||
.range([height, 0]);
|
||||
|
||||
var svg = d3.select("#datanode-usage-histogram").append("svg")
|
||||
.attr("width", width + 50.0)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
svg.append("text")
|
||||
.attr("x", (width / 2))
|
||||
.attr("y", heightCap - 6 - (margin.top / 2))
|
||||
.attr("text-anchor", "middle")
|
||||
.style("font-size", "15px")
|
||||
.text("Disk usage of each DataNode (%)");
|
||||
|
||||
var bar = svg.selectAll(".bar")
|
||||
.data(bins)
|
||||
.enter().append("g")
|
||||
.attr("class", "bar")
|
||||
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; });
|
||||
|
||||
bar.append("rect")
|
||||
.attr("x", 1)
|
||||
.attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
|
||||
.attr("height", function(d) { return height - y(d.length); });
|
||||
|
||||
bar.append("text")
|
||||
.attr("dy", ".75em")
|
||||
.attr("y", 6)
|
||||
.attr("x", (x(bins[0].x1) - x(bins[0].x0)) / 2)
|
||||
.attr("text-anchor", "middle")
|
||||
.text(function(d) { return formatCount(d.length); });
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "axis axis--x")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(d3.axisBottom(x));
|
||||
}
|
||||
|
||||
$.get(
|
||||
'/jmx?qry=Hadoop:service=NameNode,name=NameNodeInfo',
|
||||
guard_with_startup_progress(function (resp) {
|
||||
@ -273,6 +337,7 @@
|
||||
{ 'orderDataType': 'ng-value', 'type': 'numeric'},
|
||||
{ 'orderData': 5 }
|
||||
]});
|
||||
renderHistogram(data);
|
||||
$('#ui-tabs a[href="#tab-datanode"]').tab('show');
|
||||
});
|
||||
})).error(ajax_error_handler);
|
||||
|
8
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/d3-v4.1.1.min.js
vendored
Normal file
8
hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/static/d3-v4.1.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -293,3 +293,12 @@ header.bs-docs-nav, header.bs-docs-nav .navbar-brand {
|
||||
float: right;
|
||||
left: 75px;
|
||||
}
|
||||
|
||||
.bar rect {
|
||||
fill: #5FA33F;
|
||||
}
|
||||
|
||||
.bar text {
|
||||
fill: #fff;
|
||||
font: 10px sans-serif;
|
||||
}
|
Loading…
Reference in New Issue
Block a user