YARN-8615. [UI2] Resource Usage tab shows only memory related info. No info available for vcores/gpu. Contributed by Akhil PB.

(cherry picked from commit 3426f4062a)

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-memusage-by-nodes-stacked-barchart.js

@@ -48,26 +48,24 @@ export default StackedBarchart.extend({
       var value = res.usedByTheApp ? res.usedByTheApp : 0;
       subArr.push({
         value: value,
-        bindText: "This app uses " + Converter.memoryToSimpliedUnit(value) + ". On node=" + nodeId,
+        bindText: "This app uses " + Converter.memoryToSimpliedUnit(value) + " on node=" + nodeId,
       });
 
       value = res.used - value;
       value = Math.max(value, 0);
       subArr.push({
         value: value,
-        bindText: "Other applications uses " + Converter.memoryToSimpliedUnit(value) + ". On node=" + nodeId,
+        bindText: "Other applications use " + Converter.memoryToSimpliedUnit(value) + " on node=" + nodeId,
       });
 
       subArr.push({
         value: res.avail,
-        bindText: "Free resource " + Converter.memoryToSimpliedUnit(res.avail) + " . On node=" + nodeId
+        bindText: Converter.memoryToSimpliedUnit(res.avail) + " memory is available on node=" + nodeId
       });
 
       arr.push(subArr);
     }
 
-    console.log(arr);
-
     return arr;
   },
 
@@ -82,7 +80,7 @@ export default StackedBarchart.extend({
     var data = this.getDataForRender(containers, nodes);
 
     this.show(
-      data, this.get("title"), ["Used by this app", "Used by other apps",
-        "Available"]);
+      data, this.get("title"), ["Used by this app", "Used by other apps", "Available"]
+    );
   },
 });

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-ncontainers-by-nodes-stacked-barchart.js

@@ -46,8 +46,6 @@ export default StackedBarchart.extend({
       arr.push(subArr);
     }
 
-    console.log(arr);
-
     return arr;
   },
 

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-vcoreusage-by-nodes-stacked-barchart.js

@@ -0,0 +1,85 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import StackedBarchart from 'yarn-ui/components/stacked-barchart';
+
+export default StackedBarchart.extend({
+  getDataForRender: function(containers, nodes) {
+    var arr = [];
+    var nodeToResources = {};
+    nodes.forEach(function(n) {
+      nodeToResources[n.id] =
+      {
+        used: Number(n.get("usedVirtualCores")),
+        avail: Number(n.get("availableVirtualCores"))
+      };
+    });
+
+    containers.forEach(function(c) {
+      res = nodeToResources[c.get("assignedNodeId")];
+      if (res) {
+        if (!res.usedByTheApp) {
+          res.usedByTheApp = 0;
+        }
+        res.usedByTheApp += Number(c.get("allocatedVCores"));
+      }
+    });
+
+    for (var nodeId in nodeToResources) {
+      var res = nodeToResources[nodeId];
+
+      var subArr = [];
+      var value = res.usedByTheApp ? res.usedByTheApp : 0;
+      subArr.push({
+        value: value,
+        bindText: "This app uses " + value + " vcores on node=" + nodeId,
+      });
+
+      value = res.used - value;
+      value = Math.max(value, 0);
+      subArr.push({
+        value: value,
+        bindText: "Other applications use " + value + " vcores on node=" + nodeId,
+      });
+
+      subArr.push({
+        value: res.avail,
+        bindText: res.avail + (res.avail > 1 ? " vcores are" : " vcore is") + " available on node=" + nodeId
+      });
+
+      arr.push(subArr);
+    }
+
+    return arr;
+  },
+
+  didInsertElement: function() {
+    this.initChart(true);
+
+    this.colors = ["lightsalmon", "Grey", "mediumaquamarine"];
+
+    var containers = this.get("rmContainers");
+    var nodes = this.get("nodes");
+
+    var data = this.getDataForRender(containers, nodes);
+
+    this.show(
+      data, this.get("title"), ["Used by this app", "Used by other apps", "Available"]
+    );
+  },
+});

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/charts.hbs

@@ -26,6 +26,14 @@
       title=(concat 'Memory usage by nodes for: [' model.appId ']')}}
     </div>
     <hr>
+    <div class="row" id="stackd-bar-chart-vcore">
+      {{per-app-vcoreusage-by-nodes-stacked-barchart
+      nodes=model.nodes
+      rmContainers=model.rmContainers
+      parentId="stackd-bar-chart-vcore"
+      title=(concat 'VCore usage by nodes for: [' model.appId ']')}}
+    </div>
+    <hr>
     <div class="row" id="stackd-bar-chart-ncontainer">
       {{per-app-ncontainers-by-nodes-stacked-barchart
       nodes=model.nodes