tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jeag...@apache.org
Subject [19/53] tez git commit: TEZ-1708. Make UI part of TEZ build process. (Sreenath Somarajapuram via hitesh)
Date Wed, 10 Dec 2014 03:33:42 GMT
http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..2c1714a
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/styles/main.less
@@ -0,0 +1,178 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../bower_components/font-awesome/less/font-awesome";
+
+.fa-icon(@name) {
+    @content: "fa-var-@{name}";
+    &:before {content: @@content}
+}
+
+/* colors */
+@success-color: limegreen;
+@error-color: crimson; 
+@warning-color: orange;
+
+/* misc helpers */
+.align-right {
+	float: right;
+}
+
+.align-left {
+	float: left;
+}
+
+.align-clear {
+	clear: both;
+}
+
+.margin-small {
+	margin: 15px;
+}
+
+.margin-small-horizontal {
+	margin: 15px 0px;
+}
+
+.margin-medium {
+	margin: 30px;
+}
+
+.type-table {
+	display: table;
+}
+
+.fill-full {
+	width: 100%;
+	height: 100%;
+}
+
+/* Navigation */
+.page-nav-link {
+	.fa;
+	//TODO: change this and remove below .fa-3x;
+	font-size: 2.5em;
+	cursor: pointer;
+	color: black;
+
+	&.disabled {
+		pointer-events: none;
+		color:lightgray;
+	}
+
+	&.nav-first {
+		.fa-icon(arrow-circle-o-left);
+	}
+
+	&.nav-prev {
+		.fa-icon(arrow-circle-left)
+	}
+
+	&.nav-next {
+		.fa-icon(arrow-circle-right);
+	}
+}
+
+.pill-container {
+	display: table-cell;
+	margin-right: 30px;
+
+	a {
+		height: 30px !important;
+		padding: 5px 15px !important;
+	}
+}
+
+/* dag page */
+.detail-list {
+	table-layout: fixed;
+	overflow: hidden;
+	white-space: nowrap;
+
+	td {
+		padding: 0px 20px 0px 0px;
+	}
+
+	td:first-child {
+		width:120px;
+	}
+}
+
+/* status related */
+.task-status {
+	.fa;
+	.fa-lg;
+
+	&.success {
+		.fa-icon(check-circle);
+		color: @success-color;
+	}
+
+	&.failed {
+		.fa-icon(exclamation-circle);
+		color: @error-color;
+	}
+
+  &.killed {
+    .fa-icon(exclamation-circle);
+    color: @warning-color;
+  }
+
+	&.warning {
+		.fa-icon(exclamation-triangle);
+		color: @warning-color;
+	}
+}
+
+div.indent {
+	margin: 0px 0px 0px 20px;
+	i {
+		.fa;
+		.fa-icon(angle-double-right);
+	}
+}
+
+.countertable-group-header {
+	background-color: lightgray;
+}
+
+.countertable-row {
+	margin: 0px 0px 0px 15px;
+}
+
+.inline-display {
+	display: inline;
+}
+
+.disabled-icon {
+		pointer-events: none;
+		color:lightgray;
+}
+
+.enabled-icon {
+	cursor: pointer;
+	color: black;
+}
+
+.input-dirty {
+	background-color: yellow;
+}
+
+.table-container {
+	height: 380px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/styles/swimlanes.css
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/swimlanes.css b/tez-ui/src/main/webapp/app/styles/swimlanes.css
new file mode 100644
index 0000000..ad8a1d0
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/styles/swimlanes.css
@@ -0,0 +1,44 @@
+.svg {
+  shape-rendering: crispEdges;
+}
+
+.axis {
+  font: 10px sans-serif;
+}
+
+.x.axis path {
+  display: none;
+}
+
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.mini text {
+  font: 12px sans-serif;
+  fill: black;
+}
+
+.container {
+  fill: lightblue;
+  stroke-width: 6;
+}
+
+.task_attempt {
+  fill: slategray;
+  stroke-width: 6;
+}
+
+div.tooltip {
+  position: absolute;
+  text-align: left;
+  width: 270px;
+  height: 48px;
+  padding: 6px;
+  font: 12px sans-serif;
+  background: lightsteelblue;
+  border: 0px;
+  border-radius: 8px;
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..7b35f42
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/application.hbs
@@ -0,0 +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 style="width: 95%; margin: 0 auto;">
+  {{outlet}}
+</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/components/extended-table/extable.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/extended-table/extable.hbs b/tez-ui/src/main/webapp/app/templates/components/extended-table/extable.hbs
new file mode 100644
index 0000000..482642e
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/components/extended-table/extable.hbs
@@ -0,0 +1,12 @@
+{{#if controller.hasHeader}}
+  {{view Ember.Table.HeaderTableContainer}}
+{{/if}}
+{{#if controller.hasFilter}}
+	{{view App.ExTable.FilterTableContainer}}
+{{/if}}
+{{view Ember.Table.BodyTableContainer}}
+{{#if controller.hasFooter}}
+  {{view Ember.Table.FooterTableContainer}}
+{{/if}}
+{{view Ember.Table.ScrollContainer}}
+{{view Ember.Table.ColumnSortableIndicator}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-cell.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-cell.hbs b/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-cell.hbs
new file mode 100644
index 0000000..a29906b
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-cell.hbs
@@ -0,0 +1,7 @@
+<div class="ember-table-content-container" style='cursor: auto;'>
+  <span class="ember-table-content" style='white-space: nowrap; cursor: auto;'>
+    {{#if view.content.isFilterable}}
+    	{{view App.ExTable.FilterField filterValueBinding='view.content.columnFilterValue' class='inline-display'}}
+    {{/if}}
+  </span>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-container.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-container.hbs b/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-container.hbs
new file mode 100644
index 0000000..b5e73d9
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-container.hbs
@@ -0,0 +1,15 @@
+<div class="ember-table-table-fixed-wrapper">
+  {{#if controller.numFixedColumns}}
+    {{view App.ExTable.FilterBlock classNames="ember-table-left-table-block"
+      columnsBinding="controller.fixedColumns"
+      widthBinding="controller._fixedBlockWidth"
+      heightBinding="controller.filterHeight"
+    }}
+  {{/if}}
+  {{view App.ExTable.FilterBlock classNames="ember-table-right-table-block"
+    columnsBinding="controller.tableColumns"
+    scrollLeftBinding="controller._tableScrollLeft"
+    widthBinding="controller._tableBlockWidth"
+    heightBinding="controller.filterHeight"
+  }}
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-row.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-row.hbs b/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-row.hbs
new file mode 100644
index 0000000..453b76e
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/components/extended-table/filter-row.hbs
@@ -0,0 +1,5 @@
+{{view Ember.MultiItemViewCollectionView
+  contentBinding="view.content"
+  itemViewClassField="filterCellViewClass"
+  widthBinding="controller._tableColumnsWidth"
+}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs b/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs
new file mode 100644
index 0000000..85a254c
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs
@@ -0,0 +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.
+}}
+
+<i {{bind-attr class=':page-nav-link :nav-first hasPrev:enabled:disabled'}} {{action 'gotoFirst'}}></i>
+<i {{bind-attr class=':page-nav-link :nav-prev hasPrev:enabled:disabled'}} {{action 'gotoPrev'}}></i>
+<i {{bind-attr class=':page-nav-link :nav-next hasNext:enabled:disabled'}} {{action 'gotoNext'}}></i>

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..3908f2f
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dag.hbs
@@ -0,0 +1,35 @@
+{{partial "utils/pageHeader"}}
+{{#unless loading}}
+	<div class='type-table fill-full margin-small'>
+		<div class='align-left'>
+
+			<table class='detail-list'>
+				<tbody>
+					<tr>
+						<td>{{t common.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 class='pill-container align-right'>
+			{{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
+		</div>
+
+	</div>
+	<div class='margin-small'>
+		{{outlet}}
+	</div>
+{{else}}
+		{{partial 'utils/loadingSpinner'}}	
+{{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/dag/counters.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag/counters.hbs b/tez-ui/src/main/webapp/app/templates/dag/counters.hbs
new file mode 100644
index 0000000..ecebc21
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dag/counters.hbs
@@ -0,0 +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='table-container margin-medium' style='width: 50%;'>
+  {{counter-table-component data=counterGroups}}
+</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/dag/index.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag/index.hbs b/tez-ui/src/main/webapp/app/templates/dag/index.hbs
new file mode 100644
index 0000000..36a44fb
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dag/index.hbs
@@ -0,0 +1,62 @@
+{{!
+* 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'>
+			<tbody>
+				<tr>
+					<td>{{t common.status}}</td>
+					<td>
+						{{status}}
+						<i {{bind-attr class=':task-status taskIconStatus'}}></i>
+					</td>
+          <td>
+            {{#if hasFailedTasks}}
+              <a href='{{unbound failedTasksLink}}'>FailedTasks</a>
+            {{/if}}
+          </td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+	<div class='align-right'>
+		<table class='detail-list'>
+			<tbody>
+				<tr>
+					<td>{{t common.time.start}}</td>
+					<td>{{formatUnixTimestamp startTime}}</td>
+				</tr>
+				<tr>
+					<td>{{t common.time.end}}</td>
+					<td>{{formatUnixTimestamp endTime}}</td>
+				</tr>
+				<tr>
+					<td>{{t common.time.duration}}</td>
+					<td>{{formatDuration startTime endTime}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+
+{{#if diagnostics}}
+	{{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}
+    {{formatDiagnostics diagnostics}}
+	{{/bs-panel}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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/e18a1fa7/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..bbe9b40
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dag/tasks.hbs
@@ -0,0 +1,28 @@
+{{#unless loading}}
+	<div class='margin-small'>
+		<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/e18a1fa7/tez-ui/src/main/webapp/app/templates/dag/vertices.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/dag/vertices.hbs b/tez-ui/src/main/webapp/app/templates/dag/vertices.hbs
new file mode 100644
index 0000000..04f631b
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dag/vertices.hbs
@@ -0,0 +1,28 @@
+{{#unless loading}}
+	<div class='margin-small'>
+		<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/e18a1fa7/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
new file mode 100644
index 0000000..4ecf3f3
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/dags.hbs
@@ -0,0 +1,55 @@
+{{!
+ * 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'}}
+
+{{#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='align-right'>
+      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>
+{{else}}
+  {{partial 'utils/loadingSpinner'}}
+{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..0e3ee97
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/error_.hbs
@@ -0,0 +1,6 @@
+{{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/e18a1fa7/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
new file mode 100644
index 0000000..112dc92
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task.hbs
@@ -0,0 +1,62 @@
+{{!
+* 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"}}
+{{#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>{{t common.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 'utils/loadingSpinner'}}	
+{{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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..04f631b
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task/attempts.hbs
@@ -0,0 +1,28 @@
+{{#unless loading}}
+	<div class='margin-small'>
+		<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/e18a1fa7/tez-ui/src/main/webapp/app/templates/task/counters.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/task/counters.hbs b/tez-ui/src/main/webapp/app/templates/task/counters.hbs
new file mode 100644
index 0000000..4c082e1
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task/counters.hbs
@@ -0,0 +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='table-container margin-medium' style='width: 50%;'>
+  {{counter-table-component data=counterGroups}}
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/task/index.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/task/index.hbs b/tez-ui/src/main/webapp/app/templates/task/index.hbs
new file mode 100644
index 0000000..eda26f0
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task/index.hbs
@@ -0,0 +1,57 @@
+{{!
+* 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'>
+			<tbody>
+				<tr>
+					<td>{{t common.status}}</td>
+					<td>
+						{{status}}
+						<i {{bind-attr class=':task-status taskIconStatus'}}></i>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+	<div class='align-right'>
+		<table class='detail-list'>
+			<tbody>
+				<tr>
+					<td>{{t common.time.start}}</td>
+					<td>{{formatUnixTimestamp startTime}}</td>
+				</tr>
+				<tr>
+					<td>{{t common.time.end}}</td>
+					<td>{{formatUnixTimestamp endTime}}</td>
+				</tr>
+				<tr>
+					<td>{{t common.time.duration}}</td>
+					<td>{{formatDuration startTime endTime}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+
+{{#if diagnostics}}
+	{{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}
+    {{formatDiagnostics diagnostics}}
+	{{/bs-panel}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/taskAttempt/counters.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/taskAttempt/counters.hbs b/tez-ui/src/main/webapp/app/templates/taskAttempt/counters.hbs
new file mode 100644
index 0000000..4c082e1
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/taskAttempt/counters.hbs
@@ -0,0 +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='table-container margin-medium' style='width: 50%;'>
+  {{counter-table-component data=counterGroups}}
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..db17b2e
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
@@ -0,0 +1,43 @@
+<div class='type-table fill-full margin-small-horizontal'>
+	<div class='align-left'>
+		<table class='detail-list'>
+			<tbody>
+				<tr>
+					<td>{{t common.status}}</td>
+					<td>
+						{{status}}
+						<i {{bind-attr class=':task-status taskIconStatus'}}></i>
+					</td>
+				</tr>
+				<tr>
+					<td>Container</td>
+					<td>{{containerId}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+	<div class='align-right'>
+		<table class='detail-list'>
+			<tbody>
+				<tr>
+					<td>{{t common.time.start}}</td>
+					<td>{{formatUnixTimestamp startTime}}</td>
+				</tr>
+				<tr>
+					<td>{{t common.time.end}}</td>
+					<td>{{formatUnixTimestamp endTime}}</td>
+				</tr>
+				<tr>
+					<td>{{t common.time.duration}}</td>
+					<td>{{formatDuration startTime endTime}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+
+{{#if diagnostics}}
+	{{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}
+    {{formatDiagnostics diagnostics}}
+	{{/bs-panel}}
+{{/if}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..d09f28d
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
@@ -0,0 +1,51 @@
+{{!
+* 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"}}
+{{#unless loading}}
+	<div class='type-table fill-full '>
+			<div class='align-left'>
+				<table class='detail-list'>
+					<tbody>
+						<tr>
+							<td>{{t common.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 'utils/loadingSpinner'}}	
+{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..4c84164
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/tasks.hbs
@@ -0,0 +1,58 @@
+{{!
+ * 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'}}
+
+{{#unless loading}}
+	<div class='margin-small'>
+		<span class='align-left'>
+			{{page-nav-component
+				hasPrev=hasPrev
+				hasNext=hasNext
+				navNext='navigateNext'
+				navPrev='navigatePrev'
+				navFirst='navigateFirst'
+			}}
+		</span>
+		<div class='align-clear'> </div>
+	</div>
+
+	<div class='table-container'>
+	  {{table-component
+	    hasFooter=false
+	    columnsBinding='columns'
+	    contentBinding='sortedContent'
+	    forceFillColumns=true
+	  }}
+	</div>
+
+	<div class='margin-small'>
+		<span class='align-left'>
+			{{page-nav-component
+				hasPrev=hasPrev
+				hasNext=hasNext
+				navNext='navigateNext'
+				navPrev='navigatePrev'
+				navFirst='navigateFirst'
+			}}
+		</span>
+		<div class='align-clear'></div>
+	</div>
+{{else}}
+	{{partial 'utils/loadingSpinner'}}	
+{{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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/e18a1fa7/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/e18a1fa7/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
new file mode 100644
index 0000000..54d41fb
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex.hbs
@@ -0,0 +1,43 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+{{partial "utils/pageHeader"}}
+{{#unless loading}}
+  <div class='type-table fill-full '>
+    <div class='align-left'>
+      <table class='detail-list'>
+        <tbody>
+          <tr>
+            <td>{{t common.id}}</td>
+            <td>{{id}}</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 'utils/loadingSpinner'}}
+{{/unless}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/app/templates/vertex/counters.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/counters.hbs b/tez-ui/src/main/webapp/app/templates/vertex/counters.hbs
new file mode 100644
index 0000000..4c082e1
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/counters.hbs
@@ -0,0 +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='table-container margin-medium' style='width: 50%;'>
+  {{counter-table-component data=counterGroups}}
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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
new file mode 100644
index 0000000..ba2955e
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
@@ -0,0 +1,86 @@
+{{!
+* 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'>
+      <tbody>
+        <tr>
+          <td>Vertex Name</td>
+          <td>
+            {{name}}
+          </td>
+        </tr>
+        <tr>
+          <td>{{t common.status}}</td>
+          <td>
+            <i {{bind-attr class=':task-status iconStatus'}}></i>
+            {{status}}
+          </td>
+        </tr>
+        <tr>
+          <td>Total Tasks</td>
+          <td>{{numTasks}}</td>
+        </tr>
+        <tr>
+          <td>Successful Tasks</td>
+          <td>{{sucessfulTasks}}</td>
+        </tr>
+        <tr>
+          <td>Failed Tasks</td>
+          <td>
+            {{failedTasks}}
+          </td>
+          <td>
+            {{#if hasFailedTasks}}
+              <a href='{{unbound failedTasksLink}}'>FailedTasks</a>
+            {{/if}}
+          </td>
+        </tr>
+        <tr>
+          <td>Killed Tasks</td>
+          <td>{{killedTasks}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class='align-right'>
+    <table class='detail-list'>
+      <tbody>
+        <tr>
+          <td>{{t common.time.start}}</td>
+          <td>{{formatUnixTimestamp startTime}}</td>
+        </tr>
+        <tr>
+          <td>{{t common.time.end}}</td>
+          <td>{{formatUnixTimestamp endTime}}</td>
+        </tr>
+        <tr>
+          <td>{{t common.time.duration}}</td>
+          <td>{{formatDuration startTime endTime}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{{#if diagnostics}}
+  {{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}
+    {{formatDiagnostics diagnostics}}
+  {{/bs-panel}}
+{{/if}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/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/e18a1fa7/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..7224117
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs
@@ -0,0 +1,46 @@
+{{!
+* 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>
+    <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/e18a1fa7/tez-ui/src/main/webapp/bower.json
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/bower.json b/tez-ui/src/main/webapp/bower.json
new file mode 100644
index 0000000..efec4ec
--- /dev/null
+++ b/tez-ui/src/main/webapp/bower.json
@@ -0,0 +1,32 @@
+{
+  "name": "tez-ui",
+  "version": "0.0.1",
+  "dependencies": {
+    "ember": "1.7.0",
+    "moment": ">=2.7.0",
+    "ember-data": "1.0.0-beta.10",
+    "ember-i18n": "1.6.*",
+    "bootstrap": "3.0.0",
+    "ember-json-mapper": "master",
+    "jquery-ui": ">=1.11",
+    "d3": "3.4.11",
+    "ember-addons.bs_for_ember": "~0.7.0",
+    "ember-table": "~0.2.2"
+  },
+  "devDependencies": {
+    "ember-mocha-adapter": "0.1.2",
+    "handlebars": "~2.0.0",
+    "jquery-ui": "~1.11.1",
+    "jquery-mousewheel": "~3.1.12",
+    "antiscroll": "*",
+    "font-awesome": "~4.2.0"
+  },
+  "resolutions": {
+    "handlebars": "~1.3.0",
+    "jquery-ui": ">=1.11",
+    "jquery-mousewheel": "~3.1.12",
+    "antiscroll": "fa3f81d3c0",
+    "font-awesome": "~4.2.0",
+    "ember": "1.7.0"
+  }
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/application_attempt_page.html
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/application_attempt_page.html b/tez-ui/src/main/webapp/original/application_attempt_page.html
new file mode 100644
index 0000000..956d54f
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/application_attempt_page.html
@@ -0,0 +1,44 @@
+<!-- /**
+ * 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.
+ */ -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>TEZ UI</title>
+    <script src="lib/jquery.js"></script>
+    <script src="application_attempt_page.js"></script>
+    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
+    <script type="text/javascript" charset="utf8" src="lib/jquery.dataTables.min.js"></script>
+  </head>
+
+  <body>
+    <div>
+      <table id="dag_table" class="display">
+        <thead>
+          <tr>
+            <th>Dag ID</th>
+            <th>Dag Name</th>
+            <th>Start Time</th>
+            <th>Time Taken</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/application_attempt_page.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/application_attempt_page.js b/tez-ui/src/main/webapp/original/application_attempt_page.js
new file mode 100644
index 0000000..fedcc32
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/application_attempt_page.js
@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+$(document).ready( function () {
+  var id=window.sessionStorage.getItem('application_attempt_id');
+  var hostname=window.sessionStorage.getItem('hostname');
+  var port=window.sessionStorage.getItem('port');
+  var url= 'http://'+hostname+':'+port+'/ws/v1/timeline/TEZ_APPLICATION_ATTEMPT/' + id + '?fields=relatedentities';
+  var dag_name,start_time,status,initTime,timetaken,epoch;
+  var dagtable = $('#dag_table').DataTable();
+  $.getJSON(url, function(entity) {
+    $.each(entity.relatedentities.TEZ_DAG_ID, function(i,dag_id) {
+      var dagurl= 'http://'+hostname+':'+port+'/ws/v1/timeline/TEZ_DAG_ID/'+dag_id;
+      $.getJSON(dagurl, function(dagent) {
+        dag_name=dagent.primaryfilters.dagName;					
+        epoch=dagent.otherinfo.startTime;
+        start_time=new Date(epoch);
+        status=dagent.otherinfo.status;
+        epoch=dagent.otherinfo.initTime;
+        initTime=new Date(epoch);
+        timetaken=dagent.otherinfo.timeTaken;
+				var callback= 'vcallback("' + dag_id + '");>';
+        dagtable.row.add([
+					'<a href="dag_page.html" onclick=' + callback + dag_id + " </a>",
+          dag_name,
+          start_time.toGMTString(),
+          timetaken,
+          status
+          ]).draw();
+      });
+    });
+  });
+});
+
+function vcallback(id) {
+	window.sessionStorage.setItem('dag_id', id);
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/application_page.html
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/application_page.html b/tez-ui/src/main/webapp/original/application_page.html
new file mode 100644
index 0000000..482d70e
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/application_page.html
@@ -0,0 +1,40 @@
+<!-- /**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ -->
+<!DOCTYPE html>
+<html>
+  <script src="lib/jquery.js"></script>
+  <script src="application_page.js"></script>
+  <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
+  <script type="text/javascript" charset="utf8" src="lib/jquery.dataTables.min.js"></script>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>TEZ UI</title>
+  </head>
+  <body>
+    <table id="table_id" class="display">
+      <thead>
+        <tr>
+          <th>Submit Time</th>
+          <th>Start Time</th>
+          <th>Application ID</th>
+          <th>User</th>
+        </tr>
+      </thead>
+    </table>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/application_page.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/application_page.js b/tez-ui/src/main/webapp/original/application_page.js
new file mode 100644
index 0000000..2df5466
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/application_page.js
@@ -0,0 +1,52 @@
+/**
+ * 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.
+ */
+$(document).ready( function () {
+   var t = $('#table_id').DataTable();
+   var hostname=window.sessionStorage.getItem('hostname');
+   var port=window.sessionStorage.getItem('port');
+   var url='http://'+hostname+':'+port+'/ws/v1/timeline/TEZ_APPLICATION_ATTEMPT';
+
+   $.ajax({
+		type:'GET',
+		url:url,
+		dataType:'json',
+		success: function(data)
+		{
+			$.each(data.entities,function(i,entity){
+				var submittime,starttime, epoch_time, id, usr;
+				epoch_time=entity.otherinfo.appSubmitTime;
+				submittime=new Date(epoch_time);
+				epoch_time=entity.starttime;
+				starttime=new Date(epoch_time);
+				id=entity.entity;
+				usr=entity.primaryfilters.user[0];
+				var callback= 'cookiegen("'+ id+'");>';
+				t.row.add([
+					submittime.toGMTString(),
+					starttime.toGMTString(),
+					'<a href="application_attempt_page.html" onclick='+ callback + id+" </a>",
+					usr,
+				]).draw();
+			});	
+		},
+	});
+
+} );
+function cookiegen(id){
+	window.sessionStorage.setItem('application_attempt_id',id);
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/css/jquery.dataTables.min.css
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/css/jquery.dataTables.min.css b/tez-ui/src/main/webapp/original/css/jquery.dataTables.min.css
new file mode 100644
index 0000000..a2c5489
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/css/jquery.dataTables.min.css
@@ -0,0 +1 @@
+table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting{cursor:pointer;*cursor:hand}table.dataTable thead .sorting{background:url("../images/sort_both.png") no-repeat center right}table.dataTable thead .sorting_asc{background:url("../images/sort_asc.png") no-repeat center right}table.dataTable thead .sorting_desc{background:url("../images/sort_desc.png") no-repeat center right}table.dataTable thead .sorting_asc_disabled{background:url("../images/sort_asc_disabled.png") no-repeat center right}table.dataTable 
 thead .sorting_desc_disabled{background:url("../images/sort_desc_disabled.png") no-repeat center right}table.dataTable tbody tr{background-color:#fff}table.dataTable tbody tr.selected{background-color:#b0bed9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbod
 y tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#abb9d3}table.dataTable.hover tbody tr:hover,table.dataTable.hover tbody tr.odd:hover,table.dataTable.hover tbody tr.even:hover,table.dataTable.display tbody tr:hover,table.dataTable.display tbody tr.odd:hover,table.dataTable.display tbody tr.even:hover{background-color:#f5f5f5}table.dataTable.hover tbody tr:hover.selected,table.dataTable.hover tbody tr.odd:hover.selected,table.dataTable.hover tbody tr.even:hover.selected,table.dataTable.display tbody tr:hover.selected,table.dataTable.display tbody tr.odd:hover.selected,table.dataTable.display tbody tr.even:hover.selected{background-color:#a9b7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,tabl
 e.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#f9f9f9}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad4}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:#f5f5f5}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.s
 tripe tbody tr.odd.selected>.sorting_1{background-color:#a6b3cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a7b5ce}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b6d0}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#f9f9f9}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fbfbfb}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fdfdfd}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad4}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable
 .order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#adbbd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.display tbody tr.odd:hover>.sorting_1,table.dataTable.display tbody tr.even:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_1,table.dataTable.order-column.hover tbody tr.even:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.display tbody tr.odd:hover>.sorting_2,table.dataTable.display tbody tr.even:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_2,table.dataTable.order-column.hover tbody tr.even:hover>.sorting_2{background-color:#ebebeb}table.dataTa
 ble.display tbody tr:hover>.sorting_3,table.dataTable.display tbody tr.odd:hover>.sorting_3,table.dataTable.display tbody tr.even:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_3,table.dataTable.order-column.hover tbody tr.even:hover>.sorting_3{background-color:#eee}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.display tbody tr.odd:hover.selected>.sorting_1,table.dataTable.display tbody tr.even:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_1{background-color:#a1aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.display tbody tr.odd:hover.selected>.sorting_2,table.dataTable.display tbody tr.even:hover.selected>.sorting_2,table.dataTable.orde
 r-column.hover tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_2{background-color:#a2afc8}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.display tbody tr.odd:hover.selected>.sorting_3,table.dataTable.display tbody tr.even:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_3{background-color:#a4b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:5px 9px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:5px 9px 3px 9px}table.dataTable.compact tbody th,table.dataTa
 ble.compact tbody td{padding:4px 5px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-he
 ad-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:
 both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #cacaca;background-color:#fff;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradien
 t(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0
 %, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), c
 olor-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_
 wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table,.dataTables_wrapper.no-footer div.dataTables_scrollBody table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width:
  640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}}

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/dag_page.html
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/dag_page.html b/tez-ui/src/main/webapp/original/dag_page.html
new file mode 100644
index 0000000..9dbe9cc
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/dag_page.html
@@ -0,0 +1,74 @@
+<!-- /**
+ * 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.
+ */ -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>TEZ UI</title>
+    <script src="lib/jquery.js"></script>
+    <script src="dag_page.js"></script>
+    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
+    <script type="text/javascript" charset="utf8" src="lib/jquery.dataTables.min.js"></script>
+  </head>
+
+  <body>
+    <div>
+      <center><h2 id=dagid>DAG Id</h2></center>
+      <table id="dag_overview" class="display">
+        <caption>Dag Overview</caption>
+        <thead>
+          <tr>
+            <th>Dag Id</th>
+            <th>Dag Name</th>
+            <th>Start Time</th>
+            <th>End Time</th>
+            <th>Time Taken</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+    <div>
+      <table id='dag_vertex' class='display'>
+        <thead>
+          <tr>
+            <th>Vertex Id</th>
+            <th>Name</th>
+            <th>Start Time</th>
+            <th>End Time</th>
+            <th>Time Taken</th>
+            <th>Task Count</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+    <div id="counters">
+      <table id='counter' class='display'>
+        <thead>
+          <tr>
+            <th>Counter Group</th>
+            <th>Counters</th>
+          </tr>
+        </thead>
+        <tbody id="counterbody">
+        </tbody>
+      </table>
+    </div>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/tez/blob/e18a1fa7/tez-ui/src/main/webapp/original/dag_page.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/original/dag_page.js b/tez-ui/src/main/webapp/original/dag_page.js
new file mode 100644
index 0000000..eb75fee
--- /dev/null
+++ b/tez-ui/src/main/webapp/original/dag_page.js
@@ -0,0 +1,85 @@
+/**
+ * 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.
+ */
+$(document).ready( function () {
+  var dag_id=window.sessionStorage.getItem('dag_id');
+  var hostname=window.sessionStorage.getItem('hostname');
+  var port=window.sessionStorage.getItem('port');
+  var dag_name,start_time,status,initTime,timetaken,epoch;
+  var vertex_table,counters_table,dct;
+  var dagurl= 'http://'+hostname+':'+port+'/ws/v1/timeline/TEZ_DAG_ID/'+dag_id;
+  $.getJSON(dagurl, function(dagent) {
+    dag_name=dagent.otherinfo.dagPlan.dagName;					
+    $('#dagid').text("DAG Id - " + dag_id);
+    startEpoch=dagent.otherinfo.startTime;
+    startTime=new Date(startEpoch);
+    endEpoch=dagent.otherinfo.initTime;
+    endTime=new Date(endEpoch);
+    timeTaken=dagent.otherinfo.timeTaken;
+    status=dagent.otherinfo.status;
+    var dag_overview = $('#dag_overview').DataTable(
+      { "paging": false,
+        "searching": false,
+        "ordering": false,
+        "info": false,
+      });
+    dag_overview.row.add([
+      dag_id,
+      dag_name,
+      startTime.toGMTString(),
+      endTime.toGMTString(),
+      timeTaken,
+      status
+      ]).draw();
+    vertex_table=$('#dag_vertex').DataTable();
+    var vurl='http://'+hostname+':'+port+'/ws/v1/timeline/TEZ_VERTEX_ID?primaryFilter=TEZ_DAG_ID:' + dag_id;
+
+    $.getJSON(vurl, function(vertex_entities) {
+      $.each(vertex_entities.entities, function(i, vertex) {
+        var callback ='vcallback("'+ vertex.entity +'");>';
+        var vertex_id='<a href="vertex_page.html" onclick='+ callback + vertex.entity +" </a>";
+        var vertexStartEpoch=vertex.otherinfo.startTime;
+        var vertexStartTime=new Date(vertexStartEpoch);
+        var vertexEndEpoch=vertex.otherinfo.endTime;
+        var vertexEndTime=new Date(vertexEndEpoch);
+        vertex_table.row.add([vertex_id, vertex.otherinfo.vertexName, vertexStartTime.toGMTString(), vertexEndTime.toGMTString(), vertex.otherinfo.timeTaken, vertex.otherinfo.numTasks, vertex.otherinfo.status]);
+      });
+      vertex_table.draw();
+    });
+    var counterGroupNum = 0;
+    $.each(dagent.otherinfo.counters.counterGroups, function(i, counterGroup){
+      $("<th>Counters</th></tr></thead><tbody><th>" + counterGroup.counterGroupDisplayName + "</th>");
+      $("<tr><th>Counters</th></tr></thead><tbody><th>" + counterGroup.counterGroupDisplayName + "</th><td class='table'><table id='countergroup" + counterGroupNum + "'><thead><tr><th>Name</th><th>Value</th></tr></thead></table></td></tr>").appendTo('#counterbody');
+      var counterGroupDT = $('#countergroup' + counterGroupNum).DataTable();
+      counterGroupNum++;
+      $.each(counterGroup.counters, function(i, counter) {
+        counterGroupDT.row.add([counter.counterDisplayName, counter.counterValue]);
+      });
+      counterGroupDT.draw();
+    });
+    counters_table=$('#counter').DataTable(
+        { "paging": false,
+          "searching": false,
+          "ordering": false,
+          "info": false,
+        });
+  });
+});
+
+function vcallback(id) {
+  window.sessionStorage.setItem('vertid', id);
+}


Mime
View raw message