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 2016/06/01 05:23:26 UTC
tez git commit: TEZ-3281. Tez UI: Swimlane improvements (sree)
Repository: tez
Updated Branches:
refs/heads/master 6adfb5dad -> de8b4600a
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/de8b4600
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/de8b4600
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/de8b4600
Branch: refs/heads/master
Commit: de8b4600a3734c60f54d720c15ef8c68524681c9
Parents: 6adfb5d
Author: Sreenath Somarajapuram <sr...@apache.org>
Authored: Wed Jun 1 10:52:02 2016 +0530
Committer: Sreenath Somarajapuram <sr...@apache.org>
Committed: Wed Jun 1 10:52:02 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-ui/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/de8b4600/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 420ee58..f4a1d77 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -43,6 +43,7 @@ ALL CHANGES:
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-3063. Tez UI: Display Input, Output, Processor, Source and Sink configurations under a vertex
+ TEZ-3281. Tez UI: Swimlane improvements
Release 0.8.4: Unreleased
http://git-wip-us.apache.org/repos/asf/tez/blob/de8b4600/tez-ui/src/main/webapp/app/components/caller-info.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/caller-info.js b/tez-ui/src/main/webapp/app/components/caller-info.js
index ece33ac..f050ffa 100644
--- a/tez-ui/src/main/webapp/app/components/caller-info.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane-blocking-event.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane-blocking-event.js b/tez-ui/src/main/webapp/app/components/em-swimlane-blocking-event.js
index a487699..9300630 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane-blocking-event.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane-consolidated-process.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane-consolidated-process.js b/tez-ui/src/main/webapp/app/components/em-swimlane-consolidated-process.js
index 67186dd..ce2be59 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane-consolidated-process.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane-event-bar.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane-event-bar.js b/tez-ui/src/main/webapp/app/components/em-swimlane-event-bar.js
index 224489b..6c91192 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane-event-bar.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane-event.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane-event.js b/tez-ui/src/main/webapp/app/components/em-swimlane-event.js
index 4eef7f0..8fb227d 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane-event.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane-process-line.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane-process-line.js b/tez-ui/src/main/webapp/app/components/em-swimlane-process-line.js
index 2d6e2b6..d22b8d3 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane-process-line.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane-vertex-name.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane-vertex-name.js b/tez-ui/src/main/webapp/app/components/em-swimlane-vertex-name.js
index 36a7bbc..22621ee 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane-vertex-name.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-swimlane.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-swimlane.js b/tez-ui/src/main/webapp/app/components/em-swimlane.js
index 0c8b589..10d6447 100644
--- a/tez-ui/src/main/webapp/app/components/em-swimlane.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/components/em-tooltip.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/components/em-tooltip.js b/tez-ui/src/main/webapp/app/components/em-tooltip.js
index 33e30cb..e3ef8da 100644
--- a/tez-ui/src/main/webapp/app/components/em-tooltip.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/styles/em-swimlane-vertex-name.less
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/em-swimlane-vertex-name.less b/tez-ui/src/main/webapp/app/styles/em-swimlane-vertex-name.less
index 249a8f1..c5a4917 100644
--- a/tez-ui/src/main/webapp/app/styles/em-swimlane-vertex-name.less
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs b/tez-ui/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
index 8c977ee..2679784 100644
--- a/tez-ui/src/main/webapp/app/templates/components/em-swimlane-vertex-name.hbs
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/app/utils/vertex-process.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/utils/vertex-process.js b/tez-ui/src/main/webapp/app/utils/vertex-process.js
index 626cd22..c64c646 100644
--- a/tez-ui/src/main/webapp/app/utils/vertex-process.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/package.json
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/package.json b/tez-ui/src/main/webapp/package.json
index 7916d85..1e7046f 100644
--- a/tez-ui/src/main/webapp/package.json
+++ b/tez-ui/src/main/webapp/package.json
@@ -57,8 +57,8 @@
"phantomjs": "1.9.19"
},
"dependencies": {
- "em-helpers": "0.5.9",
- "em-table": "0.3.12",
+ "em-helpers": "0.5.10",
+ "em-table": "0.3.13",
"em-tgraph": "0.0.5"
}
}
http://git-wip-us.apache.org/repos/asf/tez/blob/de8b4600/tez-ui/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js b/tez-ui/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
index f085be3..ffd603d 100644
--- a/tez-ui/src/main/webapp/tests/integration/components/em-swimlane-vertex-name-test.js
+++ b/tez-ui/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/de8b4600/tez-ui/src/main/webapp/tests/unit/utils/vertex-process-test.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/tests/unit/utils/vertex-process-test.js b/tez-ui/src/main/webapp/tests/unit/utils/vertex-process-test.js
index 3faa4fe..853290d 100644
--- a/tez-ui/src/main/webapp/tests/unit/utils/vertex-process-test.js
+++ b/tez-ui/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);
});