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/1cf7ed8a Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/1cf7ed8a Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/1cf7ed8a Branch: refs/heads/YARN-3368_branch2 Commit: 1cf7ed8a28c723aba9c405f28431e6c31b4effef Parents: 65b90e1 Author: Sunil G <sun...@apache.org> Authored: Fri Sep 1 20:46:39 2017 +0530 Committer: Varun Saxena <varunsax...@apache.org> Committed: Wed Oct 18 02:06:49 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/1cf7ed8a/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/1cf7ed8a/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/1cf7ed8a/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/1cf7ed8a/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-unsubscr...@hadoop.apache.org For additional commands, e-mail: common-commits-h...@hadoop.apache.org
