tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From s...@apache.org
Subject tez git commit: TEZ-2766. Tez UI: Add vertex in-progress info in DAG details (sree)
Date Mon, 07 Sep 2015 13:31:52 GMT
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 <sree@apache.org>
Authored: Mon Sep 7 18:59:12 2015 +0530
Committer: Sreenath Somarajapuram <sree@apache.org>
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>&nbsp;
+{{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'}}


Mime
View raw message