Repository: tez Updated Branches: refs/heads/branch-0.6 a54a3826f -> df78a5186
TEZ-2012. TEZ UI - Show page number in all tables, and display more readable task/attempt ids. (Sreenath Somarajapuram via hitesh) (cherry picked from commit 7b8b8ee3fa9c2293fe2d9a3de26e0a89e787a31b) Project: http://git-wip-us.apache.org/repos/asf/tez/repo Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/239aa1da Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/239aa1da Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/239aa1da Branch: refs/heads/branch-0.6 Commit: 239aa1dae0d700649d2da30037dd556a7a136f52 Parents: a54a382 Author: Hitesh Shah <[email protected]> Authored: Fri Jan 30 10:27:21 2015 -0800 Committer: Hitesh Shah <[email protected]> Committed: Fri Jan 30 10:32:24 2015 -0800 ---------------------------------------------------------------------- CHANGES.txt | 1 + .../webapp/app/scripts/components/page-nav.js | 2 +- .../controllers/dag-task-attempts-controller.js | 14 ++++-- .../webapp/app/scripts/controllers/dag_tasks.js | 13 +++-- .../task_task_attempts_controller.js | 52 ++++++++++++++++---- .../vertex_task_attempts_controller.js | 14 ++++-- .../controllers/vertex_tasks_controller.js | 15 ++++-- .../app/scripts/mixins/paginated_content.js | 7 ++- tez-ui/src/main/webapp/app/styles/main.less | 35 ++++++++++--- .../app/templates/components/page-nav.hbs | 9 ++-- .../app/templates/partials/table-controls.hbs | 1 + 11 files changed, 126 insertions(+), 37 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/CHANGES.txt ---------------------------------------------------------------------- diff --git a/CHANGES.txt b/CHANGES.txt index 0bb7812..50b9f5c 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -6,6 +6,7 @@ Release 0.6.1: Unreleased INCOMPATIBLE CHANGES ALL CHANGES: + TEZ-2012. TEZ UI - Show page number in all tables, and display more readable task/attempt ids. TEZ-1973. Dag View TEZ-2010. History payload generated from conf has ${var} placeholders. TEZ-1946. Tez UI: add source & sink views, add counters to vertices/all task views. http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/components/page-nav.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/components/page-nav.js b/tez-ui/src/main/webapp/app/scripts/components/page-nav.js index 0105c7b..c6d302c 100644 --- a/tez-ui/src/main/webapp/app/scripts/components/page-nav.js +++ b/tez-ui/src/main/webapp/app/scripts/components/page-nav.js @@ -19,7 +19,7 @@ App.PageNavComponent = Em.Component.extend({ layoutName: 'components/page-nav', - classNames: ['inline-block'], + classNames: ['inline-block', 'page-nav-link'], actions: { gotoNext: function() { http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/controllers/dag-task-attempts-controller.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/dag-task-attempts-controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/dag-task-attempts-controller.js index 9648b96..eaa533e 100644 --- a/tez-ui/src/main/webapp/app/scripts/controllers/dag-task-attempts-controller.js +++ b/tez-ui/src/main/webapp/app/scripts/controllers/dag-task-attempts-controller.js @@ -56,12 +56,19 @@ App.DagTaskAttemptsController = Em.ObjectController.extend(App.PaginatedContentM return [ { id: 'taskId', - headerCellName: 'Task ID', + headerCellName: 'Task Index', tableCellViewClass: Em.Table.TableCell.extend({ template: Em.Handlebars.compile( - "{{#link-to 'task' view.cellContent class='ember-table-content'}}{{view.cellContent}}{{/link-to}}") + "{{#link-to 'task' view.cellContent.taskId class='ember-table-content'}}{{view.cellContent.displayId}}{{/link-to}}") }), - contentPath: 'taskID', + getCellContent: function (row) { + var taskId = row.get('taskID'), + idPrefix = 'task_%@_'.fmt(row.get('dagID').substr(4)); + return { + taskId: taskId, + displayId: taskId.indexOf(idPrefix) == 0 ? taskId.substr(idPrefix.length) : taskId + }; + } }, { id: 'attemptNo', @@ -167,7 +174,6 @@ App.DagTaskAttemptsController = Em.ObjectController.extend(App.PaginatedContentM } } ]; - }.property(), columnConfigs: function() { http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/controllers/dag_tasks.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/dag_tasks.js b/tez-ui/src/main/webapp/app/scripts/controllers/dag_tasks.js index 92968a2..41bd101 100644 --- a/tez-ui/src/main/webapp/app/scripts/controllers/dag_tasks.js +++ b/tez-ui/src/main/webapp/app/scripts/controllers/dag_tasks.js @@ -93,12 +93,19 @@ App.DagTasksController = Em.ObjectController.extend(App.PaginatedContentMixin, A return [ { id: 'id', - headerCellName: 'Task ID', + headerCellName: 'Task Index', tableCellViewClass: Em.Table.TableCell.extend({ template: Em.Handlebars.compile( - "{{#link-to 'task' view.cellContent class='ember-table-content'}}{{view.cellContent}}{{/link-to}}") + "{{#link-to 'task' view.cellContent.id class='ember-table-content'}}{{view.cellContent.displayId}}{{/link-to}}") }), - contentPath: 'id', + getCellContent: function (row) { + var id = row.get('id'), + idPrefix = 'task_%@_'.fmt(row.get('dagID').substr(4)); + return { + id: id, + displayId: id.indexOf(idPrefix) == 0 ? id.substr(idPrefix.length) : id + }; + } }, { id: 'vertexID', http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/controllers/task_task_attempts_controller.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/task_task_attempts_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/task_task_attempts_controller.js index 538c565..399124b 100644 --- a/tez-ui/src/main/webapp/app/scripts/controllers/task_task_attempts_controller.js +++ b/tez-ui/src/main/webapp/app/scripts/controllers/task_task_attempts_controller.js @@ -56,13 +56,36 @@ App.TaskAttemptsController = Em.ObjectController.extend(App.PaginatedContentMixi defaultColumnConfigs: function() { return [ { - id: 'taskId', - headerCellName: 'Task ID', + id: 'id', + headerCellName: 'Attempt Index', tableCellViewClass: Em.Table.TableCell.extend({ template: Em.Handlebars.compile( - "{{#link-to 'taskAttempt' view.cellContent class='ember-table-content'}}{{view.cellContent}}{{/link-to}}") + "{{#link-to 'taskAttempt' view.cellContent.id class='ember-table-content'}}{{view.cellContent.displayId}}{{/link-to}}") }), - contentPath: 'id', + getCellContent: function (row) { + var id = row.get('id'), + idPrefix = 'attempt_%@_'.fmt(row.get('dagID').substr(4)); + return { + id: id, + displayId: id.indexOf(idPrefix) == 0 ? id.substr(idPrefix.length) : id + }; + } + }, + { + id: 'attemptNo', + headerCellName: 'Attempt No', + tableCellViewClass: Em.Table.TableCell.extend({ + template: Em.Handlebars.compile( + "{{#link-to 'taskAttempt' view.cellContent.attemptID class='ember-table-content'}}{{view.cellContent.attemptNo}}{{/link-to}}") + }), + getCellContent: function(row) { + var attemptID = row.get('id') || '', + attemptNo = attemptID.split(/[_]+/).pop(); + return { + attemptNo: attemptNo, + attemptID: attemptID + }; + } }, { id: 'startTime', @@ -109,14 +132,26 @@ App.TaskAttemptsController = Em.ObjectController.extend(App.PaginatedContentMixi } }, { + id: 'containerId', + headerCellName: 'Container', + contentPath: 'containerId' + }, + { id: 'nodeId', - headerCellName: 'Node ID', + headerCellName: 'Node', contentPath: 'nodeId' }, { - id: 'containerId', - headerCellName: 'Container ID', - contentPath: 'containerId' + id: 'actions', + headerCellName: 'Actions', + tableCellViewClass: Em.Table.TableCell.extend({ + template: Em.Handlebars.compile( + '<span class="ember-table-content">\ + {{#link-to "taskAttempt.counters" view.cellContent}}counters{{/link-to}} \ + </span>' + ) + }), + contentPath: 'id' }, { id: 'logs', @@ -140,7 +175,6 @@ App.TaskAttemptsController = Em.ObjectController.extend(App.PaginatedContentMixi } } ]; - }.property(), columnConfigs: function() { http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/controllers/vertex_task_attempts_controller.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/vertex_task_attempts_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/vertex_task_attempts_controller.js index da95834..a525ba4 100644 --- a/tez-ui/src/main/webapp/app/scripts/controllers/vertex_task_attempts_controller.js +++ b/tez-ui/src/main/webapp/app/scripts/controllers/vertex_task_attempts_controller.js @@ -57,12 +57,19 @@ App.VertexTaskAttemptsController = Em.ObjectController.extend(App.PaginatedConte return [ { id: 'taskId', - headerCellName: 'Task ID', + headerCellName: 'Task Index', tableCellViewClass: Em.Table.TableCell.extend({ template: Em.Handlebars.compile( - "{{#link-to 'task' view.cellContent class='ember-table-content'}}{{view.cellContent}}{{/link-to}}") + "{{#link-to 'task' view.cellContent.taskId class='ember-table-content'}}{{view.cellContent.displayId}}{{/link-to}}") }), - contentPath: 'taskID', + getCellContent: function (row) { + var taskId = row.get('taskID'), + idPrefix = 'task_%@_'.fmt(row.get('dagID').substr(4)); + return { + taskId: taskId, + displayId: taskId.indexOf(idPrefix) == 0 ? taskId.substr(idPrefix.length) : taskId + }; + } }, { id: 'attemptNo', @@ -168,7 +175,6 @@ App.VertexTaskAttemptsController = Em.ObjectController.extend(App.PaginatedConte } } ]; - }.property(), columnConfigs: function() { http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/controllers/vertex_tasks_controller.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/controllers/vertex_tasks_controller.js b/tez-ui/src/main/webapp/app/scripts/controllers/vertex_tasks_controller.js index dc05ac1..44f160e 100644 --- a/tez-ui/src/main/webapp/app/scripts/controllers/vertex_tasks_controller.js +++ b/tez-ui/src/main/webapp/app/scripts/controllers/vertex_tasks_controller.js @@ -89,13 +89,20 @@ App.VertexTasksController = Em.ObjectController.extend(App.PaginatedContentMixin defaultColumnConfigs: function() { return [ { - id: 'taskId', - headerCellName: 'Task ID', + id: 'id', + headerCellName: 'Task Index', tableCellViewClass: Em.Table.TableCell.extend({ template: Em.Handlebars.compile( - "{{#link-to 'task' view.cellContent class='ember-table-content'}}{{view.cellContent}}{{/link-to}}") + "{{#link-to 'task' view.cellContent.id class='ember-table-content'}}{{view.cellContent.displayId}}{{/link-to}}") }), - contentPath: 'id', + getCellContent: function (row) { + var id = row.get('id'), + idPrefix = 'task_%@_'.fmt(row.get('dagID').substr(4)); + return { + id: id, + displayId: id.indexOf(idPrefix) == 0 ? id.substr(idPrefix.length) : id + }; + } }, { id: 'startTime', http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js b/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js index 07c34b0..cce7937 100644 --- a/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js +++ b/tez-ui/src/main/webapp/app/scripts/mixins/paginated_content.js @@ -21,6 +21,7 @@ App.PaginatedContentMixin = Em.Mixin.create({ // defined in the route. count: 10, + page: 1, fromID: null, // The dropdown contents for number of items to show. @@ -90,6 +91,7 @@ App.PaginatedContentMixin = Em.Mixin.create({ this.set('navIDs.currentID', ''); this.set('navIDs.nextID', ''); this.set('fromID', null); + this.set('page', 1); }, updatePagination: function(dataArray) { @@ -106,7 +108,7 @@ App.PaginatedContentMixin = Em.Mixin.create({ hasPrev: function() { return this.navIDs.prevIDs.length > 0; - }.property('navIDs.prevIDs.[]', 'navIDs.prevIDs.length', 'fromID'), + }.property('navIDs.prevIDs.[]', 'navIDs.prevIDs.length', 'fromID', 'page'), hasNext: function() { return !!this.navIDs.nextID; @@ -118,6 +120,7 @@ App.PaginatedContentMixin = Em.Mixin.create({ var prevPageId = this.navIDs.prevIDs.popObject(); this.set('fromID', prevPageId); this.set('loading', true); + this.set('page', this.get('page') - 1); this.loadEntities(); }, @@ -127,6 +130,7 @@ App.PaginatedContentMixin = Em.Mixin.create({ this.set('navIDs.prevIDs', []); this.set('fromID', firstPageId); this.set('loading', true); + this.set('page', 1); this.loadEntities(); }, @@ -135,6 +139,7 @@ App.PaginatedContentMixin = Em.Mixin.create({ this.navIDs.prevIDs.pushObject(this.navIDs.currentID); this.set('fromID', this.get('navIDs.nextID')); this.set('loading', true); + this.set('page', this.get('page') + 1); this.loadEntities(); }, }, http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/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 34b44d9..1cbe3bb 100644 --- a/tez-ui/src/main/webapp/app/styles/main.less +++ b/tez-ui/src/main/webapp/app/styles/main.less @@ -244,25 +244,44 @@ body, html, body > .ember-view { /* Navigation */ .page-nav-link { - .fa; - .fa-2x; - cursor: pointer; - color: black; + padding-top: 2px; + + .page-count { + display: inline-block; + text-align: right; + width: 100px; + .text { + display: inline-block; + width: 30px; + margin-right: 3px; + font-size: .8em; + } + .counter { + font-size: 2em; + } + } + + .nav-first, .nav-prev, .nav-next { + .fa; + .fa-2x; + cursor: pointer; + color: black; + } - &.disabled { + .disabled { pointer-events: none; color:lightgray; } - &.nav-first { + .nav-first { .fa-icon(arrow-circle-o-left); } - &.nav-prev { + .nav-prev { .fa-icon(arrow-circle-left) } - &.nav-next { + .nav-next { .fa-icon(arrow-circle-right); } } http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs ---------------------------------------------------------------------- diff --git a/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs b/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs index 85a254c..dad7c82 100644 --- a/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs +++ b/tez-ui/src/main/webapp/app/templates/components/page-nav.hbs @@ -16,6 +16,9 @@ * limitations under the License. }} -<i {{bind-attr class=':page-nav-link :nav-first hasPrev:enabled:disabled'}} {{action 'gotoFirst'}}></i> -<i {{bind-attr class=':page-nav-link :nav-prev hasPrev:enabled:disabled'}} {{action 'gotoPrev'}}></i> -<i {{bind-attr class=':page-nav-link :nav-next hasNext:enabled:disabled'}} {{action 'gotoNext'}}></i> +<div class="page-count"> + <div class="text">Page</div><span class="counter">{{page}}</span> +</div> +<i {{bind-attr class=':nav-first hasPrev:enabled:disabled'}} {{action 'gotoFirst'}}></i> +<i {{bind-attr class=':nav-prev hasPrev:enabled:disabled'}} {{action 'gotoPrev'}}></i> +<i {{bind-attr class=':nav-next hasNext:enabled:disabled'}} {{action 'gotoNext'}}></i> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tez/blob/239aa1da/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 index 0525dea..1b5745f 100644 --- a/tez-ui/src/main/webapp/app/templates/partials/table-controls.hbs +++ b/tez-ui/src/main/webapp/app/templates/partials/table-controls.hbs @@ -27,6 +27,7 @@ {{page-nav-component hasPrev=hasPrev hasNext=hasNext + page=page navNext='navigateNext' navPrev='navigatePrev' navFirst='navigateFirst'
