YARN-6183. Few missing informations in Application and Application Attempt pages for new YARN UI. Contributed by Akhil PB.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-attempt-table.js

@@ -19,4 +19,11 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  nodeHttpAddressFormatted: Ember.computed('attempt.nodeHttpAddress', function() {
+    var nodeHttpAddress = this.get('attempt.nodeHttpAddress');
+    if (nodeHttpAddress && nodeHttpAddress.indexOf('://') < 0) {
+      nodeHttpAddress = 'http://' + nodeHttpAddress;
+    }
+    return nodeHttpAddress;
+  })
 });

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

@@ -35,11 +35,11 @@ export default Ember.Controller.extend({
     }];
   }),
 
-  amHostHttpAddressFormatted: function() {
+  amHostHttpAddressFormatted: Ember.computed('model.app.amHostHttpAddress', function() {
     var amHostAddress = this.get('model.app.amHostHttpAddress');
-    if (amHostAddress.indexOf('http://') < 0) {
+    if (amHostAddress && amHostAddress.indexOf('://') < 0) {
       amHostAddress = 'http://' + amHostAddress;
     }
     return amHostAddress;
-  }.property('model.app.amHostHttpAddress')
+  })
 });

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

@@ -37,7 +37,7 @@ export default DS.Model.extend({
   amNodeLabelExpression: DS.attr('string'),
   applicationTags: DS.attr('string'),
   applicationType: DS.attr('string'),
-  priority: DS.attr('number'),
+  priority: DS.attr('string'),
   allocatedMB: DS.attr('number'),
   allocatedVCores: DS.attr('number'),
   runningContainers: DS.attr('number'),

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

@@ -48,13 +48,13 @@ export default DS.JSONAPISerializer.extend({
           finalStatus: payload.finalStatus,
           progress: payload.progress,
           applicationType: payload.applicationType,
-          diagnostics: payload.diagnostics,
+          diagnostics: (payload.diagnostics && payload.diagnostics !== 'null')? payload.diagnostics : '',
           amContainerLogs: payload.amContainerLogs,
           amHostHttpAddress: payload.amHostHttpAddress,
           logAggregationStatus: payload.logAggregationStatus,
-          unmanagedApplication: payload.unmanagedApplication,
+          unmanagedApplication: payload.unmanagedApplication || 'N/A',
           amNodeLabelExpression: payload.amNodeLabelExpression,
-          priority: payload.priority,
+          priority: payload.priority || 'N/A',
           allocatedMB: payload.allocatedMB,
           allocatedVCores: payload.allocatedVCores,
           runningContainers: payload.runningContainers,

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css

@@ -277,3 +277,11 @@ li a.navigation-link.ember-view {
 .x-scroll {
   overflow-x: scroll;
 }
+
+.donut-chart {
+  padding: 0px !important;
+}
+
+.donut-chart svg {
+  width: 100%;
+}

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

@@ -27,11 +27,11 @@
           <div class="panel-heading">
             Cluster Resource Usage By Applications
           </div>
-          <div class="container-fluid" id="appusage-donut-chart">
+          <div class="container-fluid donut-chart" id="appusage-donut-chart">
             {{app-usage-donut-chart data=model.apps
             showLabels=true
             parentId="appusage-donut-chart"
-            ratio=0.6
+            ratio=0.5
             maxHeight=400}}
           </div>
         </div>
@@ -42,11 +42,11 @@
           <div class="panel-heading">
             Cluster Resource Usage By Leaf Queues
           </div>
-          <div class="container-fluid" id="queueusage-donut-chart">
+          <div class="container-fluid donut-chart" id="queueusage-donut-chart">
             {{queue-usage-donut-chart data=model.queues
             showLabels=true
             parentId="queueusage-donut-chart"
-            ratio=0.6
+            ratio=0.5
             maxHeight=400}}
           </div>
         </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/app-attempt-table.hbs

@@ -33,7 +33,7 @@
     {{#if attempt.IsAmNodeUrl}}
     <tr>
       <td>AM Node Web UI</td>
-      <td><a href={{attempt.nodeHttpAddress}}>{{attempt.nodeHttpAddress}}</a></td>
+      <td><a href="{{nodeHttpAddressFormatted}}" target="_blank">{{nodeHttpAddressFormatted}}</a></td>
     </tr>
     {{/if}}
     <tr>
@@ -43,7 +43,7 @@
     {{#if attempt.IsLinkAvailable}}
     <tr>
       <td>Log</td>
-      <td><a href={{attempt.logsLink}}>link</a></td>
+      <td><a href="{{attempt.logsLink}}" target="_blank">Link</a></td>
     </tr>
     {{/if}}
     {{#if attempt.attemptState}}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/container-table.hbs

@@ -36,7 +36,7 @@
     </tr>
     <tr>
       <td>Log</td>
-      <td><a href={{container.logUrl}}>link</a></td>
+      <td><a href="{{container.logUrl}}" target="_blank">Link</a></td>
     </tr>
     <tr>
       <td>Exit Status</td>
@@ -48,7 +48,7 @@
     </tr>
     <tr>
       <td>NodeManager UI</td>
-      <td><a href={{container.nodeHttpAddress}}>{{container.nodeHttpAddress}}</a></td>
+      <td><a href="{{container.nodeHttpAddress}}" target="_blank">{{container.nodeHttpAddress}}</a></td>
     </tr>
   </tbody>
 </table>

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

@@ -165,21 +165,21 @@
 
         <div class="col-md-4 container-fluid">
           <div class="panel panel-default">
-            <div class="panel-heading">App Master Info</div>
+            <div class="panel-heading">Application Master Info</div>
             <table class="display table table-striped table-bordered"
                    cellspacing="0" width="100%">
               <thead>
               <tr>
                 <th>Master Container Log</th>
                 <td>Master Node</td>
-                <td>Master Node Label Expr</td>
+                <td>Master Node Label Expression</td>
               </tr>
               </thead>
 
               <tbody>
               <tr>
-                <td><a href={{model.app.amContainerLogs}} target="_blank">Link</a></td>
+                <td><a href="{{model.app.amContainerLogs}}" target="_blank">Link</a></td>
-                <td><a href={{amHostHttpAddressFormatted}} target="_blank">Link</a></td>
+                <td><a href="{{amHostHttpAddressFormatted}}" target="_blank">Link</a></td>
                 <td>{{model.app.amNodeLabelExpression}}</td>
               </tr>
               </tbody>