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 <[email protected]> Authored: Tue May 26 19:45:10 2015 +0530 Committer: Prakash Ramachandran <[email protected]> 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">
