You are viewing a plain text version of this content. The canonical link for it is here.
Posted to common-commits@hadoop.apache.org by in...@apache.org on 2017/09/02 21:21:01 UTC
[17/48] hadoop git commit: YARN-7071. Add vcores and number of
containers in new YARN UI node heat map. Contributed by Abdullah Yousufi.
YARN-7071. Add vcores and number of containers in new YARN UI node heat map. Contributed by Abdullah Yousufi.
Project: http://git-wip-us.apache.org/repos/asf/hadoop/repo
Commit: http://git-wip-us.apache.org/repos/asf/hadoop/commit/a756704f
Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/a756704f
Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/a756704f
Branch: refs/heads/HDFS-10467
Commit: a756704f5aa4797ef605ff33be28fcafe2e334fd
Parents: 621b43e
Author: Sunil G <su...@apache.org>
Authored: Fri Sep 1 20:46:39 2017 +0530
Committer: Sunil G <su...@apache.org>
Committed: Fri Sep 1 20:46:39 2017 +0530
----------------------------------------------------------------------
.../main/webapp/app/components/nodes-heatmap.js | 62 ++++++++++++++++++--
.../src/main/webapp/app/models/yarn-rm-node.js | 4 +-
.../app/templates/components/nodes-heatmap.hbs | 3 +
.../webapp/app/templates/yarn-nodes/heatmap.hbs | 2 +-
4 files changed, 61 insertions(+), 10 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/hadoop/blob/a756704f/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
index 3acc5de..a1df480 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
@@ -27,6 +27,10 @@ export default BaseChartComponent.extend({
RACK_MARGIN: 20,
filter: "",
selectedCategory: 0,
+ memoryLabel: "Memory",
+ cpuLabel: "VCores",
+ containersLabel: "Containers",
+ totalContainers: 0,
bindTP: function(element, cell) {
element.on("mouseover", function() {
@@ -75,8 +79,7 @@ export default BaseChartComponent.extend({
return true;
}
- var usage = node.get("usedMemoryMB") /
- (node.get("usedMemoryMB") + node.get("availMemoryMB"));
+ var usage = this.calcUsage(node);
var lowerLimit = (this.selectedCategory - 1) * 0.2;
var upperLimit = this.selectedCategory * 0.2;
if (lowerLimit <= usage && usage <= upperLimit) {
@@ -89,6 +92,7 @@ export default BaseChartComponent.extend({
// [{label=label1, value=value1}, ...]
// ...
renderCells: function (model, title) {
+ var selectedOption = d3.select("select").property("value");
var data = [];
model.forEach(function (o) {
data.push(o);
@@ -149,6 +153,7 @@ export default BaseChartComponent.extend({
var chartXOffset = -1;
+ this.totalContainers = 0;
for (i = 0; i < racksArray.length; i++) {
text = g.append("text")
.text(racksArray[i])
@@ -166,6 +171,7 @@ export default BaseChartComponent.extend({
var rack = data[j].get("rack");
if (rack === racksArray[i]) {
+ this.totalContainers += data[j].get("numContainers");
this.addNode(g, xOffset, yOffset, colorFunc, data[j]);
xOffset += this.CELL_MARGIN + this.CELL_WIDTH;
if (xOffset + this.CELL_MARGIN + this.CELL_WIDTH >= layout.x2 -
@@ -192,7 +198,7 @@ export default BaseChartComponent.extend({
layout.y2 = yOffset + layout.margin;
this.adjustMaxHeight(layout.y2);
- this.renderTitleAndBG(g, title, layout, false);
+ this.renderTitleAndBG(g, title + selectedOption + ")" , layout, false);
},
addNode: function (g, xOffset, yOffset, colorFunc, data) {
@@ -200,10 +206,9 @@ export default BaseChartComponent.extend({
.attr("y", yOffset)
.attr("x", xOffset)
.attr("height", this.CELL_HEIGHT)
- .attr("fill", colorFunc(data.get("usedMemoryMB") /
- (data.get("usedMemoryMB") + data.get("availMemoryMB"))))
+ .attr("fill", colorFunc(this.calcUsage(data)))
.attr("width", this.CELL_WIDTH)
- .attr("tooltiptext", data.get("toolTipText"));
+ .attr("tooltiptext", data.get("toolTipText") + this.getToolTipText(data));
if (this.isNodeSelected(data)) {
rect.style("opacity", 0.8);
@@ -243,6 +248,18 @@ export default BaseChartComponent.extend({
},
didInsertElement: function () {
+ var parentId = this.get("parentId");
+ var self = this;
+ var optionsData = [this.memoryLabel, this.cpuLabel, this.containersLabel];
+ d3.select("#heatmap-select")
+ .on('change', function() {
+ self.renderCells(self.get("model"), self.get("title"), self.get("textWidth"));
+ })
+ .selectAll('option')
+ .data(optionsData).enter()
+ .append('option')
+ .text(function (d) { return d; });
+
this.draw();
},
@@ -252,5 +269,38 @@ export default BaseChartComponent.extend({
this.selectedCategory = 0;
this.didInsertElement();
}
+ },
+
+ calcUsage: function(data) {
+ var selectedOption = d3.select('select').property("value");
+ if (selectedOption === this.memoryLabel) {
+ return data.get("usedMemoryMB") /
+ (data.get("usedMemoryMB") + data.get("availMemoryMB"));
+ }
+ else if (selectedOption === this.cpuLabel) {
+ return data.get("usedVirtualCores") /
+ (data.get("usedVirtualCores") + data.get("availableVirtualCores"));
+ }
+ else if (selectedOption === this.containersLabel) {
+ var totalContainers = this.totalContainers;
+ if (totalContainers === 0) { return 0; }
+ return data.get("numContainers") / totalContainers;
+ }
+ },
+
+ getToolTipText: function(data) {
+ var selectedOption = d3.select('select').property("value");
+ if (selectedOption === this.memoryLabel) {
+ return "<p>Used Memory: " + Math.round(data.get("usedMemoryMB")) + " MB</p>" +
+ "<p>Available Memory: " + Math.round(data.get("availMemoryMB")) + " MB</p>";
+ }
+ else if (selectedOption === this.cpuLabel) {
+ return "<p>Used VCores: " + Math.round(data.get("usedVirtualCores")) + " VCores</p>" +
+ "<p>Available VCores: " + Math.round(data.get("availableVirtualCores")) + " VCores</p>";
+ }
+ else if (selectedOption === this.containersLabel) {
+ return "<p>Containers: " + Math.round(data.get("numContainers")) + " Containers</p>" +
+ "<p>Total Containers: " + this.totalContainers + " Containers</p>";
+ }
}
});
http://git-wip-us.apache.org/repos/asf/hadoop/blob/a756704f/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js
index 6baeca2..20b6f5b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js
@@ -92,9 +92,7 @@ export default DS.Model.extend({
toolTipText: function() {
return "<p>Rack: " + this.get("rack") + '</p>' +
- "<p>Host: " + this.get("nodeHostName") + '</p>' +
- "<p>Used Memory: " + Math.round(this.get("usedMemoryMB")) + ' MB</p>' +
- "<p>Available Memory: " + Math.round(this.get("availMemoryMB")) + ' MB</p>';
+ "<p>Host: " + this.get("nodeHostName") + '</p>';
}.property(),
usedMemoryBytes: function() {
http://git-wip-us.apache.org/repos/asf/hadoop/blob/a756704f/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
index e9e6261..e7c89d6 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/nodes-heatmap.hbs
@@ -22,6 +22,9 @@
<input type="text" class="form-control" aria-label="..." placeholder="Enter part of host/rack to filter nodes"
onchange={{action "applyFilter"}}>
</div>
+ <div class="col-md-6 container-fluid">
+ <select id="heatmap-select" class="form-control"></select>
+ </div>
</div>
</div>
<p/>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/hadoop/blob/a756704f/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs
index e06249f..0ebe7ba 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes/heatmap.hbs
@@ -21,7 +21,7 @@
<div class="row">
<div class="col-lg-12 container-fluid" id="nodes-heatmap-chart">
{{nodes-heatmap model=model.nodes parentId="nodes-heatmap-chart"
- title="Node Heatmap Chart (Usage of Memory)"}}
+ title="Node Heatmap Chart (Usage of "}}
</div>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: common-commits-unsubscribe@hadoop.apache.org
For additional commands, e-mail: common-commits-help@hadoop.apache.org