tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jeag...@apache.org
Subject [40/53] tez git commit: TEZ-1783. Wrapper in standalone mode. (Sreenath Somarajapuram via jeagles)
Date Wed, 10 Dec 2014 03:34:03 GMT
TEZ-1783. Wrapper in standalone mode. (Sreenath Somarajapuram via jeagles)


Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/dd01f4bc
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/dd01f4bc
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/dd01f4bc

Branch: refs/heads/master
Commit: dd01f4bc8117ceac0ca8321ba728ac63d692647a
Parents: 3a0b70c
Author: Jonathan Eagles <jeagles@gmail.com>
Authored: Mon Nov 24 12:59:20 2014 -0600
Committer: Jonathan Eagles <jeagles@gmail.com>
Committed: Mon Nov 24 12:59:20 2014 -0600

----------------------------------------------------------------------
 CHANGES.txt                                     |   1 +
 tez-ui/src/main/webapp/app/index.html           |   3 +-
 tez-ui/src/main/webapp/app/scripts/app.js       |   7 +-
 .../webapp/app/scripts/components/page-nav.js   |   2 +
 tez-ui/src/main/webapp/app/scripts/configs.js   |   7 +-
 .../app/scripts/controllers/dag_controller.js   |   4 -
 .../controllers/task_attempt_controller.js      |   4 -
 .../app/scripts/controllers/task_controller.js  |   4 -
 .../scripts/controllers/tez-app-controller.js   |   4 -
 .../scripts/controllers/vertex_controller.js    |   4 -
 .../src/main/webapp/app/scripts/helpers/misc.js |   2 +-
 .../app/scripts/mixins/paginated_content.js     |   5 +-
 tez-ui/src/main/webapp/app/scripts/router.js    | 250 ++++++++-----------
 tez-ui/src/main/webapp/app/styles/main.less     | 179 ++++++++++---
 .../main/webapp/app/templates/application.hbs   |  30 ++-
 .../webapp/app/templates/common/configs.hbs     |   2 +-
 .../webapp/app/templates/common/counters.hbs    |   2 +-
 tez-ui/src/main/webapp/app/templates/dag.hbs    |  79 +++---
 .../main/webapp/app/templates/dag/swimlane.hbs  |   4 -
 .../src/main/webapp/app/templates/dag/tasks.hbs |  49 ----
 tez-ui/src/main/webapp/app/templates/dags.hbs   |  38 +--
 tez-ui/src/main/webapp/app/templates/error_.hbs |   2 -
 tez-ui/src/main/webapp/app/templates/task.hbs   |  82 +++---
 .../main/webapp/app/templates/task/attempts.hbs |  31 ---
 .../webapp/app/templates/taskAttempt/index.hbs  |  18 ++
 .../main/webapp/app/templates/task_attempt.hbs  |  82 +++---
 tez-ui/src/main/webapp/app/templates/tasks.hbs  |  38 +--
 .../src/main/webapp/app/templates/tez-app.hbs   |  12 +-
 .../main/webapp/app/templates/tez-app/dags.hbs  |  49 ----
 .../app/templates/utils/_loadingSpinner.hbs     |   3 -
 .../webapp/app/templates/utils/_pageHeader.hbs  |   7 -
 tez-ui/src/main/webapp/app/templates/vertex.hbs |  20 +-
 .../main/webapp/app/templates/vertex/index.hbs  |  13 +-
 .../main/webapp/app/templates/vertex/inputs.hbs |  30 +--
 .../webapp/app/templates/vertex/swimlane.hbs    |  22 --
 .../app/templates/vertex/task_attempts.hbs      |  49 ----
 .../main/webapp/app/templates/vertex/tasks.hbs  |  49 ----
 37 files changed, 480 insertions(+), 707 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 69a6e94..b0c3c41 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -26,6 +26,7 @@ ALL CHANGES:
   TEZ-1721. Update INSTALL instructions for clarifying tez client jars
     compatibility with runtime tarball on HDFS.
   TEZ-1690. TestMultiMRInput tests fail because of user collisions.
+  TEZ-1783. Wrapper in standalone mode.
 
 Release 0.5.3: Unreleased
 

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/index.html
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/index.html b/tez-ui/src/main/webapp/app/index.html
index ac6a0ec..8cf9006 100644
--- a/tez-ui/src/main/webapp/app/index.html
+++ b/tez-ui/src/main/webapp/app/index.html
@@ -21,10 +21,11 @@
     <meta charset="utf-8">
     <title>Tez UI</title>
 
+    <link rel="shortcut icon" href="img/tez-favicon.png" type="image/x-icon">
+
     <!-- build:css styles/main.css -->
     <link rel="stylesheet" href="styles/main.css">
     <link rel="stylesheet" href="styles/swimlanes.css">
-    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="bower_components/ember-table/dist/ember-table.css">
     <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
     <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/app.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/app.js b/tez-ui/src/main/webapp/app/scripts/app.js
index 4af2b5e..070a255 100644
--- a/tez-ui/src/main/webapp/app/scripts/app.js
+++ b/tez-ui/src/main/webapp/app/scripts/app.js
@@ -33,7 +33,12 @@ var App = window.App = Em.Application.createWithMixins(Bootstrap, {
 
 App.Helpers = Em.Namespace.create();
 App.Mappers = Em.Namespace.create();
-App.Configs = Em.Namespace.create();
+App.Configs = Em.Namespace.create({
+  restNamespace: {
+    timeline: 'ws/v1/timeline',
+    applicationHistory: 'ws/v1/applicationhistory'
+  }
+});
 
 require('scripts/configs');
 $.extend(App.env, App.Configs.envDefaults);

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/components/page-nav.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/page-nav.js b/tez-ui/src/main/webapp/app/scripts/components/page-nav.js
index a6c0f68..0105c7b 100644
--- a/tez-ui/src/main/webapp/app/scripts/components/page-nav.js
+++ b/tez-ui/src/main/webapp/app/scripts/components/page-nav.js
@@ -19,6 +19,8 @@
 App.PageNavComponent = Em.Component.extend({
 	layoutName: 'components/page-nav',
 	
+	classNames: ['inline-block'],
+
 	actions: {
 		gotoNext: function() {
 			this.sendAction('navNext');

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/configs.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/configs.js b/tez-ui/src/main/webapp/app/scripts/configs.js
index 14a79d2..23df14d 100644
--- a/tez-ui/src/main/webapp/app/scripts/configs.js
+++ b/tez-ui/src/main/webapp/app/scripts/configs.js
@@ -20,16 +20,13 @@ App.Configs.setProperties({
 
   // Default environment configurations
   envDefaults: {
+    version: "0.0.1",
+
     // Host URLs: Change the following URLs for pointing tez-ui to the respective servers.
     timelineBaseUrl: 'http://localhost:8188', // ip:po at which time;line server is running
     RMWebUrl: 'http://localhost:8088', // Location of RM web url
   },
 
-  restNamespace: {
-    timeline: 'ws/v1/timeline',
-    applicationHistory: 'ws/v1/applicationhistory'
-  },
-
   table: {
     commonColumns: {
       /*

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/controllers/dag_controller.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/dag_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/dag_controller.js
index bbf8e12..d35fb5a 100644
--- a/tez-ui/src/main/webapp/app/scripts/controllers/dag_controller.js
+++ b/tez-ui/src/main/webapp/app/scripts/controllers/dag_controller.js
@@ -27,10 +27,6 @@ App.DagController = Em.ObjectController.extend(App.Helpers.DisplayHelper, {
     this.set('loading', false);
   }.observes('content'),
 
-	pageSubTitle: function() {
-		return this.get('name');
-	}.property('name'),
-
 	childDisplayViews: [
 		Ember.Object.create({title: 'Details', linkTo: 'dag.index'}),
 		Ember.Object.create({title: 'Vertices', linkTo: 'dag.vertices'}),

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/controllers/task_attempt_controller.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/task_attempt_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/task_attempt_controller.js
index 8fa290e..d528b2d 100644
--- a/tez-ui/src/main/webapp/app/scripts/controllers/task_attempt_controller.js
+++ b/tez-ui/src/main/webapp/app/scripts/controllers/task_attempt_controller.js
@@ -27,10 +27,6 @@ App.TaskAttemptController = Em.ObjectController.extend(App.Helpers.DisplayHelper
     this.set('loading', false);
   }.observes('content'),
 
-	pageSubTitle: function() {
-		return this.get('id');
-	}.property('id'),
-
 	childDisplayViews: [
 		Ember.Object.create({title: 'Details', linkTo: 'taskAttempt.index'}),
 		Ember.Object.create({title: 'Counters', linkTo: 'taskAttempt.counters'}),

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/controllers/task_controller.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/task_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/task_controller.js
index f4e8358..ac4b22b 100644
--- a/tez-ui/src/main/webapp/app/scripts/controllers/task_controller.js
+++ b/tez-ui/src/main/webapp/app/scripts/controllers/task_controller.js
@@ -27,10 +27,6 @@ App.TaskController = Em.ObjectController.extend(App.Helpers.DisplayHelper, {
     this.set('loading', false);
   }.observes('content'),
 
-	pageSubTitle: function() {
-		return this.get('id');
-	}.property('id'),
-
 	childDisplayViews: [
 		Ember.Object.create({title: 'Details', linkTo: 'task.index'}),
 		Ember.Object.create({title: 'Task Attempts', linkTo: 'task.attempts'}),

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/controllers/tez-app-controller.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/tez-app-controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/tez-app-controller.js
index d7312ef..cae8a35 100644
--- a/tez-ui/src/main/webapp/app/scripts/controllers/tez-app-controller.js
+++ b/tez-ui/src/main/webapp/app/scripts/controllers/tez-app-controller.js
@@ -29,10 +29,6 @@ App.TezAppController = Em.ObjectController.extend(App.Helpers.DisplayHelper, {
     this.set('loading', false);
   }.observes('content'),
 
-  pageSubTitle: function() {
-    return this.get('id');
-  }.property('id'),
-
   childDisplayViews: [
     Ember.Object.create({title: 'Details', linkTo: 'tez-app.index'}),
     Ember.Object.create({title: 'Dags', linkTo: 'tez-app.dags'}),

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/controllers/vertex_controller.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/vertex_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/vertex_controller.js
index b2acacb..7e05eba 100644
--- a/tez-ui/src/main/webapp/app/scripts/controllers/vertex_controller.js
+++ b/tez-ui/src/main/webapp/app/scripts/controllers/vertex_controller.js
@@ -27,10 +27,6 @@ App.VertexController = Em.ObjectController.extend(App.Helpers.DisplayHelper, {
     this.set('loading', false);
   }.observes('content'),
 
-  pageSubTitle: function() {
-    return this.get('name');
-  }.property('name'),
-
   childDisplayViews: [
     Ember.Object.create({title: 'Details', linkTo: 'vertex.index'}),
     Ember.Object.create({title: 'Tasks', linkTo: 'vertex.tasks'}),

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/helpers/misc.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/helpers/misc.js b/tez-ui/src/main/webapp/app/scripts/helpers/misc.js
index 976dec3..a1b99e0 100644
--- a/tez-ui/src/main/webapp/app/scripts/helpers/misc.js
+++ b/tez-ui/src/main/webapp/app/scripts/helpers/misc.js
@@ -97,7 +97,7 @@ App.Helpers.misc = {
       if(columnConfig.getCellContentHelper) {
         columnConfig.getCellContent = App.Helpers.get(columnConfig.getCellContentHelper);
       }
-      columnConfig.minWidth = columnConfig.minWidth || 150;
+      columnConfig.minWidth = columnConfig.minWidth || 135;
 
       return columnConfig.filterID ?
           App.ExTable.ColumnDefinition.createWithMixins(App.ExTable.FilterColumnMixin, columnConfig) :

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js b/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js
index 0dbf097..01a9f5e 100644
--- a/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js
+++ b/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js
@@ -17,7 +17,7 @@
  */
 
 App.PaginatedContentMixin = Em.Mixin.create({
-	count: 5,
+	count: 10,
 	
 	fromID: null,
 
@@ -48,6 +48,9 @@ App.PaginatedContentMixin = Em.Mixin.create({
 	loadEntities: function() {
 		var that = this;
 		var childEntityType = this.get('childEntityType');
+
+    that.set('loading', true);
+
 		this.get('store').unloadAll(childEntityType);
 		this.get('store').findQuery(childEntityType, this.getFilterProperties()).then(function(entities){
 			that.set('entities', entities);

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/scripts/router.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/router.js b/tez-ui/src/main/webapp/app/scripts/router.js
index f8633e8..dbc6b29 100644
--- a/tez-ui/src/main/webapp/app/scripts/router.js
+++ b/tez-ui/src/main/webapp/app/scripts/router.js
@@ -53,30 +53,49 @@ App.Router.map(function() {
 	//this.resource('error', {path:$ '/error'});
 });
 
+/* --- Router helper functions --- */
+
+function renderTableWithSpinner () {
+  this.render('common/table-with-spinner');
+}
+
+function renderSwimlanes () {
+  this.render('common/swimlanes');
+}
+
+function renderConfigs() {
+  this.render('common/configs');
+}
+
 /*
-App.ApplicationRoute = Em.Route.extend({
-	actions: {
-		//TODO: handle error and show proper error message.
-		error: function(error, transition) {
-			return;
-			this.transitionTo('error').then(function(newRoute) {
-				newRoute.controller.set('err', {
-					target: transition.targetName,
-					statusText: error.message,
-					responseText: error.stack
-				});
-				newRoute.controller.set('pageTitle', "Error");
-			});
-		}
-	}
-});*/
-
-App.DagCountersRoute = App.VertexCountersRoute = 
-  App.TaskCountersRoute = App.TaskAttemptCountersRoute = Em.Route.extend({
-  renderTemplate: function() {
-    this.render('common/counters');
-  }
-});
+ * Creates a setupController function
+ * @param format Unformatted title string.
+ * @param Optional, arguments as string can be tailed after format to specify the property path.
+ *        i.e. 'Dag - %@ (%@)', 'name', 'id' would give 'Dag - dag_name (dag_id)'
+ * @return setupController function
+ */
+function setupControllerFactory(format) {
+  var fmtArgs = Array.prototype.slice.call(arguments, 1),
+      formattedText;
+
+  return function (controller, model) {
+    if(format) {
+      fmtArgs = fmtArgs.map(function (key) {
+        return model.get(key);
+      }),
+      formattedText = model ? format.fmt.apply(format, fmtArgs) : format;
+
+      $(document).attr('title', formattedText);
+    }
+
+    this._super(controller, model);
+    if(controller.loadData) {
+      controller.loadData();
+    }
+  };
+}
+
+/* --- Dag related routes --- */
 
 App.DagsRoute = Em.Route.extend({
   queryParams:  {
@@ -87,37 +106,34 @@ App.DagsRoute = Em.Route.extend({
     appid: App.Helpers.misc.defaultQueryParamsConfig,
     dag_name: App.Helpers.misc.defaultQueryParamsConfig
   },
-
-  setupController: function(controller, model) {
-    $(document).attr('title', 'All Dags');
-    this._super(controller, model);
-    controller.loadData();
-  },
+  setupController: setupControllerFactory('All Dags'),
 });
 
 App.DagRoute = Em.Route.extend({
   model: function(params) {
     return this.store.find('dag', params.dag_id);
   },
-
-  setupController: function(controller, model) {
-    $(document).attr('title', 'Dag: %@ (%@)'.fmt(model.get('name'), model.id));
-    this._super(controller, model);
-  }
+  setupController: setupControllerFactory('Dag: %@ (%@)', 'name', 'id')
 });
 
 App.DagSwimlaneRoute = Em.Route.extend({
-
+  renderTemplate: renderSwimlanes,
 	model: function(params) {
-		var model = this.modelFor('dag');
-		var queryParams = {'primaryFilter': 'TEZ_DAG_ID:' + model.id};
+		var model = this.modelFor('dag'),
+		    queryParams = {'primaryFilter': 'TEZ_DAG_ID:' + model.id};
 		this.store.unloadAll('task_attempt');
 		return this.store.findQuery('task_attempt', queryParams);
 	},
+	setupController: setupControllerFactory()
+});
 
-	setupController: function(controller, model) {
-		this._super(controller, model);
-	}
+/* --- Task related routes --- */
+
+App.TaskRoute = Em.Route.extend({
+  model: function(params) {
+    return this.store.find('task', params.task_id);
+  },
+  setupController: setupControllerFactory('Task: %@', 'id')
 });
 
 App.TasksRoute = Em.Route.extend({
@@ -126,46 +142,16 @@ App.TasksRoute = Em.Route.extend({
     parentType: App.Helpers.misc.defaultQueryParamsConfig,
     parentID: App.Helpers.misc.defaultQueryParamsConfig
   },
-
-  setupController: function(controller, model) {
-    this._super(controller, model);
-    controller.loadData();
-  }
+  setupController: setupControllerFactory()
 });
 
-App.TaskRoute = Em.Route.extend({
-  model: function(params) {
-    return this.store.find('task', params.task_id);
-  },
-
-  setupController: function(controller, model) {
-    $(document).attr('title', 'Task: %@'.fmt(model.id));
-    this._super(controller, model);
-  }
-});
+/* --- Vertex related routes --- */
 
 App.VertexRoute = Em.Route.extend({
   model: function(params) {
     return this.store.find('vertex', params.vertex_id);
   },
-
-  setupController: function(controller, model) {
-    $(document).attr('title', 'Vertex: %@ (%@)'.fmt(model.get('name'), model.id));
-    this._super(controller, model);
-  }
-});
-
-App.VertexSwimlaneRoute = Em.Route.extend({
-  model: function(params) {
-    var model = this.modelFor('vertex');
-    var queryParams = {'primaryFilter': 'TEZ_VERTEX_ID:' + model.id };
-    this.store.unloadAll('task_attempt');
-    return this.store.find('task_attempt', queryParams);
-  },
-
-  setupController: function(controller, model) {
-    this._super(controller, model);
-  }
+  setupController: setupControllerFactory('Vertex: %@ (%@)', 'name', 'id')
 });
 
 App.VertexInputsRoute = Em.Route.extend({
@@ -175,82 +161,44 @@ App.VertexInputsRoute = Em.Route.extend({
   }
 });
 
-App.DagTasksRoute = Em.Route.extend({
-  queryParams: {
-    status: App.Helpers.misc.defaultQueryParamsConfig,
-    vertex_id: App.Helpers.misc.defaultQueryParamsConfig 
-  },
-
+App.VertexInputConfigsRoute = Em.Route.extend({
+  renderTemplate: renderConfigs,
   setupController: function(controller, model) {
-    this._super(controller, model);
-    controller.loadData();
+    this._super(controller, model)
+    controller.set('needToShowInputDetails', true);
   }
 });
 
-App.DagVerticesRoute = Em.Route.extend({
-  queryParams: {
-    status: App.Helpers.misc.defaultQueryParamsConfig 
+App.VertexInputRoute = Em.Route.extend({
+  model: function (params) {
+    var model = this.modelFor('vertex');
+    return model.get('inputs').findBy('id', params.input_id);
   },
-
-  setupController: function(controller, model) {
-    this._super(controller, model);
-    controller.loadData();
-  }
+  setupController: setupControllerFactory()
 });
 
-App.VertexTasksRoute = Em.Route.extend({
-  queryParams: {
-    status: App.Helpers.misc.defaultQueryParamsConfig
+App.VertexSwimlaneRoute = Em.Route.extend({
+  renderTemplate: renderSwimlanes,
+  model: function(params) {
+    var model = this.modelFor('vertex'),
+        queryParams = {'primaryFilter': 'TEZ_VERTEX_ID:' + model.id };
+    this.store.unloadAll('task_attempt');
+    return this.store.find('task_attempt', queryParams);
   },
-
-  setupController: function(controller, model) {
-    this._super(controller, model);
-    controller.loadData();
-  }
+  setupController: setupControllerFactory()
 });
 
-App.VertexTaskAttemptsRoute = Em.Route.extend({
-  queryParams: {
-    status: App.Helpers.misc.defaultQueryParamsConfig
-  },
-
-  setupController: function(controller, model) {
-    this._super(controller, model);
-    controller.loadData();
-  }
-});
+/* --- Task  related routes--- */
 
 App.TaskAttemptsRoute = Em.Route.extend({
+  renderTemplate: renderTableWithSpinner,
   queryParams: {
     status: App.Helpers.misc.defaultQueryParamsConfig 
   },
-
-  setupController: function(controller, model) {
-    $(document).attr('title', 'Task Attempt: %@'.fmt(model.id));
-    this._super(controller, model);
-    controller.loadData();
-  }
-});
-
-App.VertexInputConfigsRoute = App.TezAppConfigsRoute = Em.Route.extend({
-  renderTemplate: function() {
-    this.render('common/configs');
-  },
-  setupController: function(controller, model) {
-    this._super(controller, model)
-    controller.set('needToShowInputDetails', this.routeName === 'vertexInput.configs');
-  }
+  setupController: setupControllerFactory('Task Attempt: %@', 'id')
 });
 
-App.VertexInputRoute = Em.Route.extend({
-  model: function (params) {
-    var model = this.modelFor('vertex');
-    return model.get('inputs').findBy('id', params.input_id);
-  },
-  setupController: function(controller, model) {
-    this._super(controller, model);
-  }
-});
+/* --- Tez-app related routes --- */
 
 App.TezAppRoute = Em.Route.extend({
   model: function(params) {
@@ -263,22 +211,44 @@ App.TezAppRoute = Em.Route.extend({
       });
     });
   },
-  setupController: function(controller, model) {
-    $(document).attr('title', 'Application: %@'.fmt(model.id));
-    this._super(controller, model);
-  }
+  setupController: setupControllerFactory('Application: %@', 'id')
 });
 
 App.TezAppDagsRoute = Em.Route.extend({
+  renderTemplate: renderTableWithSpinner,
   queryParams:  {
     count: App.Helpers.misc.defaultQueryParamsConfig,    
     fromID: App.Helpers.misc.defaultQueryParamsConfig,
     user: App.Helpers.misc.defaultQueryParamsConfig,
     status: App.Helpers.misc.defaultQueryParamsConfig
   },
+  setupController: setupControllerFactory()
+});
 
-  setupController: function(controller, model) {
-    this._super(controller, model);
-    controller.loadData();
-  }
+App.TezAppConfigsRoute = Em.Route.extend({
+  renderTemplate: renderConfigs
 });
+
+/* --- Shared routes --- */
+
+App.DagTasksRoute =
+    App.DagVerticesRoute =
+    App.VertexTasksRoute =
+    App.VertexTaskAttemptsRoute =
+    Em.Route.extend({
+      renderTemplate: renderTableWithSpinner,
+      queryParams: {
+        status: App.Helpers.misc.defaultQueryParamsConfig
+      },
+      setupController: setupControllerFactory()
+    });
+
+App.DagCountersRoute =
+    App.VertexCountersRoute =
+    App.TaskCountersRoute =
+    App.TaskAttemptCountersRoute =
+    Em.Route.extend({
+      renderTemplate: function() {
+        this.render('common/counters');
+      }
+    });

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/styles/main.less
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/main.less b/tez-ui/src/main/webapp/app/styles/main.less
index 00222e3..af30ee9 100644
--- a/tez-ui/src/main/webapp/app/styles/main.less
+++ b/tez-ui/src/main/webapp/app/styles/main.less
@@ -16,19 +16,144 @@
  * limitations under the License.
  */
 
+
+// Colors
+@logo-orange: #D27A22;
+@bg-lite: #f5f5f5;
+@border-lite: #e5e5e5;
+
+@white: #fff;
+
+@text-color: #666666;
+
+@top-nav-bg-color-from: #d5d5d5;
+@top-nav-bg-color-to: #f0f0f0;
+
+@success-color: limegreen;
+@error-color: crimson;
+@warning-color: orange;
+
+// Imports
 @import "../bower_components/font-awesome/less/font-awesome";
+@import "../bower_components/bootstrap/less/bootstrap"; //UI theme
+
+// Base style
+body, html, body > .ember-view {
+  height: 100%;
+  overflow: visible;
+}
+
+// TEZ UI in stand alone mode
+.standalone {
+  height: 100%;
+
+  a {
+    color: @logo-orange;
+  }
+
+  #top-nav {
+    a.logo {
+      img {
+        margin-top: 2px;
+      }
+      span {
+        vertical-align: bottom;
+        color: @logo-orange;
+      }
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    .navbar-inner {
+      background-color: @bg-lite;
+
+      max-height: 40px;
+      border-bottom: 1px @border-lite solid;
+    }
+  }
+
+  .nav-pills > li.active > a,
+  .nav-pills > li.active > a:hover,
+  .nav-pills > li.active > a:focus {
+    background-color: @logo-orange;
+  }
+
+  .top-wrapper {
+    min-height: 100%;
+    height: auto !important;
+    height: 100%;
+    margin: 0 auto -40px; // Must be same as footer & footer-frame
+  }
+
+  .footer, .footer-frame {
+    height: 40px;
+  }
+
+  .footer {
+    background-color: @white;
+    color: @text-color;
+
+    padding: 10px 0px;
+    margin: 0px;
+
+    border-top: 1px @border-lite solid;
+  }
+}
+
+// TEZ UI wrapped in a host like Ambari
+.wrapped {
+  #top-nav, .footer, .push {
+    display: none;
+  }
+}
+
+// Styles used in both standalone and wrapped modes
+.standalone, .wrapped {
+
+  .main-container {
+    margin: 0px 30px;
+  }
+
+  .breadcrumb {
+    font-size: 16px;
+    .active .sub {
+      font-size: 12px;
+    }
+  }
+
+  .navbar {
+    margin-bottom: 0px;
+  }
+}
 
 .fa-icon(@name) {
     @content: "fa-var-@{name}";
     &:before {content: @@content}
 }
 
-/* colors */
-@success-color: limegreen;
-@error-color: crimson; 
-@warning-color: orange;
-
 /* misc helpers */
+.inline-block {
+  display: inline-block;
+}
+
+.horizontal-half {
+  .inline-block;
+  width: 50%;
+}
+
+.align-children-left {
+  text-align: left;
+}
+
+.align-children-right {
+  text-align: right;
+}
+
+.align-children-center {
+  text-align: center;
+}
+
 .align-right {
 	float: right;
 }
@@ -37,24 +162,16 @@
 	float: left;
 }
 
-.align-clear {
-	clear: both;
-}
-
 .margin-small {
 	margin: 15px;
 }
 
-.margin-small-horizontal {
+.margin-small-vertical {
 	margin: 15px 0px;
 }
 
-.margin-medium {
-	margin: 30px;
-}
-
-.margin-medium-horizontal {
-  margin: 30px 0px;
+.margin-small-horizontal {
+  margin: 0px 15px;
 }
 
 .type-table {
@@ -165,7 +282,6 @@ div.indent {
 
 .countertable {
   width: 100%;
-  .margin-medium;
 
   th, td {
     border: 1px solid #dcdcdc;
@@ -192,17 +308,6 @@ div.indent {
   }
 }
 
-.breadcrumb-container {
-  .margin-small;
-
-  margin-left: 0px;
-
-  i {
-    .fa;
-    .fa-icon(angle-double-right);
-  }
-}
-
 .kv-table {
   width: 100%;
   margin-top: 10px;
@@ -227,23 +332,23 @@ div.indent {
 }
 
 .inline-display {
-	display: inline;
+  display: inline;
 }
 
 .disabled-icon {
-		pointer-events: none;
-		color:lightgray;
+    pointer-events: none;
+    color:lightgray;
 }
 
 .enabled-icon {
-	cursor: pointer;
-	color: black;
+  cursor: pointer;
+  color: black;
 }
 
-.input-dirty {
-	background-color: yellow;
+.table-container {
+  min-height: 380px;
 }
 
-.table-container {
-	height: 380px;
+.input-dirty {
+  background-color: yellow;
 }

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/application.hbs b/tez-ui/src/main/webapp/app/templates/application.hbs
index 7b35f42..10d939e 100644
--- a/tez-ui/src/main/webapp/app/templates/application.hbs
+++ b/tez-ui/src/main/webapp/app/templates/application.hbs
@@ -16,6 +16,30 @@
  * limitations under the License.
 }}
 
-<div style="width: 95%; margin: 0 auto;">
-  {{outlet}}
-</div>
+<div {{bind-attr class="App.env.isStandalone:standalone:wrapped"}}>
+  <div class="top-wrapper">
+    <div id="top-nav">
+      <div class="navbar navbar-static-top">
+        <div class="navbar-inner">
+          <div class="main-container">
+            <a class="logo" href="/">
+              <img src="img/apache-tez-logo-transparent.png" width="70px"/>
+              <span>{{unbound App.env.version}}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="main-container">
+      {{outlet}}
+    </div>
+    <div class="footer-frame"> </div>
+  </div>
+
+  <div class="footer">
+    <div class="main-container">
+      <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Licensed under the Apache License, Version 2.0</a>.
+    </div>
+  </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/common/configs.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/common/configs.hbs b/tez-ui/src/main/webapp/app/templates/common/configs.hbs
index d6d5e2d..8abf055 100644
--- a/tez-ui/src/main/webapp/app/templates/common/configs.hbs
+++ b/tez-ui/src/main/webapp/app/templates/common/configs.hbs
@@ -17,7 +17,7 @@
 }}
 
 {{#if needToShowInputDetails}}
-  <div class='align-left margin-medium-horizontal'>
+  <div class='align-left margin-small-horizontal' style="margin-bottom:10px;">
     <table class='detail-list'>
       <thead>
         <tr>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/common/counters.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/common/counters.hbs b/tez-ui/src/main/webapp/app/templates/common/counters.hbs
index ecebc21..e41e8f4 100644
--- a/tez-ui/src/main/webapp/app/templates/common/counters.hbs
+++ b/tez-ui/src/main/webapp/app/templates/common/counters.hbs
@@ -16,6 +16,6 @@
 * limitations under the License.
 }}
 
-<div class='table-container margin-medium' style='width: 50%;'>
+<div class='table-container'>
   {{counter-table-component data=counterGroups}}
 </div>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/dag.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag.hbs b/tez-ui/src/main/webapp/app/templates/dag.hbs
index 1487aef..b7d3da9 100644
--- a/tez-ui/src/main/webapp/app/templates/dag.hbs
+++ b/tez-ui/src/main/webapp/app/templates/dag.hbs
@@ -1,40 +1,57 @@
-{{partial "utils/pageHeader"}}
+{{!
+ * 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='breakcrumb-container'>
-  {{#link-to 'dags'}}All Dags{{/link-to}}
-</div>
+<ul class="breadcrumb">
+  <li>{{#link-to 'dags'}}All Dags{{/link-to}} <span class="divider"></span></li>
+  <li class="active">Dag - <span class='sub'>{{name}}</span></li>
+</ul>
 
 {{#unless loading}}
-	<div class='type-table fill-full margin-small'>
-		<div class='align-left'>
+  <div class='type-table fill-full margin-small'>
+    <div class='align-left'>
 
-			<table class='detail-list'>
-				<tbody>
-					<tr>
-						<td>Dag ID</td>
-						<td>{{id}}</td>
-					</tr>
-					<tr>
-						<td>{{t common.applicationId}}</td>
-						<td>{{applicationId}}</td>
-					</tr>
-					<tr>
-						<td>{{t common.user}}</td>
-						<td>{{user}}</td>
-					</tr>
-				</tbody>
-			</table>
+      <table class='detail-list'>
+        <tbody>
+          <tr>
+            <td>Dag ID</td>
+            <td>{{id}}</td>
+          </tr>
+          <tr>
+            <td>{{t common.applicationId}}</td>
+            <td>{{applicationId}}</td>
+          </tr>
+          <tr>
+            <td>{{t common.user}}</td>
+            <td>{{user}}</td>
+          </tr>
+        </tbody>
+      </table>
 
-		</div>
+    </div>
 
-		<div class='pill-container align-right'>
-			{{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-		</div>
+    <div class='pill-container align-right'>
+      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
+    </div>
 
-	</div>
-	<div class='margin-small'>
-		{{outlet}}
-	</div>
+  </div>
+  <div class='margin-small-vertical'>
+    {{outlet}}
+  </div>
 {{else}}
-		{{partial 'utils/loadingSpinner'}}	
+  {{partial 'partials/loading-spinner'}}
 {{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/dag/swimlane.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag/swimlane.hbs b/tez-ui/src/main/webapp/app/templates/dag/swimlane.hbs
deleted file mode 100644
index dd81832..0000000
--- a/tez-ui/src/main/webapp/app/templates/dag/swimlane.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="swimlane">
-{{#view App.SwimlanesView contentBinding="controller.model.content"}}
-{{/view}}
-</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/dag/tasks.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag/tasks.hbs b/tez-ui/src/main/webapp/app/templates/dag/tasks.hbs
deleted file mode 100644
index af40041..0000000
--- a/tez-ui/src/main/webapp/app/templates/dag/tasks.hbs
+++ /dev/null
@@ -1,49 +0,0 @@
-{{!
-* 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.
-}}
-
-{{#unless loading}}
-  <div class='margin-small'>
-    <span class="left-divider align-right">
-      <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-    </span>
-    <span class='align-right'>
-      {{page-nav-component
-        hasPrev=hasPrev
-        hasNext=hasNext
-        navNext='navigateNext'
-        navPrev='navigatePrev'
-        navFirst='navigateFirst'
-      }}
-    </span>
-    <div class='align-clear'> </div>
-  </div>
-
-  <div class='table-container'>
-  {{extended-table-component
-    hasFooter=false
-    enableContentSelection=true
-    columnsBinding="columns"
-    contentBinding="sortedContent"
-    forceFillColumns=true
-    hasFilter=true
-    onFilterUpdated='filterUpdated'
-  }}
-  </div>
-{{else}}
-  {{partial 'utils/loadingSpinner'}}
-{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/dags.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dags.hbs b/tez-ui/src/main/webapp/app/templates/dags.hbs
index 10784dd..980e84b 100644
--- a/tez-ui/src/main/webapp/app/templates/dags.hbs
+++ b/tez-ui/src/main/webapp/app/templates/dags.hbs
@@ -16,43 +16,23 @@
  * limitations under the License.
 }}
 
-{{partial 'utils/pageHeader'}}
+<ul class="breadcrumb">
+  <li class="active">All Dags</li>
+</ul>
 
 {{#unless loading}}
   <div class='margin-small'>
-    <span class='align-left'>
-      {{page-nav-component
-        hasPrev=hasPrev
-        hasNext=hasNext
-        navNext='navigateNext'
-        navPrev='navigatePrev'
-        navFirst='navigateFirst'
-      }}
-    </span>
-    <span class="left-divider align-left">
-      <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-    </span>
-    <span class='align-right'>
+    <div class="horizontal-half align-children-left">
       Number of Dags to Show
       {{view Ember.Select 
         content=countOptions 
         value=count
       }}
-    </span>
-    <div class='align-clear'> </div>
-  </div>
-
-  <div class='table-container'>
-    {{extended-table-component
-      hasFooter=false
-      enableContentSelection=true
-      columnsBinding='columns'
-      contentBinding='sortedContent'
-      forceFillColumns=true
-      hasFilter=true
-      onFilterUpdated='filterUpdated'
-    }}
+    </div><div class="horizontal-half align-children-right">
+      {{partial 'partials/table-controls'}}
+    </div>
   </div>
+  {{partial 'partials/table'}}
 {{else}}
-  {{partial 'utils/loadingSpinner'}}
+  {{partial 'partials/loading-spinner'}}
 {{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/error_.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/error_.hbs b/tez-ui/src/main/webapp/app/templates/error_.hbs
index 0e3ee97..0eb6661 100644
--- a/tez-ui/src/main/webapp/app/templates/error_.hbs
+++ b/tez-ui/src/main/webapp/app/templates/error_.hbs
@@ -1,5 +1,3 @@
-{{partial "utils/pageHeader" pageTitle='aaa'}}
-
 <div>An error occurred while loading {{err.target}}</div>
 <div>Error was {{err.statusText}}</div>
 <div>details:<br/>{{err.responseText}}</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/task.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/task.hbs b/tez-ui/src/main/webapp/app/templates/task.hbs
index cf6a80b..81f24e4 100644
--- a/tez-ui/src/main/webapp/app/templates/task.hbs
+++ b/tez-ui/src/main/webapp/app/templates/task.hbs
@@ -16,56 +16,40 @@
 * limitations under the License.
 }}
 
-{{partial "utils/pageHeader"}}
-
-<div class='breadcrumb-container'>
-  {{#link-to 'dags'}}All Dags{{/link-to}}
-  <i></i>
-  {{#link-to 'dag.vertices' dagID}}Dag{{/link-to}}
-  <i></i>
-  {{#link-to 'vertex.tasks' vertexID}}Vertex{{/link-to}}
-</div>
+<ul class="breadcrumb">
+  <li>{{#link-to 'dags'}}All Dags{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'dag.vertices' dagID}}Vertices{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'vertex.tasks' vertexID}}Tasks{{/link-to}} <span class="divider"></span></li>
+  <li class="active">Task - <span class='sub'>{{id}}</span></li>
+</ul>
 
 {{#unless loading}}
-	{{!--
-	<div class='margin-small-horizontal'>
-		{{#link-to 'tasks' dagID}}
-			<i class='fa-arrow-circle-left fa fa-2x'>
-				<span style='font-size: 85%'>&nbsp;Tasks</span>
-			</i>
-		{{/link-to}}
-	</div>
-	--}}
-
-	<div class='type-table fill-full '>
-		<div class='align-left'>
-
-			<table class='detail-list'>
-				<tbody>
-					<tr>
-						<td>Task ID</td>
-						<td>{{id}}</td>
-					</tr>
-					<tr>
-						<td>Vertex ID</td>
-						<td>{{vertexID}}</td>
-					</tr>
-					<tr>
-						<td>DAG ID</td>
-						<td>{{dagID}}</td>
-					</tr>
-				</tbody>
-			</table>
-
-		</div>
-
-		<div class='pill-container align-right'>
-			{{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-		</div>
-
-	</div>
-
-	{{outlet}}
+  <div class='type-table fill-full margin-small-horizontal'>
+    <div class='align-left'>
+      <table class='detail-list'>
+        <tbody>
+          <tr>
+            <td>Task ID</td>
+            <td>{{id}}</td>
+          </tr>
+          <tr>
+            <td>Vertex ID</td>
+            <td>{{vertexID}}</td>
+          </tr>
+          <tr>
+            <td>DAG ID</td>
+            <td>{{dagID}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class='pill-container align-right'>
+      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
+    </div>
+  </div>
+  <div class='margin-small-vertical'>
+    {{outlet}}
+  </div>
 {{else}}
-		{{partial 'utils/loadingSpinner'}}	
+  {{partial 'partials/loading-spinner'}}
 {{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/task/attempts.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/task/attempts.hbs b/tez-ui/src/main/webapp/app/templates/task/attempts.hbs
deleted file mode 100644
index 1f9970d..0000000
--- a/tez-ui/src/main/webapp/app/templates/task/attempts.hbs
+++ /dev/null
@@ -1,31 +0,0 @@
-{{#unless loading}}
-	<div class='margin-small'>
-		<span class="left-divider align-right">
-		  <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-		</span>
-		<span class='align-right'>
-			{{page-nav-component
-				hasPrev=hasPrev
-				hasNext=hasNext
-				navNext='navigateNext'
-				navPrev='navigatePrev'
-				navFirst='navigateFirst'
-			}}
-		</span>
-		<div class='align-clear'> </div>
-	</div>
-
-	<div class='table-container'>
-	{{extended-table-component 
-		hasFooter=false
-		enableContentSelection=true
-		columnsBinding="columns"
-		contentBinding="sortedContent"
-		forceFillColumns=true
-		hasFilter=true
-    onFilterUpdated='filterUpdated'
-	}}
-	</div>
-{{else}}
-	{{partial 'utils/loadingSpinner'}}	
-{{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs b/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
index 4fbf0f1..7aa3073 100644
--- a/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
+++ b/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
@@ -1,3 +1,21 @@
+{{!
+* 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='type-table fill-full margin-small-horizontal'>
 	<div class='align-left'>
 		<table class='detail-list'>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/task_attempt.hbs b/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
index dc7c386..a10ee3d 100644
--- a/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
+++ b/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
@@ -16,51 +16,45 @@
 * limitations under the License.
 }}
 
-{{partial "utils/pageHeader"}}
-
-<div class='breadcrumb-container'>
-  {{#link-to 'dags'}}All Dags{{/link-to}}
-  <i></i>
-  {{#link-to 'dag.vertices' dagID}}Dag{{/link-to}}
-  <i></i>
-  {{#link-to 'vertex.tasks' vertexID}}Vertex{{/link-to}}
-  <i></i>
-  {{#link-to 'task.attempts' taskID}}Task{{/link-to}}
-</div>
+<ul class="breadcrumb">
+  <li>{{#link-to 'dags'}}All Dags{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'dag.vertices' dagID}}Vertices{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'vertex.tasks' vertexID}}Tasks{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'task.attempts' taskID}}Attempts{{/link-to}} <span class="divider"></span></li>
+  <li class="active">Task Attempt - <span class='sub'>{{id}}</span></li>
+</ul>
 
 {{#unless loading}}
-	<div class='type-table fill-full '>
-			<div class='align-left'>
-				<table class='detail-list'>
-					<tbody>
-            <tr>
-              <td>Task Attempt ID</td>
-              <td>{{id}}</td>
-            </tr>
-            <tr>
-              <td>Task ID</td>
-              <td>{{taskID}}</td>
-            </tr>
-						<tr>
-							<td>Vertex ID</td>
-							<td>{{vertexID}}</td>
-						</tr>
-						<tr>
-							<td>DAG ID</td>
-							<td>{{dagID}}</td>
-						</tr>
-					</tbody>
-				</table>
-
-			</div>
-
-			<div class='pill-container align-right'>
-				{{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-			</div>
-
-		</div>
-
-		{{outlet}}
+  <div class='type-table fill-full margin-small-horizontal'>
+    <div class='align-left'>
+      <table class='detail-list'>
+        <tbody>
+          <tr>
+            <td>Task Attempt ID</td>
+            <td>{{id}}</td>
+          </tr>
+          <tr>
+            <td>Task ID</td>
+            <td>{{taskID}}</td>
+          </tr>
+          <tr>
+            <td>Vertex ID</td>
+            <td>{{vertexID}}</td>
+          </tr>
+          <tr>
+            <td>DAG ID</td>
+            <td>{{dagID}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class='pill-container align-right'>
+      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
+    </div>
+  </div>
+  <div class='margin-small-vertical'>
+    {{outlet}}
+  </div>
 {{else}}
-		{{partial 'utils/loadingSpinner'}}	
+  {{partial 'partials/loading-spinner'}}
 {{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/tasks.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/tasks.hbs b/tez-ui/src/main/webapp/app/templates/tasks.hbs
index 34c7fff..184eed3 100644
--- a/tez-ui/src/main/webapp/app/templates/tasks.hbs
+++ b/tez-ui/src/main/webapp/app/templates/tasks.hbs
@@ -16,36 +16,10 @@
  * limitations under the License.
 }}
 
-{{partial 'utils/pageHeader'}}
+<ul class="breadcrumb">
+  <li>{{#link-to 'dags'}}All Dags{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'dag.vertices' dagID}}Vertices{{/link-to}} <span class="divider"></span></li>
+  <li class="active">Tasks</li>
+</ul>
 
-{{#unless loading}}
-  <div class='margin-small'>
-    <span class='align-left'>
-      {{page-nav-component
-        hasPrev=hasPrev
-        hasNext=hasNext
-        navNext='navigateNext'
-        navPrev='navigatePrev'
-        navFirst='navigateFirst'
-      }}
-    </span>
-    <span class="left-divider align-left">
-      <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-    </span>
-    <div class='align-clear'> </div>
-  </div>
-
-  <div class='table-container'>
-    {{extended-table-component
-      hasFooter=false
-      enableContentSelection=true
-      columnsBinding="columns"
-      contentBinding="sortedContent"
-      forceFillColumns=true
-      hasFilter=true
-      onFilterUpdated='filterUpdated'
-    }}
-  </div>
-{{else}}
-  {{partial 'utils/loadingSpinner'}}
-{{/unless}}
\ No newline at end of file
+{{partial "common/table-with-spinner"}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/tez-app.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/tez-app.hbs b/tez-ui/src/main/webapp/app/templates/tez-app.hbs
index 64c4fc8..7fd5a59 100644
--- a/tez-ui/src/main/webapp/app/templates/tez-app.hbs
+++ b/tez-ui/src/main/webapp/app/templates/tez-app.hbs
@@ -16,7 +16,11 @@
 * limitations under the License.
 }}
 
-{{partial "utils/pageHeader"}}
+<ul class="breadcrumb">
+  <li>{{#link-to 'dags'}}All Dags{{/link-to}} <span class="divider"></span></li>
+  <li class="active">Tez App - <span class='sub'>{{id}}</span></li>
+</ul>
+
 {{#unless loading}}
   <div class='type-table fill-full '>
     <div class='align-left'>
@@ -37,7 +41,9 @@
       {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
     </div>
   </div>
-  {{outlet}}
+  <div class='margin-small-vertical'>
+    {{outlet}}
+  </div>
 {{else}}
-    {{partial 'utils/loadingSpinner'}}
+  {{partial 'partials/loading-spinner'}}
 {{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/tez-app/dags.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/tez-app/dags.hbs b/tez-ui/src/main/webapp/app/templates/tez-app/dags.hbs
deleted file mode 100644
index c478edb..0000000
--- a/tez-ui/src/main/webapp/app/templates/tez-app/dags.hbs
+++ /dev/null
@@ -1,49 +0,0 @@
-{{!
-* 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.
-}}
-
-{{#unless loading}}
-  <div class='margin-small'>
-    <span class="left-divider align-right">
-      <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-    </span>
-    <span class='align-right'>
-      {{page-nav-component
-        hasPrev=hasPrev
-        hasNext=hasNext
-        navNext='navigateNext'
-        navPrev='navigatePrev'
-        navFirst='navigateFirst'
-      }}
-    </span>
-    <div class='align-clear'> </div>
-  </div>
-
-  <div class='table-container'>
-  {{extended-table-component 
-    hasFooter=false
-    enableContentSelection=true
-    columnsBinding="columns"
-    contentBinding="sortedContent"
-    forceFillColumns=true
-    hasFilter=true
-    onFilterUpdated='filterUpdated'
-  }}
-  </div>
-{{else}}
-  {{partial 'utils/loadingSpinner'}}
-{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/utils/_loadingSpinner.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/utils/_loadingSpinner.hbs b/tez-ui/src/main/webapp/app/templates/utils/_loadingSpinner.hbs
deleted file mode 100644
index e4f1dfa..0000000
--- a/tez-ui/src/main/webapp/app/templates/utils/_loadingSpinner.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div style="text-align: center; margin: 50px 0px;">
-	<i class="fa fa-spinner fa-spin fa-5x fa-fw"></i>
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/utils/_pageHeader.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/utils/_pageHeader.hbs b/tez-ui/src/main/webapp/app/templates/utils/_pageHeader.hbs
deleted file mode 100644
index 632aeb5..0000000
--- a/tez-ui/src/main/webapp/app/templates/utils/_pageHeader.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div style="display:table; width:100%;">
-	<div style="display:table-cell; vertical-align:middle; font-size: 20pt; font-weight: bold;">
-		<span>{{pageTitle}}</span> - <span>{{pageSubTitle}}</span>
-	</div>
-	<img src="img/apache_tez_logo_lowres.png" style="float:right; height: 50px; width: auto;"></img>
-</div>
-<hr style="margin: 5px;" />
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/vertex.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex.hbs b/tez-ui/src/main/webapp/app/templates/vertex.hbs
index 848b0c6..c56e2cd 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex.hbs
@@ -16,16 +16,14 @@
 * limitations under the License.
 }}
 
-{{partial "utils/pageHeader"}}
-
-<div class='breadcrumb-container'>
-  {{#link-to 'dags'}}All Dags{{/link-to}}
-  <i></i>
-  {{#link-to 'dag.vertices' dagID}}Dag{{/link-to}}
-</div>
+<ul class="breadcrumb">
+  <li>{{#link-to 'dags'}}All Dags{{/link-to}} <span class="divider"></span></li>
+  <li>{{#link-to 'dag.vertices' dagID}}Vertices{{/link-to}} <span class="divider"></span></li>
+  <li class="active">Vertex - <span class='sub'>{{name}}</span></li>
+</ul>
 
 {{#unless loading}}
-  <div class='type-table fill-full '>
+  <div class='type-table margin-small-horizontal fill-full'>
     <div class='align-left'>
       <table class='detail-list'>
         <tbody>
@@ -44,7 +42,9 @@
       {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
     </div>
   </div>
-  {{outlet}}
+  <div class='margin-small-vertical'>
+    {{outlet}}
+  </div>
 {{else}}
-    {{partial 'utils/loadingSpinner'}}
+  {{partial 'partials/loading-spinner'}}
 {{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/index.hbs b/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
index 41ce349..2d92a65 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
@@ -16,8 +16,9 @@
 * limitations under the License.
 }}
 
-<div class='type-table fill-full margin-small-horizontal'>
-  <div class='align-left'>
+<div class='type-table margin-small-horizontal fill-full'>
+
+  <div class="horizontal-half align-children-left">
     <table class='detail-list'>
       <tbody>
         <tr>
@@ -79,9 +80,8 @@
         {{/if}}
       </tbody>
     </table>
-  </div>
-  <div class='align-right'>
-    <table class='detail-list'>
+  </div><div class="horizontal-half align-children-left" style="vertical-align: top; padding-left: 50px;">
+    <table class='detail-list inline-block'>
       <tbody>
         <tr>
           <td>{{t common.time.start}}</td>
@@ -103,9 +103,8 @@
     </table>
   </div>
 
-  <div class='align-clear margin-medium'></div>
   {{#if hasStats}}
-    <div class='align-left'>
+    <div style="padding-top: 20px;">
       <table class='detail-list'>
         <thead>
           <tr>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs b/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs
index b6ca986..6f0b5fd 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs
@@ -18,35 +18,13 @@
 
 {{#unless loading}}
   {{#if inputsAvailable}}
-    <div class='margin-small'>
-      <span class="left-divider align-right">
-        <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-      </span>
-      <span class='align-right'>
-        {{page-nav-component
-          hasPrev=hasPrev
-          hasNext=hasNext
-          navNext='navigateNext'
-          navPrev='navigatePrev'
-          navFirst='navigateFirst'
-        }}
-      </span>
-      <div class='align-clear'> </div>
-    </div>
-
-    <div class='table-container'>
-    {{extended-table-component
-      hasFooter=false
-      enableContentSelection=false
-      columnsBinding="columns"
-      contentBinding="sortedContent"
-      forceFillColumns=true
-      hasFilter=true
-    }}
+    <div class='margin-small align-children-right'>
+      {{partial 'partials/table-controls'}}
     </div>
+    {{partial 'partials/table'}}
   {{else}}
     <h1>Inputs are not available!</h1>
   {{/if}}
 {{else}}
-  {{partial 'utils/loadingSpinner'}}
+  {{partial 'utils/loading-spinner'}}
 {{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/vertex/swimlane.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/swimlane.hbs b/tez-ui/src/main/webapp/app/templates/vertex/swimlane.hbs
deleted file mode 100644
index 2745e08..0000000
--- a/tez-ui/src/main/webapp/app/templates/vertex/swimlane.hbs
+++ /dev/null
@@ -1,22 +0,0 @@
-{{!
-* 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 id="swimlane">
-  {{#view App.SwimlanesView contentBinding="controller.model.content"}}
-  {{/view}}
-</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/vertex/task_attempts.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/task_attempts.hbs b/tez-ui/src/main/webapp/app/templates/vertex/task_attempts.hbs
deleted file mode 100644
index 6525358..0000000
--- a/tez-ui/src/main/webapp/app/templates/vertex/task_attempts.hbs
+++ /dev/null
@@ -1,49 +0,0 @@
-{{!
-* 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.
-}}
-
-{{#unless loading}}
-  <div class='margin-small'>
-    <span class='align-left'>
-      {{page-nav-component
-        hasPrev=hasPrev
-        hasNext=hasNext
-        navNext='navigateNext'
-        navPrev='navigatePrev'
-        navFirst='navigateFirst'
-      }}
-    </span>
-    <span class="left-divider align-left">
-      <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-    </span>
-    <div class='align-clear'> </div>
-  </div>
-
-  <div class='table-container'>
-  {{extended-table-component
-    hasFooter=false
-    enableContentSelection=true
-    columnsBinding="columns"
-    contentBinding="sortedContent"
-    forceFillColumns=true
-    hasFilter=true
-    onFilterUpdated='filterUpdated'
-  }}
-  </div>
-{{else}}
-  {{partial 'utils/loadingSpinner'}}
-{{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/dd01f4bc/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs b/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs
deleted file mode 100644
index 6525358..0000000
--- a/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs
+++ /dev/null
@@ -1,49 +0,0 @@
-{{!
-* 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.
-}}
-
-{{#unless loading}}
-  <div class='margin-small'>
-    <span class='align-left'>
-      {{page-nav-component
-        hasPrev=hasPrev
-        hasNext=hasNext
-        navNext='navigateNext'
-        navPrev='navigatePrev'
-        navFirst='navigateFirst'
-      }}
-    </span>
-    <span class="left-divider align-left">
-      <i {{bind-attr class=':fa-action :fa-cog'}} {{action 'selectColumns'}}></i>
-    </span>
-    <div class='align-clear'> </div>
-  </div>
-
-  <div class='table-container'>
-  {{extended-table-component
-    hasFooter=false
-    enableContentSelection=true
-    columnsBinding="columns"
-    contentBinding="sortedContent"
-    forceFillColumns=true
-    hasFilter=true
-    onFilterUpdated='filterUpdated'
-  }}
-  </div>
-{{else}}
-  {{partial 'utils/loadingSpinner'}}
-{{/unless}}
\ No newline at end of file


Mime
View raw message