YARN-8608. [UI2] No information available per application appAttempt about 'Total Outstanding Resource Requests'. Contributed by Akhil PB.

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

@@ -88,5 +88,22 @@ export default Ember.Controller.extend({
       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;
   })
 });

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">
+                <button type="button" class="btn btn-unstyled dropdown-toggle" title="Settings"
-                  <i class="glyphicon glyphicon-cog" />
+                  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}}

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>