HDFS-10534. NameNode WebUI should display DataNode usage histogram. Contributed by Kai Sasaki.
Project: http://git-wip-us.apache.org/repos/asf/hadoop/repo Commit: http://git-wip-us.apache.org/repos/asf/hadoop/commit/18e1d682 Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/18e1d682 Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/18e1d682 Branch: refs/heads/YARN-3926 Commit: 18e1d6820926646999e7ec248c504b4145cf1a76 Parents: 5a56520 Author: Zhe Zhang <[email protected]> Authored: Wed Jan 25 09:58:39 2017 -0800 Committer: Zhe Zhang <[email protected]> Committed: Wed Jan 25 09:58:39 2017 -0800 ---------------------------------------------------------------------- hadoop-hdfs-project/hadoop-hdfs/pom.xml | 1 + .../src/main/webapps/hdfs/dfshealth.html | 3 + .../src/main/webapps/hdfs/dfshealth.js | 65 ++++++++++++++++++++ .../src/main/webapps/static/d3-v4.1.1.min.js | 8 +++ .../src/main/webapps/static/hadoop.css | 9 +++ 5 files changed, 86 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/hadoop/blob/18e1d682/hadoop-hdfs-project/hadoop-hdfs/pom.xml ---------------------------------------------------------------------- diff --git a/hadoop-hdfs-project/hadoop-hdfs/pom.xml b/hadoop-hdfs-project/hadoop-hdfs/pom.xml index 0132fae..e39bf71 100644 --- a/hadoop-hdfs-project/hadoop-hdfs/pom.xml +++ b/hadoop-hdfs-project/hadoop-hdfs/pom.xml @@ -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> http://git-wip-us.apache.org/repos/asf/hadoop/blob/18e1d682/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html ---------------------------------------------------------------------- diff --git a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html index 94516a4..b33b9a2 100644 --- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html +++ b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.html @@ -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 @@ There are no reported volume failures. </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> http://git-wip-us.apache.org/repos/asf/hadoop/blob/18e1d682/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js ---------------------------------------------------------------------- diff --git a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js index e460381..88096d3 100644 --- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js +++ b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/dfshealth.js @@ -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); --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
