diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/timeline-view.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/timeline-view.js
index 65a8cb1469c..3588009e7eb 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/timeline-view.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/timeline-view.js
@@ -25,6 +25,13 @@ export default Ember.Component.extend({
   tableDefinition: TableDefinition.create({
     searchType: 'manual',
   }),
+  graphDrawn: false,
+
+  actions: {
+    changeViewType(param) {
+      this.sendAction("changeViewType", param);
+    }
+  },
 
   canvas: {
     svg: undefined,
@@ -235,12 +242,10 @@ export default Ember.Component.extend({
   },
 
   didInsertElement: function() {
-    // init tooltip
-    this.initTooltip();
+    // init model
     this.modelArr = [];
     this.containerIdArr = [];
 
-    // init model
     if (this.get("rmModel")) {
       this.get("rmModel").forEach(function(o) {
         if(!this.modelArr.contains(o)) {
@@ -258,16 +263,30 @@ export default Ember.Component.extend({
       }.bind(this));
     }
 
-    if(this.modelArr.length === 0) {
+    if (this.modelArr.length === 0) {
       return;
     }
 
     this.modelArr.sort(function(a, b) {
       var tsA = a.get("startTs");
       var tsB = b.get("startTs");
-
       return tsA - tsB;
     });
+
+    if (this.get('attemptModel')) {
+      this.setAttemptsGridColumnsAndRows();
+    } else {
+      this.setContainersGridColumnsAndRows();
+    }
+  },
+
+  didUpdate: function() {
+    if (this.get("viewType") === "grid" || this.graphDrawn) {
+      return;
+    }
+
+    this.initTooltip();
+
     var begin = 0;
     if (this.modelArr.length > 0) {
       begin = this.modelArr[0].get("startTs");
@@ -289,11 +308,7 @@ export default Ember.Component.extend({
       this.setSelected(this.modelArr[0]);
     }
 
-    if (this.get('attemptModel')) {
-      this.setAttemptsGridColumnsAndRows();
-    } else {
-      this.setContainersGridColumnsAndRows();
-    }
+    this.graphDrawn = true;
   },
 
   setAttemptsGridColumnsAndRows: function() {
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app-attempt.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app-attempt.js
index 4c8b8a1cd25..116920db7c1 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app-attempt.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app-attempt.js
@@ -19,8 +19,15 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  queryParams: ["service"],
+  queryParams: ["service", "viewType"],
   service: undefined,
+  viewType: "graph",
+
+  actions: {
+    changeViewType(param) {
+      this.set("viewType", param);
+    }
+  },
 
   breadcrumbs: Ember.computed("model.attempt.appId", "model.attempt.id", function () {
     var appId = this.get("model.attempt.appId");
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/attempts.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/attempts.js
index a6cba9eea62..32638e5da2e 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/attempts.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-app/attempts.js
@@ -19,6 +19,13 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  queryParams: ["service"],
-  service: undefined
+  queryParams: ["service", "viewType"],
+  service: undefined,
+  viewType: "graph",
+
+  actions: {
+    changeViewType(param) {
+      this.set("viewType", param);
+    }
+  },
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/timeline-view.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/timeline-view.hbs
index b7cdb599086..0a1209dfe74 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/timeline-view.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/timeline-view.hbs
@@ -26,16 +26,16 @@
       {{/if}}
     </div>
     <ul class="nav nav-tabs" role="tablist">
-      <li class="active">
-        <a href="#graphViewTab" role="tab" data-toggle="tab">Graph View</a>
+      <li class="{{if (eq viewType "graph") "active" ""}}">
+        <a href="#graphViewTab" role="tab" data-toggle="tab" {{action "changeViewType" "graph"}}>Graph View</a>
       </li>
-      <li class="">
-        <a href="#gridViewTab" role="tab" data-toggle="tab">Grid View</a>
+      <li class="{{if (eq viewType "grid") "active" ""}}">
+        <a href="#gridViewTab" role="tab" data-toggle="tab" {{action "changeViewType" "grid"}}>Grid View</a>
       </li>
     </ul>
     <div class="panel-body">
       <div class="tab-content">
-        <div role="tabpanel" class="tab-pane active" id="graphViewTab">
+        <div role="tabpanel" class="tab-pane {{if (eq viewType "graph") "active" ""}}" id="graphViewTab">
           <br/><br/>
           <div class="col-md-7 container-fluid" id={{parent-id}}></div>
           <!-- diag info -->
@@ -56,7 +56,7 @@
             </div>
           </div>
         </div>
-        <div role="tabpanel" class="tab-pane" id="gridViewTab">
+        <div role="tabpanel" class="tab-pane {{if (eq viewType "grid") "active" ""}}" id="gridViewTab">
           {{em-table columns=gridColumns rows=gridRows definition=tableDefinition}}
         </div>
       </div>
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app-attempt.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app-attempt.hbs
index 2e2f6d0ac25..7d9aec1f0fc 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app-attempt.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app-attempt.hbs
@@ -56,6 +56,8 @@
           tsModel=model.tsContainers
           label="shortAppAttemptId"
           attemptModel=false
+          changeViewType="changeViewType"
+          viewType=viewType
         }}
       {{else}}
         <div class="col-md-12 container-fluid">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/attempts.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/attempts.hbs
index 5857d899c37..62105d32341 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/attempts.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app/attempts.hbs
@@ -26,6 +26,8 @@
     label="shortAppAttemptId"
     attemptModel=true
     serviceName=model.serviceName
+    changeViewType="changeViewType"
+    viewType=viewType
   }}
 {{else}}
   <div class="col-md-12 container-fluid">