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 e1a8ec8dc27..d7eac3ffd5b 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
@@ -263,5 +263,12 @@ export default Ember.Controller.extend({
   isLogAggregationNotSucceeded: Ember.computed("model.app", function() {
     const logAggregationStatus = this.get("model.app.logAggregationStatus");
     return logAggregationStatus !== "SUCCEEDED";
-  })
+  }),
+
+  isTimelineUnHealthy: function() {
+      if (this.model && this.model.timelineHealth) {
+        return this.model.timelineHealth.get('isTimelineUnHealthy');
+      }
+      return true;
+    }.property('model.timelineHealth')
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/logs.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/logs.js
index b73bc80f175..9719f804f04 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/logs.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app/logs.js
@@ -31,7 +31,10 @@ export default AbstractRoute.extend(AppAttemptMixin, {
       attempts: this.fetchAttemptListFromRMorATS(app_id, this.store).catch(function() {
         return [];
       }),
-      app: this.fetchAppInfoFromRMorATS(app_id, this.store)
+      app: this.fetchAppInfoFromRMorATS(app_id, this.store),
+      timelineHealth: this.store.queryRecord('timeline-health', {}).catch(function() {
+        return null;
+      })
     });
   },
 
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 10fd73ec940..b6dd318779c 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
@@ -32,43 +32,52 @@
             <img src="assets/images/spinner.gif" alt="Loading...">
           </div>
         {{/if}}
-        {{#if attemptList}}
+        {{#if isTimelineUnHealthy}}
           <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|}}
-                    <option value="{{attempt.id}}" selected={{eq selectedAttemptId attempt.id}}>{{attempt.id}}</option>
-                  {{/each}}
-                </select>
-              </div>
+            <div class="col-md-8 col-md-offset-2 alert alert-warning text-center">
+              <span class="glyphicon glyphicon-warning-sign" style="padding-right: 10px"></span>
+              <span>Logs are unavailable because Application Timeline Service seems unhealthy.</span>
             </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|}}
-                      <option value="{{container.id}}" selected={{eq selectedContainerId container.id}}>{{container.id}}</option>
-                    {{/each}}
-                  </select>
-                </div>
-              </div>
-            {{else}}
-              {{#if (and selectedAttemptId (not _isLoadingTopPanel))}}
-                <div class="col-md-4">
-                  <h4 class="text-center" style="margin-top:25px;">No container data available!</h4>
-                </div>
-              {{/if}}
-            {{/if}}
           </div>
         {{else}}
-          <div class="col-md-12">
-            <h4 class="text-center">No data available!</h4>
-          </div>
+            {{#if attemptList}}
+                <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|}}
+                                    <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>
+                            <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))}}
+                            <div class="col-md-4">
+                                <h4 class="text-center" style="margin-top:25px;">No container data available!</h4>
+                            </div>
+                        {{/if}}
+                    {{/if}}
+                </div>
+            {{else}}
+                <div class="col-md-12">
+                    <h4 class="text-center">No data available!</h4>
+                </div>
+            {{/if}}
         {{/if}}
       </div>
     </div>