YARN-6386. Show decommissioning nodes in new YARN UI. Contributed by Elek Marton.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/cluster-metric.js

@@ -39,6 +39,7 @@ export default DS.Model.extend({
   totalNodes: DS.attr('number'),
   lostNodes: DS.attr('number'),
   unhealthyNodes: DS.attr('number'),
+  decommissioningNodes: DS.attr('number'),
   decommissionedNodes: DS.attr('number'),
   rebootedNodes: DS.attr('number'),
   activeNodes: DS.attr('number'),
@@ -86,12 +87,16 @@ export default DS.Model.extend({
       label: "Unhealthy",
       value: this.get("unhealthyNodes")
     });
+    arr.push({
+      label: "Decommissioning",
+      value: this.get("decommissioningNodes")
+    });
     arr.push({
       label: "Decomissioned",
       value: this.get("decommissionedNodes")
     });
     return arr;
-  }.property("activeNodes", "unhealthyNodes", "decommissionedNodes"),
+  }.property("activeNodes", "unhealthyNodes", "decommissioningNodes", "decommissionedNodes"),
 
   getMemoryDataForDonutChart: function() {
     var type = "MB";

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-rm-node.js

@@ -53,7 +53,7 @@ export default DS.Model.extend({
   nodeStateStyle: function() {
     var style = "default";
     var nodeState = this.get("state");
-    if (nodeState === "REBOOTED") {
+    if (nodeState === "REBOOTED" || nodeState === "DECOMMISSIONING") {
       style = "warning";
     } else if (nodeState === "UNHEALTHY" || nodeState === "DECOMMISSIONED" ||
           nodeState === "LOST" || nodeState === "SHUTDOWN") {

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

@@ -86,22 +86,6 @@
         </div>
       </div>
     </div>
-
-    <div class="col-lg-4 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          Node Managers
-        </div>
-        <div class="container-fluid" id="nodes-donut-chart">
-          {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart
-          showLabels=true
-          parentId="nodes-donut-chart"
-          ratio=0.6
-          maxHeight=350
-          colorTargets="good error warn"}}
-        </div>
-      </div>
-    </div>
   </div>
 
   <hr>
@@ -142,6 +126,23 @@
       </div>
     </div>
   </div>
+  <div class="row">
+    <div class="col-lg-6 container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Node Managers
+        </div>
+        <div class="container-fluid" id="nodes-donut-chart">
+          {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart
+          showLabels=true
+          parentId="nodes-donut-chart"
+          ratio=0.6
+          maxHeight=350
+          colorTargets="good error warn"}}
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 {{/if}}

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

@@ -47,7 +47,7 @@
   <div class="col-md-10 container-fluid">
     {{#if model.clusterMetrics}}
       <div class="row">
-        <div class="col-lg-5 container-fluid">
+        <div class="col-lg-6 container-fluid">
           <div class="panel panel-default">
             <div class="panel-heading">
               Node Managers