tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From prak...@apache.org
Subject tez git commit: TEZ-2481. Tez UI: graphical view does not render properly on IE11 (Sreenath Somarajapuram via pramachandran)
Date Tue, 26 May 2015 14:19:00 GMT
Repository: tez
Updated Branches:
  refs/heads/branch-0.7 533979600 -> 2c194f86c


TEZ-2481. Tez UI: graphical view does not render properly on IE11 (Sreenath Somarajapuram
via pramachandran)

(cherry picked from commit 7be325eab1ad82aa2a2a6ff404a77426b2056599)


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

Branch: refs/heads/branch-0.7
Commit: 2c194f86c3062505043156967e3c697052f7015a
Parents: 5339796
Author: Prakash Ramachandran <pramachandran@hortonworks.com>
Authored: Tue May 26 19:45:10 2015 +0530
Committer: Prakash Ramachandran <pramachandran@hortonworks.com>
Committed: Tue May 26 19:46:49 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/2c194f86/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 0bf195a..ebd237a 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -7,6 +7,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/2c194f86/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/2c194f86/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/2c194f86/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/2c194f86/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">


Mime
View raw message