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-3281. Tez UI: Swimlane improvements (sree)
Date Wed, 01 Jun 2016 05:52:09 GMT
Repository: tez
Updated Branches:
  refs/heads/branch-0.8 c9c6c920f -> f9fb1f1d7


TEZ-3281. Tez UI: Swimlane improvements (sree)


Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/f9fb1f1d
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/f9fb1f1d
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/f9fb1f1d

Branch: refs/heads/branch-0.8
Commit: f9fb1f1d7f933bbe1644f22d0c344a0b4f1d8e9e
Parents: c9c6c92
Author: Sreenath Somarajapuram <sree@apache.org>
Authored: Wed Jun 1 11:23:05 2016 +0530
Committer: Sreenath Somarajapuram <sree@apache.org>
Committed: Wed Jun 1 11:23:05 2016 +0530

----------------------------------------------------------------------
 CHANGES.txt                                     |  1 +
 .../main/webapp/app/components/caller-info.js   | 34 +++++++++++---------
 .../components/em-swimlane-blocking-event.js    |  2 +-
 .../em-swimlane-consolidated-process.js         | 32 +++++++++---------
 .../app/components/em-swimlane-event-bar.js     | 14 ++++----
 .../webapp/app/components/em-swimlane-event.js  |  6 ++--
 .../app/components/em-swimlane-process-line.js  |  2 +-
 .../app/components/em-swimlane-vertex-name.js   | 16 ---------
 .../main/webapp/app/components/em-swimlane.js   |  6 ++--
 .../main/webapp/app/components/em-tooltip.js    |  8 +++--
 .../app/styles/em-swimlane-vertex-name.less     | 27 ++++++++--------
 .../components/em-swimlane-vertex-name.hbs      |  8 ++---
 .../src/main/webapp/app/utils/vertex-process.js |  8 +++--
 tez-ui2/src/main/webapp/package.json            |  4 +--
 .../components/em-swimlane-vertex-name-test.js  |  5 +--
 .../tests/unit/utils/vertex-process-test.js     | 18 ++---------
 16 files changed, 88 insertions(+), 103 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index fc2006b..61770d0 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -34,6 +34,7 @@ ALL CHANGES:
   TEZ-3146. Tez UI 2: CSS & JS assets in the UI must be minified
   TEZ-3259. Tez UI: Build issue - File saver package is not working well with bower
   TEZ-3262. Tez UI : zip.js is not having a bower friendly versioning system
+  TEZ-3281. Tez UI: Swimlane improvements
 
 Release 0.8.3: 2016-04-14 
 

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/caller-info.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/caller-info.js b/tez-ui2/src/main/webapp/app/components/caller-info.js
index ece33ac..f050ffa 100644
--- a/tez-ui2/src/main/webapp/app/components/caller-info.js
+++ b/tez-ui2/src/main/webapp/app/components/caller-info.js
@@ -42,24 +42,26 @@ export default Ember.Component.extend({
   }),
 
   _init:  Ember.on('didInsertElement', function() {
-    var element  = Ember.$(this.get('element')).find('textarea')[0],
-        codeMirror = CodeMirror.fromTextArea(element, {
-          theme: 'default',
-          indentUnit: 2,
-          smartIndent: true,
-          tabSize: 4,
-          electricChars: true,
-          lineWrapping: true,
-          lineNumbers: true,
-          readOnly: true,
-          autofocus: false,
-          dragDrop: false,
-        });
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      var element  = Ember.$(this.get('element')).find('textarea')[0],
+          codeMirror = CodeMirror.fromTextArea(element, {
+            theme: 'default',
+            indentUnit: 2,
+            smartIndent: true,
+            tabSize: 4,
+            electricChars: true,
+            lineWrapping: true,
+            lineNumbers: true,
+            readOnly: true,
+            autofocus: false,
+            dragDrop: false,
+          });
 
-    this.set('codeMirror', codeMirror);
+      this.set('codeMirror', codeMirror);
 
-    this._modeChanged();
-    this._infoChanged();
+      this._modeChanged();
+      this._infoChanged();
+    });
   }),
 
   _modeChanged: Ember.observer("mode", function() {

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane-blocking-event.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-blocking-event.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-blocking-event.js
index a487699..9300630 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane-blocking-event.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-blocking-event.js
@@ -44,7 +44,7 @@ export default Ember.Component.extend({
     if(blockTime && this.get("blocking.endEvent.time") >= blockTime) {
       blockerEventHeight = (this.get("blocking.index") - this.get("process.index")) * 30;
 
-      Ember.run.later(this, function () {
+      Ember.run.scheduleOnce('afterRender', this, function() {
         this.$().css({
           "left": this.get("processor").timeToPositionPercent(blockTime) + "%"
         });

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane-consolidated-process.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-consolidated-process.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-consolidated-process.js
index 67186dd..ce2be59 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane-consolidated-process.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-consolidated-process.js
@@ -46,22 +46,24 @@ export default Ember.Component.extend({
   }),
 
   didInsertElement: Ember.observer("fromPos", "toPos", function () {
-    var fromPos = this.get("fromPos"),
-        toPos = this.get("toPos"),
-        thisElement = this.$();
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      var fromPos = this.get("fromPos"),
+          toPos = this.get("toPos"),
+          thisElement = this.$();
 
-    if(fromPos && toPos) {
-      thisElement.show();
-      thisElement.css({
-        left: fromPos + "%",
-        right: (100 - toPos) + "%",
-        "background-color": this.get("process").getConsolidateColor(),
-        "z-index": parseInt(toPos - fromPos)
-      });
-    }
-    else {
-      thisElement.hide();
-    }
+      if(fromPos && toPos) {
+        thisElement.show();
+        thisElement.css({
+          left: fromPos + "%",
+          right: (100 - toPos) + "%",
+          "background-color": this.get("process").getConsolidateColor(),
+          "z-index": parseInt(toPos - fromPos)
+        });
+      }
+      else {
+        thisElement.hide();
+      }
+    });
   }),
 
   sendMouseAction: function (name, mouseEvent) {

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane-event-bar.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-event-bar.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-event-bar.js
index 224489b..6c91192 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane-event-bar.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-event-bar.js
@@ -51,8 +51,8 @@ export default Ember.Component.extend({
         toEventPos = processor.timeToPositionPercent(this.get("toEvent.time")),
         color = this.get("bar.color") || this.get("process").getBarColor(this.get("barIndex"));
 
-    if(fromEventPos && toEventPos) {
-      Ember.run.later(this, function () {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      if(fromEventPos && toEventPos) {
         this.$().show();
         this.$(".event-bar").css({
           left: fromEventPos + "%",
@@ -60,11 +60,11 @@ export default Ember.Component.extend({
           "background-color": color,
           "border-color": this.get("process").getColor()
         });
-      });
-    }
-    else {
-      this.$().hide();
-    }
+      }
+      else {
+        this.$().hide();
+      }
+    });
   }),
 
   sendMouseAction: function (name, mouseEvent) {

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js
index 4eef7f0..8fb227d 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-event.js
@@ -30,10 +30,10 @@ export default Ember.Component.extend({
   didInsertElement: Ember.observer("event.time", "processor.timeWindow", function () {
     var color = this.get("process").getColor();
 
-    this.$(".event-line").css("border-color", color);
-    this.$(".event-bubble").css("border-color", color);
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.$(".event-line").css("border-color", color);
+      this.$(".event-bubble").css("border-color", color);
 
-    Ember.run.later(this, function () {
       this.$().css({
         "left": this.get("processor").timeToPositionPercent(this.get("event.time")) + "%"
       });

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane-process-line.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-process-line.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-process-line.js
index 2d6e2b6..d22b8d3 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane-process-line.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-process-line.js
@@ -29,7 +29,7 @@ export default Ember.Component.extend({
         startPos = processor.timeToPositionPercent(this.get("process.startEvent.time")),
         endPos = processor.timeToPositionPercent(this.get("process.endEvent.time"));
 
-    Ember.run.later(this, function () {
+    Ember.run.scheduleOnce('afterRender', this, function() {
       this.$(".process-line").css({
         left: startPos + "%",
         right: (100 - endPos) + "%",

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane-vertex-name.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane-vertex-name.js b/tez-ui2/src/main/webapp/app/components/em-swimlane-vertex-name.js
index 36a7bbc..22621ee 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane-vertex-name.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane-vertex-name.js
@@ -18,8 +18,6 @@
 
 import Ember from 'ember';
 
-const MAX_TEXT_LENGTH = 10;
-
 export default Ember.Component.extend({
 
   process: null,
@@ -42,20 +40,6 @@ export default Ember.Component.extend({
     }
   }),
 
-  useEllipsis: Ember.computed("process.name", "progressText", function () {
-    var name = this.get("process.name") || "",
-        progressLength = this.get("progressText.length");
-    progressLength = progressLength ? progressLength + 1 : 0;
-    return  name.length + progressLength - 1 > MAX_TEXT_LENGTH;
-  }),
-
-  processName: Ember.computed("process.name", "progressText", function () {
-    var name = this.get("process.name") || "",
-        progressLength = this.get("progressText.length");
-    progressLength = progressLength ? progressLength + 1 : 0;
-    return name.substr(Math.max(name.length - MAX_TEXT_LENGTH - progressLength, 0));
-  }),
-
   mouseEnter: function (mouseEvent) {
     this.sendMouseAction("showTooltip", mouseEvent);
   },

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-swimlane.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-swimlane.js b/tez-ui2/src/main/webapp/app/components/em-swimlane.js
index 0c8b589..10d6447 100644
--- a/tez-ui2/src/main/webapp/app/components/em-swimlane.js
+++ b/tez-ui2/src/main/webapp/app/components/em-swimlane.js
@@ -69,8 +69,10 @@ export default Ember.Component.extend({
   })),
 
   didInsertElement: function () {
-    this.onZoom();
-    this.listenScroll();
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.onZoom();
+      this.listenScroll();
+    });
   },
 
   onZoom: Ember.observer("zoom", function () {

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/components/em-tooltip.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/components/em-tooltip.js b/tez-ui2/src/main/webapp/app/components/em-tooltip.js
index 33e30cb..e3ef8da 100644
--- a/tez-ui2/src/main/webapp/app/components/em-tooltip.js
+++ b/tez-ui2/src/main/webapp/app/components/em-tooltip.js
@@ -76,9 +76,11 @@ export default Ember.Component.extend({
   })),
 
   didInsertElement: function () {
-    this.setProperties({
-      window: Ember.$(window),
-      tip: this.$(),
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.setProperties({
+        window: Ember.$(window),
+        tip: this.$(),
+      });
     });
     Ember.$(document).on("mousemove", this, this.onMouseMove);
   },

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/styles/em-swimlane-vertex-name.less
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/styles/em-swimlane-vertex-name.less b/tez-ui2/src/main/webapp/app/styles/em-swimlane-vertex-name.less
index 249a8f1..c5a4917 100644
--- a/tez-ui2/src/main/webapp/app/styles/em-swimlane-vertex-name.less
+++ b/tez-ui2/src/main/webapp/app/styles/em-swimlane-vertex-name.less
@@ -20,29 +20,25 @@
 
   cursor: pointer;
 
-  direction: rtl;
-  text-align: right;
-
   padding: 5px 5px 0px 0px;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
+  text-align: right;
   height: 30px;
 
-  .name-text {
-    display: inline-block;
-    vertical-align: baseline;
-
-    &.ellipsis:after {
-      content:"\2026";
-      margin-right: -4px;
-    }
+  .progress-text {
+    padding-left: 3px;
+    float: right;
   }
 
   .em-table-status-cell {
     display: inline-block;
-    vertical-align: text-top;
+    vertical-align: top;
+    padding-left: 3px;
 
-    direction: ltr;
+    float: right;
 
     .status {
       display: inline-block;
@@ -61,5 +57,10 @@
       margin-top: 2px;
     }
   }
+}
 
+@-moz-document url-prefix() {
+  .progress-text, .em-table-status-cell {
+    float: none !important;
+  }
 }

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
index 8c977ee..2679784 100644
--- a/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
+++ b/tez-ui2/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
@@ -16,8 +16,8 @@
  * limitations under the License.
 }}
 
-{{progressText}}
+<span class="progress-text">
+  {{progressText}}
+</span>
 {{em-table-status-cell content=process.vertex.finalStatus}}
-<span class="name-text {{if useEllipsis 'ellipsis'}}">
-  {{processName}}
-</span>
\ No newline at end of file
+{{process.name}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/app/utils/vertex-process.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/app/utils/vertex-process.js b/tez-ui2/src/main/webapp/app/utils/vertex-process.js
index 626cd22..c64c646 100644
--- a/tez-ui2/src/main/webapp/app/utils/vertex-process.js
+++ b/tez-ui2/src/main/webapp/app/utils/vertex-process.js
@@ -194,8 +194,6 @@ export default Process.extend({
       case "consolidated-process":
         vertexDescription = `Contribution ${options.contribution}%`;
         /* falls through */
-      case "event-bar":
-      case "process-line":
       case "process-name":
         let properties = this.getVisibleProps().map(function (definition) {
           return {
@@ -212,6 +210,12 @@ export default Process.extend({
           description: vertexDescription
         }];
       break;
+      case "event-bar":
+      case "process-line":
+        contents = [{
+          title: this.get("name"),
+        }];
+      break;
       case "event":
         var edge;
         contents = options.events.map(function (event) {

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/package.json
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/package.json b/tez-ui2/src/main/webapp/package.json
index 018c088..e3e7331 100644
--- a/tez-ui2/src/main/webapp/package.json
+++ b/tez-ui2/src/main/webapp/package.json
@@ -56,8 +56,8 @@
     "phantomjs": "1.9.19"
   },
   "dependencies": {
-    "em-helpers": "0.5.8",
-    "em-table": "0.3.12",
+    "em-helpers": "0.5.10",
+    "em-table": "0.3.13",
     "em-tgraph": "0.0.4"
   }
 }

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
index f085be3..ffd603d 100644
--- a/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
+++ b/tez-ui2/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
@@ -48,7 +48,8 @@ test('Name test', function(assert) {
 
   this.render(hbs`{{em-swimlane-vertex-name process=process}}`);
   return wait().then(() => {
-    assert.equal(this.$(".name-text").text().trim(), 'TestName');
+    var content = this.$().text().trim();
+    assert.equal(content.substr(content.length - 8), 'TestName');
   });
 });
 
@@ -62,7 +63,7 @@ test('Progress test', function(assert) {
 
   this.render(hbs`{{em-swimlane-vertex-name process=process}}`);
   return wait().then(() => {
-    assert.equal(this.$().text().trim().substr(0, 3), '50%');
+    assert.equal(this.$(".progress-text").text().trim(), '50%');
   });
 });
 

http://git-wip-us.apache.org/repos/asf/tez/blob/f9fb1f1d/tez-ui2/src/main/webapp/tests/unit/utils/vertex-process-test.js
----------------------------------------------------------------------
diff --git a/tez-ui2/src/main/webapp/tests/unit/utils/vertex-process-test.js b/tez-ui2/src/main/webapp/tests/unit/utils/vertex-process-test.js
index 3faa4fe..853290d 100644
--- a/tez-ui2/src/main/webapp/tests/unit/utils/vertex-process-test.js
+++ b/tez-ui2/src/main/webapp/tests/unit/utils/vertex-process-test.js
@@ -242,24 +242,10 @@ test('getTooltipContents-process test', function(assert) {
 
   var processTooltip = process.getTooltipContents("event-bar")[0];
   assert.equal(processTooltip.title, "TestName");
-
-  assert.equal(processTooltip.properties.length, 2);
-
-  assert.equal(processTooltip.properties[0].name, "Prop 1");
-  assert.equal(processTooltip.properties[0].value, "val1");
-
-  assert.equal(processTooltip.properties[1].name, "Prop 2");
-  assert.equal(processTooltip.properties[1].value, "val2");
+  assert.notOk(processTooltip.properties);
 
   processTooltip = process.getTooltipContents("process-line")[0];
   assert.equal(processTooltip.title, "TestName");
-
-  assert.equal(processTooltip.properties.length, 2);
-
-  assert.equal(processTooltip.properties[0].name, "Prop 1");
-  assert.equal(processTooltip.properties[0].value, "val1");
-
-  assert.equal(processTooltip.properties[1].name, "Prop 2");
-  assert.equal(processTooltip.properties[1].value, "val2");
+  assert.notOk(processTooltip.properties);
 
 });


Mime
View raw message