YARN-5146. Support for Fair Scheduler in new YARN UI. Contributed by Abdullah Yousufi.

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

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 
-import Ember from 'ember';
+import YarnQueueAdapter from './yarn-queue';
+
+export default YarnQueueAdapter.extend({
 
-export default Ember.Route.extend({
-  model() {
-    return this.store.findAll('yarn-queue');
-  },
 });

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

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 
-import Ember from 'ember';
+import YarnQueueAdapter from './yarn-queue';
+
+export default YarnQueueAdapter.extend({
 
-export default Ember.Route.extend({
-  beforeModel() {
-    this.transitionTo('yarn-queues.root');
-  }
 });

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

@@ -0,0 +1,23 @@
+/**
+ * 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 YarnQueueAdapter from './yarn-queue';
+
+export default YarnQueueAdapter.extend({
+
+});

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import AbstractAdapter from './abstract';
+import AbstractAdapter from '../abstract';
 
 export default AbstractAdapter.extend({
   address: "rmWebAddress",

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

@@ -39,6 +39,9 @@ export default Ember.Component.extend({
   // mainSvg
   mainSvg: undefined,
 
+  used: undefined,
+  max: undefined,
+
   // Init data
   initData: function() {
     this.map = { };
@@ -52,7 +55,8 @@ export default Ember.Component.extend({
       }.bind(this));
 
     // var selected = this.get("selected");
-
+    this.used = this.get("used");
+    this.max = this.get("max");
     this.initQueue("root", 1, this.treeData);
   },
 
@@ -81,7 +85,6 @@ export default Ember.Component.extend({
       // Queue is not existed
       return;
     }
-
     if (depth > this.maxDepth) {
       this.maxDepth = this.maxDepth + 1;
     }
@@ -149,7 +152,9 @@ export default Ember.Component.extend({
     nodeEnter.append("circle")
       .attr("r", 1e-6)
       .style("fill", function(d) {
-        var usedCap = d.queueData.get("usedCapacity");
+        var maxCap = d.queueData.get(this.max);
+        maxCap = maxCap == undefined ? 100 : maxCap;
+        var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
         if (usedCap <= 60.0) {
           return "LimeGreen";
         } else if (usedCap <= 100.0) {
@@ -157,7 +162,7 @@ export default Ember.Component.extend({
         } else {
           return "LightCoral";
         }
-      });
+      }.bind(this));
 
     // append percentage
     nodeEnter.append("text")
@@ -166,13 +171,15 @@ export default Ember.Component.extend({
       .attr("fill", "white")
       .attr("text-anchor", function() { return "middle"; })
       .text(function(d) {
-        var usedCap = d.queueData.get("usedCapacity");
+        var maxCap = d.queueData.get(this.max);
+        maxCap = maxCap == undefined ? 100 : maxCap;
+        var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
         if (usedCap >= 100.0) {
           return usedCap.toFixed(0) + "%";
         } else {
           return usedCap.toFixed(1) + "%";
         }
-      })
+      }.bind(this))
       .style("fill-opacity", 1e-6);
 
     // append queue name

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

@@ -35,6 +35,7 @@ export default DS.Model.extend({
   numPendingApplications: DS.attr('number'),
   numActiveApplications: DS.attr('number'),
   users: DS.hasMany('YarnUser'),
+  type: DS.attr('string'),
 
   isLeafQueue: function() {
     var len = this.get("children.length");
@@ -59,7 +60,7 @@ export default DS.Model.extend({
         value: this.get("name") === "root" ? 100 : this.get("absMaxCapacity")
       }
     ];
-  }.property("absCapacity", "absUsedCapacity", "absMaxCapacity"),
+  }.property("absCapacity", "usedCapacity", "absMaxCapacity"),
 
   userUsagesDonutChartData: function() {
     var data = [];
@@ -90,5 +91,5 @@ export default DS.Model.extend({
         value: this.get("numActiveApplications") || 0
       }
     ];
-  }.property()
+  }.property("numPendingApplications", "numActiveApplications")
 });

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

@@ -0,0 +1,79 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  children: DS.attr('array'),
+  parent: DS.attr('string'),
+  maxApps: DS.attr('number'),
+  minResources: DS.attr(),
+  maxResources: DS.attr(),
+  usedResources: DS.attr(),
+  demandResources: DS.attr(),
+  steadyFairResources: DS.attr(),
+  fairResources: DS.attr(),
+  clusterResources: DS.attr(),
+  pendingContainers: DS.attr('number'),
+  allocatedContainers: DS.attr('number'),
+  reservedContainers: DS.attr('number'),
+  schedulingPolicy: DS.attr('string'),
+  preemptable: DS.attr('number'),
+  numPendingApplications: DS.attr('number'),
+  numActiveApplications: DS.attr('number'),
+  type: DS.attr('string'),
+
+  isLeafQueue: function() {
+    var len = this.get("children.length");
+    if (!len) {
+      return true;
+    }
+    return len <= 0;
+  }.property("children"),
+
+  capacitiesBarChartData: function() {
+    return [
+      {
+        label: "Steady Fair Memory",
+        value: this.get("steadyFairResources.memory")
+      },
+      {
+        label: "Used Memory",
+        value: this.get("usedResources.memory")
+      },
+      {
+        label: "Maximum Memory",
+        value: this.get("maxResources.memory")
+      }
+    ];
+  }.property("maxResources.memory", "usedResources.memory", "maxResources.memory"),
+
+  numOfApplicationsDonutChartData: function() {
+    return [
+      {
+        label: "Pending Apps",
+        value: this.get("numPendingApplications") || 0 // TODO, fix the REST API so root will return #applications as well.
+      },
+      {
+        label: "Active Apps",
+        value: this.get("numActiveApplications") || 0
+      }
+    ];
+  }.property()
+});

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

@@ -0,0 +1,52 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  capacity: DS.attr('number'),
+  usedCapacity: DS.attr('number'),
+  state: DS.attr('string'),
+  minQueueMemoryCapacity: DS.attr('number'),
+  maxQueueMemoryCapacity: DS.attr('number'),
+  numNodes: DS.attr('number'),
+  usedNodeCapacity: DS.attr('number'),
+  availNodeCapacity: DS.attr('number'),
+  totalNodeCapacity: DS.attr('number'),
+  numContainers: DS.attr('number'),
+  type: DS.attr('string'),
+
+  capacitiesBarChartData: function() {
+    return [
+      {
+        label: "Available Capacity",
+        value: this.get("availNodeCapacity")
+      },
+      {
+        label: "Used Capacity",
+        value: this.get("usedNodeCapacity")
+      },
+      {
+        label: "Total Capacity",
+        value: this.get("totalNodeCapacity")
+      }
+    ];
+  }.property("availNodeCapacity", "usedNodeCapacity", "totalNodeCapacity")
+
+});

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

@@ -0,0 +1,23 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.Model.extend({
+  type: DS.attr('string')
+});

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/cluster-overview.js

@@ -28,7 +28,7 @@ export default AbstractRoute.extend({
         {
           state: "RUNNING"
         }),
-      queues: this.store.query('yarn-queue', {}),
+      queues: this.store.query('yarn-queue.yarn-queue', {}),
     });
   },
 
@@ -39,6 +39,6 @@ export default AbstractRoute.extend({
   unloadAll() {
     this.store.unloadAll('ClusterMetric');
     this.store.unloadAll('yarn-app');
-    this.store.unloadAll('yarn-queue');
+    this.store.unloadAll('yarn-queue.yarn-queue');
   }
 });

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

@@ -24,7 +24,10 @@ export default AbstractRoute.extend({
   model(param) {
       return Ember.RSVP.hash({
         selected : param.queue_name,
-      queues: this.store.query('yarn-queue', {}),
+        queues: this.store.query("yarn-queue.yarn-queue", {}).then((model) => {
+          let type = model.get('firstObject').get('type');
+          return this.store.query("yarn-queue." + type + "-queue", {});
+        }),
         selectedQueue : undefined,
         apps: this.store.query('yarn-app', {
           queue: param.queue_name
@@ -33,11 +36,14 @@ export default AbstractRoute.extend({
   },
 
   afterModel(model) {
-    model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
+    var type = model.queues.get('firstObject').constructor.modelName;
+    model.selectedQueue = this.store.peekRecord(type, model.selected);
   },
 
   unloadAll() {
-    this.store.unloadAll('yarn-queue');
+    this.store.unloadAll('yarn-queue.capacity-queue');
+    this.store.unloadAll('yarn-queue.fair-queue');
+    this.store.unloadAll('yarn-queue.fifo-queue');
     this.store.unloadAll('yarn-app');
   }
 });

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queues.js

@@ -30,17 +30,23 @@ export default AbstractRoute.extend({
     }
     return Ember.RSVP.hash({
       selected : queueName,
-      queues: this.store.query('yarn-queue', {}),
+      queues: this.store.query("yarn-queue.yarn-queue", {}).then((model) => {
+        let type = model.get('firstObject').get('type');
+        return this.store.query("yarn-queue." + type + "-queue", {});
+      }),
       selectedQueue : undefined
     });
   },
 
   afterModel(model) {
-    model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
+    var type = model.queues.get('firstObject').constructor.modelName;
+    model.selectedQueue = this.store.peekRecord(type, model.selected);
   },
 
   unloadAll() {
-    this.store.unloadAll('yarn-queue');
+    this.store.unloadAll('yarn-queue.capacity-queue');
+    this.store.unloadAll('yarn-queue.fair-queue');
+    this.store.unloadAll('yarn-queue.fifo-queue');
     this.store.unloadAll('yarn-app');
   },
 

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

@@ -53,7 +53,6 @@ export default DS.JSONAPISerializer.extend({
         });
       }
 
-
       var fixedPayload = {
         id: id,
         type: primaryModelClass.modelName, // yarn-queue
@@ -73,6 +72,7 @@ export default DS.JSONAPISerializer.extend({
           preemptionDisabled: payload.preemptionDisabled,
           numPendingApplications: payload.numPendingApplications,
           numActiveApplications: payload.numActiveApplications,
+          type: "capacity",
         },
         // Relationships
         relationships: {
@@ -81,7 +81,6 @@ export default DS.JSONAPISerializer.extend({
           }
         }
       };
-
       return {
         queue: this._super(store, primaryModelClass, fixedPayload, id, requestType),
         includedData: includedData

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

@@ -0,0 +1,92 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.JSONAPISerializer.extend({
+
+    normalizeSingleResponse(store, primaryModelClass, payload, id,
+      requestType) {
+      var children = [];
+      if (payload.childQueues) {
+        payload.childQueues.queue.forEach(function(queue) {
+          children.push(queue.queueName);
+        });
+      }
+
+      var fixedPayload = {
+        id: id,
+        type: primaryModelClass.modelName,
+        attributes: {
+          name: payload.queueName,
+          parent: payload.myParent,
+          children: children,
+          maxApps: payload.maxApps,
+          minResources: payload.minResources,
+          maxResources: payload.maxResources,
+          usedResources: payload.usedResources,
+          demandResources: payload.demandResources,
+          steadyFairResources: payload.steadyFairResources,
+          fairResources: payload.fairResources,
+          clusterResources: payload.clusterResources,
+          pendingContainers: payload.pendingContainers,
+          allocatedContainers: payload.allocatedContainers,
+          reservedContainers: payload.reservedContainers,
+          schedulingPolicy: payload.schedulingPolicy,
+          preemptable: payload.preemptable,
+          numPendingApplications: payload.numPendingApps,
+          numActiveApplications: payload.numActiveApps,
+          type: "fair",
+        },
+      };
+      return this._super(store, primaryModelClass, fixedPayload, id, requestType);
+    },
+
+    handleQueue(store, primaryModelClass, payload, id, requestType) {
+      var data = [];
+      var includedData = [];
+      if(!payload) return data;
+      var result = this.normalizeSingleResponse(store, primaryModelClass,
+        payload, id, requestType);
+
+      data.push(result);
+
+      if (payload.childQueues) {
+        for (var i = 0; i < payload.childQueues.queue.length; i++) {
+          var queue = payload.childQueues.queue[i];
+          queue.myParent = payload.queueName;
+          var childResult = this.handleQueue(store, primaryModelClass, queue,
+            queue.queueName,
+            requestType);
+
+          data = data.concat(childResult);
+        }
+      }
+
+      return data;
+    },
+
+    normalizeArrayResponse(store, primaryModelClass, payload, id, requestType) {
+      var normalizedArrayResponse = {};
+      var result = this.handleQueue(store, primaryModelClass,
+        payload.scheduler.schedulerInfo.rootQueue, "root", requestType);
+
+      normalizedArrayResponse.data = result;
+      return normalizedArrayResponse;
+    }
+});

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

@@ -0,0 +1,59 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.JSONAPISerializer.extend({
+
+    normalizeSingleResponse(store, primaryModelClass, payload, id,
+      requestType) {
+
+      var fixedPayload = {
+        id: id,
+        type: primaryModelClass.modelName,
+        attributes: {
+          name: id,
+          capacity: payload.capacity * 100,
+          usedCapacity: payload.usedCapacity * 100,
+          usedNodeCapacity: payload.usedNodeCapacity,
+          availNodeCapacity: payload.availNodeCapacity,
+          totalNodeCapacity: payload.totalNodeCapacity,
+          numNodes: payload.numNodes,
+          numContainers: payload.numContainers,
+          state: payload.qstate,
+          minQueueMemoryCapacity: payload.minQueueMemoryCapacity,
+          maxQueueMemoryCapacity: payload.maxQueueMemoryCapacity,
+          type: "fifo",
+        },
+
+      };
+
+      return this._super(store, primaryModelClass, fixedPayload, id,
+        requestType);
+    },
+
+    normalizeArrayResponse(store, primaryModelClass, payload, id, requestType) {
+      var normalizedArrayResponse = {};
+      normalizedArrayResponse.data = [
+        this.normalizeSingleResponse(store, primaryModelClass,
+          payload.scheduler.schedulerInfo, "root", requestType)
+      ];
+
+      return normalizedArrayResponse;
+    }
+});

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

@@ -0,0 +1,47 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.JSONAPISerializer.extend({
+
+    normalizeSingleResponse(store, primaryModelClass, payload, id,
+      requestType) {
+
+      var fixedPayload = {
+        id: id,
+        type: primaryModelClass.modelName,
+        attributes: {
+          type: payload.type.split(/(?=[A-Z])/)[0]
+        }
+      };
+      return this._super(store, primaryModelClass, fixedPayload, id,
+        requestType);
+    },
+
+    normalizeArrayResponse(store, primaryModelClass, payload, id, requestType) {
+      var normalizedArrayResponse = {};
+
+      normalizedArrayResponse.data = [
+        this.normalizeSingleResponse(store, primaryModelClass,
+          payload.scheduler.schedulerInfo, "root", requestType)
+        ];
+
+      return normalizedArrayResponse;
+    }
+});

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

@@ -20,7 +20,10 @@
 <div class="row">
   <div class="col-md-12 container-fluid">
     <div class="panel panel-default" id="tree-selector-container">
-     {{tree-selector model=model parentId="tree-selector-container" selected=selected}}
+      <div class="panel-heading">
+        Scheduler: {{model.firstObject.type}}
+      </div>
+     {{tree-selector model=model parentId="tree-selector-container" selected=selected used=used max=max}}
     </div>
   </div>
 </div>

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

@@ -0,0 +1,84 @@
+{{!
+ * 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.
+}}
+
+<div class="row">
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Capacities: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="capacity-bar-chart">
+        <br/>
+        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+        title=""
+        parentId="capacity-bar-chart"
+        textWidth=170
+        ratio=0.55
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Information: {{model.selected}}
+      </div>
+        {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}}
+    </div>
+  </div>
+
+</div>
+
+<div class="row">
+
+    <div class="col-lg-6 container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Running Apps: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="numapplications-donut-chart">
+          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+          showLabels=true
+          parentId="numapplications-donut-chart"
+          ratio=0.6
+          maxHeight=350}}
+        </div>
+      </div>
+    </div>
+
+  {{#if model.selectedQueue.hasUserUsages}}
+    <div class="col-lg-6 container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          User Usages: {{model.selected}}
+        </div>
+        <div class="container-fluid"  id="userusage-donut-chart">
+          {{donut-chart data=model.selectedQueue.userUsagesDonutChartData
+          showLabels=true
+          parentId="userusage-donut-chart"
+          type="memory"
+          ratio=0.6
+          maxHeight=350}}
+        </div>
+      </div>
+    </div>
+  {{/if}}
+
+</div>

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

@@ -0,0 +1,63 @@
+{{!
+ * 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.
+}}
+
+{{queue-navigator model=model.queues selected=model.selected
+  used="usedCapacity" max="absMaxCapacity"}}
+
+<div class="row">
+  <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Information: {{model.selected}}
+      </div>
+        {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}}
+    </div>
+  </div>
+
+  <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Capacities: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="capacity-bar-chart">
+        <br/>
+        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+        title=""
+        parentId="capacity-bar-chart"
+        textWidth=175
+        ratio=0.55
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Running Apps: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="numapplications-donut-chart">
+        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+        showLabels=true
+        parentId="numapplications-donut-chart"
+        ratio=0.6
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+{{!
+ * 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.
+}}
+
+<table id="queue-configuration-table" class="table table-striped table-bordered" cellspacing="0" width="100%" height="100%">
+  <thead>
+    <tr>
+      <td><b>Configurations</b></td>
+      <td>Value</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Fair Memory, VCores</td>
+      <td>{{queue.fairResources.memory}} MB, {{queue.fairResources.vCores}}</td>
+    </tr>
+    <tr>
+      <td>Minimum Memory, VCores</td>
+      <td>{{queue.minResources.memory}} MB, {{queue.minResources.vCores}}</td>
+    </tr>
+    <tr>
+      <td>Cluster Memory, VCores</td>
+      <td>{{queue.clusterResources.memory}} MB, {{queue.clusterResources.vCores}}</td>
+    </tr>
+    <tr>
+      <td>Pending, Allocated, Reserved Containers</td>
+      <td>{{queue.pendingContainers}} , {{queue.allocatedContainers}} , {{queue.reservedContainers}}</td>
+    </tr>
+    <tr>
+      <td>Scheduling Policy</td>
+      <td>{{queue.schedulingPolicy}}</td>
+    </tr>
+    <tr>
+      <td>Preemption Enabled</td>
+      <td>{{queue.preemptable}}</td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,66 @@
+{{!
+ * 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.
+}}
+
+<div class="row">
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Capacities: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="capacity-bar-chart">
+        <br/>
+        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+        title=""
+        parentId="capacity-bar-chart"
+        textWidth=170
+        ratio=0.55
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Information: {{model.selected}}
+      </div>
+        {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
+    </div>
+  </div>
+
+</div>
+
+<div class="row">
+
+    <div class="col-lg-6 container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Running Apps: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="numapplications-donut-chart">
+          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+          showLabels=true
+          parentId="numapplications-donut-chart"
+          ratio=0.6
+          maxHeight=350}}
+        </div>
+      </div>
+    </div>
+
+</div>

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

@@ -0,0 +1,63 @@
+{{!
+ * 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.
+}}
+
+{{queue-navigator model=model.queues selected=model.selected
+  used="usedResources.memory" max="clusterResources.memory"}}
+
+<div class="row">
+  <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Information: {{model.selected}}
+      </div>
+        {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
+    </div>
+  </div>
+
+  <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Capacities: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="capacity-bar-chart">
+        <br/>
+        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+        title=""
+        parentId="capacity-bar-chart"
+        textWidth=150
+        ratio=0.55
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Running Apps: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="numapplications-donut-chart">
+        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+        showLabels=true
+        parentId="numapplications-donut-chart"
+        ratio=0.6
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,56 @@
+{{!
+ * 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.
+}}
+
+<table id="queue-configuration-table" class="table table-striped table-bordered" cellspacing="0" width="100%" height="100%">
+  <thead>
+    <tr>
+      <td><b>Configurations</b></td>
+      <td>Value</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Configured Capacity</td>
+      <td>{{queue.capacity}}</td>
+    </tr>
+    <tr>
+      <td>Used Capacity</td>
+      <td>{{queue.usedCapacity}}</td>
+    </tr>
+    <tr>
+      <td>State</td>
+      <td>{{queue.state}}</td>
+    </tr>
+    <tr>
+      <td>Minimum Queue Memory Capacity</td>
+      <td>{{queue.minQueueMemoryCapacity}}</td>
+    </tr>
+    <tr>
+      <td>Maximum Queue Memory Capacity</td>
+      <td>{{queue.maxQueueMemoryCapacity}}</td>
+    </tr>
+    <tr>
+      <td>Number of Nodes</td>
+      <td>{{queue.numNodes}}</td>
+    </tr>
+    <tr>
+      <td>Number of Containers</td>
+      <td>{{queue.numContainers}}</td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,47 @@
+{{!
+ * 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.
+}}
+
+<div class="row">
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Capacities: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="capacity-bar-chart">
+        <br/>
+        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+        title=""
+        parentId="capacity-bar-chart"
+        textWidth=170
+        ratio=0.55
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Information: {{model.selected}}
+      </div>
+        {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,48 @@
+{{!
+ * 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.
+}}
+
+{{queue-navigator model=model.queues selected=model.selected
+  used="usedNodeCapacity" max="totalNodeCapacity"}}
+
+<div class="row">
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Information: {{model.selected}}
+      </div>
+        {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
+    </div>
+  </div>
+
+  <div class="col-lg-6 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Queue Capacities: {{model.selected}}
+      </div>
+      <div class="container-fluid" id="capacity-bar-chart">
+        <br/>
+        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+        title=""
+        parentId="capacity-bar-chart"
+        textWidth=150
+        ratio=0.55
+        maxHeight=350}}
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -16,69 +16,10 @@
  * limitations under the License.
 }}
 
-<div class="row">
+{{#if (eq model.queues.firstObject.type "capacity")}}
-
+  {{yarn-queue.capacity-queue-info model=model}}
-  <div class="col-lg-6 container-fluid">
+{{else if (eq model.queues.firstObject.type "fair")}}
-    <div class="panel panel-default">
+  {{yarn-queue.fair-queue-info model=model}}
-      <div class="panel-heading">
+{{else}}
-        Queue Capacities: {{model.selected}}
+  {{yarn-queue.fifo-queue-info model=model}}
-      </div>
+{{/if}}
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=170
-        ratio=0.55
-        maxHeight=350}}
-      </div>
-    </div>
-  </div>
-
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
-      </div>
-      {{queue-configuration-table queue=model.selectedQueue}}
-    </div>
-  </div>
-
-</div>
-
-<div class="row">
-
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Running Apps: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="numapplications-donut-chart">
-        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-        showLabels=true
-        parentId="numapplications-donut-chart"
-        ratio=0.6
-        maxHeight=350}}
-      </div>
-    </div>
-  </div>
-
-  {{#if model.selectedQueue.hasUserUsages}}
-    <div class="col-lg-6 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          User Usages: {{model.selected}}
-        </div>
-        <div class="container-fluid"  id="userusage-donut-chart">
-          {{donut-chart data=model.selectedQueue.userUsagesDonutChartData
-          showLabels=true
-          parentId="userusage-donut-chart"
-          type="memory"
-          ratio=0.6
-          maxHeight=350}}
-        </div>
-      </div>
-    </div>
-  {{/if}}
-
-</div>

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

@@ -17,54 +17,14 @@
 }}
 
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
-
 <div class="container-fluid">
-  {{queue-navigator model=model.queues selected=model.selected}}
+  {{#if (eq model.queues.firstObject.type "capacity")}}
-
+    {{yarn-queue.capacity-queue model=model}}
-  <div class="row">
+  {{else if (eq model.queues.firstObject.type "fair")}}
-
+    {{yarn-queue.fair-queue model=model}}
-    <div class="col-lg-4 container-fluid">
+  {{else}}
-      <div class="panel panel-default">
+    {{yarn-queue.fifo-queue model=model}}
-        <div class="panel-heading">
+  {{/if}}
-          Queue Information: {{model.selected}}
-        </div>
-        {{queue-configuration-table queue=model.selectedQueue}}
-      </div>
-    </div>
-
-    <div class="col-lg-4 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          Queue Capacities: {{model.selected}}
-        </div>
-        <div class="container-fluid" id="capacity-bar-chart">
-          <br/>
-          {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-          title=""
-          parentId="capacity-bar-chart"
-          textWidth=150
-          ratio=0.55
-          maxHeight=350}}
-        </div>
-      </div>
-    </div>
-
-    <div class="col-lg-4 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          Running Apps: {{model.selected}}
-        </div>
-        <div class="container-fluid" id="numapplications-donut-chart">
-          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-          showLabels=true
-          parentId="numapplications-donut-chart"
-          ratio=0.6
-          maxHeight=350}}
-        </div>
-      </div>
-    </div>
-
-  </div>
 </div>
 
 {{outlet}}

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

@@ -55,7 +55,6 @@ export default {
       }
     }
 
-    console.log(colors);
     return colors;
   },