YARN-8742. [UI2] Container logs on Application / Service pages on UI2 are not available many case, improve error messages in such cases. Contributed by Akhil PB.

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

@@ -253,5 +253,10 @@ export default Ember.Controller.extend({
       }
       return lines.slice(lines.length - 10).join("\n");
     }
-  )
+  ),
+
+  isLogAggregationNotSucceeded: Ember.computed("model.app", function() {
+    const logAggregationStatus = this.get("model.app.logAggregationStatus");
+    return logAggregationStatus !== "SUCCEEDED";
+  })
 });

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

@@ -32,4 +32,9 @@
   .yarn-app-final-status .label {
     vertical-align: middle;
   }
+
+  .quick-links {
+    display: block;
+    margin-left: -5px;
+  }
 }

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

@@ -102,9 +102,9 @@
 
             {{#if model.serviceName}}
               {{#if model.quicklinks}}
-              <div class="btn-group">
+              <div class="btn-group quick-links">
                 <button type="button" class="btn btn-unstyled dropdown-toggle" title="Quick links" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  <i class="glyphicon glyphicon-option-vertical" />
+                  <i class="glyphicon glyphicon-option-vertical" /> Quicklinks
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right">
                   {{#each model.quicklinks as |link|}}
@@ -115,7 +115,7 @@
               {{/if}}
             {{/if}}
           </div>
-          <div>
+          <div class="btn-group">
             <span title="Queue" class="yarn-tooltip">
               <i class="glyphicon glyphicon-tasks glyphicon-gray" /> {{model.app.queue}}
             </span>

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

@@ -28,7 +28,7 @@
           {{model.app.logAggregationStatus}}
         </span>
         {{#if _isLoadingTopPanel}}
-          <div class="text-center" style="z-index: 100; position: absolute; left: 46%;">
+          <div class="text-center" style="z-index: 100; position: absolute; left: 46%; top: 45px;">
             <img src="assets/images/spinner.gif" alt="Loading...">
           </div>
         {{/if}}
@@ -36,6 +36,7 @@
           <div class="row">
             <div class="col-md-6">
               <label>Choose attempt to fetch containers</label>
+              <div>
                 <select class="js-fetch-attempt-containers" onchange={{action "showContainersForAttemptId" value="target.value"}} style="max-width:350px;">
                   <option value="" selected={{eq selectedAttemptId ''}}>None</option>
                   {{#each attemptList as |attempt|}}
@@ -43,9 +44,11 @@
                   {{/each}}
                 </select>
               </div>
+            </div>
             {{#if attemptContainerList}}
               <div class="col-md-6">
                 <label>Choose container to fetch logs</label>
+                <div>
                   <select class="js-fetch-logs-containers" onchange={{action "showLogFilesForContainerId" value="target.value"}} style="max-width:350px">
                     <option value="" selected={{eq selectedContainerId ''}}>None</option>
                     {{#each attemptContainerList as |container|}}
@@ -53,6 +56,7 @@
                     {{/each}}
                   </select>
                 </div>
+              </div>
             {{else}}
               {{#if (and selectedAttemptId (not _isLoadingTopPanel))}}
                 <div class="col-md-4">
@@ -88,6 +92,7 @@
             <div class="row">
               <div class="col-md-6" style="margin-bottom:20px;">
                 <label>Choose log for {{selectedContainerId}}</label>
+                <div>
                   <select class="js-fetch-log-for-container" onchange={{action "showContentForLogFile" value="target.value"}} style="max-width:350px">
                     <option value="" selected={{eq selectedLogFileName ''}}>None</option>
                     {{#each containerLogFiles as |file|}}
@@ -95,6 +100,7 @@
                     {{/each}}
                   </select>
                 </div>
+              </div>
               {{#if selectedLogFileName}}
                 <div class="col-md-6">
                   <label>Find in log</label>
@@ -125,7 +131,10 @@
           {{else}}
             {{#unless _isLoadingBottomPanel}}
               <div class="col-md-12" style="margin-top:20px;">
-                <h4 class="text-center">No log data available!</h4>
+                <h4 class="text-center">Logs are not available!</h4>
+                {{#if isLogAggregationNotSucceeded}}
+                  <h4 class="text-center">Log aggregation may not be complete, check back later!</h4>
+                {{/if}}
               </div>
             {{/unless}}
           {{/if}}