From 561839cb5f37436d1fdd011b3c4de5f1c1879b29 Mon Sep 17 00:00:00 2001
From: sunilg <sunilg@apache.org>
Date: Wed, 10 Aug 2016 06:53:13 +0530
Subject: [PATCH] YARN-3334. [YARN-3368] Introduce REFRESH button in various UI
 pages (Sreenath Somarajapuram via Sunil G)

---
 .../app/components/app-usage-donut-chart.js   |  5 ---
 .../main/webapp/app/components/bar-chart.js   |  4 +-
 .../webapp/app/components/breadcrumb-bar.js   | 31 +++++++++++++
 .../main/webapp/app/components/donut-chart.js |  8 ++--
 .../app/components/queue-usage-donut-chart.js |  2 +-
 .../app/controllers/yarn-container-log.js     | 40 +++++++++++++++++
 .../webapp/app/controllers/yarn-node-app.js   | 36 ++++++++++++++++
 .../src/main/webapp/app/routes/abstract.js    | 32 ++++++++++++++
 .../webapp/app/routes/cluster-overview.js     | 12 +++++-
 .../webapp/app/routes/yarn-app-attempt.js     |  9 +++-
 .../webapp/app/routes/yarn-app-attempts.js    |  8 +++-
 .../src/main/webapp/app/routes/yarn-app.js    | 11 ++++-
 .../src/main/webapp/app/routes/yarn-apps.js   |  9 +++-
 .../webapp/app/routes/yarn-container-log.js   | 10 ++++-
 .../main/webapp/app/routes/yarn-node-app.js   |  8 +++-
 .../main/webapp/app/routes/yarn-node-apps.js  |  8 +++-
 .../webapp/app/routes/yarn-node-container.js  |  8 +++-
 .../webapp/app/routes/yarn-node-containers.js |  8 +++-
 .../src/main/webapp/app/routes/yarn-node.js   |  9 +++-
 .../src/main/webapp/app/routes/yarn-nodes.js  |  9 +++-
 .../main/webapp/app/routes/yarn-queue-apps.js | 12 ++++--
 .../src/main/webapp/app/routes/yarn-queue.js  | 14 +++---
 .../src/main/webapp/app/routes/yarn-queues.js | 14 +++---
 .../src/main/webapp/app/styles/app.css        |  6 +++
 .../webapp/app/templates/cluster-overview.hbs |  4 +-
 .../templates/components/breadcrumb-bar.hbs   | 22 ++++++++++
 .../webapp/app/templates/yarn-app-attempt.hbs |  4 +-
 .../app/templates/yarn-app-attempts.hbs       |  4 +-
 .../main/webapp/app/templates/yarn-app.hbs    |  4 +-
 .../main/webapp/app/templates/yarn-apps.hbs   |  4 +-
 .../app/templates/yarn-container-log.hbs      |  2 +
 .../webapp/app/templates/yarn-node-app.hbs    |  2 +
 .../webapp/app/templates/yarn-node-apps.hbs   |  4 +-
 .../app/templates/yarn-node-container.hbs     |  4 +-
 .../app/templates/yarn-node-containers.hbs    |  4 +-
 .../main/webapp/app/templates/yarn-node.hbs   |  4 +-
 .../main/webapp/app/templates/yarn-nodes.hbs  |  4 +-
 .../webapp/app/templates/yarn-queue-apps.hbs  |  4 +-
 .../main/webapp/app/templates/yarn-queue.hbs  |  4 +-
 .../main/webapp/app/templates/yarn-queues.hbs |  4 +-
 .../components/breadcrumb-bar-test.js         | 43 +++++++++++++++++++
 .../controllers/yarn-container-log-test.js    | 30 +++++++++++++
 .../unit/controllers/yarn-node-app-test.js    | 30 +++++++++++++
 43 files changed, 417 insertions(+), 77 deletions(-)
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/breadcrumb-bar.js
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-container-log.js
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-node-app.js
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/abstract.js
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/breadcrumb-bar.hbs
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/breadcrumb-bar-test.js
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-container-log-test.js
 create mode 100644 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-node-app-test.js

diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js
index 0baf63002c..90f41fcbc4 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js
@@ -26,7 +26,6 @@ export default BaseUsageDonutChart.extend({
   colors: d3.scale.category20().range(),
 
   draw: function() {
-    this.initChart();
     var usageByApps = [];
     var avail = 100;
 
@@ -60,8 +59,4 @@ export default BaseUsageDonutChart.extend({
     this.renderDonutChart(usageByApps, this.get("title"), this.get("showLabels"),
       this.get("middleLabel"), "100%", "%");
   },
-
-  didInsertElement: function() {
-    this.draw();
-  },
 })
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js
index 7bb292f6ed..a5c49a9439 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js
@@ -112,16 +112,16 @@ export default BaseChartComponent.extend({
   },
 
   draw: function() {
-    this.initChart();
     this.renderBarChart(this.get("data"), this.get("title"), this.get("textWidth"));
   },
 
   _dataChange: Ember.observer("data", function() {
     this.chart.g.selectAll("*").remove();
-    this.renderBarChart(this.get("data"), this.get("title"), this.get("textWidth"));
+    this.draw();
   }),
 
   didInsertElement: function() {
+    this.initChart();
     this.draw();
   },
 })
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/breadcrumb-bar.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/breadcrumb-bar.js
new file mode 100644
index 0000000000..44edb8e891
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/breadcrumb-bar.js
@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  breadcrumbs: null,
+
+  actions:{
+    refresh: function () {
+      this.get("targetObject").send("refresh");
+    }
+  }
+
+});
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
index 9a90855ad7..a2a21b3220 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
@@ -169,13 +169,12 @@ export default BaseChartComponent.extend({
 
   _dataChange: Ember.observer("data", function() {
     this.chart.g.selectAll("*").remove();
-    this.renderDonutChart(this.get("data"), this.get("title"), this.get("showLabels"),
-                          this.get("middleLabel"), this.get("middleValue"));
+    if(this.get("data")) {
+      this.draw();
+    }
   }),
 
   draw: function() {
-    this.initChart();
-
     var colorTargets = this.get("colorTargets");
     if (colorTargets) {
       var colorTargetReverse = Boolean(this.get("colorTargetReverse"));
@@ -188,6 +187,7 @@ export default BaseChartComponent.extend({
   },
 
   didInsertElement: function() {
+    this.initChart();
     this.draw();
   },
 })
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js
index 3532726865..f5e7574539 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js
@@ -26,7 +26,6 @@ export default BaseUsageDonutChart.extend({
   colors: d3.scale.category20().range(),
 
   draw: function() {
-    this.initChart();
     var usageByQueues = [];
     var avail = 100;
 
@@ -64,6 +63,7 @@ export default BaseUsageDonutChart.extend({
   },
 
   didInsertElement: function() {
+    this.initChart();
     this.draw();
   },
 })
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-container-log.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-container-log.js
new file mode 100644
index 0000000000..3352eaf498
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-container-log.js
@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+
+  breadcrumbs: Ember.computed('model.nodeInfo', 'model.containerInfo', function () {
+    var nodeInfo = this.get('model.nodeInfo'),
+        containerInfo = this.get('model.containerInfo');
+    return [{
+      text: "Home",
+      routeName: 'application'
+    }, {
+      text: `Node [ ${nodeInfo.id} ]`,
+      href: `/#/yarn-node/${nodeInfo.id}/${nodeInfo.addr}`,
+    }, {
+      text: `Container [ ${containerInfo.id} ]`,
+      href: `/#/yarn-node-container/${nodeInfo.id}/${nodeInfo.addr}/${containerInfo.id}`,
+    }, {
+      text: "Log",
+    }];
+  })
+
+});
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-node-app.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-node-app.js
new file mode 100644
index 0000000000..76da281cb2
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-node-app.js
@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+
+  breadcrumbs: Ember.computed('model.nodeInfo', function () {
+    var nodeInfo = this.get('model.nodeInfo');
+    return [{
+      text: "Home",
+      routeName: 'application'
+    }, {
+      text: `Node [ ${nodeInfo.id} ]`,
+      href: `/#/yarn-node/${nodeInfo.id}/${nodeInfo.addr}`,
+    }, {
+      text: "Application",
+    }];
+  })
+
+});
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/abstract.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/abstract.js
new file mode 100644
index 0000000000..3163237675
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/abstract.js
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  unloadAll() {
+    // Must be implemented by inheriting classes
+  },
+
+  actions: {
+    refresh: function () {
+      this.unloadAll();
+      this.refresh();
+    }
+  }
+});
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/cluster-overview.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/cluster-overview.js
index 36892741ba..10681265b8 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/cluster-overview.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/cluster-overview.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model() {
     return Ember.RSVP.hash({
       clusterMetrics: this.store.findAll('ClusterMetric'),
@@ -26,11 +28,17 @@ export default Ember.Route.extend({
         {
           state: "RUNNING"
         }),
-      queues: this.store.findAll('yarn-queue'),
+      queues: this.store.query('yarn-queue', {}),
     });
   },
 
   afterModel() {
     this.controllerFor("ClusterOverview").set("loading", false);
+  },
+
+  unloadAll() {
+    this.store.unloadAll('ClusterMetric');
+    this.store.unloadAll('yarn-app');
+    this.store.unloadAll('yarn-queue');
   }
 });
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempt.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempt.js
index a8f27f5fb3..762fb2908b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempt.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempt.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return Ember.RSVP.hash({
       attempt: this.store.findRecord('yarn-app-attempt', param.app_attempt_id),
@@ -39,5 +41,10 @@ export default Ember.Route.extend({
           return [];
         })
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-app-attempt');
+    this.store.unloadAll('yarn-container');
   }
 });
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempts.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempts.js
index 1a526c7a16..121debf2b1 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempts.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app-attempts.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return this.store.query('yarn-app-attempt', { appId: param.app_id}).then(function (attempts) {
       return {
@@ -26,5 +28,9 @@ export default Ember.Route.extend({
         attempts: attempts
       };
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-app-attempt');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app.js
index ab84632c2b..000b02f7f3 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-app.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return Ember.RSVP.hash({
       app: this.store.find('yarn-app', param.app_id),
@@ -39,5 +41,12 @@ export default Ember.Route.extend({
 
       nodes: this.store.findAll('yarn-rm-node'),
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-app');
+    this.store.unloadAll('yarn-app-attempt');
+    this.store.unloadAll('yarn-container');
+    this.store.unloadAll('yarn-rm-node');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-apps.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-apps.js
index b9454510af..0ac503cd6d 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-apps.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-apps.js
@@ -18,11 +18,18 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model() {
     return Ember.RSVP.hash({
       apps: this.store.findAll('yarn-app'),
       clusterMetrics: this.store.findAll('ClusterMetric'),
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-app');
+    this.store.unloadAll('ClusterMetric');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-container-log.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-container-log.js
index e2c9922231..9e4c7d364a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-container-log.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-container-log.js
@@ -19,12 +19,15 @@
 import Ember from 'ember';
 import Constants from 'yarn-ui/constants';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     var id = param.node_addr + Constants.PARAM_SEPARATOR + param.container_id +
         Constants.PARAM_SEPARATOR + param.filename;
     return Ember.RSVP.hash({
       containerLog: this.store.findRecord('yarn-container-log', id),
+      containerInfo: { id: param.container_id },
       nodeInfo: { id: param.node_id, addr: param.node_addr }
     }).then(function(hash) {
       // Just return as its success.
@@ -36,6 +39,7 @@ export default Ember.Route.extend({
       } else {
         // Assume empty response received from server.
         return { nodeInfo: { id: param.node_id, addr: param.node_addr },
+            containerInfo: { id: param.container_id },
             containerLog: { logs: "", containerID: param.container_id,
                 logFileName: param.filename}};
       }
@@ -51,5 +55,9 @@ export default Ember.Route.extend({
         this.replaceWith('/error');
       }
     }
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-container-log');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-app.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-app.js
index ed3058a591..0a1193051d 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-app.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-app.js
@@ -18,12 +18,18 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return Ember.RSVP.hash({
       nodeApp: this.store.queryRecord('yarn-node-app',
           { nodeAddr : param.node_addr, appId: param.app_id }),
       nodeInfo: { id: param.node_id, addr: param.node_addr }
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-node-app');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-apps.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-apps.js
index 4377a0da29..6044076d36 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-apps.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-apps.js
@@ -18,12 +18,18 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     // Get all apps running on a specific node. Node is contacted by using node_addr.
     return Ember.RSVP.hash({
       apps: this.store.query('yarn-node-app', { nodeAddr: param.node_addr }),
       nodeInfo: { id: param.node_id, addr: param.node_addr }
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-node-app');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-container.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-container.js
index 4ee3c6607f..b7a79de976 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-container.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-container.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     // Get a specific container running on a specific node.
     return Ember.RSVP.hash({
@@ -26,5 +28,9 @@ export default Ember.Route.extend({
           { nodeHttpAddr: param.node_addr, containerId: param.container_id }),
       nodeInfo: { id: param.node_id, addr: param.node_addr }
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-node-container');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-containers.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-containers.js
index 283296e177..3c709f7982 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-containers.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node-containers.js
@@ -17,12 +17,18 @@
  */
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     // Get all containers running on specific node.
     return Ember.RSVP.hash({
       containers: this.store.query('yarn-node-container', { nodeHttpAddr: param.node_addr }),
       nodeInfo: { id: param.node_id, addr: param.node_addr }
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-node-container');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node.js
index 64a1b3e46c..967d007ef9 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-node.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     // Fetches data from both NM and RM. RM is queried to get node usage info.
     return Ember.RSVP.hash({
@@ -26,5 +28,10 @@ export default Ember.Route.extend({
       node: this.store.findRecord('yarn-node', param.node_addr),
       rmNode: this.store.findRecord('yarn-rm-node', param.node_id)
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-node');
+    this.store.unloadAll('yarn-rm-node');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-nodes.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-nodes.js
index 56393690bb..4439569c3d 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-nodes.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-nodes.js
@@ -18,11 +18,18 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model() {
     return Ember.RSVP.hash({
       nodes: this.store.findAll('yarn-rm-node'),
       clusterMetrics: this.store.findAll('ClusterMetric'),
     });
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-rm-node');
+    this.store.unloadAll('ClusterMetric');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue-apps.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue-apps.js
index dff4ee9b3e..373e1bebc0 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue-apps.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue-apps.js
@@ -18,7 +18,9 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return Ember.RSVP.hash({
       selected : param.queue_name,
@@ -29,8 +31,12 @@ export default Ember.Route.extend({
   },
 
   afterModel(model) {
-    var store = this.store;
     model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
-    model.apps = store.findAll('yarn-app');
+    model.apps = this.store.findAll('yarn-app');
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-queue');
+    this.store.unloadAll('yarn-app');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue.js
index 06ceafbf2c..534291333a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queue.js
@@ -18,11 +18,13 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return Ember.RSVP.hash({
       selected : param.queue_name,
-      queues: this.store.findAll('yarn-queue'),
+      queues: this.store.query('yarn-queue', {}),
       selectedQueue : undefined,
       apps: undefined, // apps of selected queue
     });
@@ -31,8 +33,10 @@ export default Ember.Route.extend({
   afterModel(model) {
     model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
     model.apps = this.store.findAll('yarn-app');
-    model.apps.forEach(function(o) {
-      console.log(o);
-    })
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-queue');
+    this.store.unloadAll('yarn-app');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queues.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queues.js
index 06ceafbf2c..534291333a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queues.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/routes/yarn-queues.js
@@ -18,11 +18,13 @@
 
 import Ember from 'ember';
 
-export default Ember.Route.extend({
+import AbstractRoute from './abstract';
+
+export default AbstractRoute.extend({
   model(param) {
     return Ember.RSVP.hash({
       selected : param.queue_name,
-      queues: this.store.findAll('yarn-queue'),
+      queues: this.store.query('yarn-queue', {}),
       selectedQueue : undefined,
       apps: undefined, // apps of selected queue
     });
@@ -31,8 +33,10 @@ export default Ember.Route.extend({
   afterModel(model) {
     model.selectedQueue = this.store.peekRecord('yarn-queue', model.selected);
     model.apps = this.store.findAll('yarn-app');
-    model.apps.forEach(function(o) {
-      console.log(o);
-    })
+  },
+
+  unloadAll() {
+    this.store.unloadAll('yarn-queue');
+    this.store.unloadAll('yarn-app');
   }
 });
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
index 409aa159b7..a68a0acf4a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
@@ -267,3 +267,9 @@ li a.navigation-link.ember-view {
   color: #2196f3;
   font-weight: bold;
 }
+
+.breadcrumb-bar .refresh {
+  position: absolute;
+  right: 20px;
+  top: 3px;
+}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs
index fa90799d06..3bf0f37ef8 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 {{#if model}}
 
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/breadcrumb-bar.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/breadcrumb-bar.hbs
new file mode 100644
index 0000000000..24acbd9b72
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/breadcrumb-bar.hbs
@@ -0,0 +1,22 @@
+{{!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+}}
+
+<div class="col-md-12 container-fluid breadcrumb-bar">
+  {{em-breadcrumbs items=breadcrumbs}}
+  <button type="button" class="btn btn-sm btn-primary refresh" {{action "refresh"}}>Refresh</button>
+</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 c30040b1ce..1dbae9a6fb 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
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 <br/><br/><br/>
 <div class="container-fluid">
   <div class="row">
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 ffaa60d20e..c0fa7e1c1c 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
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
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 4db4f8ae7a..49c4bfd5b4 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
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 {{#if model.app}}
 <div class="col-md-12 container-fluid">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs
index ec17379c8d..d5f63470b5 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-container-log.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-container-log.hbs
index e9c3fedac3..67629d2817 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-container-log.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-container-log.hbs
@@ -16,6 +16,8 @@
   limitations under the License.
 --}}
 
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
+
 <div class="col-md-12 container-fluid">
   {{node-menu path="yarn-container-log" nodeAddr=model.nodeInfo.addr nodeId=model.nodeInfo.id}}
   <div class="col-md-10">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-app.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-app.hbs
index 1551957cd4..99d99cc802 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-app.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-app.hbs
@@ -16,6 +16,8 @@
   limitations under the License.
 --}}
 
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
+
 <div class="col-md-12 container-fluid">
   <div class="row">
     {{node-menu-panel path="yarn-node-app" nodeAddr=model.nodeInfo.addr nodeId=model.nodeInfo.id}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-apps.hbs
index 832e452113..52f0c86c8e 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-apps.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-apps.hbs
@@ -16,9 +16,7 @@
   limitations under the License.
 --}}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-container.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-container.hbs
index 224c695c6b..45abee86de 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-container.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-container.hbs
@@ -16,9 +16,7 @@
   limitations under the License.
 --}}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-containers.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-containers.hbs
index e96c83f7dc..f520c46b9b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-containers.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node-containers.hbs
@@ -16,9 +16,7 @@
   limitations under the License.
 --}}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs
index ddec5c4512..2d6b3a3408 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs
@@ -16,9 +16,7 @@
   limitations under the License.
 --}}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs
index ffab3e9eab..ed5522ed5c 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs
@@ -16,9 +16,7 @@
   limitations under the License.
 --}}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="row">
   <div class="col-md-2 container-fluid">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue-apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue-apps.hbs
index 7cfd4c6508..d5329f2620 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue-apps.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue-apps.hbs
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs
index aae4177df6..11c527c06b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="col-md-12 container-fluid">
   <div class="row">
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs
index e27341b840..ea9338cce4 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs
@@ -16,9 +16,7 @@
  * limitations under the License.
 }}
 
-<div class="col-md-12 container-fluid">
-  {{em-breadcrumbs items=breadcrumbs}}
-</div>
+{{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
 <div class="container-fluid">
   {{queue-navigator model=model.queues selected=model.selected}}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/breadcrumb-bar-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/breadcrumb-bar-test.js
new file mode 100644
index 0000000000..ffc65156f3
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/breadcrumb-bar-test.js
@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('breadcrumb-bar', 'Integration | Component | breadcrumb bar', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+  this.render(hbs`{{breadcrumb-bar}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:" + EOL +
+  this.render(hbs`
+    {{#breadcrumb-bar}}
+      template block text
+    {{/breadcrumb-bar}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-container-log-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-container-log-test.js
new file mode 100644
index 0000000000..0f8dc03013
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-container-log-test.js
@@ -0,0 +1,30 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:yarn-container-log', 'Unit | Controller | yarn container log', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-node-app-test.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-node-app-test.js
new file mode 100644
index 0000000000..852efefa8d
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/unit/controllers/yarn-node-app-test.js
@@ -0,0 +1,30 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:yarn-node-app', 'Unit | Controller | yarn node app', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});