You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tez.apache.org by sr...@apache.org on 2015/09/07 15:29:49 UTC
tez git commit: TEZ-2766. Tez UI: Add vertex in-progress info in DAG
details (sree)
Repository: tez
Updated Branches:
refs/heads/master e0523eb8c -> db725e568
TEZ-2766. Tez UI: Add vertex in-progress info in DAG details (sree)
Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/db725e56
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/db725e56
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/db725e56
Branch: refs/heads/master
Commit: db725e568a53d88d402334b902c8f9ac6a9a3324
Parents: e0523eb
Author: Sreenath Somarajapuram <sr...@apache.org>
Authored: Mon Sep 7 18:59:12 2015 +0530
Committer: Sreenath Somarajapuram <sr...@apache.org>
Committed: Mon Sep 7 18:59:12 2015 +0530
----------------------------------------------------------------------
CHANGES.txt | 1 +
tez-ui/src/main/webapp/app/index.html | 1 +
.../basic-table/basic-table-component.js | 26 +++--
.../bs-progress-animated-component.js | 58 ++++++++++
.../scripts/controllers/dag_index_controller.js | 111 +++++++++++++++++++
tez-ui/src/main/webapp/app/styles/main.less | 22 ++++
.../components/basic-table/progress-cell.hbs | 27 +++++
.../src/main/webapp/app/templates/dag/index.hbs | 22 ++++
8 files changed, 258 insertions(+), 10 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 6bf961b..9df51c0 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -166,6 +166,7 @@ Release 0.7.1: Unreleased
INCOMPATIBLE CHANGES
ALL CHANGES:
+ TEZ-2766. Tez UI: Add vertex in-progress info in DAG details
TEZ-2768. Log a useful error message when the summary stream cannot be closed when shutting
down an AM.
TEZ-2745. ClassNotFoundException of user code should fail dag
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/tez-ui/src/main/webapp/app/index.html
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/index.html b/tez-ui/src/main/webapp/app/index.html
index bb65e6b..82134e0 100644
--- a/tez-ui/src/main/webapp/app/index.html
+++ b/tez-ui/src/main/webapp/app/index.html
@@ -56,6 +56,7 @@
<script src="bower_components/ember-addons.bs_for_ember/dist/js/bs-items-action-bar.min.js"></script>
<script src="bower_components/ember-addons.bs_for_ember/dist/js/bs-badge.min.js"></script>
<script src="bower_components/ember-addons.bs_for_ember/dist/js/bs-label.min.js"></script>
+ <script src="bower_components/ember-addons.bs_for_ember/dist/js/bs-progressbar.min.js"></script>
<script src="bower_components/antiscroll/antiscroll.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/ember-table/dist/ember-table.js"></script>
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/tez-ui/src/main/webapp/app/scripts/components/basic-table/basic-table-component.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/basic-table/basic-table-component.js b/tez-ui/src/main/webapp/app/scripts/components/basic-table/basic-table-component.js
index 0c0c83c..e56b5d8 100644
--- a/tez-ui/src/main/webapp/app/scripts/components/basic-table/basic-table-component.js
+++ b/tez-ui/src/main/webapp/app/scripts/components/basic-table/basic-table-component.js
@@ -36,14 +36,14 @@ App.BasicTableComponent = Em.Component.extend({
rowCountOptions: [5, 10, 25, 50, 100],
pageNavOnFooterAt: 25,
+ _sortedRows: null,
+
init: function () {
- if(this.get('sortColumnId')) {
- this._sortObserver();
- }
+ this._super();
if(this.get('searchText')) {
this._searchObserver();
}
- this._super();
+ this._sortObserver();
},
totalPages: function () {
@@ -62,6 +62,9 @@ App.BasicTableComponent = Em.Component.extend({
}.property('enableSearch', 'enablePagination', 'extraHeaderItem', '_statusMessage'),
_statusMessage: function() {
+ if(this.get('enableStatus') == false) {
+ return null;
+ }
if(this.get('isSorting')) {
return "Sorting...";
}
@@ -69,7 +72,7 @@ App.BasicTableComponent = Em.Component.extend({
return "Searching...";
}
return this.get('statusMessage');
- }.property('isSearching', 'isSorting', 'statusMessage'),
+ }.property('isSearching', 'isSorting', 'statusMessage', 'enableStatus'),
_pageNumResetObserver: function () {
this.set('pageNum', 1);
@@ -77,7 +80,7 @@ App.BasicTableComponent = Em.Component.extend({
_searchedRows: function () {
var regex = this.get('searchRegEx'),
- rows = this.get('rows') || [],
+ rows = this.get('_sortedRows') || [],
searchColumnNames,
columns;
@@ -105,7 +108,7 @@ App.BasicTableComponent = Em.Component.extend({
return columns.some(checkRow, row);
});
}
- }.property('columns.@each', 'rows.@each', 'searchRegEx'),
+ }.property('columns.@each', '_sortedRows.@each', 'searchRegEx'),
_columns: function () {
var columns = this.get('columns'),
@@ -183,7 +186,7 @@ App.BasicTableComponent = Em.Component.extend({
ascending = this.get('sortOrder') == 'asc',
that = this;
- if(rows.length > 0 && column) {
+ if(rows && rows.get('length') > 0 && column) {
this.set('isSorting', true);
Ember.run.later(function () {
@@ -209,7 +212,7 @@ App.BasicTableComponent = Em.Component.extend({
});
that.setProperties({
- rows: sortArray.map(function (record) {
+ _sortedRows: sortArray.map(function (record) {
return record.row;
}),
isSorting: false
@@ -217,7 +220,10 @@ App.BasicTableComponent = Em.Component.extend({
}, 400);
}
- }.observes('sortColumnId', 'sortOrder'),
+ else {
+ this.set('_sortedRows', rows);
+ }
+ }.observes('sortColumnId', 'sortOrder', 'rows.@each'),
actions: {
search: function (searchText) {
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/tez-ui/src/main/webapp/app/scripts/components/bs-progress-animated-component.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/bs-progress-animated-component.js b/tez-ui/src/main/webapp/app/scripts/components/bs-progress-animated-component.js
new file mode 100644
index 0000000..22f380d
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/scripts/components/bs-progress-animated-component.js
@@ -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.
+ */
+
+Bootstrap.BsProgressAnimatedComponent = Bootstrap.BsProgressComponent.extend({
+ progressDecimal: null,
+
+ init: function () {
+ this._super.call(this, arguments);
+ this.progressDecimalObserver();
+ this.progressObserver();
+ },
+
+ progressDecimalObserver: function () {
+ this.set('progress', parseInt(this.get('progressDecimal') * 100).toString());
+ }.observes('progressDecimal'),
+
+ progressObserver: function () {
+ var progressing = this.get('progress') < 100;
+ this.setProperties({
+ stripped: progressing,
+ animated: progressing
+ });
+ }.observes('progress')
+});
+
+Ember["TEMPLATES"]["components/bs-progressbar"] = Ember.Handlebars.
+ template(function anonymous(Handlebars,depth0,helpers,partials,data) {
+ var buffer = '', escapeExpression=this.escapeExpression;
+
+ this.compilerInfo = [4,'>= 1.0.0'];
+ helpers = this.merge(helpers, Ember.Handlebars.helpers);
+ data = data || {};
+
+ data.buffer.push("<span class=\"sr-only\">");
+ data.buffer.push(escapeExpression(helpers._triageMustache.call(
+ depth0,
+ "progress",
+ {hash:{},contexts:[depth0],types:["ID"],hashContexts:{},hashTypes:{},data:data}
+ )));
+ data.buffer.push("%</span>");
+ return buffer;
+});
+
+Ember.Handlebars.helper('bs-progress-animated', Bootstrap.BsProgressAnimatedComponent);
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/tez-ui/src/main/webapp/app/scripts/controllers/dag_index_controller.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/dag_index_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/dag_index_controller.js
index a8bf20f..35b59db 100644
--- a/tez-ui/src/main/webapp/app/scripts/controllers/dag_index_controller.js
+++ b/tez-ui/src/main/webapp/app/scripts/controllers/dag_index_controller.js
@@ -22,6 +22,47 @@ App.DagIndexController = Em.ObjectController.extend(App.ModelRefreshMixin, {
needs: 'dag',
+ liveData: null,
+
+ succeededTasks: null,
+ totalTasks: null,
+ completedVertices: null,
+
+ liveDataObserver: function () {
+ var vertexInfoContent = this.get('amVertexInfo.content'),
+ liveData = null,
+ succeededTasks = null,
+ totalTasks = null,
+ completedVertices = null;
+
+ if(vertexInfoContent && vertexInfoContent.length) {
+ liveData = vertexInfoContent,
+ succeededTasks = 0,
+ totalTasks = 0,
+ completedVertices = 0;
+
+ liveData.forEach(function (vertex) {
+ succeededTasks += parseInt(vertex.get('succeededTasks'));
+ totalTasks += parseInt(vertex.get('totalTasks'));
+ if(vertex.get('progress') >= 1) {
+ completedVertices++;
+ }
+ });
+ }
+
+ this.setProperties({
+ liveData: liveData,
+ succeededTasks: succeededTasks,
+ totalTasks: totalTasks,
+ completedVertices: completedVertices
+ });
+ }.observes('amVertexInfo'),
+
+ dagRunning: function () {
+ var progress = this.get('dagProgress');
+ return progress != null && progress < 1;
+ }.property('dagProgress'),
+
actions: {
downloadDagJson: function() {
var dagID = this.get('id');
@@ -59,6 +100,76 @@ App.DagIndexController = Em.ObjectController.extend(App.ModelRefreshMixin, {
},
+ liveColumns: function () {
+ var vertexIdToNameMap = this.get('vertexIdToNameMap');
+
+ return App.Helpers.misc.createColumnDescription([
+ {
+ id: 'vertexName',
+ headerCellName: 'Vertex Name',
+ templateName: 'components/basic-table/linked-cell',
+ contentPath: 'name',
+ getCellContent: function(row) {
+ return {
+ linkTo: 'vertex',
+ entityId: row.get('id'),
+ displayText: vertexIdToNameMap[row.get('id')]
+ };
+ }
+ },
+ {
+ id: 'progress',
+ headerCellName: 'Progress',
+ contentPath: 'progress',
+ templateName: 'components/basic-table/progress-cell'
+ },
+ {
+ id: 'status',
+ headerCellName: 'Status',
+ templateName: 'components/basic-table/status-cell',
+ contentPath: 'status',
+ getCellContent: function(row) {
+ var status = row.get('status');
+ return {
+ status: status,
+ statusIcon: App.Helpers.misc.getStatusClassForEntity(status,
+ row.get('hasFailedTaskAttempts'))
+ };
+ }
+ },
+ {
+ id: 'totalTasks',
+ headerCellName: 'Total Tasks',
+ contentPath: 'totalTasks',
+ },
+ {
+ id: 'succeededTasks',
+ headerCellName: 'Succeeded Tasks',
+ contentPath: 'succeededTasks',
+ },
+ {
+ id: 'runningTasks',
+ headerCellName: 'Running Tasks',
+ contentPath: 'runningTasks',
+ },
+ {
+ id: 'pendingTasks',
+ headerCellName: 'Pending Tasks',
+ contentPath: 'pendingTasks',
+ },
+ {
+ id: 'failedTasks',
+ headerCellName: 'Failed Task Attempts',
+ contentPath: 'failedTaskAttempts',
+ },
+ {
+ id: 'killedTasks',
+ headerCellName: 'Killed Task Attempts',
+ contentPath: 'killedTaskAttempts',
+ }
+ ]);
+ }.property('id'),
+
load: function () {
var dag = this.get('controllers.dag.model'),
controller = this.get('controllers.dag'),
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/tez-ui/src/main/webapp/app/styles/main.less
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/main.less b/tez-ui/src/main/webapp/app/styles/main.less
index 54bac0d..fa8a124 100644
--- a/tez-ui/src/main/webapp/app/styles/main.less
+++ b/tez-ui/src/main/webapp/app/styles/main.less
@@ -751,6 +751,13 @@ body, html {
padding: 5px;
position: relative;
+ .progress {
+ height: 15px;
+ .sr-only {
+ top: -2px;
+ }
+ }
+
.cell-content {
overflow: hidden;
text-overflow: ellipsis;
@@ -934,4 +941,19 @@ body, html {
.panel-body {
padding: 0px;
}
+}
+
+.progress {
+ .sr-only {
+ text-shadow:
+ -1px -1px 1px #337ab7,
+ 1px -1px 1px #337ab7,
+ -1px 1px 1px #337ab7,
+ 1px 1px 1px #337ab7;
+
+ position: relative;
+ overflow: visible;
+ clip: auto;
+ left: 5px;
+ }
}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/tez-ui/src/main/webapp/app/templates/components/basic-table/progress-cell.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/basic-table/progress-cell.hbs b/tez-ui/src/main/webapp/app/templates/components/basic-table/progress-cell.hbs
new file mode 100644
index 0000000..c1e047e
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/templates/components/basic-table/progress-cell.hbs
@@ -0,0 +1,27 @@
+{{!
+* 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 view.cellContent.isPending}}
+ <i class="waiting"></i>
+{{else}}
+ {{#if view.cellContent.displayText}}
+ {{bs-progress-animated progressDecimal=view.cellContent.displayText}}
+ {{else}}
+ <span class="message">Not Available!</span>
+ {{/if}}
+{{/if}}
http://git-wip-us.apache.org/repos/asf/tez/blob/db725e56/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
index 504da2f..709f179 100644
--- a/tez-ui/src/main/webapp/app/templates/dag/index.hbs
+++ b/tez-ui/src/main/webapp/app/templates/dag/index.hbs
@@ -85,6 +85,28 @@
</div>
</div>
+{{#if liveData}}
+ <br/>
+ <h4>DAG Progress
+ ( Vertices {{completedVertices}}/{{liveData.length}} )
+ {{#if totalTasks}}
+ ( Tasks {{succeededTasks}}/{{totalTasks}} )
+ {{/if}}
+ :
+ {{progressStr}}
+ </h4>
+ {{bs-progress-animated progressDecimal=progress}}
+
+ {{basic-table-component
+ columns=liveColumns
+ rows=liveData
+ rowCount=liveData.length
+
+ enableStatus=false
+ enableSort=true
+ }}
+{{/if}}
+
{{#if diagnostics}}
<div class="margin-small-vertical">
{{#bs-panel heading="Diagnostics" collapsible=false dismiss=false type='danger'}}