You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tez.apache.org by pr...@apache.org on 2015/05/26 16:16:07 UTC
tez git commit: TEZ-2481. Tez UI: graphical view does not render
properly on IE11 (Sreenath Somarajapuram via pramachandran)
Repository: tez
Updated Branches:
refs/heads/master 87156be21 -> 7be325eab
TEZ-2481. Tez UI: graphical view does not render properly on IE11 (Sreenath Somarajapuram via pramachandran)
Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/7be325ea
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/7be325ea
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/7be325ea
Branch: refs/heads/master
Commit: 7be325eab1ad82aa2a2a6ff404a77426b2056599
Parents: 87156be
Author: Prakash Ramachandran <pr...@hortonworks.com>
Authored: Tue May 26 19:45:10 2015 +0530
Committer: Prakash Ramachandran <pr...@hortonworks.com>
Committed: Tue May 26 19:45:10 2015 +0530
----------------------------------------------------------------------
CHANGES.txt | 1 +
tez-ui/src/main/webapp/app/scripts/app.js | 3 +-
.../scripts/components/dag-view/graph-view.js | 52 +++++++++++++++-----
tez-ui/src/main/webapp/app/styles/dag-view.less | 5 ++
.../main/webapp/app/templates/application.hbs | 2 +-
5 files changed, 50 insertions(+), 13 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/tez/blob/7be325ea/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 9673c6a..a14e9da 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -24,6 +24,7 @@ Release 0.7.1: Unreleased
INCOMPATIBLE CHANGES
ALL CHANGES:
+ TEZ-2481. Tez UI: graphical view does not render properly on IE11
TEZ-2474. The old taskNum is logged incorrectly when parallelism is changed
TEZ-2460. Temporary solution for issue due to YARN-2560
TEZ-2455. Tez UI: Dag view caching, error handling and minor layout changes
http://git-wip-us.apache.org/repos/asf/tez/blob/7be325ea/tez-ui/src/main/webapp/app/scripts/app.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/app.js b/tez-ui/src/main/webapp/app/scripts/app.js
index dd493d0..31385fa 100644
--- a/tez-ui/src/main/webapp/app/scripts/app.js
+++ b/tez-ui/src/main/webapp/app/scripts/app.js
@@ -30,7 +30,8 @@ var App = window.App = Em.Application.createWithMixins(Bootstrap, {
LOG_TRANSITIONS_INTERNAL: true,
env: {
- isStandalone: true // Can ne set false in the wrapper initializer
+ isStandalone: true, // Can ne set false in the wrapper initializer
+ isIE: navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0
},
setConfigs: function (configs) {
http://git-wip-us.apache.org/repos/asf/tez/blob/7be325ea/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js b/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
index 1f8504b..3270ad9 100644
--- a/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
+++ b/tez-ui/src/main/webapp/app/scripts/components/dag-view/graph-view.js
@@ -171,6 +171,20 @@ App.DagViewComponent.graphView = (function (){
}
/**
+ * IE 11 does not support css transforms on svg elements. So manually set the same.
+ * please keep the transform parameters in sync with the ones in dag-view.less
+ * See https://connect.microsoft.com/IE/feedbackdetail/view/920928
+ *
+ * This can be removed once the bug is fixed in all supported IE versions
+ * @param value
+ */
+ function translateIfIE(element, x, y) {
+ if(App.env.isIE) {
+ element.attr('transform', 'translate(%@, %@)'.fmt(x, y));
+ }
+ }
+
+ /**
* Add task bubble to a vertex node
* @param node {SVG DOM element} Vertex node
* @param d {VertexDataNode}
@@ -179,8 +193,10 @@ App.DagViewComponent.graphView = (function (){
var group = node.append('g');
group.attr('class', 'task-bubble');
group.append('use').attr('xlink:href', '#task-bubble');
- group.append('text')
- .text(_trimText(d.get('data.numTasks'), 3));
+ translateIfIE(group.append('text')
+ .text(_trimText(d.get('data.numTasks'), 3)), 0, 4);
+
+ translateIfIE(group, 38, -15);
}
/**
* Add IO(source/sink) bubble to a vertex node
@@ -196,8 +212,10 @@ App.DagViewComponent.graphView = (function (){
group = node.append('g');
group.attr('class', 'io-bubble');
group.append('use').attr('xlink:href', '#io-bubble');
- group.append('text')
- .text(_trimText('%@/%@'.fmt(inputs, outputs), 3));
+ translateIfIE(group.append('text')
+ .text(_trimText('%@/%@'.fmt(inputs, outputs), 3)), 0, 4);
+
+ translateIfIE(group, -38, -15);
}
}
/**
@@ -212,8 +230,10 @@ App.DagViewComponent.graphView = (function (){
group = node.append('g');
group.attr('class', 'group-bubble');
group.append('use').attr('xlink:href', '#group-bubble');
- group.append('text')
- .text(_trimText(d.get('vertexGroup.groupMembers.length'), 2));
+ translateIfIE(group.append('text')
+ .text(_trimText(d.get('vertexGroup.groupMembers.length'), 2)), 0, 4);
+
+ translateIfIE(group, 38, 15);
}
}
/**
@@ -251,9 +271,9 @@ App.DagViewComponent.graphView = (function (){
node.attr('class', 'node %@'.fmt(className));
node.append('use').attr('xlink:href', '#%@-bg'.fmt(className));
- node.append('text')
+ translateIfIE(node.append('text')
.attr('class', 'title')
- .text(_trimText(d.get(titleProperty || 'name'), maxTitleLength || 12));
+ .text(_trimText(d.get(titleProperty || 'name'), maxTitleLength || 12)), 0, 4);
}
/**
* Populates the calling node with the required content.
@@ -426,7 +446,10 @@ App.DagViewComponent.graphView = (function (){
case "task":
var numTasks = d.get('data.numTasks');
tooltipData.title = (numTasks > 1 ? '%@ Tasks' : '%@ Task').fmt(numTasks);
- node = d3.event.target;
+
+ if(!App.env.isIE) {
+ node = d3.event.target;
+ }
break;
case "io":
var inputs = d.get('inputs.length'),
@@ -437,7 +460,9 @@ App.DagViewComponent.graphView = (function (){
title += (outputs > 1 ? '%@ Sinks' : '%@ Sink').fmt(outputs);
tooltipData.title = title;
- node = d3.event.target;
+ if(!App.env.isIE) {
+ node = d3.event.target;
+ }
break;
case "group":
tooltipData = {
@@ -656,7 +681,12 @@ App.DagViewComponent.graphView = (function (){
var type = d.get('dataMovementType') || "";
return 'link ' + type.toLowerCase();
})
- .attr("style", "marker-mid: url(#arrow-marker);")
+ /**
+ * IE11 rendering does not work for svg path element with marker set.
+ * See https://connect.microsoft.com/IE/feedback/details/801938
+ * This can be removed once the bug is fixed in all supported IE versions
+ */
+ .attr("style", App.env.isIE ? "" : "marker-mid: url(#arrow-marker);")
.attr('d', function(d) {
var node = _getTargetNode(d, "x0") || source;
var o = {x: node.x0, y: node.y0};
http://git-wip-us.apache.org/repos/asf/tez/blob/7be325ea/tez-ui/src/main/webapp/app/styles/dag-view.less
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/dag-view.less b/tez-ui/src/main/webapp/app/styles/dag-view.less
index 0bf0070..84422b5 100644
--- a/tez-ui/src/main/webapp/app/styles/dag-view.less
+++ b/tez-ui/src/main/webapp/app/styles/dag-view.less
@@ -169,6 +169,7 @@
font: 11px sans-serif;
text-anchor: middle;
+ // Ensure to manually change the transforms in graph-view.js for IE compatibility
-webkit-transform: translate(0px, 4px); // For safari
-moz-transform: translate(0px, 4px);
transform: translate(0px, 4px);
@@ -177,11 +178,13 @@
.vertex {
text.title {
+ // Ensure to manually change the transforms in graph-view.js for IE compatibility
-webkit-transform: translate(0px, 3px); // For safari
transform: translate(0px, -1px);
}
.task-bubble {
+ // Ensure to manually change the transforms in graph-view.js for IE compatibility
-webkit-transform: translate(38px, -15px);
transform: translate(38px, -15px);
text {
@@ -191,6 +194,7 @@
}
.io-bubble {
+ // Ensure to manually change the transforms in graph-view.js for IE compatibility
-webkit-transform: translate(-38px, -15px);
transform: translate(-38px, -15px);
opacity: 0;
@@ -206,6 +210,7 @@
}
.group-bubble {
+ // Ensure to manually change the transforms in graph-view.js for IE compatibility
-webkit-transform: translate(38px, 15px);
transform: translate(38px, 15px);
}
http://git-wip-us.apache.org/repos/asf/tez/blob/7be325ea/tez-ui/src/main/webapp/app/templates/application.hbs
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/templates/application.hbs b/tez-ui/src/main/webapp/app/templates/application.hbs
index b51818a..8dc0b55 100644
--- a/tez-ui/src/main/webapp/app/templates/application.hbs
+++ b/tez-ui/src/main/webapp/app/templates/application.hbs
@@ -16,7 +16,7 @@
* limitations under the License.
}}
-<div {{bind-attr class="App.env.isStandalone:standalone:wrapped"}}>
+<div {{bind-attr class="App.env.isStandalone:standalone:wrapped App.env.isIE:ie"}}>
<div class="top-wrapper">
<div id="top-nav">
<div class="navbar navbar-static-top">