AMBARI-4610. Tez DAG edges should be should show edge-type (srimanth)

ambari-web/app/styles/application.less

@@ -5529,7 +5529,15 @@ i.icon-asterisks {
     path.link {
       fill: none;
       stroke: #666;
-      stroke-width: 1.5px;
+      stroke-width: 5px;
+      opacity: 0.6;
+    }
+    path.link.type-broadcast {
+      stroke: teal;
+    }
+    path.link.type-scatter-gather {
+      stroke: orange;
+      stroke-dasharray: 10,3;
     }
   }
 }

ambari-web/app/templates/main/jobs/hive_job_details_tez_dag.hbs

@@ -19,7 +19,7 @@
 <div id="tez-dag-section-body-dag">
   <svg id="tez-dag-svg" stroke="black" strokeWidth="2">
     <defs>
-      <marker id="arrow" viewBox="0 -5 10 10" refX="6" markerWidth="10" markerHeight="10" orient="auto">
+      <marker id="arrow" viewBox="0 -5 10 10" refX="4" markerWidth="3" markerHeight="3" orient="auto">
         <path d="M0,-5L10,0L0,5"></path>
       </marker>
       <filter id="shadow" width="200%" height="200%">

ambari-web/app/views/main/jobs/hive_job_details_tez_dag_view.js

@@ -367,11 +367,26 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
     }).target(function(d) {
       return {
         x : d.target.incomingX,
-        y : d.target.incomingY - 10
+        y : d.target.incomingY - 12
       }
     });
     var link = svgLayer.selectAll(".link").data(dagVisualModel.links).enter().append("g").attr("class", "link").attr("marker-end", "url(#arrow)");
-    link.append("path").attr("class", "link").attr("d", diagonal);
+    link.append("path").attr("class", function(l) {
+      var classes = "link ";
+      switch (l.edgeType) {
+      case App.TezDagVertexType.BROADCAST:
+        classes += "type-broadcast ";
+        break;
+      case App.TezDagVertexType.SCATTER_GATHER:
+        classes += "type-scatter-gather ";
+        break;
+      default:
+        break;
+      }
+      return classes;
+    }).attr("d", diagonal).append("title").text(function(l) {
+      return l.edgeType;
+    });
     // Create Nodes
     var node = svgLayer.selectAll(".node").data(dagVisualModel.nodes).enter().append("g").attr("class", "node");
     node.append("rect").attr("class", "background").attr("width", function(n) {