diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
index bd8d50ac025..68954ce173d 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/info.js
@@ -35,16 +35,16 @@ export default Ember.Controller.extend({
       Ember.$("#stopServiceConfirmDialog").modal('hide');
       var adapter = this.store.adapterFor('yarn-servicedef');
       self.set('isLoading', true);
-      adapter.stopService(this.get('service'),  this.get('model.app.user')).then(function() {
-        self.set('actionResponse', {msg: 'Service stopped successfully. Auto refreshing in 5 seconds.', type: 'success'});
-        Ember.run.later(self, function() {
+      adapter.stopService(this.get('service'), this.get('model.app.user')).then(function () {
+        self.set('actionResponse', { msg: 'Service stopped successfully. Auto refreshing in 5 seconds.', type: 'success' });
+        Ember.run.later(self, function () {
           this.set('actionResponse', null);
           this.send("refresh");
         }, 5000);
-      }, function(errr) {
+      }, function (errr) {
         let messg = errr.diagnostics || 'Error: Stop service failed!';
-        self.set('actionResponse', {msg: messg, type: 'error'});
-      }).finally(function() {
+        self.set('actionResponse', { msg: messg, type: 'error' });
+      }).finally(function () {
         self.set('isLoading', false);
       });
     },
@@ -59,16 +59,16 @@ export default Ember.Controller.extend({
       Ember.$("#deleteServiceConfirmDialog").modal('hide');
       var adapter = this.store.adapterFor('yarn-servicedef');
       self.set('isLoading', true);
-      adapter.deleteService(this.get('service'),  this.get('model.app.user')).then(function() {
-        self.set('actionResponse', {msg: 'Service deleted successfully. Redirecting to services in 5 seconds.', type: 'success'});
-        Ember.run.later(self, function() {
+      adapter.deleteService(this.get('service'), this.get('model.app.user')).then(function () {
+        self.set('actionResponse', { msg: 'Service deleted successfully. Redirecting to services in 5 seconds.', type: 'success' });
+        Ember.run.later(self, function () {
           this.set('actionResponse', null);
           this.transitionToRoute("yarn-services");
         }, 5000);
-      }, function(errr) {
+      }, function (errr) {
         let messg = errr.diagnostics || 'Error: Delete service failed!';
-        self.set('actionResponse', {msg: messg, type: 'error'});
-      }).finally(function() {
+        self.set('actionResponse', { msg: messg, type: 'error' });
+      }).finally(function () {
         self.set('isLoading', false);
       });
     },
@@ -78,15 +78,32 @@ export default Ember.Controller.extend({
     }
   },
 
-  isRunningService: Ember.computed('model.serviceName', 'model.app.state', function() {
+  isRunningService: Ember.computed('model.serviceName', 'model.app.state', function () {
     return this.get('service') !== undefined && this.get('model.app.state') === 'RUNNING';
   }),
 
-  amHostHttpAddressFormatted: Ember.computed('model.app.amHostHttpAddress', function() {
+  amHostHttpAddressFormatted: Ember.computed('model.app.amHostHttpAddress', function () {
     var amHostAddress = this.get('model.app.amHostHttpAddress');
     if (amHostAddress && amHostAddress.indexOf('://') < 0) {
       amHostAddress = 'http://' + amHostAddress;
     }
     return amHostAddress;
+  }),
+
+  totalOutstandingResourceRequests: Ember.computed('model.app.resourceRequests', function() {
+    const resourceRequests = this.get('model.app.resourceRequests');
+    if (resourceRequests) {
+      const totatResourceRequests = { memory: 0, vCores: 0 };
+      [].forEach.call(resourceRequests, resource => {
+        if (resource.resourceName === '*') {
+          const totalMemory = resource.capability.resourceInformations.resourceInformation[0].value * resource.numContainers;
+          const totalVCores = resource.capability.resourceInformations.resourceInformation[1].value * resource.numContainers;
+          totatResourceRequests.memory += totalMemory;
+          totatResourceRequests.vCores += totalVCores;
+        }
+      });
+      return totatResourceRequests;
+    }
+    return null;
   })
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
index aac93c09383..cb28f82e67d 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs
@@ -75,8 +75,9 @@
           <div class="links">
               {{#if (or isRunningService isKillable)}}
               <div class="btn-group">
-                <button type="button" class="btn btn-unstyled dropdown-toggle" title="Settings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  <i class="glyphicon glyphicon-cog" />
+                <button type="button" class="btn btn-unstyled dropdown-toggle" title="Settings"
+                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: -5px;">
+                  <i class="glyphicon glyphicon-cog"/> Settings
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right">
                   {{#if isRunningService}}
@@ -113,9 +114,11 @@
             {{/if}}
           </div>
           <div>
-            <span title="Queue" class="yarn-tooltip"><i class="glyphicon glyphicon-tasks glyphicon-gray" />{{model.app.queue}}</span>
+            <span title="Queue" class="yarn-tooltip">
+              <i class="glyphicon glyphicon-tasks glyphicon-gray" /> {{model.app.queue}}
+            </span>
           </div>
-          <div>Priority {{model.app.priority}}</div>
+          <div>Priority: {{model.app.priority}}</div>
           {{#if model.app.trackingUrl}}
             <div><a href="{{model.app.trackingUrl}}" target="_blank">{{model.app.trackingUI}}</a></div>
           {{/if}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/info.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/info.hbs
index beae7d3bafa..b11e125a15f 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/info.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/info.hbs
@@ -58,12 +58,20 @@
 {{#unless model.serviceName}}
   <div class="col-md-12">
     <div class="panel panel-default">
-      <div class="panel-heading">Outstanding Resource Requests</div>
+      <div class="panel-heading">
+        Outstanding Resource Requests
+        {{#if totalOutstandingResourceRequests}}
+          <span class="pull-right">
+            Total: &lt;Memory: {{totalOutstandingResourceRequests.memory}},
+              vCores: {{totalOutstandingResourceRequests.vCores}}&gt;
+          </span>
+        {{/if}}
+      </div>
       <table class="display table table-striped table-bordered"
             cellspacing="0" width="100%">
         <thead>
         <tr>
-          <th>Scheduler Key</th>
+          <th>Priority</th>
           <th>Resource Name</th>
           <th>Capability</th>
           <th># Containers</th>
@@ -76,7 +84,8 @@
           <tr>
             <td>{{request.priority}}</td>
             <td>{{request.resourceName}}</td>
-            <td>&lt;Memory:{{request.capability.memory}};vCores:{{request.capability.virtualCores}}&gt;</td>
+            <td>&lt;Memory: {{request.capability.resourceInformations.resourceInformation.[0].value}},
+              vCores: {{request.capability.resourceInformations.resourceInformation.[1].value}}&gt;</td>
             <td>{{request.numContainers}}</td>
             <td>{{request.relaxLocality}}</td>
             <td>
@@ -88,7 +97,9 @@
             </td>
           </tr>
         {{else}}
-          <div class="panel-body">No data available!</div>
+          <tr>
+            <td class="text-center" colspan="6">No data available!</td>
+          </tr>
         {{/each}}
         </tbody>
       </table>