AMBARI-20677.Centering workflows for zoom breaks when multiple tabs exists(M Madhan Mohan Reddy via padmapriyanitt)

contrib/views/wfmanager/src/main/resources/ui/app/components/designer-workspace.js

@@ -305,6 +305,7 @@ export default Ember.Component.extend({
       if(tab.type === 'wf' && tab.context){
         CommonUtils.setTestContext(tab.context);
         tab.context.resize();
+        tab.context.centerGraph();
       }else if(tab.type === 'dashboard'){
         this.sendAction('showDashboard');
       }

contrib/views/wfmanager/src/main/resources/ui/app/components/flow-designer.js

@@ -248,6 +248,9 @@ export default Ember.Component.extend(FindNodeMixin, Validations, {
   resize(){
     this.flowRenderer.resize();
   },
+  centerGraph(){
+    this.flowRenderer.setGraphCenter();
+  },
   cleanupFlowRenderer:function(){
     this.set('renderNodeTransitions',false);
     this.flowRenderer.cleanup();

contrib/views/wfmanager/src/main/resources/ui/app/domain/cytoscape-flow-renderer.js

@@ -67,11 +67,18 @@ var CytoscapeRenderer= Ember.Object.extend({
   _setCyOverflow() {
     Ember.set(this.get("cyOverflow"), "overflown", this.cy.elements().renderedBoundingBox().y2 > this.cy.height());
   },
-  _setGraphCenter() {
+  setGraphCenter() {
+    if (this.cy && !this.centered){
+      Ember.run.later(this, function() {
+        this._setGraphCenterOnStartNode();
+      },50);
+    }
+  },
+  _setGraphCenterOnStartNode() {
     var startDataNode = this.get("dataNodes").filterBy("data.type", "start");
     if (startDataNode[0] && startDataNode[0].data.id) {
       var startNode = this.cy.$("#" + startDataNode[0].data.id);
-      this.cy.center();
+      this.cy.center(startNode);
       this.cy.pan({y:50});
     }
   },
@@ -400,7 +407,7 @@ var CytoscapeRenderer= Ember.Object.extend({
     this.cy.endBatch();
     this.cy.layout(this.get("layoutConfigs"));
     this._setCyOverflow();
-    this._setGraphCenter();
+    this._setGraphCenterOnStartNode();
   },
 
   initRenderer(callback, settings){