From 32a35dc94b5914a782e8f85e8bef0466b57c5534 Mon Sep 17 00:00:00 2001
From: Sunil G <sunilg@apache.org>
Date: Mon, 24 Sep 2018 12:20:28 +0530
Subject: [PATCH] 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.

---
 .../webapp/app/controllers/yarn-app/logs.js   |  7 ++-
 .../src/main/webapp/app/styles/yarn-app.scss  |  5 ++
 .../main/webapp/app/templates/yarn-app.hbs    |  6 +--
 .../webapp/app/templates/yarn-app/logs.hbs    | 49 +++++++++++--------
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/logs.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/logs.js
index 5a6e25ec539..82240117327 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/logs.js
+++ b/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";
+  })
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-app.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-app.scss
index 0c29b5e2340..875da72b0c8 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/yarn-app.scss
+++ b/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;
+  }
 }
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 ff166e3b3be..13d14e892aa 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
@@ -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>
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/logs.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/logs.hbs
index a190def7e93..10fd73ec940 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/logs.hbs
+++ b/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,22 +36,26 @@
           <div class="row">
             <div class="col-md-6">
               <label>Choose attempt to fetch containers</label>
-              <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|}}
-                  <option value="{{attempt.id}}" selected={{eq selectedAttemptId attempt.id}}>{{attempt.id}}</option>
-                {{/each}}
-              </select>
+              <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|}}
+                    <option value="{{attempt.id}}" selected={{eq selectedAttemptId attempt.id}}>{{attempt.id}}</option>
+                  {{/each}}
+                </select>
+              </div>
             </div>
             {{#if attemptContainerList}}
               <div class="col-md-6">
                 <label>Choose container to fetch logs</label>
-                <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|}}
-                    <option value="{{container.id}}" selected={{eq selectedContainerId container.id}}>{{container.id}}</option>
-                  {{/each}}
-                </select>
+                <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|}}
+                      <option value="{{container.id}}" selected={{eq selectedContainerId container.id}}>{{container.id}}</option>
+                    {{/each}}
+                  </select>
+                </div>
               </div>
             {{else}}
               {{#if (and selectedAttemptId (not _isLoadingTopPanel))}}
@@ -88,12 +92,14 @@
             <div class="row">
               <div class="col-md-6" style="margin-bottom:20px;">
                 <label>Choose log for {{selectedContainerId}}</label>
-                <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|}}
-                    <option value="{{file.fileName}}" selected={{eq selectedLogFileName file.fileName}}>{{file.fileName}} - {{file.fileSize}} bytes</option>
-                  {{/each}}
-                </select>
+                <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|}}
+                      <option value="{{file.fileName}}" selected={{eq selectedLogFileName file.fileName}}>{{file.fileName}} - {{file.fileSize}} bytes</option>
+                    {{/each}}
+                  </select>
+                </div>
               </div>
               {{#if selectedLogFileName}}
                 <div class="col-md-6">
@@ -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}}