AMBARI-5596. Jobs page: Selection of vertex in table should center vertex in UI (alexantonenko)

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

@@ -194,7 +194,9 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
 
   vertexSelectionUpdated : function() {
     var vertexId = this.get('selectedVertex.id');
-    console.log("vertexSelectionUpdated(): Selected ",vertexId);
+    var zoomTranslate = [];
+    var zoomBehavior = this.get('zoomBehavior');
+    var selectedNode = this.get('dagVisualModel').nodes.findProperty('id', vertexId);
     var dagVisualModel = this.get('dagVisualModel');
     if (dagVisualModel && dagVisualModel.nodes && dagVisualModel.nodes.length > 0) {
       dagVisualModel.nodes.forEach(function(node) {
@@ -202,6 +204,15 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
         console.log("vertexSelectionUpdated(): Updated  ",node.id," to ",node.selected);
       })
     }
+    if(!this.get('selectedVertex.notTableClick')){
+      var cX = selectedNode.x + (selectedNode.width) / 2;
+      var cY = selectedNode.y + (selectedNode.height) / 2;
+      zoomTranslate[0] = (225 / zoomBehavior.scale() -cX) ;
+      zoomTranslate[1] = (250 / zoomBehavior.scale() -cY) ;
+      this.set('zoomTranslate', [0,0]);
+      this.get('svgVerticesLayer').attr("transform", "translate(0,0)");
+      this.get('svgVerticesLayer').attr("transform", "translate("+zoomTranslate[0]+","+zoomTranslate[1]+")");
+    }
     this.refreshGraphUI();
   }.observes('selectedVertex'),
 
@@ -654,7 +665,7 @@ App.MainHiveJobDetailsTezDagView = Em.View.extend({
       if (vertex != null) {
         self.get('parentView').doSelectVertex({
           context : vertex
-        });
+        }, true);
       }
     });
     node.each(function(n, nodeIndex) {

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

@@ -125,17 +125,19 @@ App.MainHiveJobDetailsView = Em.View.extend({
         vertices.setEach('isSelected', false);
         this.doSelectVertex({
           context : vertices.objectAt(0)
-        });
+        }, false);
       }
     }
   }.observes('selectedVertex', 'content.tezDag.vertices.@each.id'),
 
-  doSelectVertex : function(event) {
+  doSelectVertex : function(event,notTableClick) {
+    notTableClick = notTableClick ? true : false;
     var newVertex = event.context;
     var currentVertex = this.get('selectedVertex');
     if (currentVertex != null) {
       currentVertex.set('isSelected', false);
     }
+    newVertex.set('notTableClick', notTableClick);
     newVertex.set('isSelected', true);
     this.set('selectedVertex', newVertex);
   },