YARN-7071. Add vcores and number of containers in new YARN UI node heat map. Contributed by Abdullah Yousufi.

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>";
+    }
   }
 });

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() {

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

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>