tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From s...@apache.org
Subject [18/31] tez git commit: TEZ-3227. Tez UI: Replace UI1 with UI2 (sree)
Date Tue, 26 Apr 2016 10:18:49 GMT
http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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
deleted file mode 100644
index fd2f9f5..0000000
--- a/tez-ui/src/main/webapp/app/templates/error.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-{{!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
-}}
-
-<ul class="breadcrumb">
-  <li>{{#link-to 'application'}}<i class="fa fa-home"> All DAGs</i>{{/link-to}} <span class="divider"></span></li>
-  <li class="active">Error</span></li>
-</ul>
-
-<h1>An Error Occurred</h1>

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/input/configs.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/input/configs.hbs b/tez-ui/src/main/webapp/app/templates/input/configs.hbs
deleted file mode 100644
index 83c6ed9..0000000
--- a/tez-ui/src/main/webapp/app/templates/input/configs.hbs
+++ /dev/null
@@ -1,42 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class='margin-small-horizontal' style="margin-bottom:10px;">
-  <table class='detail-list'>
-    <thead>
-      <tr>
-        <th>Source Details</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Name</td>
-        <td>{{inputName}}</td>
-      </tr>
-      <tr>
-        <td>Class</td>
-        <td>{{inputClass}}</td>
-      </tr>
-      <tr>
-        <td>Initializer</td>
-        <td>{{inputInitializer}}</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-{{partial 'partials/configs'}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/loading.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/loading.hbs b/tez-ui/src/main/webapp/app/templates/loading.hbs
new file mode 100644
index 0000000..0b3bb19
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/loading.hbs
@@ -0,0 +1,24 @@
+{{!
+ * 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.
+}}
+
+<h3>Loading...</h3>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
+  </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/output/configs.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/output/configs.hbs b/tez-ui/src/main/webapp/app/templates/output/configs.hbs
deleted file mode 100644
index 3c5dd59..0000000
--- a/tez-ui/src/main/webapp/app/templates/output/configs.hbs
+++ /dev/null
@@ -1,39 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class='margin-small-horizontal' style="margin-bottom:10px;">
-  <table class='detail-list'>
-    <thead>
-      <tr>
-        <th>Sink Details</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>Name</td>
-        <td>{{outputName}}</td>
-      </tr>
-      <tr>
-        <td>Class</td>
-        <td>{{outputClass}}</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-{{partial 'partials/configs'}}
-

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/partials/configs.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/partials/configs.hbs b/tez-ui/src/main/webapp/app/templates/partials/configs.hbs
deleted file mode 100644
index 0370890..0000000
--- a/tez-ui/src/main/webapp/app/templates/partials/configs.hbs
+++ /dev/null
@@ -1,32 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-{{#if configs}}
-  {{load-time-component
-    isRefreshable=isRefreshable
-    time=timeStamp
-    refresh='refresh'
-  }}
-  <div class='table-container margin-small-vertical'>
-    {{kv-table-component data=configs filterExp="^tez."}}
-  </div>
-{{else}}
-  <div class='margin-small-horizontal'>
-    <h4>No configurations available!</h4>
-  </div>
-{{/if}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/partials/loading-spinner.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/partials/loading-spinner.hbs b/tez-ui/src/main/webapp/app/templates/partials/loading-spinner.hbs
deleted file mode 100644
index e6dd388..0000000
--- a/tez-ui/src/main/webapp/app/templates/partials/loading-spinner.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class='align-children-center'>
-  <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/13132ec7/tez-ui/src/main/webapp/app/templates/partials/table-controls.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/partials/table-controls.hbs b/tez-ui/src/main/webapp/app/templates/partials/table-controls.hbs
deleted file mode 100644
index 5cc6840..0000000
--- a/tez-ui/src/main/webapp/app/templates/partials/table-controls.hbs
+++ /dev/null
@@ -1,37 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class='margin-small-horizontal table-control'>
-  <div class="horizontal-half align-children-left">
-    Number of rows
-    {{view Ember.Select
-      content=countOptions
-      value=count
-    }}
-  </div><div class="horizontal-half align-children-right">
-    {{page-nav-component
-      hasPrev=hasPrev
-      hasNext=hasNext
-      page=page
-      navNext='navigateNext'
-      navPrev='navigatePrev'
-      navFirst='navigateFirst'
-    }}
-    <i {{bind-attr class=':fa-action :fa-cog :left-divider'}} {{action 'selectColumns'}}></i>
-  </div>
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/partials/table.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/partials/table.hbs b/tez-ui/src/main/webapp/app/templates/partials/table.hbs
deleted file mode 100644
index 019735f..0000000
--- a/tez-ui/src/main/webapp/app/templates/partials/table.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class='ember-table-container'>
-  {{extended-table-component
-    hasFooter=false
-    enableContentSelection=true
-    columnsBinding="columns"
-    contentBinding="sortedContent"
-    forceFillColumns=true
-    hasFilter=true
-    onFilterUpdated='filterUpdated'
-  }}
-</div>

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/simple-modal.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/simple-modal.hbs b/tez-ui/src/main/webapp/app/templates/simple-modal.hbs
new file mode 100644
index 0000000..71fdb90
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/simple-modal.hbs
@@ -0,0 +1,35 @@
+{{!
+ * 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="modal fade simple-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">{{model.title}}</h4>
+      </div>
+      {{#if model.componentName}}
+        {{component model.componentName content=model.content targetObject=model.targetObject}}
+      {{else}}
+        <div class="modal-body">{{model.content}}</div>
+      {{/if}}
+    </div>
+  </div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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 655ace1..8906371 100644
--- a/tez-ui/src/main/webapp/app/templates/task.hbs
+++ b/tez-ui/src/main/webapp/app/templates/task.hbs
@@ -1,37 +1,20 @@
 {{!
-* 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.
+ * 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.
 }}
 
-<ul class="breadcrumb">
-  <li>{{#link-to 'application'}}<i class="fa fa-home"> All DAGs</i>{{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'dag' dagID}}DAG [ {{dagName}} ]{{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'vertex' vertexID}}Vertex [ {{vertexName}} ] {{/link-to}} <span class="divider"></span></li>
-  <li class="active">Task [ {{index}} ]</li>
-</ul>
-
-{{#unless loading}}
-  <div class='type-table fill-full margin-small-horizontal'>
-    <div class='pill-container align-right'>
-      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-    </div>
-  </div>
-  <div class='margin-small-vertical'>
-    {{outlet}}
-  </div>
-{{else}}
-  {{partial 'partials/loading-spinner'}}
-{{/unless}}
+{{tab-n-refresh tabs=tabs loadTime=loadTime autoRefreshEnabled=polling.active}}
+{{outlet}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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..d36678a
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task/attempts.hbs
@@ -0,0 +1,37 @@
+{{!
+ * 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.
+}}
+
+{{#if loaded}}
+  {{em-table
+    columns=visibleColumns
+    rows=model
+
+    headerComponentNames=headerComponentNames
+
+    definition=definition
+
+    searchAction="searchChanged"
+    sortAction="sortChanged"
+    rowAction="rowCountChanged"
+    pageAction="pageChanged"
+
+    rowsChanged="rowsChanged"
+  }}
+{{else}}
+  {{partial "loading"}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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..649cfe2
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/task/counters.hbs
@@ -0,0 +1,34 @@
+{{!
+ * 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.
+}}
+
+{{#if loaded}}
+  {{em-table
+  columns=columns
+  rows=counters
+
+  rowCount=countersCount
+  definition=definition
+
+  enablePagination=false
+
+  searchAction="searchChanged"
+  sortAction="sortChanged"
+  }}
+{{else}}
+  {{partial "loading"}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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
index 09cd986..5967be1 100644
--- a/tez-ui/src/main/webapp/app/templates/task/index.hbs
+++ b/tez-ui/src/main/webapp/app/templates/task/index.hbs
@@ -1,95 +1,110 @@
 {{!
-* 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.
+ * 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="margin-small-vertical">
-  {{load-time-component
-    isRefreshable=isRefreshable
-    time=timeStamp
-    refresh='refresh'
-  }}
-</div>
-<div class='type-table fill-full margin-small-horizontal'>
-	<div class='align-left'>
-		<table class='detail-list'>
- 			<thead>
- 			        <tr>
- 			           <th colspan=2>Task Details</th>
- 			        </tr>
- 			</thead>
-			<tbody>
-				<tr>
- 					<td>Task ID</td>
-					<td>{{id}}</td>
-				</tr>
-				<tr>
-					<td>Vertex ID</td>
-					<td>{{vertexID}}</td>
-				</tr>
-				<tr>
-					<td>{{t 'common.status'}}</td>
-					<td>
-						<i {{bind-attr class=':task-status taskIconStatus'}}></i> {{taskStatus}}
-					</td>
-				</tr>
-        {{#if progress}}
-        <tr>
-          <td>Progress</td>
-          <td>{{bs-progress-animated progressDecimal=progress}}</td>
-        </tr>
-        {{/if}}
-				<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>
-        <tr>
-          <td>Logs</td>
-          <td>
-            {{#if logsLink.viewUrl}}
-              <a target="_blank" href='//{{unbound logsLink.viewUrl}}'>View</a>
-              &nbsp;
-            {{/if}}
-            {{#if logsLink.downloadUrl}}
-              <a target="_blank" href='{{unbound logsLink.downloadUrl}}' download type="application/octet-stream">Download</a>
-            {{/if}}
-            {{#unless logsLink.viewUrl}}
-              {{#unless logsLink.downloadUrl}}
-                <span class="message">Not Available!</span>
-              {{/unless}}
-            {{/unless}}
-          </td>
-        </tr>
-			</tbody>
-		</table>
-	</div>
-</div>
+{{#if loaded}}
+  <table class='detail-list'>
+    <thead>
+      <tr>
+        <th colspan=2>Details</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Task ID</td>
+        <td>{{model.entityID}}</td>
+      </tr>
+      <tr>
+        <td>Vertex ID</td>
+        <td>{{model.vertexID}}</td>
+      </tr>
+      <tr>
+        <td>Status</td>
+        <td>{{em-table-status-cell content=model.status}}</td>
+      </tr>
+      <tr>
+        <td>Progress</td>
+        <td>{{em-table-progress-cell content=model.progress}}</td>
+      </tr>
+      <tr>
+        <td>Start Time</td>
+        <td>{{date-formatter content=model.startTime}}</td>
+      </tr>
+      <tr>
+        <td>End Time</td>
+        <td>{{date-formatter content=model.endTime}}</td>
+      </tr>
+      <tr>
+        <td>Duration</td>
+        <td>{{txt model.duration type="duration"}}</td>
+      </tr>
+      <tr>
+        <td>Logs</td>
+        <td>
+          {{#if attempts}}
+            {{#each attempts as |attempt|}}
+              <dag class="display-block">
+                Attempt {{attempt.index}} :&nbsp;
+                {{#if attempt.logURL}}
+                  <a href={{attempt.logURL}} target="_blank">
+                    <i class="fa fa-file-o" aria-hidden="true"></i> View
+                  </a>
+                  &nbsp;
+                  <a href={{attempt.logURL}} target="_blank" download>
+                    <i class="fa fa-download" aria-hidden="true"></i> Download
+                  </a>
+                {{else}}
+                  <span class="txt-message">Not Available!</span>
+                {{/if}}
+              </dag>
+            {{/each}}
+          {{else}}
+            <i class="fa fa-spinner fa-spin"></i> Loading...
+          {{/if}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
-{{#if diagnostics}}
-	<div class="margin-small-vertical">
-		{{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger' class="margin-medium-vertical"}}
-			{{formatDiagnostics diagnostics}}
-		{{/bs-panel}}
-	</div>
+  <table class='detail-list'>
+    <thead>
+    <tr>
+      <th colspan=2>Stats</th>
+    </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Failed Task Attempts</td>
+        <td>{{stats-link value=model.failedTaskAttempts routeName="task.attempts" statsType="FAILED"}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  {{#if model.diagnostics}}
+    <div class="panel panel-danger">
+      <div class="panel-heading">
+        Diagnostics
+      </div>
+      <div class="diagnostics">
+        {{{model.diagnostics}}}
+      </div>
+    </div>
+  {{/if}}
+
+{{else}}
+  {{partial "loading"}}
 {{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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
deleted file mode 100644
index e1c60d1..0000000
--- a/tez-ui/src/main/webapp/app/templates/taskAttempt/index.hbs
+++ /dev/null
@@ -1,103 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class="margin-small-vertical">
-  {{load-time-component
-    isRefreshable=isRefreshable
-    time=timeStamp
-    refresh='refresh'
-  }}
-</div>
-<div class='type-table fill-full margin-small-horizontal'>
-	<div class='align-left'>
-		<table class='detail-list'>
-			<thead>
-				<tr>
-					<th colspan=2>TaskAttempt Details</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td>Task Attempt ID</td>
-					<td>{{id}}</td>
-				</tr>
-				<tr>
-					<td>Task ID</td>
-					<td>{{taskID}}</td>
-				</tr>
-				<tr>
-					<td>Container</td>
-					<td>{{containerId}}</td>
-				</tr>
-				<tr>
-					<td>Node</td>
-					<td>{{nodeId}}</td>
-				</tr>
-				<tr>
-					<td>{{t 'common.status'}}</td>
-					<td>
-						<i {{bind-attr class=':task-status taskAttemptIconStatus'}}></i> {{taskAttemptStatus}}
-					</td>
-				</tr>
-        {{#if progress}}
-        <tr>
-          <td>Progress</td>
-          <td>{{bs-progress-animated progressDecimal=progress}}</td>
-        </tr>
-        {{/if}}
-				<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>
-        <tr>
-          <td>Logs</td>
-          <td>
-            {{#if logsLink.viewUrl}}
-              <a target="_blank" href='//{{unbound logsLink.viewUrl}}'>View</a>
-              &nbsp;
-            {{/if}}
-            {{#if logsLink.downloadUrl}}
-              <a target="_blank" href='{{unbound logsLink.downloadUrl}}' download type="application/octet-stream">Download</a>
-            {{/if}}
-            {{#unless logsLink.viewUrl}}
-              {{#unless logsLink.downloadUrl}}
-                <span class="message">Not Available!</span>
-              {{/unless}}
-            {{/unless}}
-          </td>
-        </tr>
-			</tbody>
-		</table>
-	</div>
-</div>
-
-{{#if diagnostics}}
-	<div class="margin-small-vertical">
-		{{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger' class="margin-medium-vertical"}}
-		{{formatDiagnostics diagnostics}}
-		{{/bs-panel}}
-	</div>
-{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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
deleted file mode 100644
index 518348e..0000000
--- a/tez-ui/src/main/webapp/app/templates/task_attempt.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<ul class="breadcrumb">
-  <li>{{#link-to 'application'}}<i class="fa fa-home"> All DAGs</i>{{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'dag' dagID}}DAG [ {{dagName}} ] {{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'vertex' vertexID}}Vertex [ {{vertexName}} ] {{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'task' taskID}}Task [ {{taskIndex}} ] {{/link-to}} <span class="divider"></span></li>
-  <li class="active">Task Attempt [ {{index}} ]</li>
-</ul>
-
-{{#unless loading}}
-  <div class='type-table fill-full margin-small-horizontal'>
-    <div class='pill-container align-right'>
-      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-    </div>
-  </div>
-  <div class='margin-small-vertical'>
-    {{outlet}}
-  </div>
-{{else}}
-  {{partial 'partials/loading-spinner'}}
-{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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
deleted file mode 100644
index 350b4e3..0000000
--- a/tez-ui/src/main/webapp/app/templates/tasks.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-{{!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
-}}
-
-<ul class="breadcrumb">
-  <li>{{#link-to 'application'}}<i class="fa fa-home"> All DAGs</i>{{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'dag' parentID}}DAG [ {{parentName}} ]{{/link-to}} <span class="divider"></span></li>
-  <li class="active">Tasks</li>
-</ul>
-
-{{partial "common/table-with-spinner"}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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
deleted file mode 100644
index d21c76b..0000000
--- a/tez-ui/src/main/webapp/app/templates/tez-app.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<ul class="breadcrumb">
-  <li>{{#link-to 'application'}}<i class="fa fa-home"> All DAGs</i>{{/link-to}} <span class="divider"></span></li>
-  <li class="active">Tez App [ {{appDetail.name}} ]</li>
-</ul>
-
-{{#unless loading}}
-  <div class='type-table fill-full '>
-    <div class='pill-container align-right'>
-      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-    </div>
-  </div>
-  <div class='margin-small-vertical'>
-    {{outlet}}
-  </div>
-{{else}}
-  {{partial 'partials/loading-spinner'}}
-{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/tez-app/index.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/tez-app/index.hbs b/tez-ui/src/main/webapp/app/templates/tez-app/index.hbs
deleted file mode 100644
index ff87fbc..0000000
--- a/tez-ui/src/main/webapp/app/templates/tez-app/index.hbs
+++ /dev/null
@@ -1,151 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class="margin-small-vertical">
-  {{load-time-component
-    isRefreshable=isRefreshable
-    time=timeStamp
-    refresh='refresh'
-  }}
-</div>
-<div class='type-table fill-full margin-small-horizontal'>
-  <div style="padding-top: 20px;">
-    <table class='detail-list'>
-       <thead>
-         <tr>
-            <th colspan=2>Tez Application Description</th>
-         </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Application Tracking URL</td>
-          <td><a target="_blank" {{bind-attr href=rmTrackingURL}}>{{unbound appId}}</a></td>
-        </tr>
-        {{#if appDetail}}
-        <tr>
-          <td>Application Name</td>
-          <td>
-            {{appDetail.name}}
-          </td>
-        </tr>
-        <tr>
-          <td>Queue</td>
-          <td>
-            {{appDetail.queue}}
-          </td>
-        </tr>
-        <tr>
-          <td>Application Type</td>
-          <td>{{appDetail.type}}</td>
-        </tr>
-        {{/if}}
-        <tr>
-          <td>User</td>
-          <td>{{appUser}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  {{#if appDetail}}
-    <div style="padding-top: 20px;">
-      <table class='detail-list'>
-        <thead>
-           <tr>
-              <th colspan=2>Tez Application Details</th>
-           </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Application State</td>
-            <td>
-              {{appDetail.status}}
-            </td>
-          </tr>
-          <tr>
-            <td>Final Application Status</td>
-            <td>
-              {{#if appDetail.status}}
-              <i {{bind-attr class=':task-status iconStatus'}}></i> {{appDetail.finalStatus}}
-              {{/if}}
-            </td>
-          </tr>
-          <tr>
-            <td>{{t 'common.time.start'}}</td>
-            <td>{{formatUnixTimestamp appDetail.startedTime}}</td>
-          </tr>
-          <tr>
-            <td>{{t 'common.time.end'}}</td>
-            <td>{{formatUnixTimestamp appDetail.finishedTime}}</td>
-          </tr>
-          <tr>
-            <td>{{t 'common.time.duration'}}</td>
-            <td>{{formatDuration appDetail.startedTime appDetail.finishedTime}}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  {{/if}}
-
-  {{#if tezVersion}}
-    <div style="padding-top: 20px;">
-      <table class='detail-list'>
-        <thead>
-           <tr>
-              <th colspan=2>Tez Version Details</th>
-           </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Tez Version</td>
-            <td>
-              {{tezVersion}}
-            </td>
-          </tr>
-          <tr>
-            <td>Build Revision</td>
-            <td>
-              {{tezRevision}}
-            </td>
-          </tr>
-          <tr>
-            <td>Build Time</td>
-            <td>
-              {{tezBuildTime}}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  {{/if}}
-
-  {{#unless appDetail}}
-    <div class="alert alert-info margin-medium-vertical">
-      <strong>Info!</strong> Could not fetch application info from RM (yarn system metrics publishing might be disabled), some details might be missing
-    </div>
-  {{/unless}}
-
-</div>
-
-{{#if diagnostics}}
-  <div class="margin-small-vertical">
-    {{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}
-      {{formatDiagnostics diagnostics}}
-    {{/bs-panel}}
-  </div>
-{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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 251bb16..8906371 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex.hbs
@@ -1,36 +1,20 @@
 {{!
-* 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.
+ * 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.
 }}
 
-<ul class="breadcrumb">
-  <li>{{#link-to 'application'}}<i class="fa fa-home"> All DAGs</i>{{/link-to}} <span class="divider"></span></li>
-  <li>{{#link-to 'dag' dagID}}DAG [ {{dag.name}}  ] {{/link-to}} <span class="divider"></span></li>
-  <li class="active">Vertex [ {{name}} ]</li>
-</ul>
-
-{{#unless loading}}
-  <div class='type-table margin-small-horizontal fill-full'>
-    <div class='pill-container align-right'>
-      {{bs-pills contentBinding='childDisplayViews' selectedBinding='childDisplayViewSelected' size='lg'}}
-    </div>
-  </div>
-  <div class='margin-small-vertical'>
-    {{outlet}}
-  </div>
-{{else}}
-  {{partial 'partials/loading-spinner'}}
-{{/unless}}
+{{tab-n-refresh tabs=tabs loadTime=loadTime autoRefreshEnabled=polling.active}}
+{{outlet}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/vertex/additionals.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/additionals.hbs b/tez-ui/src/main/webapp/app/templates/vertex/additionals.hbs
deleted file mode 100644
index a3da8e0..0000000
--- a/tez-ui/src/main/webapp/app/templates/vertex/additionals.hbs
+++ /dev/null
@@ -1,50 +0,0 @@
-{{!
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-}}
-
-<div class="margin-small-vertical">
-  {{load-time-component
-    isRefreshable=isRefreshable
-    time=timeStamp
-    refresh='refresh'
-  }}
-</div>
-{{#unless loading}}
-  <h3>Sources</h3>
-  {{#if inputsAvailable}}
-    {{basic-table-component
-      columns=inputColumns
-      rows=inputContent
-      enableSort=true
-    }}
-  {{else}}
-    <h4>Not available!</h4>
-  {{/if}}
-
-  <h3>Sinks</h3>
-  {{#if outputsAvailable}}
-    {{basic-table-component
-      columns=outputColumns
-      rows=outputContent
-      enableSort=true
-    }}
-  {{else}}
-    <h4>Not available!</h4>
-  {{/if}}
-{{else}}
-  {{partial 'partials/loading-spinner'}}
-{{/unless}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/vertex/attempts.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/vertex/attempts.hbs b/tez-ui/src/main/webapp/app/templates/vertex/attempts.hbs
new file mode 100644
index 0000000..d36678a
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/attempts.hbs
@@ -0,0 +1,37 @@
+{{!
+ * 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.
+}}
+
+{{#if loaded}}
+  {{em-table
+    columns=visibleColumns
+    rows=model
+
+    headerComponentNames=headerComponentNames
+
+    definition=definition
+
+    searchAction="searchChanged"
+    sortAction="sortChanged"
+    rowAction="rowCountChanged"
+    pageAction="pageChanged"
+
+    rowsChanged="rowsChanged"
+  }}
+{{else}}
+  {{partial "loading"}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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..649cfe2
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/counters.hbs
@@ -0,0 +1,34 @@
+{{!
+ * 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.
+}}
+
+{{#if loaded}}
+  {{em-table
+  columns=columns
+  rows=counters
+
+  rowCount=countersCount
+  definition=definition
+
+  enablePagination=false
+
+  searchAction="searchChanged"
+  sortAction="sortChanged"
+  }}
+{{else}}
+  {{partial "loading"}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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 96e82fc..15ffde3 100644
--- a/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
+++ b/tez-ui/src/main/webapp/app/templates/vertex/index.hbs
@@ -1,204 +1,143 @@
 {{!
-* 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.
+ * 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="margin-small-vertical">
-  {{load-time-component
-    isRefreshable=isRefreshable
-    time=timeStamp
-    refresh='refresh'
-  }}
-</div>
-<div class='type-table margin-small-horizontal fill-full'>
+{{#if loaded}}
+  <table class='detail-list'>
+    <thead>
+      <tr>
+        <th colspan=2>Details</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Vertex ID</td>
+        <td>{{model.entityID}}</td>
+      </tr>
+      <tr>
+        <td>Vertex Name</td>
+        <td>{{model.name}}</td>
+      </tr>
+      <tr>
+        <td>Processor Class</td>
+        <td>{{model.processorClassName}}</td>
+      </tr>
+      <tr>
+        <td>Status</td>
+        <td>{{em-table-status-cell content=model.finalStatus}}</td>
+      </tr>
+      <tr>
+        <td>Progress</td>
+        <td>{{em-table-progress-cell content=model.progress}}</td>
+      </tr>
+      <tr>
+        <td>Start Time</td>
+        <td>{{date-formatter content=model.startTime}}</td>
+      </tr>
+      <tr>
+        <td>End Time</td>
+        <td>{{date-formatter content=model.endTime}}</td>
+      </tr>
+      <tr>
+        <td>Duration</td>
+        <td>{{txt model.duration type="duration"}}</td>
+      </tr>
+    </tbody>
+  </table>
 
-  <div class="horizontal-half align-children-left">
-    <table class='detail-list'>
-       <thead>
-         <tr>
-           <th colspan=2>Vertex description</th>
-          </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Vertex ID</td>
-          <td>{{id}}</td>
-        </tr>
-        <tr>
-          <td>Vertex Name</td>
-          <td>
-            {{name}}
-          </td>
-        </tr>
-        <tr>
-          <td>Processor Class</td>
-          <td>{{processorClassName}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div style="padding-top: 20px;">
-    <table class='detail-list'>
-       <thead>
-         <tr>
-           <th colspan=2>Vertex details</th>
-          </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{{t 'common.status'}}</td>
-          <td>
-            <i {{bind-attr class=':task-status iconStatus'}}></i>
-            {{status}}
-            {{#if progressStr}} {{bs-badge content=progressStr}}{{/if}}
-            {{#if hasFailedTasks}}
-              [ <a href='{{unbound failedTasksLink}}'>Failed Tasks</a> ]
-            {{/if}}
-            {{#if hasFailedTaskAttempts}}
-              [ <a href='{{unbound failedTaskAttemptsLink}}'>Failed TaskAttempts</a> ]
-            {{/if}}
-          </td>
-        </tr>
-        {{#if progress}}
-        <tr>
-          <td>Progress</td>
-          <td>{{bs-progress-animated progressDecimal=progress}}</td>
-        </tr>
-        {{/if}}
-        <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>
-          {{#if hasFirstTaskStarted}}
-          <td>{{formatDuration firstTaskStartTime endTime}}</td>
-          {{else}}
-          <td>{{formatDuration startTime endTime}}</td>
+  <table class='detail-list'>
+    <thead>
+      <tr>
+        <th colspan=2>Stats</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Total Tasks</td>
+        <td>{{txt model.totalTasks type="number"}}</td>
+      </tr>
+      <tr>
+        <td>Succeeded Tasks</td>
+        <td>{{stats-link value=model.succeededTasks routeName="vertex.tasks" statsType="SUCCEEDED"}}</td>
+      </tr>
+      <tr>
+        <td>Failed Tasks</td>
+        <td>{{stats-link value=model.failedTasks routeName="vertex.tasks" statsType="FAILED"}}</td>
+      </tr>
+      <tr>
+        <td>Killed Tasks</td>
+        <td>{{stats-link value=model.killedTasks routeName="vertex.tasks" statsType="KILLED"}}</td>
+      </tr>
+      <tr>
+        <td>First Task Start Time</td>
+        <td>
+          {{date-formatter content=model.firstTaskStartTime}}
+          {{#if firstTasksToStart}}
+            [{{em-table-linked-cell content=firstTasksToStart}}]
           {{/if}}
-        </tr>
-        {{#if hasFirstTaskStarted}}
-          <tr>
-            <td>First Task Start Time</td>
-            <td>{{formatUnixTimestamp firstTaskStartTime}}
-              [
-              {{#each taskid in firstTasksToStart}}
-                {{#if _view.contentIndex}} | {{/if}}
-                {{#link-to 'task' taskid}}{{taskid}}{{/link-to}}
-              {{/each}}
-              ]
-            </td>
-          </tr>
-        {{/if}}
-        {{#if hasLastTaskFinished}}
-          <tr>
-            <td>Last Task Finish Time</td>
-            <td>{{formatUnixTimestamp lastTaskFinishTime}}
-              [
-              {{#each taskid in lastTasksToFinish}}
-                {{#if _view.contentIndex}} | {{/if}}
-                {{#link-to 'task' taskid}}{{taskid}}{{/link-to}}
-              {{/each}}
-              ]
-            </td>
-          </tr>
-        {{/if}}
-      </tbody>
-    </table>
-  </div>
-
-  {{#if hasStats}}
-    <div style="padding-top: 20px;">
-      <table class='detail-list'>
-        <thead>
-          <tr>
-            <th colspan=2>Tasks of this Vertex</th>
-          </tr>
-        </thead>
-        <tbody>
-          <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}}
-              {{#if hasFailedTasks}}
-                <a href='{{unbound failedTasksLink}}'>FailedTasks</a>
-              {{/if}}
-            </td>
-          </tr>
-          <tr>
-            <td>Killed Tasks</td>
-            <td>{{killedTasks}}</td>
-          </tr>
-
-          {{#if showAvgTaskDuration}}
-            <tr>
-              <td>Average Duration</td>
-              <td>{{formatTimeMillis avgTaskDuration}}</td>
-            </tr>
+        </td>
+      </tr>
+      <tr>
+        <td>Last Task Finish Time</td>
+        <td>
+          {{date-formatter content=model.lastTaskFinishTime}}
+          {{#if lastTasksToFinish}}
+            [{{em-table-linked-cell content=lastTasksToFinish}}]
           {{/if}}
-          {{#if showMinTaskDuration}}
-            <tr>
-              <td>Minimum Duration</td>
-              <td>{{formatTimeMillis minTaskDuration}}
-                [
-                {{#each taskid in shortestDurationTasks}}
-                  {{#if _view.contentIndex}} | {{/if}}
-                  {{#link-to 'task' taskid}}{{taskid}}{{/link-to}}
-                {{/each}}
-                ]
-              </td>
-            </tr>
+        </td>
+      </tr>
+      <tr>
+        <td>Average Duration</td>
+        <td>
+          {{txt model.avgDuration type="duration"}}
+        </td>
+      </tr>
+      <tr>
+        <td>Minimum Duration</td>
+        <td>
+          {{txt model.minDuration type="duration"}}
+          {{#if shortestDurationTasks}}
+            [{{em-table-linked-cell content=shortestDurationTasks}}]
           {{/if}}
-          {{#if showMaxTaskDuration}}
-            <tr>
-              <td>Maximum Duration</td>
-              <td>{{formatTimeMillis maxTaskDuration}}
-                [
-                {{#each taskid in longestDurationTasks}}
-                  {{#if _view.contentIndex}} | {{/if}}
-                  {{#link-to 'task' taskid}}{{taskid}}{{/link-to}}
-                {{/each}}
-                ]
-              </td>
-            </tr>
+        </td>
+      </tr>
+      <tr>
+        <td>Maximum Duration</td>
+        <td>
+          {{txt model.maxDuration type="duration"}}
+          {{#if longestDurationTasks}}
+            [{{em-table-linked-cell content=longestDurationTasks}}]
           {{/if}}
-        </tbody>
-      </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  {{#if model.diagnostics}}
+    <div class="panel panel-danger">
+      <div class="panel-heading">
+        Diagnostics
+      </div>
+      <div class="diagnostics">
+        {{{model.diagnostics}}}
+      </div>
     </div>
   {{/if}}
 
-</div>
-
-{{#if diagnostics}}
-  <div class="margin-small-vertical">
-    {{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}
-      {{formatDiagnostics diagnostics}}
-    {{/bs-panel}}
-  </div>
+{{else}}
+  {{partial "loading"}}
 {{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/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..d36678a
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/vertex/tasks.hbs
@@ -0,0 +1,37 @@
+{{!
+ * 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.
+}}
+
+{{#if loaded}}
+  {{em-table
+    columns=visibleColumns
+    rows=model
+
+    headerComponentNames=headerComponentNames
+
+    definition=definition
+
+    searchAction="searchChanged"
+    sortAction="sortChanged"
+    rowAction="rowCountChanged"
+    pageAction="pageChanged"
+
+    rowsChanged="rowsChanged"
+  }}
+{{else}}
+  {{partial "loading"}}
+{{/if}}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/views/extra-table-buttons.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/views/extra-table-buttons.hbs b/tez-ui/src/main/webapp/app/templates/views/extra-table-buttons.hbs
deleted file mode 100644
index 98099db..0000000
--- a/tez-ui/src/main/webapp/app/templates/views/extra-table-buttons.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-{{!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
-}}
-
-<i class='column-selector-button' {{action 'selectColumns' target=targetObject}}></i>

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/templates/views/multi-select.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/views/multi-select.hbs b/tez-ui/src/main/webapp/app/templates/views/multi-select.hbs
deleted file mode 100644
index da83d87..0000000
--- a/tez-ui/src/main/webapp/app/templates/views/multi-select.hbs
+++ /dev/null
@@ -1,55 +0,0 @@
-{{!
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
-}}
-
-<div class="message">
-  {{{view.message}}}
-</div>
-<div class="selection-list">
-  <div class="search-option highlight">
-    <div {{bind-attr class=":form-group view._validRegEx::has-error"}}>
-      {{input
-        class="form-control"
-        placeholder="Filter options"
-        value=view.searchRegex
-      }}
-    </div>
-    <div class="select-all">
-      {{view App.Checkbox
-        classNames='inline-display checkbox'
-        checked=view.selectAll
-        action='selectAll'
-        target=view
-      }}
-      Select All
-    </div>
-  </div>
-  {{#if view.visibleOptions.length}}
-    {{#each option in view.visibleOptions}}
-      <div class="select-option {{unbound option.css}}"}}>
-        {{input
-          type="checkbox"
-          classNames='inline-display checkbox'
-          checked=option.selected
-        }}
-        {{option.displayText}}
-      </div>
-    {{/each}}
-  {{else}}
-    <h4>&nbsp;No options available...</h4>
-  {{/if}}
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/transforms/object.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/transforms/object.js b/tez-ui/src/main/webapp/app/transforms/object.js
new file mode 100644
index 0000000..760f4f9
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/transforms/object.js
@@ -0,0 +1,29 @@
+/**
+ * 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 DS from 'ember-data';
+
+export default DS.Transform.extend({
+  deserialize(serialized) {
+    return serialized;
+  },
+
+  serialize(deserialized) {
+    return deserialized;
+  }
+});

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/utils/counter-column-definition.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/utils/counter-column-definition.js b/tez-ui/src/main/webapp/app/utils/counter-column-definition.js
new file mode 100644
index 0000000..d66e551
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/utils/counter-column-definition.js
@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Ember from 'ember';
+
+import isIOCounter from '../utils/misc';
+import ColumnDefinition from 'em-table/utils/column-definition';
+
+/*
+ * Returns a counter value from for a row
+ * @param row
+ * @return value
+ */
+function getCounterContent(row) {
+  var counter = Ember.get(row, this.get("contentPath"));
+
+  if(counter) {
+    counter = counter[this.get("counterGroupName")];
+    if(counter) {
+      return counter[this.get("counterName")] || null;
+    }
+    return null;
+  }
+}
+
+var CounterColumnDefinition = ColumnDefinition.extend({
+  counterName: "",
+  counterGroupName: "",
+
+  observePath: true,
+  contentPath: "counterGroupsHash",
+
+  getCellContent: getCounterContent,
+  getSearchValue: getCounterContent,
+  getSortValue: getCounterContent,
+
+  id: Ember.computed("counterName", "counterGroupName", function () {
+    var groupName = this.get("counterGroupName"),
+        counterName = this.get("counterName");
+    return `${groupName}/${counterName}`;
+  }),
+
+  groupDisplayName: Ember.computed("counterGroupName", function () {
+    var displayName = this.get("counterGroupName");
+
+    // Prune dotted path
+    displayName = displayName.substr(displayName.lastIndexOf('.') + 1);
+
+    if(isIOCounter(displayName)) {
+      displayName = displayName.replace("_INPUT_", " to Input-");
+      displayName = displayName.replace("_OUTPUT_", " to Output-");
+    }
+
+    // Prune counter text
+    displayName = displayName.replace("Counter_", " - ");
+    displayName = displayName.replace("Counter", "");
+
+    return displayName;
+  }),
+
+  headerTitle: Ember.computed("groupDisplayName", "counterName", function () {
+    var groupName = this.get("groupDisplayName"),
+        counterName = this.get("counterName");
+    return `${groupName} - ${counterName}`;
+  }),
+});
+
+CounterColumnDefinition.make = function (rawDefinition) {
+  if(Array.isArray(rawDefinition)) {
+    return rawDefinition.map(function (def) {
+      return CounterColumnDefinition.create(def);
+    });
+  }
+  else if(typeof rawDefinition === 'object') {
+    return CounterColumnDefinition.create(rawDefinition);
+  }
+  else {
+    throw new Error("rawDefinition must be an Array or an Object.");
+  }
+};
+
+export default CounterColumnDefinition;

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/utils/download-dag-zip.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/utils/download-dag-zip.js b/tez-ui/src/main/webapp/app/utils/download-dag-zip.js
new file mode 100644
index 0000000..eeb20ac
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/utils/download-dag-zip.js
@@ -0,0 +1,407 @@
+/*global zip, saveAs*/
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with this
+ * work for additional information regarding copyright ownership. The ASF
+ * licenses this file to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import Ember from 'ember';
+import DS from 'ember-data';
+
+zip.workerScriptsPath = "assets/zip/";
+
+var IO = {
+  /* Allow queuing of downloads and then get a callback once all the downloads are done.
+   * sample usage.
+   * var downloader = IO.fileDownloader();
+   * downloader.queueItem({
+   *   url: 'http://....',
+   *   onItemFetched: function(data, context) {...},
+   *   context: {}, // context object gets passed back to the callback
+   * });
+   * downloader.queueItem({...}); //queue in other items
+   * downloader.finish(); // once all items are queued. items can be queued from
+   *                      // callbacks too. in that case the finish should be called
+   *                      // once all items are queued.
+   * downloader.then(successCallback).catch(failurecallback).finally(callback)
+   */
+  fileDownloader: function(options) {
+    var itemList = [],
+        opts = options || {},
+        numParallel = opts.numParallel || 5,
+        hasMoreInputs = true,
+        inProgress = 0,
+        hasFailed = false,
+        pendingRequests = {},
+        pendingRequestID = 0,
+        failureReason = 'Unknown',
+        deferredPromise = Ember.RSVP.defer();
+
+    function checkForCompletion() {
+      if (hasFailed) {
+        if (inProgress === 0) {
+          deferredPromise.reject("Unknown Error");
+        }
+        return;
+      }
+
+      if (hasMoreInputs || itemList.length > 0 || inProgress > 0) {
+        return;
+      }
+
+      deferredPromise.resolve();
+    }
+
+    function getRequestId() {
+      return "req_" + pendingRequestID++;
+    }
+
+    function abortPendingRequests() {
+      Ember.$.each(pendingRequests, function(idx, val) {
+        try {
+          val.abort("abort");
+        } catch(e) {}
+      });
+    }
+
+    function markFailed(reason) {
+      if (!hasFailed) {
+        hasFailed = true;
+        failureReason = reason;
+        abortPendingRequests();
+      }
+    }
+
+    function processNext() {
+      if (inProgress >= numParallel) {
+        Ember.Logger.debug(`delaying download as ${inProgress} of ${numParallel} is in progress`);
+        return;
+      }
+
+      if (itemList.length < 1) {
+        Ember.Logger.debug("no items to download");
+        checkForCompletion();
+        return;
+      }
+
+      inProgress++;
+      Ember.Logger.debug(`starting download ${inProgress}`);
+      var item = itemList.shift();
+
+      var xhr = Ember.$.ajax({
+        crossOrigin: true,
+        url: item.url,
+        dataType: 'json',
+        xhrFields: {
+          withCredentials: true
+        },
+      });
+      var reqID = getRequestId();
+      pendingRequests[reqID] = xhr;
+
+      xhr.done(function(data/*, statusText, xhr*/) {
+        delete pendingRequests[reqID];
+
+        if (Ember.$.isFunction(item.onItemFetched)) {
+          try {
+            item.onItemFetched(data, item.context);
+          } catch (e) {
+            markFailed(e || 'failed to process data');
+            inProgress--;
+            checkForCompletion();
+            return;
+          }
+        }
+
+        inProgress--;
+        processNext();
+      }).fail(function(xhr, statusText/*, errorObject*/) {
+        delete pendingRequests[reqID];
+        markFailed(statusText);
+        inProgress--;
+        checkForCompletion();
+      });
+    }
+
+    return DS.PromiseObject.create({
+      promise: deferredPromise.promise,
+
+      queueItems: function(options) {
+        options.forEach(this.queueItem);
+      },
+
+      queueItem: function(option) {
+        itemList.push(option);
+        processNext();
+      },
+
+      finish: function() {
+        hasMoreInputs = false;
+        checkForCompletion();
+      },
+
+      cancel: function() {
+        markFailed("User cancelled");
+        checkForCompletion();
+      }
+    });
+  },
+
+
+  /*
+   * allows to zip files and download that.
+   * usage:
+   * zipHelper = IO.zipHelper({
+   *   onProgress: function(filename, current, total) { ...},
+   *   onAdd: function(filename) {...}
+   * });
+   * zipHelper.addFile({name: filenameinsidezip, data: data);
+   * // add all files
+   * once all files are added call the close
+   * zipHelper.close(); // or .abort to abort zip
+   * zipHelper.then(function(zippedBlob) {
+   *   saveAs(filename, zippedBlob);
+   * }).catch(failureCallback);
+   */
+  zipHelper: function(options) {
+    var opts = options || {},
+        zipWriter,
+        completion = Ember.RSVP.defer(),
+        fileList = [],
+        completed = 0,
+        currentIdx = -1,
+        numFiles = 0,
+        hasMoreInputs = true,
+        inProgress = false,
+        hasFailed = false;
+
+    zip.createWriter(new zip.BlobWriter("application/zip"), function(writer) {
+      zipWriter = writer;
+      checkForCompletion();
+      nextFile();
+    });
+
+    function checkForCompletion() {
+      if (hasFailed) {
+        if (zipWriter) {
+          Ember.Logger.debug("aborting zipping. closing file.");
+          zipWriter.close(completion.reject);
+          zipWriter = null;
+        }
+      } else {
+        if (!hasMoreInputs && numFiles === completed) {
+          Ember.Logger.debug("completed zipping. closing file.");
+          zipWriter.close(completion.resolve);
+        }
+      }
+    }
+
+    function onProgress(current, total) {
+      if (Ember.$.isFunction(opts.onProgress)) {
+        opts.onProgress(fileList[currentIdx].name, current, total);
+      }
+    }
+
+    function onAdd(filename) {
+      if (Ember.$.isFunction(opts.onAdd)) {
+        opts.onAdd(filename);
+      }
+    }
+
+    function nextFile() {
+      if (hasFailed || completed === numFiles || inProgress) {
+        return;
+      }
+
+      currentIdx++;
+      var file = fileList[currentIdx];
+      inProgress = true;
+      onAdd(file.name);
+      zipWriter.add(file.name, new zip.TextReader(file.data), function() {
+        completed++;
+        inProgress = false;
+        if (currentIdx < numFiles - 1) {
+          nextFile();
+        }
+        checkForCompletion();
+      }, onProgress);
+    }
+
+    return DS.PromiseObject.create({
+      addFiles: function(files) {
+        files.forEach(this.addFile);
+      },
+
+      addFile: function(file) {
+        if (hasFailed) {
+          Ember.Logger.debug(`Skipping add of file ${file.name} as zip has been aborted`);
+          return;
+        }
+        numFiles++;
+        fileList.push(file);
+        if (zipWriter) {
+          Ember.Logger.debug("adding file from addFile: " + file.name);
+          nextFile();
+        }
+      },
+
+      close: function() {
+        hasMoreInputs = false;
+        checkForCompletion();
+      },
+
+      promise: completion.promise,
+
+      abort: function() {
+        hasFailed = true;
+        this.close();
+      }
+    });
+  }
+};
+
+export default function downloadDagZip(dag, options) {
+  var opts = options || {},
+      batchSize = opts.batchSize || 1000,
+      dagID = dag.get("entityID"),
+      baseurl = `${options.timelineHost}/${options.timelineNamespace}`,
+      itemsToDownload = [
+        {
+          url: getUrl('TEZ_APPLICATION', 'tez_' + dag.get("appID")),
+          context: { name: 'application', type: 'TEZ_APPLICATION' },
+          onItemFetched: processSingleItem
+        },
+        {
+          url: getUrl('TEZ_DAG_ID', dagID),
+          context: { name: 'dag', type: 'TEZ_DAG_ID' },
+          onItemFetched: processSingleItem
+        },
+        {
+          url: getUrl('TEZ_VERTEX_ID', dagID),
+          context: { name: 'vertices', type: 'TEZ_VERTEX_ID', part: 0 },
+          onItemFetched: processMultipleItems
+        },
+        {
+          url: getUrl('TEZ_TASK_ID', dagID),
+          context: { name: 'tasks', type: 'TEZ_TASK_ID', part: 0 },
+          onItemFetched: processMultipleItems
+        },
+        {
+          url: getUrl('TEZ_TASK_ATTEMPT_ID', dagID),
+          context: { name: 'task_attempts', type: 'TEZ_TASK_ATTEMPT_ID', part: 0 },
+          onItemFetched: processMultipleItems
+        }
+      ],
+      totalItemsToDownload = itemsToDownload.length,
+      numItemTypesToDownload = totalItemsToDownload,
+      downloader = IO.fileDownloader(),
+      zipHelper = IO.zipHelper({
+        onProgress: function(filename, current, total) {
+          Ember.Logger.debug(`${filename}: ${current} of ${total}`);
+        },
+        onAdd: function(filename) {
+          Ember.Logger.debug(`adding ${filename} to Zip`);
+        }
+      }),
+      downloaderProxy = Ember.Object.create({
+        percent: 0,
+        succeeded: false,
+        failed: false,
+        cancel: function() {
+          downloader.cancel();
+        }
+      });
+
+  function getUrl(type, dagID, fromID) {
+    var url,
+        queryBatchSize = batchSize + 1;
+
+    if (type === 'TEZ_DAG_ID' || type === 'TEZ_APPLICATION') {
+      url = `${baseurl}/${type}/${dagID}`;
+    } else {
+      url = `${baseurl}/${type}?primaryFilter=TEZ_DAG_ID:${dagID}&limit=${queryBatchSize}`;
+      if (!!fromID) {
+        url = `${url}&fromId=${fromID}`;
+      }
+    }
+    return url;
+  }
+
+  function checkIfAllDownloaded() {
+    numItemTypesToDownload--;
+
+    var remainingItems = totalItemsToDownload - numItemTypesToDownload;
+    downloaderProxy.set("percent", remainingItems / totalItemsToDownload);
+
+    if (numItemTypesToDownload === 0) {
+      downloader.finish();
+    }
+  }
+
+  function processSingleItem(data, context) {
+    var obj = {};
+    obj[context.name] = data;
+
+    zipHelper.addFile({name: `${context.name}.json`, data: JSON.stringify(obj, null, 2)});
+    checkIfAllDownloaded();
+  }
+
+  function processMultipleItems(data, context) {
+    var obj = {};
+    var nextBatchStart;
+
+    if (!Ember.$.isArray(data.entities)) {
+      throw "invalid data";
+    }
+
+    // need to handle no more entries , zero entries
+    if (data.entities.length > batchSize) {
+      nextBatchStart = data.entities.pop().entity;
+    }
+    obj[context.name] = data.entities;
+
+    zipHelper.addFile({name: `${context.name}_part_${context.part}.json`, data: JSON.stringify(obj, null, 2)});
+
+    if (!!nextBatchStart) {
+      context.part++;
+      downloader.queueItem({
+        url: getUrl(context.type, dagID, nextBatchStart),
+        context: context,
+        onItemFetched: processMultipleItems
+      });
+    } else {
+      checkIfAllDownloaded();
+    }
+  }
+
+  downloader.queueItems(itemsToDownload);
+
+  downloader.then(function() {
+    Ember.Logger.info('Finished download');
+    zipHelper.close();
+  }).catch(function(e) {
+    Ember.Logger.error('Failed to download: ' + e);
+    zipHelper.abort();
+  });
+
+  zipHelper.then(function(zippedBlob) {
+    saveAs(zippedBlob, `${dagID}.zip`);
+    downloaderProxy.set("succeeded", true);
+  }, function() {
+    Ember.Logger.error('zip Failed');
+    downloaderProxy.set("failed", true);
+  });
+
+  return downloaderProxy;
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/utils/misc.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/utils/misc.js b/tez-ui/src/main/webapp/app/utils/misc.js
new file mode 100644
index 0000000..93e2f0b
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/utils/misc.js
@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+export default function isIOCounter(name) {
+  name = name.split('/')[0];
+  name = name.substr(name.indexOf('_') + 1);
+  return !!(name.match('_INPUT_') || name.match('_OUTPUT_'));
+}

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/utils/process-definition.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/utils/process-definition.js b/tez-ui/src/main/webapp/app/utils/process-definition.js
new file mode 100644
index 0000000..d86119e
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/utils/process-definition.js
@@ -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.
+ */
+
+import Ember from 'ember';
+
+export default Ember.Object.extend({
+});

http://git-wip-us.apache.org/repos/asf/tez/blob/13132ec7/tez-ui/src/main/webapp/app/utils/process.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/utils/process.js b/tez-ui/src/main/webapp/app/utils/process.js
new file mode 100644
index 0000000..3ac6720
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/utils/process.js
@@ -0,0 +1,122 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with this
+ * work for additional information regarding copyright ownership. The ASF
+ * licenses this file to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import Ember from 'ember';
+
+var processIndex = 1;
+
+export default Ember.Object.extend({
+  _id: null,
+
+  name: null,
+  events: [], // An array of objects with name and time as mandatory(else error) properties.
+  eventBars: null,
+
+  index: 0,
+  color: null,
+
+  blockers: null, // Array of processes that's blocking the current process
+  blocking: null, // Array of processes blocked by the current process
+
+  blockingEventName: null,
+
+  consolidateStartTime: Ember.computed.oneWay("startEvent.time"),
+  consolidateEndTime: Ember.computed.oneWay("endEvent.time"),
+
+  init: function () {
+    this.set("_id", `process-id-${processIndex}`);
+    processIndex++;
+  },
+
+  getColor: function (lightnessFactor) {
+    var color = this.get("color"),
+        l;
+
+    if(!color) {
+      return "#0";
+    }
+    l = color.l;
+    if(lightnessFactor !== undefined) {
+      l += 5 + 25 * lightnessFactor;
+    }
+    return `hsl( ${color.h}, ${color.s}%, ${l}% )`;
+  },
+
+  getBarColor: function (barIndex) {
+    return this.getColor(1 - (barIndex / this.get("eventBars.length")));
+  },
+
+  getConsolidateColor: function () {
+    return this.getColor();
+  },
+
+  startEvent: Ember.computed("events.@each.time", function () {
+    var events = this.get("events"),
+        startEvent;
+    if(events) {
+      startEvent = events[0];
+        events.forEach(function (event) {
+          if(startEvent.time > event.time) {
+            startEvent = event;
+          }
+      });
+    }
+    return startEvent;
+  }),
+
+  endEvent: Ember.computed("events.@each.time", function () {
+    var events = this.get("events"),
+        endEvent;
+    if(events) {
+      endEvent = events[events.length - 1];
+      events.forEach(function (event) {
+        if(endEvent.time < event.time) {
+          endEvent = event;
+        }
+      });
+    }
+    return endEvent;
+  }),
+
+  getAllBlockers: function (parentHash) {
+    var blockers = [],
+        currentId = this.get("_id");
+
+    parentHash = parentHash || {}; // To keep a check on cyclic blockers
+
+    parentHash[currentId] = true;
+    if(this.get("blockers.length")) {
+      this.get("blockers").forEach(function (blocker) {
+        if(!parentHash[blocker.get("_id")]) {
+          blockers.push(blocker);
+          blockers.push.apply(blockers, blocker.getAllBlockers(parentHash));
+        }
+      });
+    }
+    parentHash[currentId] = false;
+
+    return blockers;
+  },
+
+  getTooltipContents: function (type/*, options*/) {
+    return [{
+      title: this.get("name"),
+      description: "Mouse on : " + type
+    }];
+  }
+
+});


Mime
View raw message