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 <s...@apache.org> Authored: Wed Jun 1 10:52:02 2016 +0530 Committer: Sreenath Somarajapuram <s...@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); });