YARN-6182. Fix alignment issues and missing information in new YARN UI's Queue page. Contributed by Akhil PB.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js

@@ -258,7 +258,6 @@ 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")

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js

@@ -153,7 +153,7 @@ export default Ember.Component.extend({
       .attr("r", 1e-6)
       .style("fill", function(d) {
         var maxCap = d.queueData.get(this.max);
-        maxCap = maxCap == undefined ? 100 : maxCap;
+        maxCap = maxCap === undefined ? 100 : maxCap;
         var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
         if (usedCap <= 60.0) {
           return "LimeGreen";
@@ -172,7 +172,7 @@ export default Ember.Component.extend({
       .attr("text-anchor", function() { return "middle"; })
       .text(function(d) {
         var maxCap = d.queueData.get(this.max);
-        maxCap = maxCap == undefined ? 100 : maxCap;
+        maxCap = maxCap === undefined ? 100 : maxCap;
         var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
         if (usedCap >= 100.0) {
           return usedCap.toFixed(0) + "%";

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/application.js

@@ -50,6 +50,13 @@ export default Ember.Controller.extend({
     html = html + '><a href="yarn-nodes">Nodes<span class="sr-only">' +
         '(current)</span></a></li>';
     return Ember.String.htmlSafe(html);
+  }.property('currentPath'),
+
+  isQueuesTabActive: function() {
+    var path = this.get('currentPath');
+    if (path === 'yarn-queues') {
+      return true;
+    }
+    return false;
   }.property('currentPath')
 });
-

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js

@@ -17,6 +17,7 @@
  */
 
 import DS from 'ember-data';
+import Converter from 'yarn-ui/utils/converter';
 
 export default DS.Model.extend({
   name: DS.attr('string'),
@@ -46,18 +47,19 @@ export default DS.Model.extend({
   }.property("children"),
 
   capacitiesBarChartData: function() {
+    var floatToFixed = Converter.floatToFixed;
     return [
       {
         label: "Absolute Capacity",
-        value: this.get("name") === "root" ? 100 : this.get("absCapacity")
+        value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity"))
       },
       {
         label: "Absolute Used",
-        value: this.get("name") === "root" ? this.get("usedCapacity") : this.get("absUsedCapacity")
+        value: this.get("name") === "root" ? floatToFixed(this.get("usedCapacity")) : floatToFixed(this.get("absUsedCapacity"))
       },
       {
         label: "Absolute Max Capacity",
-        value: this.get("name") === "root" ? 100 : this.get("absMaxCapacity")
+        value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity"))
       }
     ];
   }.property("absCapacity", "usedCapacity", "absMaxCapacity"),

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/fair-queue.js

@@ -17,6 +17,7 @@
  */
 
 import DS from 'ember-data';
+import Converter from 'yarn-ui/utils/converter';
 
 export default DS.Model.extend({
   name: DS.attr('string'),
@@ -48,18 +49,19 @@ export default DS.Model.extend({
   }.property("children"),
 
   capacitiesBarChartData: function() {
+    var floatToFixed = Converter.floatToFixed;
     return [
       {
         label: "Steady Fair Memory",
-        value: this.get("steadyFairResources.memory")
+        value: floatToFixed(this.get("steadyFairResources.memory"))
       },
       {
         label: "Used Memory",
-        value: this.get("usedResources.memory")
+        value: floatToFixed(this.get("usedResources.memory"))
       },
       {
         label: "Maximum Memory",
-        value: this.get("maxResources.memory")
+        value: floatToFixed(this.get("maxResources.memory"))
       }
     ];
   }.property("maxResources.memory", "usedResources.memory", "maxResources.memory"),

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/fifo-queue.js

@@ -17,6 +17,7 @@
  */
 
 import DS from 'ember-data';
+import Converter from 'yarn-ui/utils/converter';
 
 export default DS.Model.extend({
   name: DS.attr('string'),
@@ -33,18 +34,19 @@ export default DS.Model.extend({
   type: DS.attr('string'),
 
   capacitiesBarChartData: function() {
+    var floatToFixed = Converter.floatToFixed;
     return [
       {
         label: "Available Capacity",
-        value: this.get("availNodeCapacity")
+        value: floatToFixed(this.get("availNodeCapacity"))
       },
       {
         label: "Used Capacity",
-        value: this.get("usedNodeCapacity")
+        value: floatToFixed(this.get("usedNodeCapacity"))
       },
       {
         label: "Total Capacity",
-        value: this.get("totalNodeCapacity")
+        value: floatToFixed(this.get("totalNodeCapacity"))
       }
     ];
   }.property("availNodeCapacity", "usedNodeCapacity", "totalNodeCapacity")

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/serializers/yarn-queue/fair-queue.js

@@ -59,8 +59,9 @@ export default DS.JSONAPISerializer.extend({
 
     handleQueue(store, primaryModelClass, payload, id, requestType) {
       var data = [];
-      var includedData = [];
-      if(!payload) return data;
+      if (!payload) {
+        return data;
+      }
       var result = this.normalizeSingleResponse(store, primaryModelClass,
         payload, id, requestType);
 

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

@@ -41,7 +41,7 @@
               <span class="sr-only">(current)</span>
             {{/link-to}}
           {{/link-to}}
-          {{#link-to 'yarn-queues' 'root' tagName="li"}}
+          {{#link-to 'yarn-queues' 'root' tagName="li" classNameBindings="isQueuesTabActive:active"}}
             {{#link-to 'yarn-queues' 'root' class="navigation-link"}}Queues
               <span class="sr-only">(current)</span>
             {{/link-to}}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-conf-table.hbs

@@ -20,7 +20,7 @@
   <thead>
     <tr>
       <td><b>Configurations</b></td>
-      <td>Value</td>
+      <td><b>Value</b></td>
     </tr>
   </thead>
   <tbody>
@@ -32,10 +32,12 @@
       <td>Configured Max Capacity</td>
       <td>{{queue.maxCapacity}}</td>
     </tr>
+  {{#if queue.state}}
     <tr>
       <td>State</td>
       <td>{{queue.state}}</td>
     </tr>
+  {{/if}}
   {{#if queue.isLeafQueue}}
     <tr>
       <td>User Limit Percent</td>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue-conf-table.hbs

@@ -20,7 +20,7 @@
   <thead>
     <tr>
       <td><b>Configurations</b></td>
-      <td>Value</td>
+      <td><b>Value</b></td>
     </tr>
   </thead>
   <tbody>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs

@@ -39,7 +39,7 @@
         {{bar-chart data=model.selectedQueue.capacitiesBarChartData
         title=""
         parentId="capacity-bar-chart"
-        textWidth=150
+        textWidth=175
         ratio=0.55
         maxHeight=350}}
       </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue-conf-table.hbs

@@ -20,7 +20,7 @@
   <thead>
     <tr>
       <td><b>Configurations</b></td>
-      <td>Value</td>
+      <td><b>Value</b></td>
     </tr>
   </thead>
   <tbody>
@@ -32,10 +32,12 @@
       <td>Used Capacity</td>
       <td>{{queue.usedCapacity}}</td>
     </tr>
+  {{#if queue.state}}
     <tr>
       <td>State</td>
       <td>{{queue.state}}</td>
     </tr>
+  {{/if}}
     <tr>
       <td>Minimum Queue Memory Capacity</td>
       <td>{{queue.minQueueMemoryCapacity}}</td>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs

@@ -39,7 +39,7 @@
         {{bar-chart data=model.selectedQueue.capacitiesBarChartData
         title=""
         parentId="capacity-bar-chart"
-        textWidth=150
+        textWidth=175
         ratio=0.55
         maxHeight=350}}
       </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/converter.js

@@ -165,5 +165,11 @@ export default {
       unit = "GB";
     }
     return value.toFixed(1) + " " + unit;
+  },
+  floatToFixed: function(value, fixed=2) {
+    if (value && value.toFixed) {
+      return parseFloat(value.toFixed(fixed));
+    }
+    return value;
   }
 };