Repository: tez Updated Branches: refs/heads/branch-0.7 d14ae5915 -> 9be8cd47f
TEZ-2766. Tez UI: Add vertex in-progress info in DAG details (sree) (cherry picked from commit db725e568a53d88d402334b902c8f9ac6a9a3324) Project: http://git-wip-us.apache.org/repos/asf/tez/repo Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/9be8cd47 Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/9be8cd47 Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/9be8cd47 Branch: refs/heads/branch-0.7 Commit: 9be8cd47fe8c8122b90a1b1d7b31d54d85078f8b Parents: d14ae59 Author: Sreenath Somarajapuram <[email protected]> Authored: Mon Sep 7 18:59:12 2015 +0530 Committer: Sreenath Somarajapuram <[email protected]> Committed: Mon Sep 7 19:01:09 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/9be8cd47/CHANGES.txt ---------------------------------------------------------------------- diff --git a/CHANGES.txt b/CHANGES.txt index 7e73627..812004c 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -6,6 +6,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/9be8cd47/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/9be8cd47/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/9be8cd47/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/9be8cd47/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/9be8cd47/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 6390ffc..1df5753 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; @@ -927,4 +934,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/9be8cd47/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/9be8cd47/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'}}
