tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jeag...@apache.org
Subject [41/53] tez git commit: Revert changes from TEZ-1783
Date Wed, 10 Dec 2014 03:34:04 GMT
Revert changes from TEZ-1783


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

Branch: refs/heads/master
Commit: 6b7709bdf5d0fa32c869462b3053cf2fb0e9ca0d
Parents: dd01f4b
Author: Jonathan Eagles <jeagles@gmail.com>
Authored: Mon Nov 24 14:42:18 2014 -0600
Committer: Jonathan Eagles <jeagles@gmail.com>
Committed: Mon Nov 24 14:42:18 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, 707 insertions(+), 480 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index b0c3c41..69a6e94 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -26,7 +26,6 @@ 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/6b7709bd/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 8cf9006..ac6a0ec 100644
--- a/tez-ui/src/main/webapp/app/index.html
+++ b/tez-ui/src/main/webapp/app/index.html
@@ -21,11 +21,10 @@
     <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/6b7709bd/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 070a255..4af2b5e 100644
--- a/tez-ui/src/main/webapp/app/scripts/app.js
+++ b/tez-ui/src/main/webapp/app/scripts/app.js
@@ -33,12 +33,7 @@ var App = window.App = Em.Application.createWithMixins(Bootstrap, {
 
 App.Helpers = Em.Namespace.create();
 App.Mappers = Em.Namespace.create();
-App.Configs = Em.Namespace.create({
-  restNamespace: {
-    timeline: 'ws/v1/timeline',
-    applicationHistory: 'ws/v1/applicationhistory'
-  }
-});
+App.Configs = Em.Namespace.create();
 
 require('scripts/configs');
 $.extend(App.env, App.Configs.envDefaults);

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 0105c7b..a6c0f68 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,8 +19,6 @@
 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/6b7709bd/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 23df14d..14a79d2 100644
--- a/tez-ui/src/main/webapp/app/scripts/configs.js
+++ b/tez-ui/src/main/webapp/app/scripts/configs.js
@@ -20,13 +20,16 @@ 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/6b7709bd/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 d35fb5a..bbf8e12 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,6 +27,10 @@ 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/6b7709bd/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 d528b2d..8fa290e 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,6 +27,10 @@ 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/6b7709bd/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 ac4b22b..f4e8358 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,6 +27,10 @@ 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/6b7709bd/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 cae8a35..d7312ef 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,6 +29,10 @@ 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/6b7709bd/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 7e05eba..b2acacb 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,6 +27,10 @@ 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/6b7709bd/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 a1b99e0..976dec3 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 || 135;
+      columnConfig.minWidth = columnConfig.minWidth || 150;
 
       return columnConfig.filterID ?
           App.ExTable.ColumnDefinition.createWithMixins(App.ExTable.FilterColumnMixin, columnConfig) :

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 01a9f5e..0dbf097 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: 10,
+	count: 5,
 	
 	fromID: null,
 
@@ -48,9 +48,6 @@ 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/6b7709bd/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 dbc6b29..f8633e8 100644
--- a/tez-ui/src/main/webapp/app/scripts/router.js
+++ b/tez-ui/src/main/webapp/app/scripts/router.js
@@ -53,49 +53,30 @@ 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');
-}
-
 /*
- * 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.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');
+  }
+});
 
 App.DagsRoute = Em.Route.extend({
   queryParams:  {
@@ -106,34 +87,37 @@ App.DagsRoute = Em.Route.extend({
     appid: App.Helpers.misc.defaultQueryParamsConfig,
     dag_name: App.Helpers.misc.defaultQueryParamsConfig
   },
-  setupController: setupControllerFactory('All Dags'),
+
+  setupController: function(controller, model) {
+    $(document).attr('title', 'All Dags');
+    this._super(controller, model);
+    controller.loadData();
+  },
 });
 
 App.DagRoute = Em.Route.extend({
   model: function(params) {
     return this.store.find('dag', params.dag_id);
   },
-  setupController: setupControllerFactory('Dag: %@ (%@)', 'name', 'id')
+
+  setupController: function(controller, model) {
+    $(document).attr('title', 'Dag: %@ (%@)'.fmt(model.get('name'), model.id));
+    this._super(controller, model);
+  }
 });
 
 App.DagSwimlaneRoute = Em.Route.extend({
-  renderTemplate: renderSwimlanes,
+
 	model: function(params) {
-		var model = this.modelFor('dag'),
-		    queryParams = {'primaryFilter': 'TEZ_DAG_ID:' + model.id};
+		var model = this.modelFor('dag');
+		var queryParams = {'primaryFilter': 'TEZ_DAG_ID:' + model.id};
 		this.store.unloadAll('task_attempt');
 		return this.store.findQuery('task_attempt', queryParams);
 	},
-	setupController: setupControllerFactory()
-});
 
-/* --- Task related routes --- */
-
-App.TaskRoute = Em.Route.extend({
-  model: function(params) {
-    return this.store.find('task', params.task_id);
-  },
-  setupController: setupControllerFactory('Task: %@', 'id')
+	setupController: function(controller, model) {
+		this._super(controller, model);
+	}
 });
 
 App.TasksRoute = Em.Route.extend({
@@ -142,16 +126,46 @@ App.TasksRoute = Em.Route.extend({
     parentType: App.Helpers.misc.defaultQueryParamsConfig,
     parentID: App.Helpers.misc.defaultQueryParamsConfig
   },
-  setupController: setupControllerFactory()
+
+  setupController: function(controller, model) {
+    this._super(controller, model);
+    controller.loadData();
+  }
 });
 
-/* --- Vertex related routes --- */
+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);
+  }
+});
 
 App.VertexRoute = Em.Route.extend({
   model: function(params) {
     return this.store.find('vertex', params.vertex_id);
   },
-  setupController: setupControllerFactory('Vertex: %@ (%@)', 'name', '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);
+  }
 });
 
 App.VertexInputsRoute = Em.Route.extend({
@@ -161,44 +175,82 @@ App.VertexInputsRoute = Em.Route.extend({
   }
 });
 
-App.VertexInputConfigsRoute = Em.Route.extend({
-  renderTemplate: renderConfigs,
+App.DagTasksRoute = Em.Route.extend({
+  queryParams: {
+    status: App.Helpers.misc.defaultQueryParamsConfig,
+    vertex_id: App.Helpers.misc.defaultQueryParamsConfig 
+  },
+
   setupController: function(controller, model) {
-    this._super(controller, model)
-    controller.set('needToShowInputDetails', true);
+    this._super(controller, model);
+    controller.loadData();
   }
 });
 
-App.VertexInputRoute = Em.Route.extend({
-  model: function (params) {
-    var model = this.modelFor('vertex');
-    return model.get('inputs').findBy('id', params.input_id);
+App.DagVerticesRoute = Em.Route.extend({
+  queryParams: {
+    status: App.Helpers.misc.defaultQueryParamsConfig 
   },
-  setupController: setupControllerFactory()
+
+  setupController: function(controller, model) {
+    this._super(controller, model);
+    controller.loadData();
+  }
 });
 
-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);
+App.VertexTasksRoute = Em.Route.extend({
+  queryParams: {
+    status: App.Helpers.misc.defaultQueryParamsConfig
   },
-  setupController: setupControllerFactory()
+
+  setupController: function(controller, model) {
+    this._super(controller, model);
+    controller.loadData();
+  }
 });
 
-/* --- Task  related routes--- */
+App.VertexTaskAttemptsRoute = Em.Route.extend({
+  queryParams: {
+    status: App.Helpers.misc.defaultQueryParamsConfig
+  },
+
+  setupController: function(controller, model) {
+    this._super(controller, model);
+    controller.loadData();
+  }
+});
 
 App.TaskAttemptsRoute = Em.Route.extend({
-  renderTemplate: renderTableWithSpinner,
   queryParams: {
     status: App.Helpers.misc.defaultQueryParamsConfig 
   },
-  setupController: setupControllerFactory('Task Attempt: %@', 'id')
+
+  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');
+  }
 });
 
-/* --- Tez-app related routes --- */
+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);
+  }
+});
 
 App.TezAppRoute = Em.Route.extend({
   model: function(params) {
@@ -211,44 +263,22 @@ App.TezAppRoute = Em.Route.extend({
       });
     });
   },
-  setupController: setupControllerFactory('Application: %@', 'id')
+  setupController: function(controller, model) {
+    $(document).attr('title', 'Application: %@'.fmt(model.id));
+    this._super(controller, model);
+  }
 });
 
 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()
-});
 
-App.TezAppConfigsRoute = Em.Route.extend({
-  renderTemplate: renderConfigs
+  setupController: function(controller, model) {
+    this._super(controller, model);
+    controller.loadData();
+  }
 });
-
-/* --- 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/6b7709bd/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 af30ee9..00222e3 100644
--- a/tez-ui/src/main/webapp/app/styles/main.less
+++ b/tez-ui/src/main/webapp/app/styles/main.less
@@ -16,144 +16,19 @@
  * 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}
 }
 
-/* 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;
-}
+/* colors */
+@success-color: limegreen;
+@error-color: crimson; 
+@warning-color: orange;
 
+/* misc helpers */
 .align-right {
 	float: right;
 }
@@ -162,16 +37,24 @@ body, html, body > .ember-view {
 	float: left;
 }
 
+.align-clear {
+	clear: both;
+}
+
 .margin-small {
 	margin: 15px;
 }
 
-.margin-small-vertical {
+.margin-small-horizontal {
 	margin: 15px 0px;
 }
 
-.margin-small-horizontal {
-  margin: 0px 15px;
+.margin-medium {
+	margin: 30px;
+}
+
+.margin-medium-horizontal {
+  margin: 30px 0px;
 }
 
 .type-table {
@@ -282,6 +165,7 @@ div.indent {
 
 .countertable {
   width: 100%;
+  .margin-medium;
 
   th, td {
     border: 1px solid #dcdcdc;
@@ -308,6 +192,17 @@ div.indent {
   }
 }
 
+.breadcrumb-container {
+  .margin-small;
+
+  margin-left: 0px;
+
+  i {
+    .fa;
+    .fa-icon(angle-double-right);
+  }
+}
+
 .kv-table {
   width: 100%;
   margin-top: 10px;
@@ -332,23 +227,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;
 }
 
-.table-container {
-  min-height: 380px;
+.input-dirty {
+	background-color: yellow;
 }
 
-.input-dirty {
-  background-color: yellow;
+.table-container {
+	height: 380px;
 }

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 10d939e..7b35f42 100644
--- a/tez-ui/src/main/webapp/app/templates/application.hbs
+++ b/tez-ui/src/main/webapp/app/templates/application.hbs
@@ -16,30 +16,6 @@
  * limitations under the License.
 }}
 
-<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
+<div style="width: 95%; margin: 0 auto;">
+  {{outlet}}
+</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 8abf055..d6d5e2d 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-small-horizontal' style="margin-bottom:10px;">
+  <div class='align-left margin-medium-horizontal'>
     <table class='detail-list'>
       <thead>
         <tr>

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 e41e8f4..ecebc21 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'>
+<div class='table-container margin-medium' style='width: 50%;'>
   {{counter-table-component data=counterGroups}}
 </div>

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 b7d3da9..1487aef 100644
--- a/tez-ui/src/main/webapp/app/templates/dag.hbs
+++ b/tez-ui/src/main/webapp/app/templates/dag.hbs
@@ -1,57 +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.
-}}
+{{partial "utils/pageHeader"}}
 
-<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>
+<div class='breakcrumb-container'>
+  {{#link-to 'dags'}}All Dags{{/link-to}}
+</div>
 
 {{#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-vertical'>
-    {{outlet}}
-  </div>
+	</div>
+	<div class='margin-small'>
+		{{outlet}}
+	</div>
 {{else}}
-  {{partial 'partials/loading-spinner'}}
+		{{partial 'utils/loadingSpinner'}}	
 {{/unless}}
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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
new file mode 100644
index 0000000..af40041
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dag/tasks.hbs
@@ -0,0 +1,49 @@
+{{!
+* 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/6b7709bd/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 980e84b..10784dd 100644
--- a/tez-ui/src/main/webapp/app/templates/dags.hbs
+++ b/tez-ui/src/main/webapp/app/templates/dags.hbs
@@ -16,23 +16,43 @@
  * limitations under the License.
 }}
 
-<ul class="breadcrumb">
-  <li class="active">All Dags</li>
-</ul>
+{{partial 'utils/pageHeader'}}
 
 {{#unless loading}}
   <div class='margin-small'>
-    <div class="horizontal-half align-children-left">
+    <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'>
       Number of Dags to Show
       {{view Ember.Select 
         content=countOptions 
         value=count
       }}
-    </div><div class="horizontal-half align-children-right">
-      {{partial 'partials/table-controls'}}
-    </div>
+    </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>
-  {{partial 'partials/table'}}
 {{else}}
-  {{partial 'partials/loading-spinner'}}
+  {{partial 'utils/loadingSpinner'}}
 {{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 0eb6661..0e3ee97 100644
--- a/tez-ui/src/main/webapp/app/templates/error_.hbs
+++ b/tez-ui/src/main/webapp/app/templates/error_.hbs
@@ -1,3 +1,5 @@
+{{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/6b7709bd/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 81f24e4..cf6a80b 100644
--- a/tez-ui/src/main/webapp/app/templates/task.hbs
+++ b/tez-ui/src/main/webapp/app/templates/task.hbs
@@ -16,40 +16,56 @@
 * limitations under the License.
 }}
 
-<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>
+{{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>
 
 {{#unless loading}}
-  <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>
+	{{!--
+	<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}}
 {{else}}
-  {{partial 'partials/loading-spinner'}}
+		{{partial 'utils/loadingSpinner'}}	
 {{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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
new file mode 100644
index 0000000..1f9970d
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task/attempts.hbs
@@ -0,0 +1,31 @@
+{{#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/6b7709bd/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 7aa3073..4fbf0f1 100644
--- a/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
+++ b/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
@@ -1,21 +1,3 @@
-{{!
-* 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/6b7709bd/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 a10ee3d..dc7c386 100644
--- a/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
+++ b/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
@@ -16,45 +16,51 @@
 * limitations under the License.
 }}
 
-<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>
+{{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>
 
 {{#unless loading}}
-  <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>
+	<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}}
 {{else}}
-  {{partial 'partials/loading-spinner'}}
+		{{partial 'utils/loadingSpinner'}}	
 {{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 184eed3..34c7fff 100644
--- a/tez-ui/src/main/webapp/app/templates/tasks.hbs
+++ b/tez-ui/src/main/webapp/app/templates/tasks.hbs
@@ -16,10 +16,36 @@
  * limitations under the License.
 }}
 
-<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>
+{{partial 'utils/pageHeader'}}
 
-{{partial "common/table-with-spinner"}}
\ No newline at end of file
+{{#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/6b7709bd/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 7fd5a59..64c4fc8 100644
--- a/tez-ui/src/main/webapp/app/templates/tez-app.hbs
+++ b/tez-ui/src/main/webapp/app/templates/tez-app.hbs
@@ -16,11 +16,7 @@
 * limitations under the License.
 }}
 
-<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>
-
+{{partial "utils/pageHeader"}}
 {{#unless loading}}
   <div class='type-table fill-full '>
     <div class='align-left'>
@@ -41,9 +37,7 @@
       {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
     </div>
   </div>
-  <div class='margin-small-vertical'>
-    {{outlet}}
-  </div>
+  {{outlet}}
 {{else}}
-  {{partial 'partials/loading-spinner'}}
+    {{partial 'utils/loadingSpinner'}}
 {{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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
new file mode 100644
index 0000000..c478edb
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/tez-app/dags.hbs
@@ -0,0 +1,49 @@
+{{!
+* 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/6b7709bd/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
new file mode 100644
index 0000000..e4f1dfa
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/utils/_loadingSpinner.hbs
@@ -0,0 +1,3 @@
+<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/6b7709bd/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
new file mode 100644
index 0000000..632aeb5
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/utils/_pageHeader.hbs
@@ -0,0 +1,7 @@
+<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/6b7709bd/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 c56e2cd..848b0c6 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex.hbs
@@ -16,14 +16,16 @@
 * limitations under the License.
 }}
 
-<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>
+{{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>
 
 {{#unless loading}}
-  <div class='type-table margin-small-horizontal fill-full'>
+  <div class='type-table fill-full '>
     <div class='align-left'>
       <table class='detail-list'>
         <tbody>
@@ -42,9 +44,7 @@
       {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
     </div>
   </div>
-  <div class='margin-small-vertical'>
-    {{outlet}}
-  </div>
+  {{outlet}}
 {{else}}
-  {{partial 'partials/loading-spinner'}}
+    {{partial 'utils/loadingSpinner'}}
 {{/unless}}
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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 6f0b5fd..b6ca986 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex/inputs.hbs
@@ -18,13 +18,35 @@
 
 {{#unless loading}}
   {{#if inputsAvailable}}
-    <div class='margin-small align-children-right'>
-      {{partial 'partials/table-controls'}}
+    <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>
-    {{partial 'partials/table'}}
   {{else}}
     <h1>Inputs are not available!</h1>
   {{/if}}
 {{else}}
-  {{partial 'utils/loading-spinner'}}
+  {{partial 'utils/loadingSpinner'}}
 {{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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
new file mode 100644
index 0000000..2745e08
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/swimlane.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 id="swimlane">
+  {{#view App.SwimlanesView contentBinding="controller.model.content"}}
+  {{/view}}
+</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/6b7709bd/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
new file mode 100644
index 0000000..6525358
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/task_attempts.hbs
@@ -0,0 +1,49 @@
+{{!
+* 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/6b7709bd/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
new file mode 100644
index 0000000..6525358
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs
@@ -0,0 +1,49 @@
+{{!
+* 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