added ansible server functionality

multiple ansible server for CDT

Issue-ID: APPC-1510
Change-Id: I383bc63705418654efb596c617309821ebbeb9b4
Signed-off-by: Mohamed Asgar Samiulla <ma926a@us.att.com>
diff --git a/src/app/vnfs/build-artifacts/build-artifacts.component.html b/src/app/vnfs/build-artifacts/build-artifacts.component.html
index 33d8064..fad94cb 100644
--- a/src/app/vnfs/build-artifacts/build-artifacts.component.html
+++ b/src/app/vnfs/build-artifacts/build-artifacts.component.html
@@ -23,9 +23,11 @@
 <div class="container">
     <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-            <ul class="nav nav-tabs custom-heade-nav" style="margin-bottom: 12px;">
-                <li [ngClass]="{'active-tab':((router.url.indexOf('/'+item.url))>-1 || router.url.indexOf(item.url)>-1 )}" *ngFor="let item of tabs">
-                     <a *ngIf="this.refDataRequiredFiels == true" 
+            <ul class="nav nav-tabs custom-heade-nav" style="    margin-bottom: 12px;">
+                <li [ngClass]="{'active-tab':((router.url.indexOf('/'+item.url))>-1 || router.url.indexOf(item.url)>-1 )}"
+                    *ngFor="let item of tabs">
+
+                    <a *ngIf="this.refDataRequiredFiels == true" 
                         [routerLink]="[item.url]" 
                         [type]="item.type" 
                         class="nav-link">{{item.name}}</a>
diff --git a/src/app/vnfs/build-artifacts/build-artifacts.component.ts b/src/app/vnfs/build-artifacts/build-artifacts.component.ts
index d95b478..9079abb 100644
--- a/src/app/vnfs/build-artifacts/build-artifacts.component.ts
+++ b/src/app/vnfs/build-artifacts/build-artifacts.component.ts
@@ -28,7 +28,8 @@
 import { NotificationsService } from 'angular2-notifications';
 import { appConstants } from '../../../constants/app-constants';
 
-export const ACTIONS_REQUIRED_DROPDOWN = ['Configure', 'ConfigModify', 'ConfigScaleOut', 'DistributeTraffic'];
+export const ACTIONS_REQUIRED_DROPDOWN = ['Configure', 'ConfigModify', 'ConfigScaleOut', 'DistributeTraffic']
+
 
 @Component({ selector: 'app-build-design', templateUrl: './build-artifacts.component.html', styleUrls: ['./build-artifacts.component.css'] })
 export class BuildDesignComponent implements OnInit {
@@ -37,7 +38,7 @@
     public refDataRequiredFiels: boolean = false;
     public refList;
 
-    constructor(private router: Router, private notificationsService: NotificationsService) {
+    constructor (private router: Router, private notificationsService: NotificationsService) {
     }
 
     ngOnInit() {
@@ -70,33 +71,31 @@
         }
     }
 
-    public getRefData( referenceList, reqObj?) {
-        console.log( "getRefData: start: referenceList.action:["+
-          referenceList.action+"]");
+    public getRefData(referenceList, reqObj?) {
         this.refList = referenceList;
-        if( referenceList.action !== '' &&
-            referenceList.scope['vnf-type'] !== '' &&
-            referenceList['device-protocol'] !== '' )
-        {
-          if( ACTIONS_REQUIRED_DROPDOWN.indexOf(referenceList.action) > -1)
-          {
-            if( referenceList.action == 'ConfigScaleOut')
-            {
-              if( reqObj != undefined && reqObj.hasOwnProperty('reqField') &&
-                  reqObj.reqField != ''
-              )
-                this.refDataRequiredFiels = true;
-              else
-                this.refDataRequiredFiels = false;
+        if (referenceList.action !== '' && referenceList.scope['vnf-type'] !== '' && referenceList['device-protocol'] !== '') {
+            if(ACTIONS_REQUIRED_DROPDOWN.indexOf(referenceList.action) > -1) {
+            //if (referenceList.action === 'ConfigScaleOut') {
+                //console.log(typeof reqObj, selectedIdentifier)
+                // if (referenceList.hasOwnProperty('template-id') && referenceList['template-id'] !== undefined && referenceList['template-id'] != '')
+                //     this.refDataRequiredFiels = true;
+                // else this.refDataRequiredFiels = false;
+                if(referenceList.action == 'ConfigScaleOut') {
+                    if(reqObj != undefined && reqObj.hasOwnProperty('reqField') && reqObj.reqField != '') this.refDataRequiredFiels = true;
+                    else this.refDataRequiredFiels = false;
+                }
+
+                // else if( referenceList.action == 'Configure' || referenceList.action == 'ConfigModify' ) {
+                //     if(referenceList.displayVnfc == 'false') this.refDataRequiredFiels = true;
+                //     else if( referenceList.displayVnfc != 'false' && referenceList.vnfcIdentifier ) this.refDataRequiredFiels = true;
+                // }
+                
+                else this.refDataRequiredFiels = true;
             }
-            else
-              this.refDataRequiredFiels = true;
-          }
-          else
-            this.refDataRequiredFiels = true;
+            else this.refDataRequiredFiels = true;
         }
         else {
-          this.refDataRequiredFiels = false;
+            this.refDataRequiredFiels = false;
         }
     }
 
diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter-definition.service.ts b/src/app/vnfs/build-artifacts/parameter-definitions/parameter-definition.service.ts
index 14af6ab..2bd1bc9 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter-definition.service.ts
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter-definition.service.ts
@@ -31,6 +31,8 @@
 import {NotificationsService} from 'angular2-notifications';
 import 'rxjs/add/operator/map';
 import { appConstants } from '../../../../constants/app-constants';
+import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service';
+
 
 let YAML = require('yamljs');
 
@@ -38,7 +40,7 @@
 
 @Injectable()
 export class ParameterDefinitionService {
-
+    clName= "ParameterDefinitionSvc";
     public vnfcTypeData: string = '';
     public selectedUploadType: string;
     @ViewChild(ModalComponent) modalComponent: ModalComponent;
@@ -63,9 +65,12 @@
     private selectedActionReference: any;
     private apiToken = localStorage['apiToken'];
     private userId = localStorage['userId'];
+    public versionNoForApiCall=require('../../../../cdt.application.properties.json').versionNoForApiCall;
+
     constructor(private mappingEditorService: MappingEditorService,
                 private paramShareService: ParamShareService,
                 private nService: NotificationsService,
+                private httpService: HttpUtilService,
                 private utilService: UtilityService) {
     }
 
@@ -79,6 +84,8 @@
         this.protocol = protocol;
         this.action = action;
         this.artifact_fileName = artifactName;
+        this.appDataObject = this.mappingEditorService.appDataObject;
+        this.downloadDataObject = this.mappingEditorService.downloadDataObject;
     }
 
     public afterInit(artifactName, displayParamObjects) {
@@ -89,7 +96,8 @@
     /* Saves pd to appc */
     public sendPD(yamlString: String) {
         let result: any;
-        let payload = '{"userID": "' + this.userId + '","vnf-type" : "' + this.vnfType + '","action" : "' + this.action + '","artifact-name" : "' + this.artifact_fileName + '","artifact-type" : "APPC-CONFIG","artifact-version" : "0.0.1","artifact-contents" : ' + yamlString + '}';
+        let input = this.utilService.createPayLoadForSave("pd_data",this.vnfType,this.action,this.artifact_fileName, this.versionNoForApiCall, yamlString);
+        /*let payload = '{"userID": "' + this.userId + '","vnf-type" : "' + this.vnfType + '","action" : "' + this.action + '","artifact-name" : "' + this.artifact_fileName + '","artifact-type" : "APPC-CONFIG","artifact-version" : "0.0.1","artifact-contents" : ' + yamlString + '}';
         let input = {
             'input': {
                 'design-request': {
@@ -98,7 +106,7 @@
                     'payload': payload
                 }
             }
-        };
+        };*/
         this.appDataObject.pd = input;
     }
 
@@ -114,26 +122,78 @@
         return result;
     }
 
-    //========================== End of removeUnwantedvalues() Method============================================
-    populateDataUponSource(displayParamObjects) {
-        displayParamObjects.forEach(parameter => {
-            if (parameter.source == 'A&AI') {
-                parameter.ruleTypeValues = [null, 'vnf-name', 'vm-name-list', 'vnfc-name-list', 'vnf-oam-ipv4-address', 'vnfc-oam-ipv4-address-list'];
-                if (parameter['rule-type'] == 'vm-name-list' || parameter['rule-type'] == 'vnfc-name-list' || parameter['rule-type'] == 'vnfc-oam-ipv4-address-list') {
-                    parameter.showFilterFields = true;
-                    parameter.enableFilterByValue = false;
-                } else {
-                    parameter.showFilterFields = false;
-                }
-
-            } else if (parameter.source == 'Manual') {
+    //.. setup display of each parameter row depending on the paramater name,
+    //   pre-set values of source and rule-type fields (columns)
+    populateDataUponSource( displayParamObjects) {
+      var methName= "populateDataUponSource";
+      if( this.utilService.getTracelvl() > 0 )
+        console.log( this.clName+": "+methName+": start: displayParamObjects "+
+          "length="+displayParamObjects.length );
+        displayParamObjects.forEach( parameter => {
+          if( this.utilService.getTracelvl() > 0 )
+            console.log( this.clName+": "+methName+": param: name:["+
+              parameter.name+"] source:["+
+              parameter.source+"] rule-type:["+parameter['rule-type']+"]");
+            if( parameter.name == 'NodeList-DD') {
+              if( this.utilService.getTracelvl() > 0 )
+                console.log( this.clName+": "+methName+": the Param is NodeList");
+              parameter.source= "DataDictionary";
+            }
+            else if( parameter.name == 'vnfName-DD' ) {
+              if( this.utilService.getTracelvl() > 0 )
+                console.log( this.clName+": "+methName+": the Param's vnfName-DD");
+              parameter.source= "A&AI";
+              parameter['rule-type']= "vnf-name";
+            };
+            if( parameter.source == 'A&AI') {
+              parameter.ruleTypeValues = [null, 'vnf-name', 'vm-name-list', 'vnfc-name-list', 'vnf-oam-ipv4-address', 'vnfc-oam-ipv4-address-list'];
+              if( parameter['rule-type'] == 'vm-name-list' ||
+                  parameter['rule-type'] == 'vnfc-name-list' ||
+                  parameter['rule-type'] == 'vnfc-oam-ipv4-address-list')
+              {
+                 parameter.showFilterFields = true;
+                 parameter.enableFilterByValue = false;
+              } else {
+                 parameter.showFilterFields = false;
+              }
+            }
+            else if( parameter.source == 'Manual') {
                 parameter.ruleTypeValues = [null];
             }
+            else if( parameter.source == 'DataDictionary') {
+                parameter.sourceValues = ['DataDictionary'];
+                parameter.ruleTypeValues = ['NodeList'];
+                parameter['rule-type']= 'NodeList';
+            }
             else {
                 parameter.ruleTypeValues = [parameter['rule-type']];
             }
+          //.. print-out the parameter's drop-downs for source and rule-type
+          if( this.utilService.getTracelvl() > 1 ) {
+            if( parameter.sourceValues != null &&
+                parameter.sourceValues != undefined )
+            {
+              console.log( this.clName+": "+methName+": sourceValues length="+
+                parameter.sourceValues.length );
+              if( parameter.sourceValues.length > 0 ) {
+                for( var i0=0; i0 < parameter.sourceValues.length; i0++ )
+                  console.log( methName+": sourceValues["+i0+"]:["+
+                    parameter.sourceValues[i0]+"]");
+              };
+            };
+            if( parameter.ruleTypeValues != null &&
+                parameter.ruleTypeValues != undefined )
+            {
+              console.log( this.clName+": "+methName+": ruleTypeValues length="+
+                parameter.ruleTypeValues.length );
+              if( parameter.ruleTypeValues.length > 0 ) {
+                for( var i0=0; i0 < parameter.ruleTypeValues.length; i0++ )
+                  console.log( methName+": ruleTypeValues["+i0+"]:["+
+                    parameter.ruleTypeValues[i0]+"]");
+              };
+            };
+          };
         });
-
     }
 
     //========================== End of getPD() Method============================================
@@ -142,7 +202,7 @@
         //Added code to deserialize, serialize and format the response keys for display purposes ??May be unneessary?? To Do: - Check 
         let fileObj = JSON.parse(fileContent);
         this.displayParamObjects = this.formatFileContentForDisplay(fileObj);
-        this.populateDataUponSource(this.displayParamObjects);
+        this.populateDataUponSource( this.displayParamObjects);
         this.formatResponseForKey(this.displayParamObjects);
         if (undefined !== this.displayParamObjects)
             this.modelParamDefinitionObjects = this.displayParamObjects;
@@ -152,7 +212,6 @@
         return this.displayParamObjects;
     }
 
-    //========================== End of populatePD() Method============================================
     /* Formats each object read from YAML file as per page expectations */
     formatResponseForKey(param: any[]) {
         for (var i = 0; i < param.length; i++) {
@@ -200,8 +259,8 @@
             }
         }
     }
-
     //========================== End of formatKeys() Method============================================
+
     //Send null if there are no keys present - Check with key names being absent
     formatKeysForFileGeneration() {
         for (var i = 0; i < this.modelParamDefinitionObjects.length; i++) {
@@ -269,7 +328,7 @@
                 }
                 delete fileModel[i]['response-keys'];
                 fileModel[i]['response-keys'] = fileModel[i]['response-keys-new'];
-                delete fileModel[i]['response-keys=new'];
+                delete fileModel[i]['response-keys-new'];
             }
         }
         return fileModel;
@@ -305,14 +364,22 @@
         return result;
     }
 
-   
-    public prepareFileName(): any {
-        let fileNameObject: any = this.mappingEditorService.latestAction;
-        this.appDataObject = this.mappingEditorService.appDataObject;
-        this.downloadDataObject = this.mappingEditorService.downloadDataObject;
-        return fileNameObject;
+    //========================== End of clearSessionStorageForParam() Method============================================
+    isValidateSourceAndResponseKeys(objs: any[]) {
+        let isValid = true;
+        if (undefined != objs || null != objs) {
+            for (var i = 0; i < objs.length; i++) {
+                if (objs[i].source == 'INSTAR' && (null == objs[i]['response-keys'] || undefined == objs[i]['response-keys'])) {
+                    isValid = false;
+                    return isValid;
+                }
+            }
+        }
+        return isValid;
     }
 
+
+    
     public destroy(displayParamObjects) {
         this.displayParamObjects = displayParamObjects;
         if (this.mappingEditorService.referenceNameObjects) {
@@ -338,6 +405,8 @@
             jsonString = jsonString.replace(/"null"/g, 'null');
             let saveModel = JSON.parse(jsonString);
             let pdFileObject = this.processResponseKeys(saveModel);
+            //Validate for Source =INSTAR and responsekeys present
+            if (this.isValidateSourceAndResponseKeys(pdFileObject)) {
                 let yamlObject = {
                     'kind': 'Property Definition',
                     'version': 'V1',
@@ -362,7 +431,14 @@
                 else {
                     this.sendPD(JSON.stringify(yamlString));
                 }
-            
+            }
+            else {
+                for (var i = 0; i < this.modelParamDefinitionObjects.length; i++) {
+                    this.formatKeys(this.modelParamDefinitionObjects[i]);
+                }
+                this.nService.error('Error', 'Response Keys cannot be empty if source is INSTAR');
+                return;
+            }
             //Restore Keys for display
             for (var i = 0; i < this.modelParamDefinitionObjects.length; i++) {
                 this.formatKeys(this.modelParamDefinitionObjects[i]);
@@ -410,7 +486,18 @@
                 }
                 parameterDefinitionObject['source'] = fields[0];
                 parameterDefinitionObject['rule-type'] = fields[1];
-            } 
+            } else {
+                if (parameterDefinitionObject['source'] === 'INSTAR') {
+                    parameterDefinitionObject['source'] = 'Manual';
+                    parameterDefinitionObject['ruleTypeValues'] = [null];
+                    parameterDefinitionObject['rule-type'] = null;
+                    parameterDefinitionObject['showFilterFields'] = false;
+                    for (let x = 0; x < 5; x++) {
+                        parameterDefinitionObject['response-keys'][x]['key-name'] = null;
+                        parameterDefinitionObject['response-keys'][x]['key-value'] = null;
+                    }
+                }
+            }
             this.formatKeys(parameterDefinitionObject); //Ensure there are 3 elements for response-keys, request-keys for display purposes
             if (!result.present) { //only push if not present
                 this.modelParamDefinitionObjects.push(parameterDefinitionObject);
diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
index 799627b..6cae750 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
@@ -40,10 +40,11 @@
                 <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
             </div>
             <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType">
-                <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
+                    <label>Vnfc Type</label>  <label style="font-size:12px;">(NFC Function)</label>
+                    <input class="form-control" type="text" disabled value="{{vnfcType}}" />
             </div>
             <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
-
+                
             </div>
             <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                 <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
@@ -142,7 +143,7 @@
                                 <option *ngFor="let src of sourceValues"
                                         [value]="src"
                                         [selected]="src === obj.source"
-                                        >
+                                        [disabled]="(obj.name == 'NodeList-DD' && src != 'DataDictionary')||(obj.name == 'vnfName-DD' && src == 'DataDictionary')||(obj.name != 'NodeList-DD' && obj.name != 'vnfName-DD' && src == 'INSTAR')">
                                     {{src}}
                                 </option>
 
diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
index f7d1837..6ba8e52 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
@@ -38,6 +38,7 @@
 import { NgProgress } from 'ngx-progressbar';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { appConstants } from '../../../../constants/app-constants';
+import { APIService } from "../../../shared/services/cdt.apicall";
 
 let YAML = require('yamljs');
 
@@ -50,9 +51,11 @@
     providers: [ParameterDefinitionService]
 })
 export class ParameterComponent implements OnInit {
+    clName= "ParameterCompon";
     public paramForm: any;
     public actionType: any;
     public showFilterFields: boolean;
+    
     public filterByFieldvalues = appConstants.filterByFieldvalues;
     public ruleTypeConfiguaration = appConstants.ruleTypeConfiguaration;
     public requiredValues: boolean[] = appConstants.requiredValues;
@@ -106,11 +109,12 @@
     public artifactName;
     public appDataObject: any;
     public downloadDataObject: any;
-    public artifact_fileName = "";
+    public artifact_fileName="";
     template_id: any;
     private selectedActionReference: any;
 
     constructor(private httpService: HttpUtilService,
+        private apiService:APIService,
         private parameterDefinitionService: ParameterDefinitionService,
         private paramShareService: ParamShareService,
         private mappingEditorService: MappingEditorService,
@@ -122,33 +126,26 @@
     }
 
     ngOnInit() {
-        this.selectedActionReference = this.parameterDefinitionService.prepareFileName();
+      var methName= "ngOnInit";
+        this.selectedActionReference = this.mappingEditorService.newObject;
         if (this.selectedActionReference && this.selectedActionReference != undefined) {
-
-            this.vnfType = this.selectedActionReference.scope['vnf-type'];
-            this.vnfcType = this.selectedActionReference.scope['vnfc-type'];
-            this.protocol = this.selectedActionReference['device-protocol'];
-            this.action = this.selectedActionReference.action;
-
-            for (let i = 0; i < this.selectedActionReference['artifact-list'].length; i++) {
-                let artifactList = this.selectedActionReference['artifact-list'];
-                if (artifactList[i]['artifact-type'] === 'parameter_definitions') {
-                    var artifactName = artifactList[i]['artifact-name'];
-                    var artifactNameWithoutExtension = '';
-                    if (artifactName) {
-                        artifactNameWithoutExtension = artifactName.substring(0, artifactName.lastIndexOf("."));
-                    }
-                    if (this.mappingEditorService.identifier) {
-                        if (artifactNameWithoutExtension.endsWith(this.mappingEditorService.identifier)) {
-                            this.artifact_fileName = artifactName;
-                        }
-
-                    }
-                    else {
-                        this.artifact_fileName = artifactName;
-                    }
-                }
+          this.vnfType = this.selectedActionReference.vnf;
+          this.protocol = this.selectedActionReference.protocol;
+          this.action = this.selectedActionReference.action;
+          if( this.utilService.getTracelvl() > 0 )
+            console.log( this.clName+": "+methName+": vnfType:["+this.vnfType+
+              "] action:["+this.action+"] protocol:["+this.protocol+"]");
+            if(this.selectedActionReference.vnfc) {
+                this.vnfcType = this.selectedActionReference.vnfc;
+              if( this.utilService.getTracelvl() > 0 )
+                console.log( this.clName+": "+methName+": have vnfcType:["+
+                  this.vnfcType+"]");
             }
+            if( this.action === 'ConfigScaleOut'){
+                // this.template_id = this.selectedActionReference.templateId;
+                this.template_id = this.mappingEditorService.identifier;
+            }
+            this.artifact_fileName = this.selectedActionReference.pd_artifact;
             this.parameterDefinitionService.setValues(this.vnfType, this.vnfcType, this.protocol, this.action, this.artifact_fileName);
         }
         else {
@@ -165,22 +162,26 @@
                 'scopeType': ''
             };
         }
-
-        this.template_id = this.mappingEditorService.identifier;
+        //let path = this.location.path
+        /* this.activeRoutes.url.subscribe(UrlSegment => {
+             this.actionType = UrlSegment[0].path
+         })
+         */
     }
 
     ngAfterViewInit() {
-        if (this.mappingEditorService.latestAction) {
+        if( this.mappingEditorService.latestAction) {
             this.displayParamObjects = [];
             this.modelParamDefinitionObjects = [];
-            if (this.paramShareService.getSessionParamData() != undefined && this.paramShareService.getSessionParamData().length > 0) {
-                this.getPDFromSession();
+            this.displayParamObjects= this.paramShareService.getSessionParamData();
+         // if( this.paramShareService.getSessionParamData() != undefined &&
+         //     this.paramShareService.getSessionParamData().length > 0)
+            if( this.displayParamObjects != undefined &&
+                this.displayParamObjects.length > 0 )
+            {
+              this.parameterDefinitionService.populateDataUponSource( this.displayParamObjects);
             } else {
-                this.ngProgress.start();
-                this.getPD();
-                setTimeout(() => {
-                this.ngProgress.done();
-            }, 3500);
+              this.getPD();
             }
         } else {
             this.nService.error(appConstants.errors.error, appConstants.errors["noAction&VNFTypeInRDscreenError"]);
@@ -191,19 +192,20 @@
 
     public getPD() {
         let result: any;
-        let input=this.utilService.createPayloadForRetrieve(false, this.action, this.vnfType,this.artifact_fileName);
+        let input=
+          this.utilService.createPayloadForRetrieve( false, this.action, this.vnfType,this.artifact_fileName);
         let artifactContent: any;
-        return this.httpService.post({
-            url: environment.getDesigns,
-            data: input
-        }).subscribe(data => {
-            if (this.utilService.checkResult(data)) {
-                let result: any = JSON.parse(data.output.data.block).artifactInfo[0];
+        this.ngProgress.start();
+        return this.apiService.callGetArtifactsApi(input).subscribe( data => {
+            if( this.utilService.checkResult(data)) {
+              let result: any = JSON.parse(data.output.data.block).artifactInfo[0];
                 var pdObject = YAML.parse(result['artifact-content']);
                 let fileModel = pdObject['vnf-parameter-list'];
                 this.displayParamObjects = this.parameterDefinitionService.populatePD(fileModel);
             }
-                       
+            else {
+            }
+            this.ngProgress.done();
         },
 
             error => this.nService.error(appConstants.errors.error, appConstants.errors.connectionError));
@@ -212,20 +214,19 @@
 
     public getPDFromSession() {
 
-        this.ngProgress.start();
+      this.ngProgress.start();
         return this.httpService.get({
             url: 'testurl',
-        }).subscribe(data => {
-            this.displayParamObjects = this.paramShareService.getSessionParamData();
-            this.ngProgress.done();
+        }).subscribe( data => {
+           this.displayParamObjects = this.paramShareService.getSessionParamData();
+           this.ngProgress.done();
         },
-            error => {
-                this.displayParamObjects = this.paramShareService.getSessionParamData();
-                this.ngProgress.done();
-            });
+        error => {
+          this.displayParamObjects = this.paramShareService.getSessionParamData();
+          this.ngProgress.done();
+        });
     }
 
-    //========================== End of NGInit() Method============================================
     selectedNavItem(item: any) {
         this.item = item;
     }
@@ -266,6 +267,10 @@
             // Create the file reader
             let reader = new FileReader();
             this.readFile(input.files[0], reader, (result) => {
+                if ('keyfile' === uploadType) {
+                    this.myKeyFileName = input.files[0].name;
+                    this.displayParamObjects = this.parameterDefinitionService.processKeyFile(this.myKeyFileName, result);
+                }
                 if ('pdfile' === uploadType) {
                     this.myPdFileName = input.files[0].name;
                     this.displayParamObjects = this.parameterDefinitionService.processPDfile(this.myPdFileName, result);
@@ -294,8 +299,7 @@
         let obj: any = fileInput.target.files;
     }
 
-
-    sourceChanged(data, obj) {
+    sourceChanged( data, obj) {
         if (data == 'A&AI') {
             obj.ruleTypeValues = appConstants.ruleTypeValues;
             for (let x = 0; x < 5; x++) {
@@ -317,7 +321,7 @@
     }
 
     //========================== End of sourceChanged() Method============================================
-    ruleTypeChanged(data, obj) {
+    ruleTypeChanged( data, obj) {
         if (data == null || data == undefined || data == 'null') {
             obj.showFilterFields = false;
             obj['rule-type'] = null;
@@ -340,7 +344,7 @@
             }
             for (let x = 0; x < sourceObject.length; x++) {
                 obj['response-keys'][x]['key-name'] = sourceObject[x]['key-name'];
-                obj['response-keys'][x]['key-value'] = sourceObject[x]['key-value'];
+               obj['response-keys'][x]['key-value'] = sourceObject[x]['key-value'];
             }
         }
 
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css
index 1b4c470..54e0148 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css
@@ -17,7 +17,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
 
@@ -134,4 +133,7 @@
 .file {
     visibility: hidden;
     position: absolute;
-}
\ No newline at end of file
+}
+
+.col-md-1point5 {width: 12%}
+.col-md-2point5 {width: 21%;}
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
index 564cd32..6225ea0 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
@@ -44,18 +44,19 @@
                     <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span>
                 </div>
 
-                <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="((displayVnfc=='true') || isVnfcType) && (referenceDataObject['action']=='Configure' || referenceDataObject['action']=='ConfigModify' || referenceDataObject['action']=='DistributeTraffic')">
-                    <label>VNFC Type</label>
+                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="((displayVnfc=='true') || isVnfcType) && (referenceDataObject['action']=='Configure' || referenceDataObject['action']=='ConfigModify' || referenceDataObject['action']=='DistributeTraffic')">
+                    <label>VNFC Type</label>  <label style="font-size:12px;">(NFC Function)</label>
                     <input *ngIf="isVnfcType" type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel"
                         name="vnfcType">
-                    <select *ngIf="isVnfcTypeList" class="form-control" id="vnfcType" (ngModelChange)="vnfcChanged($event,content,userForm)" [ngModel]="vnfcIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                    <select *ngIf="isVnfcTypeList" class="form-control" id="vnfcType" (ngModelChange)="vnfcChanged($event,userForm)" [ngModel]="vnfcIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
                             <option [value]="val" *ngFor="let val of referenceDataObject.scope['vnfc-type-list']">{{val}}
                             </option>
                         </select>
                     <a *ngIf="isVnfcTypeList" style="    color: blue;" href="javascript:void(0)" (click)="vnfcModal.open()">Add New VNFC Type</a>
                 </div>
+                
 
-                <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="displayVnfc!='true' || (referenceDataObject['action']!='Configure' && referenceDataObject['action']!='ConfigModify' && referenceDataObject['action']!='DistributeTraffic')">
+                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="displayVnfc!='true' || (referenceDataObject['action']!='Configure' && referenceDataObject['action']!='ConfigModify' || referenceDataObject['action']=='DistributeTraffic')">
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Device Protocol*</label>
@@ -72,16 +73,19 @@
                         <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
                         </option>
                     </select>
-                   <!-- <span class="error-message" [hidden]="deviceProtocol.valid || (deviceProtocol.pristine && !userForm.submitted)">Required Field</span> -->
+                    <!-- <span class="error-message" [hidden]="deviceProtocol.valid || (deviceProtocol.pristine && !userForm.submitted)">Required Field</span> -->
                 </div>
 
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="referenceDataObject['action']== 'ConfigScaleOut'" style="margin-top: 30px">
                     <span *ngIf="referenceDataObject.action === 'ConfigScaleOut'">   <a style="    color: blue;"
                     href="javascript:void(0)"
-                    (click)="showIdentifier()">Assign New Template Identifier</a></span>
+                    (click)="identifierModal.open()">Assign New Template Identifier</a></span>
 
                 </div>
+
+
             </div>
+
             <div class="col-12" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')">
                 <div class="input-group">
                     <input id="inputFile" class="file" #myInput type='file' (change)="fileChange($event)">
@@ -137,6 +141,7 @@
                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['url']" name="contextUrl">
                                 </div>
                             </div>
+                            <br/>
                             <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action ==''  || referenceDataObject.action ==undefined)" style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
                                 <div class="col-12">
                                     <h5 style="margin-top: 0.5rem;font-family: Roboto"> VNFC Information
@@ -150,15 +155,15 @@
                             </div>
                             <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) ">
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">VNFC Type</label>
+                                    <label style="font-size:12px;">VNFC Type (NFC Function)</label>
                                     <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" (blur)="checkVnfcTypeEqual(vnfcType.value)" #vnfcType="ngModel" name="samplevnfcType">
                                 </div>
-                                <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px">VNFC Function Code</label>
+                                <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+                                    <label style="font-size:12px">VNFC Function Code (NFC Naming Code)</label>
                                     <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                    <label style="font-size:12px;">IPAddress V4</label>
+                                    <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
                                     <select class="form-control" id="cmbIpAddedBoo" [(ngModel)]="Sample['ipaddress-v4-oam-vip']" name="sampleIpaddress">
                                         <option [value]="hasIp" *ngFor="let hasIp of ipAddressBoolean">{{hasIp}}
                                         </option>
@@ -174,7 +179,7 @@
                                     <label style="font-size:12px;">Group Notation Value</label>
                                     <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue">
                                 </div>
-                                <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
+                                <div class="col-lg-1 col-sm-6 col-md-1 col-xs-12">
                                     <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn" (click)="clearVnfcData()">Clear VNFC Info
                                     </button>
                                 </div>
@@ -198,29 +203,29 @@
                                 </div>
                             </div>
                             <div *ngIf="referenceDataObject.vm?.length>0">
-                                <div class="row" *ngFor="let noOfvm of referenceDataObject.vm  | vmFiltering:referenceDataObject?.action:templateIdentifier; trackBy:trackByFn;let j=index">
-                                    <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" class="col-12">
+                                <div class="row" *ngFor="let noOfvm of referenceDataObject.vm  | vmFiltering:referenceDataObject?.action:templateIdentifier:vnfcIdentifier; trackBy:trackByFn;let j=index">
+                                   <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" class="col-12">
                                         <div class="row" *ngFor="let item of noOfvm.vnfc;trackBy:trackByFn, let i=index">
                                             <div class="col-md-12" *ngIf="i==0">
                                                 <h5 class="headlinesInBold">VM Number: {{j+1}}</h5>
 
                                             </div>
-                                            <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
+                                            <div class="col-md-1point5">
                                                 <label style="font-size:12px;">VNFC Instance No.</label>
                                                 <input type="text" class="form-control" id="txtVmnumber" disabled='true' [(ngModel)]="item['vnfc-instance']" name="vmNumber{{j}}">
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                                <label style="font-size:12px;">VNFC Type</label>
+                                                <label style="font-size:12px;">VNFC Type  (NFC Function)</label>
                                                 <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel" name="vnfcType{{j}}">
                                                 <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
-                                            <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                                <label style="font-size:12px;">VNFC Function Code</label>
+                                            <div class="col-md-2point5">
+                                                <label style="font-size:12px;">VNFC Function Code (NFC Naming Code)</label>
                                                 <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="vnfcFunctionCode{{j}}">
                                                 <span class="error-message" [hidden]="vnfcFunctionCode.valid || (vnfcFunctionCode.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
-                                                <label style="font-size:12px;">IPAddress V4</label>
+                                                <label style="font-size:12px;">IPAddress V4 OAM VIP</label>
                                                 <select class="form-control" id="cmbIpAddress" [(ngModel)]="item['ipaddress-v4-oam-vip']" name="ipaddress{{j}}">
                                                     <option [value]="hasIP" [selected]="item.ipAddressBoolean===hasIP"
                                                             *ngFor="let hasIP of ipAddressBoolean">{{hasIP}}
@@ -317,7 +322,7 @@
     <modal-body>
         <div>
             <input pattern=".*[^ ].*" name="test" type="text" class="" (ngModelChange)="validateVnfcName($event)" [(ngModel)]="newVnfcType" placeholder="vnfctype">
-            <span class="error-message">{{errorMessage}}</span>
+            <span class="error-message">{{errorMessage}}</span>  
         </div>
     </modal-body>
     <modal-footer [show-default-buttons]="false">
@@ -328,45 +333,20 @@
     </modal-footer>
 </modal>
 
-<div id="identifierModal" class="modal fade" role="dialog">
-    <div class="modal-dialog">
-        <!-- Modal content-->
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent" data-dismiss="modal">&times;
-                </button>
-                <h4 class="modal-title">Enter New Template Identifier</h4>
-            </div>
-            <div class="modal-body">
-                <div>
-                    <div>
-                        <input pattern=".*[^ ].*" name="test" type="text" class="" [(ngModel)]="templateId" placeholder="identifier">
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <div>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''" data-dismiss="modal">cancel</button>
-                </div>
-            </div>
+<!-- Modal for Template Identifier -->
+<modal #identifierModal>
+    <modal-header [show-close]="true">
+        <h4 class="modal-title">Enter New Template Identifier</h4>
+    </modal-header>
+    <modal-body>
+        <div>
+            <input pattern=".*[^ ].*" name="test" type="text" class="" [(ngModel)]="templateId" placeholder="identifier"> 
         </div>
-    </div>
-</div>
-<ng-template #content let-c="close" let-d="dismiss">
-    <div class="modal-header">
-        <h6 class="modal-title">Save all changes for current action to APPC database.</h6>
-        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-            <span aria-hidden="true">&times;</span>
-        </button>
-    </div>
-    <div class="modal-body">
-        <p>Do you want to save the changes?</p>
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="c('no')">No
-        </button>
-        <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="c('yes')">Yes
-        </button>
-    </div>
-</ng-template>
+    </modal-body>
+    <modal-footer [show-default-buttons]="false">
+        <div>
+            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="templateId=''" data-dismiss="modal">cancel</button>
+            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
+        </div>
+    </modal-footer>
+</modal>
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
index 17a23e2..5cd0e71 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
@@ -3,8 +3,7 @@
 ===================================================================
 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
 ===================================================================
-Copyright (C) 2018 IBM.
-===================================================================
+
 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
 you may not use this software except in compliance with the License.
@@ -17,18 +16,20 @@
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
+
 ============LICENSE_END============================================
 */
 
 import * as XLSX from 'xlsx';
 import * as _ from 'underscore';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 import { BuildDesignComponent } from '../build-artifacts.component';
 import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service';
 import { Location } from '@angular/common';
 import { MappingEditorService } from '../../..//shared/services/mapping-editor.service';
-import { ModalComponent } from '../../../shared/modal/modal.component';
 import { NgProgress } from 'ngx-progressbar';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NotificationService } from '../../../shared/services/notification.service';
@@ -36,16 +37,18 @@
 import { ParamShareService } from '../../..//shared/services/paramShare.service';
 import { environment } from '../../../../environments/environment';
 import { saveAs } from 'file-saver';
+import { Jsonp } from '@angular/http';
 import { ReferenceDataFormUtil } from './reference-dataform.util';
 import { UtilityService } from '../../../shared/services/utilityService/utility.service';
-import { appConstants } from '../../../../constants/app-constants';
+import { APIService } from "../../../shared/services/cdt.apicall";
+
 // Common Confirm Modal
 import { DialogService } from 'ng2-bootstrap-modal';
 import { ConfirmComponent } from "../../../shared/confirmModal/confirm.component";
 
+
 declare var $: any;
 type AOA = Array<Array<any>>;
-const REFERENCE_DATA: string = "reference_data";
 
 @Component({
     selector: 'reference-dataform',
@@ -54,8 +57,7 @@
     providers: [ReferenceDataFormUtil]
 })
 export class ReferenceDataformComponent implements OnInit {
-    public classNm = "ReferenceDataformCompon";
-    @ViewChild(ModalComponent) modalComponent: ModalComponent;
+    public classNm= "ReferenceDataformComp";
     public showUploadStatus: boolean = false;
     public fileUploaded: boolean = false;
     public uploadedData: any;
@@ -86,8 +88,8 @@
     errorMessage = '';
     invalid = true;
     fileName: any;
-    vnfcIdentifier = '';
-    oldVnfcIdentifier: any;
+    vnfcIdentifier;
+    oldVnfcIdentifier: any
     public uploadFileName: any;
     public addVmClickedFlag: boolean = false;
     public getExcelUploadStatus: boolean = false;
@@ -107,13 +109,13 @@
     identifierDrpValues: any = [];
     //settings for the notifications.
     options = {
-        timeOut: 1000,
+        timeOut: 4500,
         showProgressBar: true,
         pauseOnHover: true,
         clickToClose: true,
         maxLength: 200
     };
-    //initializing this object to contain all the parameters to be captured
+    //initializing this object to contain all the parameters to be captured later
     public referenceDataObject = {
         action: '',
         'action-level': 'vnf',
@@ -126,31 +128,12 @@
         'artifact-list': []
     };
     public refernceScopeObj = { sourceType: '', from: '', to: '' };
-    public actions = [appConstants.Actions.blank,
-    appConstants.Actions.configure,
-    appConstants.Actions.ConfigModify,
-    appConstants.Actions.configBackup,
-    appConstants.Actions.configRestore,
-    appConstants.Actions.getRunningConfig,
-    appConstants.Actions.healthCheck,
-    appConstants.Actions.startApplication,
-    appConstants.Actions.stopApplication,
-    appConstants.Actions.quiesceTraffic,
-    appConstants.Actions.resumeTraffic,
-    appConstants.Actions.distributeTraffic,
-    appConstants.Actions.upgradeBackout,
-    appConstants.Actions.upgradeBackup,
-    appConstants.Actions.upgradePostCheck,
-    appConstants.Actions.upgradePreCheck,
-    appConstants.Actions.upgradeSoftware,
-    appConstants.Actions.openStackActions,
-    appConstants.Actions.configScaleOut
-    ];
-    public groupAnotationValue = [appConstants.groupAnotationValue.blank, appConstants.groupAnotationValue.pair];
-    public groupAnotationType = [appConstants.groupAnotationType.blank, appConstants.groupAnotationType.firstVnfcName, appConstants.groupAnotationType.fixedValue, appConstants.groupAnotationType.relativeValue];
-    public deviceProtocols = [appConstants.DeviceProtocols.blank, appConstants.DeviceProtocols.ansible, appConstants.DeviceProtocols.chef, appConstants.DeviceProtocols.netconfXML, appConstants.DeviceProtocols.rest, appConstants.DeviceProtocols.cli, appConstants.DeviceProtocols.restConf];
-    public deviceTemplates = [appConstants.deviceTemplates.blank, appConstants.deviceTemplates.y, appConstants.deviceTemplates.n];
-    public sourceTypeColl = [appConstants.sourceTypeColl.blank, appConstants.sourceTypeColl.vnfType, appConstants.sourceTypeColl.vnfcType];
+    public actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'DistributeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions', 'ConfigScaleOut'];
+    public groupAnotationValue = ['', 'Pair'];
+    public groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value'];
+    public deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'NETCONF-XML', 'REST', 'CLI', 'RESTCONF'];
+    public deviceTemplates = ['', 'Y', 'N'];
+    public sourceTypeColl = ['', 'vnfType', 'vnfcType'];
     public ipAddressBoolean = ['', 'Y', 'N'];
     public Sample: any = {
         'vnfc-instance': '1',
@@ -186,40 +169,54 @@
     public firstArrayElement = [];
     public remUploadedDataArray = [];
     isConfigScaleOut = false
-    isConfigureAction = false;
-    configScaleOutExist: boolean = true;
+    isConfigOrConfigModify = false
+    configScaleOutExist: boolean
     displayVnfc = 'false';
     isVnfcType: boolean;
     isVnfcTypeList: boolean = true;
-    public actionList = {
-        "ConfigScaleOut": "ConfigScaleOut",
-        "Configure": "Configure"
-    };
-    public versionNoForApiCall = "0.0.1";
+    public referencDataTab = [
+        {
+
+            name: 'Reference Data',
+            url: 'references',
+        }];
+    public allTabs = [
+        {
+            name: 'Reference Data',
+            url: 'references',
+        }, {
+            name: 'Template',
+            url: 'templates/myTemplates',
+        }, {
+            name: 'Parameter Definition',
+            url: 'parameterDefinitions/create'
+        }/*, {
+                    name: "Test",
+                    url: 'test',
+                }*/
+    ];
+    public actionList = require('../../../../cdt.application.properties.json').Actions;
+    
+    public versionNoForApiCall = require('../../../../cdt.application.properties.json').versionNoForApiCall;
     private displayVMBlock: boolean = true;
 
-    constructor (
-        private buildDesignComponent: BuildDesignComponent,
-        private httpUtils: HttpUtilService,
-        private route: Router,
-        private location: Location,
-        private activeRoutes: ActivatedRoute,
-        private notificationService: NotificationService,
-        private paramShareService: ParamShareService,
-        private mappingEditorService: MappingEditorService,
-        private modalService: NgbModal,
-        private nService: NotificationsService,
-        private ngProgress: NgProgress,
-        private utilityService: UtilityService,
-        private dialogService: DialogService,
-        private referenceDataFormUtil: ReferenceDataFormUtil) {
-        console.log(this.classNm + ": new: start.");
+    constructor(
+      private buildDesignComponent: BuildDesignComponent, private apiService: APIService, private utilityService: UtilityService, private httpUtils: HttpUtilService, private referenceDataFormUtil: ReferenceDataFormUtil, private route: Router, private location: Location, private activeRoutes: ActivatedRoute, private notificationService: NotificationService,
+        private paramShareService: ParamShareService, private mappingEditorService: MappingEditorService, private modalService: NgbModal, private nService: NotificationsService, private ngProgress: NgProgress,
+        private dialogService: DialogService)
+    {
+      console.log(this.classNm+
+        ": new: start: tracelvl="+this.utilityService.getTracelvl() );
     }
 
     ngOnInit() {
-        let methName = "ngOnInit";
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": " + methName + ": start.");
+      let methName= "ngOnInit";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": ngOnInit: start ");
+        // this.handleVMBlockDisplay();
+
+        //initializing the variables and checking for configscaleout fromm properties file
+        this.configScaleOutExist = require('../../../../cdt.application.properties.json').displayConfigScaleout;
         this.displayVnfc = sessionStorage.getItem("vnfcSelectionFlag");
         if (this.configScaleOutExist) {
             this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'DistributeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions', 'ConfigScaleOut'];
@@ -229,6 +226,7 @@
         this.self = this;
         let path = this.location.path;
         this.title = 'Reference Data';
+        // setting the structure for the reference data object 
         this.referenceDataObject = {
             action: '',
             'action-level': 'vnf',
@@ -240,40 +238,57 @@
             'port-number': '',
             'artifact-list': []
         };
+        //getting the data from session data, calling get Artifact if the data is undefined
         this.updateParams = sessionStorage.getItem('updateParams');
+        //getting the data from the referencenameobjects if the nav is changed and assiging it to the cace data
         let cacheData = this.mappingEditorService.referenceNameObjects;
-        if (cacheData != undefined && cacheData != null && cacheData.length > 0) {
-            if (this.utilityService.getTracelvl() > 0)
-                console.log(this.classNm + ": ngOnInit: have cacheData.");
+
+        if (this.utilityService.checkNotNull(cacheData)) {
+            //if cache data exists then assiging the data to the latest temp all data object.
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log( this.classNm+": ngOnInit: have cacheData.");
             this.tempAllData = cacheData;
+            //calling the highligted method to highlight the selected actions in the action dropdown
+            this.highlightSelectedActions(this.tempAllData)
+            // getting the latest action that the user has selected and assiging it to the reference data object once the user toggles between tabs from reference
             if (this.mappingEditorService.latestAction != undefined) {
+                //adding the latest action to the screen
                 this.referenceDataObject = this.mappingEditorService.latestAction;
                 this.toggleIdentifier(this.referenceDataObject.action);
+                //this.referenceDataObject['template-id-list'] = this.mappingEditorService.identifier
+                //use these commented objects to be used in template and pd pages
+                //this.templateIdentifier = this.mappingEditorService.identifier
+                //adding the scope from referencedata obj to referencescopeobject
                 this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType'];
+                //assigning the latest action fetched to the old action from reference data object
                 this.oldAction = this.referenceDataObject.action;
+                //this method is called with the action reterived and subsequent values are assigned to refdataobj for displaying
                 this.populateExistinAction(this.referenceDataObject.action);
                 this.displayHideVnfc();
             }
         } else if (this.updateParams != 'undefined') {
+            //calls the get artifact() to reterive the values if cache data is not present
             this.getArtifact();
         }
+        //getting the appdata & downloadDataObject from mapping editor service and assiging it.
         var appData = this.mappingEditorService.appDataObject;
         if (appData != null || appData != undefined) this.appData = appData;
         var downloadData = this.mappingEditorService.downloadDataObject;
         if (downloadData != null || downloadData != undefined) this.downloadData = downloadData;
+
         if (sessionStorage.getItem('vnfParams')) {
             this.vnfParams = JSON.parse(sessionStorage.getItem('vnfParams'));
         }
         if (this.vnfParams && this.vnfParams.vnfType) {
-            if (this.utilityService.getTracelvl() > 0)
-                console.log(this.classNm + ": " + methName + ": vnfParams.vnfType:[" +
-                    this.vnfParams.vnfType + "]");
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log( this.classNm+": "+methName+": vnfParams.vnfType:["+
+              this.vnfParams.vnfType+"]");
             this.referenceDataObject['scope']['vnf-type'] = this.vnfParams.vnfType;
         }
         if (this.vnfParams && this.vnfParams.vnfcType) {
-            if (this.utilityService.getTracelvl() > 0)
-                console.log(this.classNm + ": " + methName + ": vnfParams.vnfcType:[" +
-                    this.vnfParams.vnfcType + "]");
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log( this.classNm+": "+methName+": vnfParams.vnfcType:["+
+              this.vnfParams.vnfcType+"]");
             this.referenceDataObject['scope']['vnfc-type'] = this.vnfParams.vnfcType;
         }
         this.uploadedDataArray = [];
@@ -281,23 +296,34 @@
         this.firstArrayElement = [];
         this.uploadFileName = '';
         this.templateIdentifier = this.mappingEditorService.identifier
+        // if (this.mappingEditorService.newObject) {
+        //     this.vnfcIdentifier = this.mappingEditorService.newObject.vnfc;
+        // }
+        // else {
+        //     this.vnfcIdentifier = '';
+        //     this.referenceDataObject['vnfcIdentifier'] = '';
+        // }
         this.oldVnfcIdentifier = this.vnfcIdentifier;
-        if (this.utilityService.getTracelvl() > 1)
-            console.log(this.classNm + ": " + methName + ": displayVnfc:[" +
-                this.displayVnfc + "]");
-        if (this.utilityService.getTracelvl() > 1)
-            console.log(this.classNm + ": " + methName + ": templateIdentifier:[" +
-                this.templateIdentifier + "]");
+        if( this.utilityService.getTracelvl() > 1 )
+          console.log( this.classNm+": "+methName+": displayVnfc:["+
+            this.displayVnfc+"]");
+        if( this.utilityService.getTracelvl() > 1 )
+          console.log( this.classNm+": "+methName+": templateIdentifier:["+
+            this.templateIdentifier+"]");
         // Enable or Block Template and PD Tabs
         this.buildDesignComponent.getRefData(
-            { ...this.referenceDataObject, displayVnfc: this.displayVnfc },
-            { reqField: this.templateIdentifier });
+          { ...this.referenceDataObject, displayVnfc: this.displayVnfc },
+          { reqField: this.templateIdentifier });
         //.. configure some drop-downs
-        this.configDrp(this.referenceDataObject.action)
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": " + methName + ": finish.");
+        this.configDrp(this.referenceDataObject.action);
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.classNm+": "+methName+": tempAllData:["+
+            JSON.stringify(this.tempAllData)+"]");
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.classNm+": "+methName+": finish.");
     }
 
+    //setting the value to display or hide the template identifier dropdown in the screen
     toggleIdentifier(data) {
         if (data == 'ConfigScaleOut') {
             this.isConfigScaleOut = true
@@ -309,64 +335,42 @@
 
     //to retrive the data from appc and assign it to the vaiables, if no data display the message reterived from the API
     getArtifact() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": getArtifact: start.");
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log(this.classNm+": getArtifact: start...");
         try {
+            // setting the isVnfcTypeList & isVnfcType to false initially
+            this.isVnfcTypeList = false;
+            this.isVnfcType = false
             let data = this.utilityService.createPayloadForRetrieve(true, '', '', '');
             this.ngProgress.start();
-            this.httpUtils.post({
-                url: environment.getDesigns,
-                data: data
-            }).subscribe(resp => {
-                if (this.utilityService.getTracelvl() > 1)
-                    console.log(this.classNm + ": getArtifact: got response ...");
+            let serviceCall = this.apiService.callGetArtifactsApi(data);
+            serviceCall.subscribe(resp => {
+                //getting the response and assigining it to the variables used and end the progress bar aftr the data is fetched.
                 if (resp.output.data.block != undefined) {
-                    if (this.utilityService.getTracelvl() > 1)
-                        console.log(this.classNm +
-                            ": getArtifact: output.data.block not empty.");
-                    this.nService.success(appConstants.notifications.titles.status, appConstants.messages.datafetched);
+                    this.nService.success('Status', 'data fetched ');
                     let artifactInfo = JSON.parse(resp.output.data.block).artifactInfo[0];
+                    let referenceDataAll = JSON.parse(artifactInfo['artifact-content'])['reference_data'];
                     let reference_data = JSON.parse(artifactInfo['artifact-content'])['reference_data'][0];
                     this.referenceDataObject = reference_data;
                     this.toggleIdentifier(this.referenceDataObject.action);
-                    if (this.referenceDataObject.action == appConstants.Actions.configScaleOut) {
-                        this.groupAnotationType = [appConstants.groupAnotationType.blank, appConstants.groupAnotationType.firstVnfcName, appConstants.groupAnotationType.fixedValue, appConstants.groupAnotationType.relativeValue, appConstants.groupAnotationType.existingGroupName];
+                    if (this.referenceDataObject.action == 'ConfigScaleOut') {
+                        this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
                     }
+                    this.highlightSelectedActions(referenceDataAll)
+                    
                     //chck vnfc or vnfcTypeList
                     this.displayHideVnfc();
+                    
                     // Enable or Block Template and PD Tabs
-                    this.buildDesignComponent.getRefData(
-                        { ...this.referenceDataObject, displayVnfc: this.displayVnfc });
+                    this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
+
                     this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType'];
                     this.mappingEditorService.getReferenceList().push(JSON.parse(artifactInfo['artifact-content']));
                     this.tempAllData = JSON.parse(artifactInfo['artifact-content'])['reference_data'];
                     this.oldAction = this.referenceDataObject.action;
                     this.oldVnfcIdentifier = this.vnfcIdentifier;
-                    if (this.referenceDataObject.action === appConstants.Actions.openStackActions) {
-                        this.deviceProtocols = [appConstants.DeviceProtocols.blank, appConstants.DeviceProtocols.openStack];
-                        this.buildDesignComponent.tabs = [
-                            {
-                                name: 'Reference Data',
-                                url: 'references',
-                            }];
-                    }
-                    else {
-                        this.buildDesignComponent.tabs = [
-                            {
-                                name: 'Reference Data',
-                                url: 'references',
-                            }, {
-                                name: 'Template',
-                                url: 'templates/myTemplates',
-                            }, {
-                                name: 'Parameter Definition',
-                                url: 'parameterDefinitions/create'
-                            }/*, {
-                                name: "Test",
-                                url: 'test',
-                            }*/
-                        ];
-                    }
+
+                    this.processReferenceDataAfterRetrieval();
                     this.getArtifactsOpenStack();
                 } else {
                     this.nService.success('Status', 'Sorry !!! I dont have any artifact Named : ' + (JSON.parse(sessionStorage.getItem('updateParams')))['artifact-name']);
@@ -383,19 +387,19 @@
     }
 
     displayHideVnfc() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": displayHideVnfc: start...");
-        if (this.utilityService.getTracelvl() > 1) {
-            if (this.referenceDataObject.scope['vnfc-type-list']) {
-                console.log(this.classNm +
-                    ": displayHideVnfc: refDataObj.scope.vnfc-type-list.length=" +
-                    this.referenceDataObject.scope['vnfc-type-list'].length);
-            } else {
-                console.log(this.classNm +
-                    ": displayHideVnfc: refDataObj.scope.vnfc-type-list not defined");
-            };
-            console.log(this.classNm + ": displayHideVnfc: scope.vnfc-type:[" +
-                this.referenceDataObject.scope['vnfc-type'] + "]");
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log(this.classNm+": displayHideVnfc: start...");
+        if( this.utilityService.getTracelvl() > 1 ) {
+          if( this.referenceDataObject.scope['vnfc-type-list'] ) {
+            console.log( this.classNm+
+              ": displayHideVnfc: refDataObj.scope.vnfc-type-list.length="+
+              this.referenceDataObject.scope['vnfc-type-list'].length );
+          } else {
+            console.log( this.classNm+
+              ": displayHideVnfc: refDataObj.scope.vnfc-type-list not defined");
+          };
+          console.log( this.classNm+": displayHideVnfc: scope.vnfc-type:["+
+            this.referenceDataObject.scope['vnfc-type']+"]");
         };
         if (this.referenceDataObject.scope['vnfc-type-list'] == undefined && (this.referenceDataObject.scope['vnfc-type'] != undefined || this.referenceDataObject.scope['vnfc-type'] != "")) {
             this.isVnfcType = true
@@ -406,20 +410,20 @@
             this.isVnfcType = false
             this.displayVnfc = 'true'
             this.isVnfcTypeList = true
-            if (!this.mappingEditorService.newObject.vnfc) {
+            if(!this.mappingEditorService.newObject || !this.mappingEditorService.newObject.vnfc) {
                 this.vnfcIdentifier = this.referenceDataObject.scope['vnfc-type-list'][0];
                 // this.mappingEditorService.newObject.vnfc = this.vnfcIdentifier;
-                // this.referenceDataObject['vnfcIdentifier'] = this.vnfcIdentifier;
-
             } else {
                 this.vnfcIdentifier = this.mappingEditorService.newObject.vnfc;
             }
-            if (this.utilityService.getTracelvl() > 0)
-                console.log(this.classNm + ": displayHideVnfc: vnfcIdentifier:[" +
-                    this.vnfcIdentifier + "]");
+            this.referenceDataObject['vnfcIdentifier'] = this.vnfcIdentifier;
+            //this.vnfcChanged(this.vnfcIdentifier, FormData);
+            if( this.utilityService.getTracelvl() > 0 )
+              console.log(this.classNm+": displayHideVnfc: vnfcIdentifier:["+
+                this.vnfcIdentifier+"]");
         }
         if (this.referenceDataObject.scope['vnfc-type-list'] != undefined && this.referenceDataObject.scope['vnfc-type-list'].length == 0 && this.referenceDataObject.scope['vnfc-type'] != undefined && this.referenceDataObject.scope['vnfc-type'].length == 0) {
-            if (this.displayVnfc == 'true') {
+            if(this.displayVnfc == 'true') {
                 this.isVnfcType = false
                 this.displayVnfc = 'true'
                 this.isVnfcTypeList = true
@@ -434,17 +438,14 @@
             this.displayVnfc = 'false'
             this.isVnfcTypeList = false
         }
-        if (this.utilityService.getTracelvl() > 1)
-            console.log(this.classNm + ": displayHideVnfc: finish. isVnfcType:[" +
-                this.isVnfcType + " displayVnfc:[" + this.displayVnfc + "] isVnfcTypeList:[" +
-                this.isVnfcTypeList + "]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log(this.classNm+": displayHideVnfc: finish. isVnfcType:["+
+          this.isVnfcType+" displayVnfc:["+this.displayVnfc+"] isVnfcTypeList:["+
+          this.isVnfcTypeList+"]");
     }
 
-    //reinitializing the required values
+    //reinitializing the required values. when changing to template or pd sending the values to mapping service
     ngOnDestroy() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": ngOnDestroy: start:" +
-                " vnfcIdentifier:[" + this.vnfcIdentifier + "]");
         let referenceObject = this.prepareReferenceObject();
         this.mappingEditorService.changeNavAppData(this.appData);
         this.mappingEditorService.changeNavDownloadData(this.downloadData);
@@ -453,7 +454,7 @@
         this.firstArrayElement = [];
         this.uploadFileName = '';
     }
-
+    // vaidating the number
     numberValidation(event: any) {
         if (this.numberTest.test(event) && event != 0) {
             this.numberOfVmTest = true;
@@ -464,8 +465,8 @@
     }
     // update my vnf pop up session values
     updateSessionValues(event: any, type: string) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": updateSessionValues: type:[" + type + "]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log(this.classNm+": updateSessionValues: type:["+type+"]");
         if (type === 'action') {
             sessionStorage.setItem('action', event);
         }
@@ -473,8 +474,10 @@
             sessionStorage.setItem('vnfType', event);
         }
     }
-
+    // adding vnfc data for each vm
     addVnfcData(vmNumber: number) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log(this.classNm+": addVnfcData: start: vmNumber="+ vmNumber);
         var newObj = {
             'vnfc-instance': this.referenceDataObject.vm[vmNumber].vnfc.length + 1,
             'vnfc-type': this.vnfcTypeData,
@@ -485,11 +488,10 @@
         };
         this.referenceDataObject.vm[vmNumber].vnfc.push(newObj);
     }
-
     //validating the vnf and vnfc data in the pop up
     validateVnfcName(name) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": validateVnfcName: start: name:[" + name + "]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": validateVnfcName: start: name:["+name+"]");
         if (!name.trim() || name.length < 1) {
             this.errorMessage = '';
             this.invalid = true;
@@ -508,6 +510,7 @@
         }
     }
 
+
     //to remove the VM's created by the user
     removeFeature(vmNumber: any, index: any, templateId) {
         if (this.referenceDataObject.action == "Configure") {
@@ -516,6 +519,8 @@
                 if (arrIndex >= vmNumber) {
                     obj["vm-instance"] = obj["vm-instance"] - 1
                 }
+                // obj["vm-instance"] = arrIndex+1
+
             })
         } else {
             let data = this.referenceDataObject.vm.filter(obj => {
@@ -536,6 +541,7 @@
         }
 
     }
+    //utility function while adding VM to check index
     findVmindex(data, vmNumber, templateId) {
         return this.referenceDataObject.vm.findIndex(obj => {
             let x = obj['vm-instance'] == (vmNumber + 1) && templateId == obj['template-id']//true
@@ -544,19 +550,50 @@
 
     }
 
-    //add new VM's to the configure
+    //add new VM's to the configure and configmodify. 
     addVms() {
         let arr = [];
-        let mberOFVm = Number(this.refernceScopeObj.from);
-        if (this.referenceDataObject.action == 'ConfigScaleOut') {
-            let existingVmsLength = this.referenceDataObject.vm.filter(obj => {
-                return obj['template-id'] == this.templateIdentifier
-            }).length;
-            mberOFVm = existingVmsLength + mberOFVm;
-            let index = 0;
-            for (var i = (existingVmsLength); i < mberOFVm; i++) {
 
-                this.referenceDataObject.vm.push({ 'template-id': this.templateIdentifier, 'vm-instance': (existingVmsLength + index + 1), vnfc: [Object.assign({}, this.Sample)] });
+        let mberOFVm = Number(this.refernceScopeObj.from);
+        let key
+        if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
+            key = "vnfcType-id"
+        } else if (this.referenceDataObject.action == 'ConfigScaleOut') {
+            key = "template-id"
+        }
+        if (this.referenceDataObject.action == 'ConfigScaleOut' || this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
+            let existingVmsLength = this.referenceDataObject.vm.map(obj => {
+                if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
+                    return obj["vnfcType-id"] == this.templateIdentifier
+                } else if (this.referenceDataObject.action == 'ConfigScaleOut') {
+                    return obj["template-id"] == this.templateIdentifier
+                }
+            }).length;
+            //mberOFVm = existingVmsLength + mberOFVm;
+            let index = 0;
+            let identifierValue
+            if (this.referenceDataObject.action == 'ConfigScaleOut') {
+                identifierValue = this.templateIdentifier
+            } else if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify'  || this.referenceDataObject.action == 'DistributeTraffic') {
+                identifierValue = this.vnfcIdentifier
+            }
+
+            for (var i = 0; i < mberOFVm; i++) {
+                if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
+
+                    if (identifierValue && identifierValue != "") {
+                        this.referenceDataObject.vm.push({ 'vnfcType-id': identifierValue, 'vm-instance': (existingVmsLength + index + 1), vnfc: [Object.assign({}, this.Sample)] });
+                    } else {
+                        this.referenceDataObject.vm.push({ 'vm-instance': (existingVmsLength + index + 1), vnfc: [Object.assign({}, this.Sample)] });
+                    }
+
+                } else if (this.referenceDataObject.action == 'ConfigScaleOut') {
+                    if (identifierValue && identifierValue != "") {
+                        this.referenceDataObject.vm.push({ 'template-id': identifierValue, 'vm-instance': (existingVmsLength + index + 1), vnfc: [Object.assign({}, this.Sample)] });
+                    }
+
+                }
+
                 index++;
             }
 
@@ -573,25 +610,43 @@
         }
     }
 
-    //Reference object to create reference data
+    //preparing reference obj with required business use cases
     prepareReferenceObject(isSaving?: any) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": prepareReferenceObject: start.");
+      let methName= "prepareReferenceObject";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": start: isSaving:["+
+          isSaving+"]");
         let scopeName = this.resetParamsOnVnfcType();
-        let extension = this.decideExtension(this.referenceDataObject);
+        let extension = this.referenceDataFormUtil.decideExtension(this.referenceDataObject);
         this.prepareArtifactList(scopeName, extension);
+
         if (this.referenceDataObject.action === 'OpenStack Actions') {
             this.referenceDataObject['template'] = 'N';
             this.referenceDataObject['artifact-list'] = [];
             this.referenceDataObject['firstRowVmSpreadSheet'] = this.firstArrayElement;
         }
-        //detaching the object from the form and processing further
+        else{
+            this.referenceDataObject['firstRowVmSpreadSheet']=undefined;
+        }
+        //ditaching the object from the form and processing pfurther
         let newObj = $.extend(true, {}, this.referenceDataObject);
         let action = this.referenceDataObject.action;
+        // if (action=="ConfigScaleOut"){
+        //     this.referenceDataObject.action="true";
+        // }
+        //preparing Obj for save/download
         newObj = this.deleteVmsforNonActions(newObj, action)
+
+        if (newObj['device-protocol'] != 'REST') {
+            delete newObj['url']
+        }
         this.pushOrReplaceTempData(newObj, action);
         this.addAllActionObj(newObj, scopeName);
         this.resetTempData()
+
+
+        //rmove context url
+        //if()
         //saving data to service
         this.mappingEditorService.getReferenceList().push(JSON.parse(JSON.stringify(this.referenceDataObject)));
         this.buildDesignComponent.updateAccessUpdatePages(this.referenceDataObject.action, this.mappingEditorService.getReferenceList());
@@ -601,74 +656,65 @@
         return { totlaRefDtaa: this.tempAllData, scopeName: scopeName };
     }
 
+    // utility function to check element existence
     public checkIfelementExistsInArray(element, array) {
-        //// console.log("Element==" + element)
         var result: boolean = false;
 
         array.forEach(function (item) {
-            // // console.log("Item==" + item)
             if (element === item) {
-                // console.log('Element==' + element + 'Item==' + item);
                 result = true;
             }
         }
         );
         return result;
     }
-
+    // when uploading the file 
     upload(evt: any) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": upload: start.");
         /* wire up file reader */
         const target: DataTransfer = <DataTransfer>(evt.target);
         this.uploadFileName = evt.target.files[0].name;
         var fileExtension = this.uploadFileName.substr(this.uploadFileName.lastIndexOf('.') + 1);
         if (target.files.length != 1) {
-            console.log(this.classNm + ": upload: Error: got no file !");
-            throw new Error(appConstants.errors.multipleFileUploadError);
+            throw new Error('Cannot upload multiple files on the entry');
         }
-        console.log(this.classNm + ": upload: filename:[" + evt.target.files[0].name + "]");
         if (fileExtension.toUpperCase() === 'XLS' || fileExtension.toUpperCase() === 'XLSX') {
             const reader = new FileReader();
             reader.onload = (e: any) => {
                 /* read workbook */
                 const bstr = e.target.result;
-                //      // console.log("print 1---" + bstr);
                 const wb = XLSX.read(bstr, { type: 'binary' });
-                //    // console.log("print 2---" + JSON.stringify(wb));
                 /* grab first sheet */
                 const wsname = wb.SheetNames[0];
-                //  // console.log("Name:---" + wsname);
                 const ws = wb.Sheets[wsname];
 
                 /* save data */
-
+                this.firstArrayElement = []
                 let arrData = (<AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 })));
                 this.uploadedDataArray = arrData;
-                this.firstArrayElement = arrData[0];
+                for (var i = 0; i < arrData[0].length; i++) {
+                    this.firstArrayElement.push(arrData[0][i].replace(/[\n\r]+/g, ''))
+                }
                 var remUploadedDataArray = arrData;
                 remUploadedDataArray.shift();
                 this.remUploadedDataArray = remUploadedDataArray;
                 if (arrData != null) {
                     this.getExcelUploadStatus = true;
-                    this.nService.success(appConstants.notifications.titles.success, appConstants.messages.vmDataUploadSuccess);
+                    this.nService.success('Success', 'Vm capabilities data uploaded successfully');
 
                 }
                 else {
-                    this.nService.success(appConstants.notifications.titles.error, appConstants.messages.emptyVmUpload);
+                    this.nService.success('Error', 'Empty Vm capabilities file uploaded');
                 }
             };
             reader.readAsBinaryString(target.files[0]);
         }
         else {
-            this.nService.error(appConstants.notifications.titles.error, appConstants.messages.incorrectVmUpload);
+            this.nService.error('Error', 'Incorrect VM capabilities file uploaded');
         }
 
     }
 
     addVmCapabilitiesData() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": addVmCapabilitiesData: start.");
         for (var i = 0; i < this.uploadedDataArray.length; i++) {
             var vnfcFuncCodeArray = [];
             var data = this.uploadedDataArray[i];
@@ -676,6 +722,7 @@
                 if (data[j] != undefined) {
                     if (data[j].toUpperCase() === 'Y') {
                         vnfcFuncCodeArray.push(this.firstArrayElement[j]);
+                        //vnfcFuncCodeArray.push({name:this.firstArrayElement[j]});
                     }
                 }
             }
@@ -686,7 +733,7 @@
                     'action-level': 'vm',
                     'scope': {
                         'vnf-type': this.referenceDataObject['scope']['vnf-type'], //need to confirm what should be this value
-                        'vnfc-type': null
+                        'vnfc-type-list': null
                     },
                     'vnfc-function-code-list': vnfcFuncCodeArray,
                     'template': 'N',
@@ -699,88 +746,76 @@
         }
     }
 
-    //download template
+    //download the templae pd and reference file with all the actions added.
     save(form: any, isValid: boolean) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": save: start: referenceDataObject.action:[" +
-                this.referenceDataObject.action + "]");
-        if (this.referenceDataObject.action === '') {
-            this.nService.error(appConstants.notifications.titles.error, appConstants.errors.noActionError);
-            return;
-        }
-        if (this.referenceDataObject['device-protocol'] === '') {
-            this.nService.error(appConstants.notifications.titles.error, appConstants.errors.noDeviceProtocolError);
-            return;
-        }
+        // will show error message
+        this.showValidationErrors(this.referenceDataObject);
 
         if (isValid) {
             let referenceObject = this.prepareReferenceObject();
+            let removedKeysArray = []
+            this.tempAllData.forEach((data, index) => {
+                if (data.action) {
+                    removedKeysArray.push(JSON.parse(JSON.stringify(this.deleteUnwantedKeys(data))))
+                }
+            });
+            this.tempAllData = removedKeysArray;
+           /* var tempAllData = this.tempAllData;
+            tempAllData=this.removeParamFileNameBeforeSave(tempAllData)*/
+            
+            //tempAllData["artifact_list"]=newArtifactList;
             let theJSON = JSON.stringify({ 'reference_data': this.tempAllData }, null, '\t');
             let uri = 'data:application/json;charset=UTF-8,' + encodeURIComponent(theJSON);
             this.downloadData.reference = theJSON;
+            let referenceFileName = 'reference_AllAction_' + this.referenceDataObject.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V.json';
+            this.utilityService.downloadArtifactToPc(theJSON, 'json', referenceFileName, 100);
             this.validateTempAllData();
-            var blob = new Blob([theJSON], {
-                type: 'text/plain'
-            });
-            let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
-            this.downloadFile(blob, fileName, 100)
             var templateData = JSON.stringify(this.downloadData.template.templateData);
+            var templateFileName = this.downloadData.template.templateFileName;
+            if (templateFileName != null || templateFileName != '') {
+                var fileExtensionArr = templateFileName.split('.');
+            }
+            var nameValueFileName = this.downloadData.template.nameValueFileName;
+            let pdFileName = this.downloadData.pd.pdFileName;
             var nameValueData = JSON.stringify(this.downloadData.template.nameValueData);
             var pdData = this.downloadData.pd.pdData;
-            if (templateData != '{}' && templateData != null && templateData != undefined) this.downloadTemplate();
-            if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.downloadNameValue();
-            if (pdData != '' && pdData != null && pdData != undefined) this.downloadPd();
-        }
-    }
-    downloadFile(blob, fileName, delay) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": downloadFile: start.");
-        setTimeout(() => {
-            saveAs(blob, fileName);
-        }, delay)
-    }
-
-    downloadTemplate() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": downloadTemplate: start.");
-        var fileName = this.downloadData.template.templateFileName;
-        console.log(this.classNm + ": downloadTemplate: fileName:[" + fileName + "]");
-        var theJSON = this.downloadData.template.templateData;
-        if (fileName != null || fileName != '') {
-            var fileExtensionArr = fileName.split('.');
-            var blob = new Blob([theJSON], {
-                type: 'text/' + fileExtensionArr[1]
-            });
-            this.downloadFile(blob, fileName, 130)
+            if (templateData != '{}' && templateData != null && templateData != undefined) this.utilityService.downloadArtifactToPc(this.downloadData.template.templateData, fileExtensionArr[1], templateFileName, 130);
+            if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.utilityService.downloadArtifactToPc(this.downloadData.template.nameValueData, 'json', nameValueFileName, 160);
+            if (pdData != '' && pdData != null && pdData != undefined) this.utilityService.downloadArtifactToPc(pdData, 'yaml', pdFileName, 180);
         }
     }
 
-    downloadNameValue() {
-        var fileName = this.downloadData.template.nameValueFileName;
-        var theJSON = this.downloadData.template.nameValueData;
-        var blob = new Blob([theJSON], {
-            type: 'text/json'
-        });
-
-        this.downloadFile(blob, fileName, 160)
-    }
-
-    downloadPd() {
-        let fileName = this.downloadData.pd.pdFileName;
-        let theJSON = this.downloadData.pd.pdData;
-        var blob = new Blob([theJSON], {
-            type: 'text/plain'
-        });
-
-        this.downloadFile(blob, fileName, 180)
-    }
-
+  /*  removeParamFileNameBeforeSave(tempAllData)
+    {
+        var newArtifactList = [];
+            var element={};
+            for (var i = 0; i < tempAllData.length; i++) {
+                if (this.checkIfelementExistsInArray(tempAllData[i].action,this.actions)) {
+                    var artifactList = tempAllData[i]["artifact-list"]
+                    
+                    for (var j = 0; j < artifactList.length; j++) {
+                        if (artifactList[j]["artifact-type"] != "param_values") {
+                            element = artifactList[j];
+                            newArtifactList.push(element);
+                        }
+                    }
+                    tempAllData[i]["artifact-list"] = newArtifactList
+                    newArtifactList = [];
+                    element={};
+                }
+            }
+            return tempAllData;
+    }*/
     // save the values to the cache, on action change without download
-    validateDataAndSaveToAppc(valid, form, event) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": validateDataAndSaveToAppc: start: valid:" + valid);
+    validateDataAndSaveToAppc( valid, form, event) {
+      let methName= "validateDataAndSaveToAppc";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": start: valid:["+valid+"]");
         // will show error message
         this.showValidationErrors(this.referenceDataObject);
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": tempAllData:["+
+          JSON.stringify(this.tempAllData)+"]");
         try {
             form._submitted = true;
             if (valid) {
@@ -810,18 +845,18 @@
             this.nService.warn('status', 'unable to save the artifact');
         }
     }
-
     //this method saves reference, template, param and PD data to APPC
     saveToAppc() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": saveToAppc: start: vnf-type:[" +
-                this.referenceDataObject.scope['vnf-type'] + "]");
-        let theJSON = JSON.stringify(this.tempAllData);
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": saveToAppc: tempAllData:[" + theJSON + "]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": saveToAppc: start: vnf-type:["+
+          this.referenceDataObject.scope['vnf-type']+"]");
+        let theJSON = JSON.stringify( this.tempAllData );
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": saveToAppc: tempAllData:["+theJSON+"]");
         let fileName = 'reference_AllAction_' + this.referenceDataObject.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V.json';
-        this.saveReferenceDataToAppc(
-            JSON.stringify({ reference_data: this.tempAllData }), this.referenceDataObject.scope['vnf-type'], fileName);
+        /*var tempAllData=this.removeParamFileNameBeforeSave(this.tempAllData);
+        this.tempAllData=tempAllData;*/
+        this.saveReferenceDataToAppc(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
 
         var templateData = JSON.stringify(this.appData.template.templateData);
         var nameValueData = JSON.stringify(this.appData.template.nameValueData);
@@ -833,8 +868,6 @@
 
     // valaidation of template data
     validateTempAllData() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": validateTempAllData: start.");
         if (this.tempAllData) {
             var updatedData = [];
             this.tempAllData.forEach(data => {
@@ -846,14 +879,12 @@
         }
     }
 
-    //.. prepare and send the data to the API.
-    saveReferenceDataToAppc(artifactData, vnf_type, fileName) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": saveReferenceDataToAppc: start: vnf_type:[" +
-                vnf_type + "]");
+    //preparig and send the data to the API.
+    saveReferenceDataToAppc(artifactData, dataJson, fileName) {
         let data = [];
         let slashedPayload = this.referenceDataFormUtil.appendSlashes(artifactData);
-        let payload = this.utilityService.createPayLoadForSave("reference_data", vnf_type, "AllAction", fileName, this.versionNoForApiCall, slashedPayload);
+
+        let payload = this.utilityService.createPayLoadForSave("reference_data", dataJson['scope']['vnf-type'], "AllAction", fileName, this.versionNoForApiCall, slashedPayload);
         this.ngProgress.start();
         this.httpUtils.post({
             url: environment.getDesigns,
@@ -877,9 +908,8 @@
             this.ngProgress.done();
         }, 3500);
     }
-
+    // if no data present in the session, fetching data from API
     retriveFromAppc() {
-        console.log(this.classNm + ": retriveFromAppc: start.");
         if (sessionStorage.getItem('updateParams') != 'undefined') {
             this.getArtifact();
             this.noCacheData = false;
@@ -888,22 +918,11 @@
         }
     }
 
-    cloneMessage(servermessage) {
-        var clone = {};
-        for (var key in servermessage) {
-            if (servermessage.hasOwnProperty(key)) //ensure not adding inherited props
-                clone[key] = servermessage[key];
-        }
-        return clone;
-    }
-
     public showUpload() {
         this.selectedUploadType = this.uploadTypes[0].value;
     };
-
+    // used when user uploads a file using upload file
     public fileChange(input) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": fileChange: start.");
         this.fileName = input.target.files[0].name.replace(/C:\\fakepath\\/i, '');
         this.fileUploaded = true;
         this.disableRetrieve = true;
@@ -925,6 +944,7 @@
                                 return;
                             }
                         }
+
                         this.displayVnfc = 'false';
                         this.isVnfcType = false;
                         this.isVnfcTypeList = false;
@@ -934,55 +954,37 @@
                                 this.displayVnfc = 'true';
                                 this.isVnfcTypeList = true;
                                 this.vnfcIdentifier = obj.scope['vnfc-type-list'][0];
+                                
                             }
                         }
-                        this.oldAction = obj.action;
+                        this.oldAction=obj.action;
                         this.tempAllData = JSON.parse(JSON.stringify(jsonObject));
-                        if (this.utilityService.getTracelvl() > 0)
-                            console.log(this.classNm + ": fileChange: read & parsed.");
+                        //check vnfc tyoe list for old files
+                        // if (this.referenceDataObject.scope['vnfc-type-list'] == undefined) {
+                        //     this.tempAllData = []
+                        //     this.referenceDataObject = {
+                        //         action: '',
+                        //         'action-level': 'vnf',
+                        //         scope: { 'vnf-type': '', 'vnfc-type-list': [] },
+                        //         'template': 'Y',
+                        //         vm: [],
+                        //         'device-protocol': '',
+                        //         'user-name': '',
+                        //         'port-number': '',
+                        //         'artifact-list': []
+                        //     }
+                        //     this.nService.error('Error', 'Incorrect file format');
+                        //     return
+                        // }
                         this.notificationService.notifySuccessMessage('Reference Data file successfully uploaded..');
-                        if (jsonObject instanceof Array) {
-                            this.referenceDataObject = jsonObject[0];
-                            jsonObject.forEach(obj => {
-                                this.selectedActions.push(obj.action);
-                            });
-                        } else {
-                            this.referenceDataObject = jsonObject;
-
-                            this.selectedActions.push(jsonObject.action);
-                        }
-                        if (this.utilityService.getTracelvl() > 0)
-                            console.log(this.classNm + ": fileChange: " +
-                                "referenceDataObject.action:[" +
-                                this.referenceDataObject.action + "]");
+                        this.highlightSelectedActions(jsonObject)
                         this.toggleIdentifier(this.referenceDataObject.action)
+                        this.populateExistinAction(this.referenceDataObject.action)
                         this.configDrp(this.referenceDataObject.action)
-                        if (this.referenceDataObject.action === 'OpenStack Actions') {
-                            this.deviceProtocols = ['', 'OpenStack'];
-                            this.buildDesignComponent.tabs = [
-                                {
-                                    type: 'dropdown',
-                                    name: 'Reference Data',
-                                    url: 'references',
-                                }];
-                        }
-                        else {
-                            this.buildDesignComponent.tabs = [
-                                {
-                                    name: 'Reference Data',
-                                    url: 'references',
-                                }, {
-                                    name: 'Template',
-                                    url: 'templates/myTemplates',
-                                }, {
-                                    name: 'Parameter Definition',
-                                    url: 'parameterDefinitions/create'
-                                } /*, {
-        name: "Test",
-        url: 'test',
-      }*/
-                            ];
-                        }
+
+
+                        this.processReferenceDataAfterRetrieval();
+
                         this.getArtifactsOpenStack();
                         if (this.referenceDataObject.template == null) {
                             this.referenceDataObject.template = 'Y';
@@ -990,27 +992,37 @@
                         if (this.referenceDataObject['action-level'] == null) {
                             this.referenceDataObject['action-level'] = 'VNF';
                         }
-                        if (this.utilityService.getTracelvl() > 0)
-                            console.log(this.classNm + ": fileChange: displayVnfc:[" +
-                                this.displayVnfc + "]");
+
+                        
                         // Enable or Block Template and PD Tabs
-                        this.buildDesignComponent.getRefData(
-                            { ...this.referenceDataObject, displayVnfc: this.displayVnfc });
+                        this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
                     } catch (e) {
-                        this.nService.error(appConstants.notifications.titles.error, appConstants.messages.incorrectFileFormat);
+                        this.nService.error('Error', 'Incorrect file format');
                     }
                 }
                 this.hideModal = true;
             });
         } else {
-            if (this.utilityService.getTracelvl() > 0)
-                console.log(this.classNm + ": fileChange: Error: Failed to read file!");
             this.notificationService.notifyErrorMessage('Failed to read file..');
         }
+
+    }
+
+    // Highlights selected action on new file upload and on existing VNF 
+    public highlightSelectedActions(jsonObject) {
+        if (jsonObject instanceof Array) {
+            this.referenceDataObject = jsonObject[0];
+            jsonObject.forEach(obj => {
+                this.selectedActions.push(obj.action);
+            });
+        } else {
+            this.referenceDataObject = jsonObject;
+
+            this.selectedActions.push(jsonObject.action);
+        }
     }
 
     public readFile(file, reader, callback) {
-        console.log(this.classNm + ": readFile: start.");
         // Set a callback funtion to fire after the file is fully loaded
         reader.onload = () => {
             // callback with the results
@@ -1024,9 +1036,8 @@
     fileChangeEvent(fileInput: any) {
         let obj: any = fileInput.target.files;
     }
-
+    //resetting the values
     clearVnfcData() {
-        console.log(this.classNm + ": clearVnfcData: start.");
         this.Sample = {
             'vnfc-instance': '1',
             'vnfc-function-code': '',
@@ -1049,10 +1060,9 @@
     //         this.referenceDataObject.scope['vnfc-type'] = '';
     //     }
     // }
-
+    // resetting the form
     resetForm() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": resetForm: start.");
+        console.log( this.classNm+": resetForm: start.");
         this.referenceDataObject['action-level'] = 'vnf';
         this.referenceDataObject.template = 'Y';
         this.referenceDataObject['device-protocol'] = '';
@@ -1064,8 +1074,12 @@
 
     // this method gets called with the action as parameter and the respective action details are fetched and assigned to the current page
     populateExistinAction(data) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": populateExistinAction: start.");
+      let methName= "populateExistinAction";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": start: data:["+data+"]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": tempAllData:["+
+          JSON.stringify(this.tempAllData)+"]");
         let existAction = this.tempAllData.findIndex(obj => {
             return obj.action == data;
         });
@@ -1076,12 +1090,11 @@
             this.referenceDataObject.scope['vnfc-type-list'] = obj['scope']['vnfc-type-list'];
             this.referenceDataObject['device-protocol'] = obj['device-protocol'];
             this.refernceScopeObj['sourceType'] = obj['scopeType'];
-            if (obj['scope']['vnfc-type-list'] != undefined && obj['scope']['vnfc-type-list'].length > 0) {
+            if(obj['scope']['vnfc-type-list'] != undefined && obj['scope']['vnfc-type-list'].length >0) {
                 this.referenceDataObject['vnfcIdentifier'] = obj['scope']['vnfc-type-list'][0];
             }
         } else {
-            if (this.utilityService.getTracelvl() > 0)
-                console.log(this.classNm + ": populateExistinAction: action not found");
+            console.log( this.classNm+": populateExistinAction: action not found");
             this.resetForm();
             this.referenceDataObject.action = data;
         }
@@ -1093,8 +1106,8 @@
                 break;
             case 'UpgradeBackout':
             case 'ResumeTraffic':
-            case 'QuiesceTraffic':
             case 'DistributeTraffic':
+            case 'QuiesceTraffic':
             case 'UpgradeBackup':
             case 'UpgradePostCheck':
             case 'UpgradePreCheck':
@@ -1120,38 +1133,38 @@
         }
     }
 
-    //Modal pop up for action change with values entered.
-    actionChange(data, userForm) {
-        var methName = "actionChange";
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": " + methName + ": start: data:[" + data + "]" +
-                " userForm.valid:[" + userForm.valid + "]");
+    //Modal pop up for action change with values entered. 
+    actionChange( data, userForm) {
+      let methName= "actionChange";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": start: data:["+data+"]"+
+          " userForm.valid:["+userForm.valid+"]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": tempAllData:["+
+          JSON.stringify(this.tempAllData)+"]");
         this.disableGrpNotationValue = false
         if (data == null) {
-            console.log(this.classNm + ": " + methName + ": data == null");
+            console.log( this.classNm+": "+methName+": data == null");
             return;
         }
-        if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
+        if((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
             this.actionChanged = true;
-            console.log(this.classNm + ": " + methName +
-                ": userForm valid and oldAction defined");
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log( this.classNm+": "+methName+
+              ": userForm valid and oldAction defined");
             // Calling common Confirmation Modal
             let disposable = this.dialogService.addDialog(ConfirmComponent)
-                .subscribe((isConfirmed) => {
+                .subscribe((isConfirmed)=>{
                     //We get dialog result
-                    console.log(this.classNm + ": " + methName + ":  isConfirmed:[" +
-                        isConfirmed + "]");
-                    if (isConfirmed) {
+                    if(isConfirmed) {
                         // User clicked on Yes
                         this.currentAction = this.referenceDataObject.action;
-                        console.log(this.classNm + ": " + methName +
-                            ": clicked on Yes: currentAction:[" + this.currentAction +
-                            "] oldAction:[" + this.oldAction + "]");
                         this.referenceDataObject.action = this.oldAction;
                         $('#saveToAppc').click();//make sure the save all is done before the tempall obj is saved form the API
                         this.toggleIdentifier(data)
                         this.oldAction = this.currentAction;// this.referenceDataObject.action + '';
-                        this.referenceDataObject.action = this.currentAction;
+                        this.referenceDataObject.action = this.currentAction
+
                         this.populateExistinAction(data);
                         if (this.oldAction === 'OpenStack Actions') {
 
@@ -1173,8 +1186,6 @@
                         // User clicked on No
                         this.toggleIdentifier(data)
                         this.currentAction = this.referenceDataObject.action;
-                        console.log(this.classNm + ": " + methName +
-                            ": clicked on No: currentAction:[" + this.currentAction + "]");
                         this.populateExistinAction(data);
                         this.resetVmsForScaleout(data);
                         this.oldAction = this.referenceDataObject.action + '';
@@ -1184,26 +1195,26 @@
                     }
 
                     if (this.referenceDataObject.action === 'Configure' || this.referenceDataObject.action === 'ConfigModify' || this.referenceDataObject.action === 'DistributeTraffic') {
-                        this.isConfigureAction = true;
+                        this.isConfigOrConfigModify = true;
                     } else {
-                        this.isConfigureAction = false;
+                        this.isConfigOrConfigModify = false;
                         delete this.mappingEditorService.newObject['vnfc'];
                     }
-
+    
                     // Enable or Block Template and PD Tabs
                     if (this.currentAction == 'ConfigScaleOut' && this.templateIdentifier && this.templateIdentifier != '') {
                         // let referenceDataObjectTemp = this.referenceDataObject;
                         // referenceDataObjectTemp['template-id'] = this.templateIdentifier;
                         // this.buildDesignComponent.getRefData(referenceDataObjectTemp);
                         this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc }, { reqField: this.templateIdentifier });
-
+    
                     } else {
                         this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
-                    }
+                    }    
                 });
         } else {
-            console.log(this.classNm + ": " + methName +
-                ": userForm Not valid or oldAction not defined");
+            console.log( this.classNm+": "+methName+
+              ": userForm Not valid or oldAction not defined");
             this.actionChanged = true;
             this.currentAction = this.referenceDataObject.action;
             this.oldAction = this.referenceDataObject.action + '';
@@ -1212,7 +1223,7 @@
             this.toggleIdentifier(data);
 
             // Enable or Block Template and PD Tabs
-            if (this.currentAction == 'ConfigScaleOut' && this.templateIdentifier) {
+            if(this.currentAction == 'ConfigScaleOut' && this.templateIdentifier) {
                 // let referenceDataObjectTemp = this.referenceDataObject;
                 // referenceDataObjectTemp['template-id'] = this.templateIdentifier;
                 // this.buildDesignComponent.getRefData(referenceDataObjectTemp);
@@ -1221,40 +1232,24 @@
                 this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
             }
         }
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.classNm+": "+methName+": tempAllData:["+
+            JSON.stringify(this.tempAllData)+"]");
         this.configDrp(data)
     }
 
     configDrp(data) {
-        console.log(this.classNm + ": configDrp: start: data:[" + data + "]");
+        console.log( this.classNm+": configDrp: start: data:["+data+"]");
         if (data == 'ConfigScaleOut') {
             this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
         } else {
             this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value'];
         }
         if (data == 'OpenStack Actions') {
-            this.buildDesignComponent.tabs = [
-                {
-                    type: 'dropdown',
-                    name: 'Reference Data',
-                    url: 'references',
-                }];
+            this.buildDesignComponent.tabs = this.referencDataTab;
         }
         else {
-            this.buildDesignComponent.tabs = [
-                {
-                    name: 'Reference Data',
-                    url: 'references',
-                }, {
-                    name: 'Template',
-                    url: 'templates/myTemplates',
-                }, {
-                    name: 'Parameter Definition',
-                    url: 'parameterDefinitions/create'
-                }/*, {
-                    name: "Test",
-                    url: 'test',
-                }*/
-            ];
+            this.buildDesignComponent.tabs = this.allTabs;
         }
         if (data == 'Configure' || data == 'ConfigModify' || data == 'DistributeTraffic') {
             this.nonConfigureAction = false;
@@ -1262,33 +1257,36 @@
             this.nonConfigureAction = true;
         }
     }
-
+    // removing and adding the url key based on the protocol selected
     deviceProtocolChange() {
-        console.log(this.classNm + ": deviceProtocolChange: start.");
+      let methName= "deviceProtocolChange";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": start.");
         if (this.referenceDataObject['device-protocol'] == 'REST') {
 
         } else {
             delete this.referenceDataObject['context-url']
         }
         // Enable or Block Template and PD Tabs
-        this.buildDesignComponent.getRefData(
-            { ...this.referenceDataObject, displayVnfc: this.displayVnfc },
-            { reqField: this.templateIdentifier });
+        this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc }, {reqField: this.templateIdentifier})
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.classNm+": "+methName+": tempAllData:["+
+            JSON.stringify(this.tempAllData)+"]");
     }
 
     // used to call or trigger save object on template Identifier changes
     idChange(data, userForm) {
-        console.log(this.classNm + ": idChange: start: data:[" + data + "]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": idChange: start: data:["+data+"]");
         if (data == null) {
             return;
         }
+
         // Enable or Block Template and PD Tabs
         // let referenceDataObjectTemp = this.referenceDataObject;
         // referenceDataObjectTemp['template-id'] = data;
         // this.buildDesignComponent.getRefData(referenceDataObjectTemp);
-        this.buildDesignComponent.getRefData(
-            { ...this.referenceDataObject, displayVnfc: this.displayVnfc },
-            { reqField: data });
+        this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc }, { reqField: data });
 
         if ((userForm.valid)) {
             this.currentAction = "ConfigScaleOut"
@@ -1296,78 +1294,95 @@
             let referenceObject = this.prepareReferenceObject();
             this.actionChanged = true;
             if (this.templateIdentifier) {
-                // Calling common Confirmation Modal
-                let disposable = this.dialogService.addDialog(ConfirmComponent)
-                    .subscribe((isConfirmed) => {
-                        //We get dialog result
-                        if (isConfirmed) {
-                            // User clicked on Yes
-                            this.validateTempAllData();
-                            this.saveToAppc();
-                            this.clearCache();
-                            this.clearVnfcData();
-                            this.refernceScopeObj.from = '';
-                        }
-                        else {
-                            // User clicked on No
-                            this.clearCache();
-                            this.refernceScopeObj.from = '';
-                        }
-                    });
+                 // Calling common Confirmation Modal
+                 let disposable = this.dialogService.addDialog(ConfirmComponent)
+                 .subscribe((isConfirmed)=>{
+                     //We get dialog result
+                     if(isConfirmed) {
+                         // User clicked on Yes
+                         this.validateTempAllData();
+                         this.saveToAppc();
+                         this.clearCache();
+                         this.clearVnfcData();
+                         this.refernceScopeObj.from = '';
+                     }
+                     else {
+                         // User clicked on No
+                         this.clearCache();
+                         this.refernceScopeObj.from = '';
+                     }
+                 });
             }
         } else {
-            this.oldtemplateIdentifier = this.templateIdentifier;
+            this.oldtemplateIdentifier = this.templateIdentifier
         }
+
+        // if (this.referenceDataObject.action == 'ConfigScaleOut' && data ) {
+        //     let referenceDataObjectTemp = this.referenceDataObject;
+        //     referenceDataObjectTemp['selectedTemplateId'] = data;
+        //     this.buildDesignComponent.getRefData(referenceDataObjectTemp);
+        // } else {
+        //     this.buildDesignComponent.getRefData(this.referenceDataObject);
+        // }
     }
 
     // used to call or trigger save object on multiple VNFC's changes
-    vnfcChanged(data, userForm) {
-        console.log(this.classNm + ": vnfcChanged: new vnfcIdentifier:[" + data + "]");
-        console.log(this.classNm + ": vnfcChanged: oldVnfcIdentifier:[" +
-            this.oldVnfcIdentifier + "]");
-        console.log(this.classNm + ": vnfcChanged:  scope.vnfc-type:[" +
-            this.referenceDataObject.scope['vnfc-type'] + "]");
+    vnfcChanged( data, userForm) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": vnfcChanged: new vnfcIdentifier:["+data+"]");
+      if( this.utilityService.getTracelvl() > 1 )
+        console.log( this.classNm+": vnfcChanged: oldVnfcIdentifier:["+
+          this.oldVnfcIdentifier+"]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log(this.classNm+": vnfcChanged:  scope.vnfc-type:["+
+          this.referenceDataObject.scope['vnfc-type']+"]");
         this.vnfcIdentifier = data;
-        this.clearCache();
+        //this.clearCache();
         if (data == null) {
             return;
         }
-        //.. populate VNFC Type in Sample field
-        this.setVnfcTypeInSample(this.vnfcIdentifier);
+      
         // Enable or Block Template and PD Tabs
         let referenceDataObjectTemp = this.referenceDataObject;
         referenceDataObjectTemp['vnfcIdentifier'] = data;
-        console.log(this.classNm +
-            ": vnfcChanged: displayVnfc:[" + this.displayVnfc + "]");
-        this.buildDesignComponent.getRefData(
-            { ...this.referenceDataObject, displayVnfc: this.displayVnfc },
-            { reqField: data });
-        console.log(this.classNm +
-            ": vnfcChanged: userForm.valid:[" + userForm.valid + "]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+
+          ": vnfcChanged: displayVnfc:["+this.displayVnfc+"]");
+        //this.buildDesignComponent.getRefData(referenceDataObjectTemp);
+        this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc }, { reqField: data });
+
+      
+        console.log( this.classNm+
+          ": vnfcChanged: userForm.valid:["+userForm.valid+"]");
         if ((userForm.valid) && this.oldVnfcIdentifier != '' && this.oldVnfcIdentifier != undefined) {
             this.currentAction = this.referenceDataObject.action
             this.oldVnfcIdentifier = this.vnfcIdentifier
             let referenceObject = this.prepareReferenceObject();
             this.actionChanged = true;
             if (this.vnfcIdentifier) {
-                // Calling common Confirmation Modal
-                let disposable = this.dialogService.addDialog(ConfirmComponent)
-                    .subscribe((isConfirmed) => {
-                        //We get dialog result
-                        if (isConfirmed) {
-                            // User clicked on Yes
-                            this.validateTempAllData();
-                            this.saveToAppc();
-                            this.clearCache();
-                            this.clearVnfcData()
-                            this.refernceScopeObj.from = '';
-                        }
-                        else {
-                            // User clicked on No
-                            this.clearCache();
-                            this.refernceScopeObj.from = '';
-                        }
-                    });
+                 // Calling common Confirmation Modal
+                 let disposable = this.dialogService.addDialog(ConfirmComponent)
+                 .subscribe((isConfirmed)=>{
+                     //We get dialog result
+                     if(isConfirmed) {
+                         // User clicked on Yes
+                         this.validateTempAllData();
+                         this.saveToAppc();
+                         this.clearCache();
+                         this.clearVnfcData()
+                         this.refernceScopeObj.from = '';
+                         //.. populate VNFC Type in Sample field
+                         this.setVnfcTypeInSample( this.vnfcIdentifier );
+                     }
+                     else {
+                         // User clicked on No
+                         this.clearCache();
+                         this.clearVnfcData()
+                         this.refernceScopeObj.from = '';
+                         //.. populate VNFC Type in Sample field
+                         this.setVnfcTypeInSample( this.vnfcIdentifier );
+                     }
+                 });
             }
         } else {
             if (data != null) {
@@ -1376,8 +1391,9 @@
         }
     }
 
-    clearCache() {
-        console.log(this.classNm + ": clearCache: start.");
+    clearCache()
+    //needed for the the clearing template cache.
+    {
         // get the value and save the userid and persist it.
         this.clearTemplateCache();
         this.clearPdCache();
@@ -1398,74 +1414,6 @@
         this.paramShareService.setSessionParamData(undefined);
     }
 
-    saveTemp() {
-        console.log(this.classNm + ": saveTemp: start.");
-        this
-            .httpUtils
-            .post(
-                { url: environment.getDesigns, data: this.appData.template.templateData })
-            .subscribe(resp => {
-                if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
-                    this.nService.success('Status', 'Successfully uploaded the Template Data');
-                }
-                if (resp.output.status.code === '401') {
-                    this.nService.warn('Status', 'Error in saving the Template to Appc');
-
-                }
-            },
-                (err) => this.nService.error('Status', 'Error Connecting to the APPC Network'));
-    }
-
-    saveNameValue() {
-        console.log(this.classNm + ": saveNameValue: start.");
-        this
-            .httpUtils
-            .post(
-                {
-                    url: environment.getDesigns, data: this.appData.template.nameValueData
-                })
-            .subscribe(resp => {
-                if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
-                    this.nService.success('Status', 'Successfully uploaded the Name Value Pairs');
-                }
-                if (resp.output.status.code === '401') {
-                    this.nService.warn('Status', 'Error in saving the Name value pairs to Appc');
-                }
-            },
-                error => {
-                    this.nService.error('Status', 'Error Connecting to the APPC Network');
-                    return false;
-                });
-    }
-
-    savePd() {
-        this
-            .httpUtils
-            .post(
-                {
-                    url: environment.getDesigns, data: this.appData.pd
-                })
-            .subscribe(resp => {
-                if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
-                    this.nService.success('Status', 'Successfully uploaded PD file');
-                }
-                if (resp.output.status.code === '401') {
-                    this.nService.warn('Status', 'Error in saving the PD to Appc');
-                }
-            },
-                error => {
-                    this.nService.error('Status', 'Error Connecting to the APPC Network');
-                    return false;
-                });
-    }
-
-    openModel(toShow: any, message: any, title: any) {
-        console.log(this.classNm + ": openModel: start: title:[" + title + "]");
-        this.modalComponent.isShow = toShow;
-        this.modalComponent.message = message;
-        this.modalComponent.title = title;
-    }
-
     browseOption() {
         $('#inputFile').trigger('click');
     }
@@ -1474,9 +1422,13 @@
         $('#excelInputFile').trigger('click');
     }
 
-    showIdentifier() {
-        $('#identifierModal').modal();
-    }
+    /* showIdentifier() {
+         $('#identifierModal').modal();
+     }
+ 
+     showVnfcPopup() {
+         $('#vnfcModal').modal();
+     }*/
 
     addToIdentDrp() {
         if (!(this.referenceDataObject['template-id-list'])) {
@@ -1485,49 +1437,48 @@
         if (!(this.referenceDataObject['template-id-list'].indexOf(this.templateId.trim()) > -1)) {
             this.referenceDataObject['template-id-list'].push(this.templateId.trim());
         }
-        // Changing value to blank otherwise it will show previous value in text box of popup
-        this.templateId = '';
-    }
 
+        // Changing newVnfcType value to blank otherwise it will show previous value in text box of popup
+        this.templateId = ''
+    }
     // adds the vnfc to the vnfc dropdown list
     addVnfc() {
-        var newVnfcTypeV = this.newVnfcType.trim();
-        console.log(this.classNm +
-            ": addVnfc: start: newVnfcTypeV:[" + newVnfcTypeV + "]");
+      var newVnfcTypeV= this.newVnfcType.trim();
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log(this.classNm+
+          ": addVnfc: start: newVnfcTypeV:["+newVnfcTypeV+"]");
         if (!(this.referenceDataObject.scope['vnfc-type-list'])) {
             this.referenceDataObject.scope['vnfc-type-list'] = [];
-            //  this.vnfcIdentifier = newVnfcTypeV;
-        } else if (this.referenceDataObject.scope['vnfc-type-list'].length == 0) {
-            //  this.vnfcIdentifier = newVnfcTypeV;
+            this.vnfcIdentifier = newVnfcTypeV;
+        } else {
+            this.vnfcIdentifier = newVnfcTypeV;
         }
-        this.vnfcIdentifier = newVnfcTypeV;
-        console.log(this.classNm +
-            ": addVnfc: vnfcIdentifier:[" + this.vnfcIdentifier + "]");
+        //this.referenceDataObject['vnfcIdentifier'] = this.vnfcIdentifier;
         if (!(this.referenceDataObject.scope['vnfc-type-list'].indexOf(newVnfcTypeV) > -1)) {
             this.referenceDataObject.scope['vnfc-type-list'].push(newVnfcTypeV);
         }
         this.tempAllData.forEach(obj => {
-            if (obj.action == "Configure" || obj.action == "ConfigModify" || obj.action == "DistributeTraffic") {
+            if (obj.action == "Configure" || obj.action == "ConfigModify"  || obj.action == "DistributeTraffic") {
                 obj.scope['vnfc-type-list'] = this.referenceDataObject.scope['vnfc-type-list']
             }
             this.resetArtifactList(obj);
         });
-        console.log(this.classNm + ": addVnfc: scope vnfc-type:[" +
-            this.referenceDataObject.scope['vnfc-type'] + "]");
-        this.setVnfcTypeInSample(newVnfcTypeV);
+        //this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
+      this.setVnfcTypeInSample( newVnfcTypeV );
+      let userForm = {valid: true};
+      this.vnfcChanged(this.newVnfcType, userForm)
         // Changing newVnfcType value to blank otherwise it will show previous value in text box of popup
         this.newVnfcType = ''
     }
 
     resetVms() {
-        console.log(this.classNm + ": resetVms: start.");
         this.referenceDataObject.vm = [];
     }
 
     dataModified() {
         //  this.referenceDataObject.vm = this.referenceDataObject.vm;
     }
-
+    // used to show and hide the group notation value in VNFC information
     resetGroupNotation() {
         if (this.Sample['group-notation-type'] == "existing-group-name") {
             this.Sample['group-notation-value'] = ""
@@ -1554,98 +1505,121 @@
     }
 
     resetParamsOnVnfcType() {
-        console.log(this.classNm + ": resetParamsOnVnfcType: start:\n " +
-            "ref.DataObject.scope vnfc-type:[" +
-            this.referenceDataObject.scope['vnfc-type'] + "]");
-        let scopeName = '';
-        //if only vnf is there
-        if (this.referenceDataObject.scope['vnfc-type'] == '' || this.referenceDataObject.scope['vnfc-type'] == null || this.referenceDataObject.scope['vnfc-type'] == 'null') {
-            scopeName = this.referenceDataObject.scope['vnf-type'];
+        let scopeName: any;
+        let vnfcTypeList = this.referenceDataObject.scope['vnfc-type-list']
+        let vnfcType = this.referenceDataObject.scope['vnfc-type']
+        let vnfType = this.referenceDataObject.scope['vnf-type'];
+        //called only if only vnf is there
+        if ((this.referenceDataFormUtil.nullCheckForVnfcTypeList(vnfcTypeList)) && (this.referenceDataFormUtil.nullCheckForVnfcType(vnfcType))
+        ) {
+            scopeName = vnfType;
             this.referenceDataObject.scope['vnfc-type'] = '';
             this.referenceDataObject['action-level'] = 'vnf';
             this.referenceDataObject['scopeType'] = 'vnf-type';
+            scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
         }
         //if VNFC is entered set action level & Scope type to VNFC for configure and configure modify, and default the values to vnf and vnf type for all other actions  
         else {
-            scopeName = this.referenceDataObject.scope['vnfc-type'];
+            if (this.referenceDataFormUtil.nullCheckForVnfcTypeList(vnfcTypeList)) {
+                scopeName = vnfcType ? vnfcType : "";
+            } else {
+                //    scopeName = this.referenceDataObject.scope['vnfc-type-list'];
+            }
+
             if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
-                this.referenceDataObject['action-level'] = 'vnfc';
+                this.referenceDataObject['action-level'] = 'vnf';
                 this.referenceDataObject['scopeType'] = 'vnfc-type';
             } else {
                 this.referenceDataObject['action-level'] = 'vnf';
                 this.referenceDataObject['scopeType'] = 'vnf-type';
             }
         }
-        //replacing / with _ and removing spaces in the scopeName
-        if (scopeName) {
-            scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
-        }
-        console.log(this.classNm + ": resetParamsOnVnfcType: return scopeName:[" +
-            scopeName + "]");
+        this.referenceDataObject.scope['vnfc-type'] = this.referenceDataObject.scope['vnfc-type'] ? this.referenceDataObject.scope['vnfc-type'] : "";
         return scopeName
     }
 
-    decideExtension(obj) {
-        //marking the extension based on the device-protocol selected by the user 
-        let extension = '.json';
-        switch (obj['device-protocol']) {
-            case 'ANSIBLE':
-            case 'CHEF':
-            case 'CLI':
-                extension = '.json';
-                break;
-            case 'NETCONF-XML':
-            case 'REST':
-                extension = '.xml';
-                break;
-        }
-        return extension;
-    }
+    //used to form the structure of the reference file
     prepareArtifactList(scopeName, extension) {
-        console.log(this.classNm + ": prepareArtifactList: start: scopeName:[" +
-            scopeName + "] extension:[" + extension + "]");
         this.referenceDataObject['artifact-list'] = [];
-        //preparing the artifact list array file names along with extension
-        let config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V' + extension;
-        let pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.yaml';
-        let reference_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.json';
-        let configTemplate = {
-            'artifact-name': 'template_' + config_template_fileName,
-            'artifact-type': 'config_template'
-        };
-        let pdTemplate = {
-            'artifact-name': 'pd_' + pd_fileName,
-            'artifact-type': 'parameter_definitions'
-        };
-        if (this.referenceDataObject.action != 'ConfigScaleOut') {
-            this.referenceDataObject['artifact-list'].push(configTemplate,
-                pdTemplate
-            );
-        } else {
-            let identifiers = this.referenceDataObject['template-id-list'];
-            if (identifiers) {
-                for (var x = 0; x < identifiers.length; x++) {
-                    //for replacing spaces and "/" with "_"
-                    identifiers[x] = identifiers[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
-                    pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.yaml';
-                    config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + extension;
+        let configTemplate
+        let pdTemplate
+        let paramValue
+        let vnf = this.referenceDataObject.scope['vnf-type']
+        if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
+            let vnfcTypeList = this.referenceDataObject.scope['vnfc-type-list'];
+            let pd_fileName
+            let config_template_fileName
 
-                    configTemplate = {
-                        'artifact-name': 'template_' + config_template_fileName,
-                        'artifact-type': 'config_template'
-                    };
-                    pdTemplate = {
-                        'artifact-name': 'pd_' + pd_fileName,
-                        'artifact-type': 'parameter_definitions'
-                    };
+            let param_fileName
+            if (vnfcTypeList && vnfcTypeList.length > 0) {
+
+
+                for (var x = 0; x < vnfcTypeList.length; x++) {
+                    //for replacing spaces and "/" with "_"
+                    let type = vnfcTypeList[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+                    pd_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, type, '.yaml')
+                    config_template_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, type, extension)
+                    param_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, type, '.json')
+                    configTemplate = this.referenceDataFormUtil.createConfigTemplate(config_template_fileName);
+                    pdTemplate = this.referenceDataFormUtil.createPdTemplate(pd_fileName);
+                    paramValue = this.referenceDataFormUtil.createParamValue(param_fileName);
+
                     this.referenceDataObject['artifact-list'].push(configTemplate,
-                        pdTemplate
+                        pdTemplate, paramValue
                     );
                 }
+            } else if (scopeName) {
+                pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.yaml';
+                config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V' + extension;
+                param_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.json';
+                configTemplate = this.referenceDataFormUtil.createConfigTemplate(config_template_fileName);
+                pdTemplate = this.referenceDataFormUtil.createPdTemplate(pd_fileName);
+                paramValue = this.referenceDataFormUtil.createParamValue(param_fileName);
+                this.referenceDataObject['artifact-list'].push(configTemplate,
+                    pdTemplate, paramValue
+                );
             }
 
+        } else {
+
+            //preparing the artifact list array file names along with extension
+            let config_template_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, '', extension);
+            let pd_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, '', '.yaml');
+            let reference_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, '', '.json');
+            let param_fileName = this.referenceDataFormUtil.createArtifactName(this.referenceDataObject.action, vnf, '', '.json');
+            configTemplate = this.referenceDataFormUtil.createConfigTemplate(config_template_fileName);
+            pdTemplate = this.referenceDataFormUtil.createPdTemplate(pd_fileName);
+            paramValue = this.referenceDataFormUtil.createParamValue(param_fileName);
+            if (this.referenceDataObject.action != 'ConfigScaleOut') {
+
+                this.referenceDataObject['artifact-list'].push(configTemplate,
+                    pdTemplate, paramValue
+                );
+
+            } else {
+
+                let identifiers = this.referenceDataObject['template-id-list'];
+                if (identifiers) {
+                    for (var x = 0; x < identifiers.length; x++) {
+                        //for replacing spaces and "/" with "_"
+                        let type = identifiers[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+                        pd_fileName = this.referenceDataFormUtil.createArtifactNameForIdentifiers(this.referenceDataObject.action, this.referenceDataObject.scope["vnf-type"], type, '.yaml');
+                        config_template_fileName = this.referenceDataFormUtil.createArtifactNameForIdentifiers(this.referenceDataObject.action, this.referenceDataObject.scope["vnf-type"], type, extension);
+                        param_fileName = this.referenceDataFormUtil.createArtifactNameForIdentifiers(this.referenceDataObject.action, this.referenceDataObject.scope["vnf-type"], type, '.json');
+                        configTemplate = this.referenceDataFormUtil.createConfigTemplate(config_template_fileName);
+                        pdTemplate = this.referenceDataFormUtil.createPdTemplate(pd_fileName);
+                        paramValue = this.referenceDataFormUtil.createParamValue(param_fileName);
+
+                        this.referenceDataObject['artifact-list'].push(configTemplate,
+                            pdTemplate, paramValue
+                        );
+                    }
+                }
+
+            }
         }
     }
+    // used to remove the added vms for actions other than configure & scaleout
     deleteVmsforNonActions(newObj, action) {
         let configureObject = (action == 'Configure');
         let ConfigScaleOut = (action == 'ConfigScaleOut');
@@ -1663,26 +1637,78 @@
         }
         return newObj
     }
+    // used to replace the data in tempall obj and form the artifact names
     pushOrReplaceTempData(newObj, action) {
-        console.log(this.classNm + ": pushOrReplaceTempData: start: action:[" +
-            action + "]\n newObj.scope vnfc-type:[" + newObj.scope['vnfc-type'] + "]");
-        if (newObj.scope['vnfc-type'] == undefined ||
-            newObj.scope['vnfc-type'] == null ||
-            newObj.scope['vnfc-type'].length < 1) {
-            console.log(this.classNm + ": pushOrReplaceTempData: scope vnfc-type" +
-                " is empty.\n vnfcIdentifier:[" + this.vnfcIdentifier + "]");
-            if (this.vnfcIdentifier != null && this.vnfcIdentifier != undefined &&
-                this.vnfcIdentifier.length > 0) {
-                newObj.scope['vnfc-type'] = this.vnfcIdentifier;
+        let configTemplate
+        let pdTemplate
+        let paramValue
+        if (newObj.action == "Configure" || newObj.action == "ConfigModify" || newObj.action == "DistributeTraffic") {
+            let extension = this.referenceDataFormUtil.decideExtension(this.referenceDataObject);
+            let pd_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + (newObj['vnfcIdentifier'] ? (newObj['vnfcIdentifier'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_') : "") + '0.0.1V.yaml';
+            let config_template_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + (newObj['vnfcIdentifier'] ? (newObj['vnfcIdentifier'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_') : "") + '0.0.1V' + extension;
+            let param_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + (newObj['vnfcIdentifier'] ? (newObj['vnfcIdentifier'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_') : "") + '0.0.1V.json';
+            configTemplate = this.referenceDataFormUtil.createConfigTemplateForPushReplaceData(config_template_fileName);
+            pdTemplate = this.referenceDataFormUtil.createPdTemplateForPushReplaceData(pd_fileName);
+            paramValue = this.referenceDataFormUtil.createParamValueForPushReplaceData(param_fileName);
+            let idValue = ""
+            if (newObj.scope['vnfc-type']) {
+                idValue = newObj.scope['vnfc-type']
+            } else if (this.vnfcIdentifier) {
+                idValue = this.vnfcIdentifier
             }
-        };
+
+            let arr = [configTemplate, pdTemplate, paramValue]
+            this.mappingEditorService.selectedObj({
+                action: newObj.action,
+                vnf: newObj.scope['vnf-type'] ? newObj.scope['vnf-type'] : "",
+                vnfc: idValue,
+                protocol: newObj['device-protocol'] ? newObj['device-protocol'] : "",
+                param_artifact: paramValue['param_artifact'],
+                pd_artifact: pdTemplate['pd_artifact'],
+                template_artifact: configTemplate['template_artifact']
+            });
+        } else if (newObj.action == "ConfigScaleOut") {
+            let extension = this.referenceDataFormUtil.decideExtension(newObj);
+            let pd_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_0.0.1V' + '_' + (this.templateIdentifier ? (this.templateIdentifier.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '')) : "") + ".yaml";
+            let config_template_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V_' + (this.templateIdentifier ? (this.templateIdentifier.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '') : "") + extension;
+            let param_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V_' + (this.templateIdentifier ? (this.templateIdentifier.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '') : "") + '.json';
+            configTemplate = this.referenceDataFormUtil.createConfigTemplateForPushReplaceData(config_template_fileName);
+            pdTemplate = this.referenceDataFormUtil.createPdTemplateForPushReplaceData(pd_fileName);
+            paramValue = this.referenceDataFormUtil.createParamValueForPushReplaceData(param_fileName);
+            let arr = [configTemplate, pdTemplate, paramValue]
+            this.mappingEditorService.selectedObj({
+                action: newObj.action,
+                vnf: newObj.scope['vnf-type'] ? newObj.scope['vnf-type'] : "",
+                //vnfc: newObj['vnfcIdentifier'] ? newObj['vnfcIdentifier'] : "",
+                protocol: newObj['device-protocol'] ? newObj['device-protocol'] : "",
+                templateId: this.templateIdentifier,
+                param_artifact: paramValue['param_artifact'],
+                pd_artifact: pdTemplate['pd_artifact'],
+                template_artifact: configTemplate['template_artifact']
+            });
+        }
+        else {
+            let extension = this.referenceDataFormUtil.decideExtension(newObj);
+            let pd_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V.yaml';
+            let config_template_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V' + extension;
+            let param_fileName = this.referenceDataObject.action + '_' + newObj.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V.json';
+            configTemplate = this.referenceDataFormUtil.createConfigTemplateForPushReplaceData(config_template_fileName);
+            pdTemplate = this.referenceDataFormUtil.createPdTemplateForPushReplaceData(pd_fileName);
+            paramValue = this.referenceDataFormUtil.createParamValueForPushReplaceData(param_fileName);
+            let arr = [configTemplate, pdTemplate, paramValue]
+            this.mappingEditorService.selectedObj({
+                action: newObj.action,
+                vnf: newObj.scope['vnf-type'] ? newObj.scope['vnf-type'] : "",
+                protocol: newObj['device-protocol'] ? newObj['device-protocol'] : "",
+                param_artifact: paramValue['param_artifact'],
+                pd_artifact: pdTemplate['pd_artifact'],
+                template_artifact: configTemplate['template_artifact']
+            });
+        }
+
         let actionObjIndex = this.tempAllData.findIndex(obj => {
             return obj['action'] == action;
         });
-        if (newObj.action != 'HealthCheck') {
-            delete newObj['url'];
-        }
-
         if (actionObjIndex > -1) {
             this.tempAllData[actionObjIndex] = newObj;
             this.mappingEditorService.saveLatestAction(this.tempAllData[actionObjIndex]);
@@ -1695,8 +1721,10 @@
             }
         } else {
             if (newObj.action != '') {
+
                 this.tempAllData.push(newObj);
                 this.mappingEditorService.saveLatestAction(newObj);
+
                 if (newObj.action == "ConfigScaleOut") {
                     this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
                 }
@@ -1706,12 +1734,9 @@
                 }
             }
         }
-
     }
-
     // removes the unwanted keys added in the artifact for vnfc level actions
     deleteUnwantedKeys(newObj) {
-        console.log(this.classNm + ": deleteUnwantedKeys: start.");
         newObj = JSON.parse(JSON.stringify(newObj))
         delete newObj['template-id']
         delete newObj['vnfcIdentifier']
@@ -1721,25 +1746,28 @@
         if (newObj.action != 'HealthCheck') {
             delete newObj['url'];
         }
-        if (newObj.action != "Configure" && newObj.action != "ConfigModify" && newObj.action != "DistributeTraffic") {
+        if (newObj.action != "Configure" && newObj.action != "ConfigModify" && newObj.action == "DistributeTraffic") {
             newObj.scope['vnfc-type-list'] = [];
         }
         return newObj
     }
 
     addAllActionObj(newObj, scopeName) {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": addAllActionObj: start.");
+
         //Creating all action block to allow mulitple actions at once
         let allAction = {
             action: 'AllAction',
             'action-level': 'vnf',
             scope: newObj.scope,
-            'artifact-list': [{
-                'artifact-name': 'reference_AllAction' + '_' + scopeName + '_' + '0.0.1V.json',
-                'artifact-type': 'reference_template'
-            }]
+            'artifact-list': []
         };
+        let vnfType = this.referenceDataObject.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+
+        allAction['artifact-list'].push({
+            'artifact-name': 'reference_AllAction' + '_' + vnfType + '_' + '0.0.1V.json',
+            'artifact-type': 'reference_template'
+        })
+
         let allActionIndex = this.tempAllData.findIndex(obj => {
             return obj['action'] == 'AllAction';
         });
@@ -1751,12 +1779,18 @@
     }
 
     resetTempData() {
-        if (this.utilityService.getTracelvl() > 0)
-            console.log(this.classNm + ": resetTempData: start.");
-        if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) {
-            if (this.tempAllData && this.tempAllData != undefined) {
+      let methName= "resetTempData";
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": start.");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": "+methName+": tempAllData:["+
+          JSON.stringify(this.tempAllData)+"]");
+        if (this.utilityService.checkNotNull(this.uploadedDataArray)) {
+
+            if (this.utilityService.checkNotNull(this.tempAllData)) {
                 for (var i = 0; i < this.tempAllData.length; i++) {
                     var result = false;
+
                     if (this.tempAllData[i].action === 'AllAction') {
                         result = true;
                     }
@@ -1775,26 +1809,27 @@
     }
 
     trackByFn(index, item) {
-        return index;
+        return index; // or item.id
     }
-
     getArtifactsOpenStack() {
-        console.log(this.classNm + ": getArtifactsOpenStack: start: " +
-            "tempAllData length=" + this.tempAllData.length);
         var array = []
         var vnfcFunctionCodeArrayList = [];
         var vnfcSetArray = [];
+        //  var vnfcSet = new Set();
         for (var i = 0; i < this.tempAllData.length; i++) {
             if (!this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions) && (this.tempAllData[i].action != 'AllAction')) {
                 var vnfcFunctionCodeArray = this.tempAllData[i]["vnfc-function-code-list"]
+                // vnfcSet.add("Actions")
+                /*  for (var j = 0; j < vnfcFunctionCodeArray.length; j++) {
+                      vnfcSet.add(vnfcFunctionCodeArray[j])
+                  }*/
                 vnfcFunctionCodeArrayList.push([this.tempAllData[i].action].concat(this.tempAllData[i]["vnfc-function-code-list"]))
             }
             if (this.tempAllData[i].action === 'OpenStack Actions') {
                 vnfcSetArray = this.tempAllData[i]['firstRowVmSpreadSheet']
             }
         }
-        console.log(this.classNm + ": getArtifactsOpenStack: vnfcSetArray length=" +
-            vnfcSetArray.length);
+
         if (vnfcSetArray) {
             let vnfcSetArrayLen = vnfcSetArray.length;
 
@@ -1817,54 +1852,6 @@
         }
     }
 
-    /**
-     * Handles the display of VM block based on the action change
-     */
-    handleVMBlockDisplay() {
-        switch (this.referenceDataObject.action) {
-            case this.actionList.ConfigScaleOut:
-            case this.actionList.Configure:
-            case undefined:
-            case '':
-                this.displayVMBlock = true;
-                break;
-            default:
-                this.displayVMBlock = false;
-        }
-    }
-
-    //.. check VNFC Type equality in Upper Selection vs entered in Sample field
-    checkVnfcTypeEqual(vnfctp: string) {
-        var methName = "checkVnfcTypeEqual";
-        console.log(this.classNm + ": " + methName + ": vnfctp:[" + vnfctp + "]");
-        console.log(this.classNm + ": " + methName + ": vnfcIdentifier:[" +
-            this.vnfcIdentifier + "]");
-        console.log(this.classNm + ": " + methName + ":  Sample[vnfc-type]:[" +
-            this.Sample['vnfc-type'] + "]");
-        if (vnfctp != null && vnfctp.length > 0) {
-            if (this.vnfcIdentifier != null && this.vnfcIdentifier.length > 0) {
-                console.log(
-                    this.classNm + ": " + methName + ": compare non empty VNFC Types...");
-                if (vnfctp != this.vnfcIdentifier) {
-                    console.log(this.classNm + ": " + methName + ": Non-match WARNING !");
-                    //.. display in pop-up
-                    this.nService.warn('WARNING',
-                        "The specified VNFC Types don't match." +
-                        " Can cause discrepancy in the artifacts.", this.options);
-                } else {
-                    console.log(this.classNm + ": checkVnfcTypeEqual: VNFC Types're equal.");
-                };
-            };
-        };
-    };
-
-    //.. populating VNFC Type in Sample fields
-    setVnfcTypeInSample(vnfctp: string) {
-        // if( this.utilityService.getTracelvl() > 0 )
-        console.log(this.classNm + ": setVnfcTypeInSample: vnfctp:[" + vnfctp + "]");
-        this.Sample['vnfc-type'] = vnfctp;
-    };
-
     // Common method to show validation errors
     private showValidationErrors(referenceDataObject) {
         if (this.referenceDataObject.action === '') {
@@ -1879,10 +1866,16 @@
         if (referenceDataObject.action === 'ConfigScaleOut' && !this.templateIdentifier) {
             this.nService.error('Error', 'Select a valid Template Identifier');
         }
+
+        // if ((referenceDataObject.action === 'Configure' || referenceDataObject.action === 'ConfigModify') && !this.vnfcIdentifier && this.displayVnfc != 'false') {
+        //     this.nService.error('Error', 'Select a valid Vnfc Type');
+        //     return;
+        // }
     }
 
     resetArtifactList(obj) {
-        console.log(this.classNm + ": resetArtifactList: start...");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": resetArtifactList: start...");
         let vnfcTypeList = obj.scope['vnfc-type-list'];
         let vnf = this.referenceDataObject.scope['vnf-type']
         let pd_fileName
@@ -1920,4 +1913,86 @@
             );
         }
     }
+
+    /**
+     * Handles the display of VM block based on the action change
+     */
+    handleVMBlockDisplay() {
+        switch (this.referenceDataObject.action) {
+            case this.actionList.ConfigScaleOut:
+            case this.actionList.Configure:
+            case undefined:
+            case '':
+                this.displayVMBlock = true;
+                break;
+            default:
+                this.displayVMBlock = false;
+        }
+    }
+
+  //.. check VNFC Type equality in Upper Selection vs entered in Sample field
+  checkVnfcTypeEqual( vnfctp: string ) {
+    var methName= "checkVnfcTypeEqual";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log(this.classNm+": "+methName+": vnfctp:["+vnfctp+"]");
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.classNm+": "+methName+": vnfcIdentifier:["+
+        this.vnfcIdentifier+"]");
+    if( this.utilityService.getTracelvl() > 1 )
+      console.log( this.classNm+": "+methName+":  Sample[vnfc-type]:["+
+        this.Sample['vnfc-type']+"]");
+    if( vnfctp != null && vnfctp.length > 0 ) {
+      if( this.vnfcIdentifier != null && this.vnfcIdentifier.length > 0 ) {
+        console.log(
+          this.classNm+": "+methName+": compare non empty VNFC Types...");
+        if( vnfctp != this.vnfcIdentifier ) {
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log( this.classNm+": "+methName+": Non-match WARNING !");
+          //.. display in pop-up
+          this.nService.warn( 'WARNING',
+            "The specified VNFC Types don't match."+
+            " Can cause discrepancy in the artifacts.", this.options );
+        } else {
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log(this.classNm+": checkVnfcTypeEqual: VNFC Types're equal.");
+        };
+      };
+    };
+  };
+
+  //.. populating VNFC Type in Sample fields
+  setVnfcTypeInSample( vnfctp: string ) {
+    //clear vnfc information samples
+      this.clearVnfcData();
+
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.classNm+": setVnfcTypeInSample: vnfctp:["+vnfctp+"]");
+    this.Sample['vnfc-type']= vnfctp;
+  };
+
+    /**
+     * Procesess reference data after retrieval from appc or after a reference file has been uploaded from PC.
+    */
+    processReferenceDataAfterRetrieval() {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": processReferenceDataAfterRetr: start...");
+        if (this.referenceDataObject.action === 'OpenStack Actions') {
+            this.deviceProtocols = ['', 'OpenStack'];
+            this.buildDesignComponent.tabs = this.referencDataTab;
+        } else {
+            this.buildDesignComponent.tabs = this.allTabs;
+        }
+      if( this.utilityService.getTracelvl() > 1 )
+        console.log( this.classNm+": processReferenceDataAfterRetr: done.");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+":  vnfcIdentifier:["+this.vnfcIdentifier+"]");
+      if( this.utilityService.getTracelvl() > 1 )
+        console.log( this.classNm+":  oldVnfcIdentifier:["+
+          this.oldVnfcIdentifier+"]");
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+":  refDataObj.scope.vnfc-type:["+
+          this.referenceDataObject.scope['vnfc-type']+"]");
+      this.setVnfcTypeInSample( this.vnfcIdentifier );
+    }
+
 }
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts
index 00e014c..bb564b7 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts
@@ -26,7 +26,7 @@
 import {UtilityService} from '../../../shared/services/utilityService/utility.service';
 import { environment } from '../../../../environments/environment';
 import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service';
-//import {APIService} from "../../../shared/services/cdt.apicall";
+import {APIService} from "../../../shared/services/cdt.apicall";
 
 @Injectable()
 export class ReferenceDataFormUtil {
@@ -35,9 +35,7 @@
     private failureMessage = 'There is no artifact saved in APPC for the selected action!';
     private response: Observable<Object>;
 
-    constructor(
-      private notificationService: NotificationsService, private utilityService:UtilityService, private httpUtils: HttpUtilService
-    ) {
+    constructor(private notificationService: NotificationsService, private utilityService:UtilityService, private apiService: APIService) {
     }
 
     checkResult(result: any) {
@@ -154,13 +152,10 @@
         return paramValue;
     }
 
-    handleApiData(payloadData,artifactType)
+    handleApiData(data,artifactType)
     {
-        this.response =
-        this.httpUtils.post({
-            url: environment.getDesigns,
-            data: payloadData });
-        this.response.subscribe( response => {
+        this.response = this.apiService.callGetArtifactsApi(data);
+        this.response.subscribe(response => {
           this.utilityService.processApiSubscribe(response, this.utilityService.putAction, artifactType)
         },
         error => this.utilityService.processApiError());
diff --git a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
index 26cbf27..55ea90f 100644
--- a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
@@ -19,7 +19,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 -->
 
@@ -69,13 +68,12 @@
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                             <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
                         </div>
-                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="
-vnfcType"
->
-                            <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
+                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType">
+                            <label>Vnfc Type</label>  <label style="font-size:12px;">(NFC Function)</label>
+                            <input class="form-control" type="text" disabled value="{{vnfcType}}" />
                         </div>
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
-
+                
                         </div>
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                             <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
@@ -108,14 +106,24 @@
             </div>
         </div>
         <hr>
-      
+        <!--Commenting out 1712 changes here-->
+        <!--<div class="col-md-12" [hidden]="!showMappingDownloadDiv"><label>Download Name/Value pair as : </label>
+ <select class="form-control col-md-3" [(ngModel)]="mapppingDownloadType" (ngModelChange)="onDownloadParameter()"> 
+                <option value="">Select</option> 
+                <option value="Json">JSON</option> 
+                <option value="Xls">XLS</option> 
+            </select>
+</div>-->
+
         <div class="col-md-12"></div>
         <div><label for="textAreaGeneratedTemplate">
             <div class="mdl-card__title-text">Param Name Value List</div>
             <div><font size="1">(Please click anywhere on the editor to see the synced name value pairs)</font></div>
         </label>
+            <!-- <ace-editor [(text)]="this.artifactRequest.paramsContent" [theme]="'chrome'" [mode]="'velocity'" (textChanged)="onParamChanges($event)" [options]="{maxLines: 'Infinity', fontSize: '13pt'}"
+                style="min-height: 500px; width: fit-content;"></ace-editor> -->
             <ace-editor [(text)]="this.artifactRequest.paramsContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" (textChanged)="onParamChanges($event)" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%"></ace-editor>
         </div>
 
     </tab>
-</tabs>
+</tabs>
\ No newline at end of file
diff --git a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts
index 40a5291..f18fe6c 100644
--- a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts
@@ -19,7 +19,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
 
@@ -44,6 +43,7 @@
 import * as XLSX from 'xlsx';
 import { NgxSpinnerService } from 'ngx-spinner';
 import {UtilityService} from '../../../../shared/services/utilityService/utility.service';
+import { APIService } from "../../../../shared/services/cdt.apicall";
 
 declare var $: any;
 
@@ -101,14 +101,13 @@
     @ViewChild('myInputParam') myInputParam: any;
     @ViewChild(ModalComponent) modalComponent: ModalComponent;
     @ContentChildren(Tab) tabs: QueryList<Tab>;
-    public subscription: Subscription;
+    public subscription: any;
     public item: any = {};
     vnfType: any = '';
     vnfcType: any = '';
     protocol: any = '';
     refObj: any;
-    public paramsContent = localStorage['paramsContent'];
-    nameValueSubscription: Subscription;
+    public paramsContent:any;
 
     constructor(
         private buildDesignComponent: BuildDesignComponent,
@@ -122,7 +121,9 @@
         private nService: NotificationsService,
         private ngProgress: NgProgress,
         private spinner: NgxSpinnerService,
-        private utilityService: UtilityService,
+        private apiService:APIService, 
+        private utilityService: UtilityService
+        
     ) {
         this.artifactRequest.action = '';
         this.artifactRequest.version = '';
@@ -132,29 +133,27 @@
     ngOnInit() {
         var refObj = this.refObj = this.prepareFileName();
         if (refObj && refObj != undefined) {
+            try{
+                this.paramsContent=JSON.stringify(JSON.parse(localStorage['paramsContent']))
+            }
+            catch(e)
+            {
+                console.log("error parsing param values");
+            }
             if (this.paramsContent && this.paramsContent != undefined && this.paramsContent !== '{}') {
                 this.artifactRequest.paramsContent = this.formatNameValuePairs(this.paramsContent);
-                // this.artifactRequest.paramsContent = this.paramsContent;
-
+                
             }
             else {
                 this.artifactRequest.paramsContent = '{}';
             }
 
-            //  refObj = refObj[refObj.length - 1];
             this.item = refObj;
-            this.vnfType = this.item.scope['vnf-type'];
-            this.vnfcType = this.item.scope['vnfc-type'];
-            this.protocol = this.item['device-protocol'];
+            this.vnfType = this.item.vnf;
+            this.vnfcType = this.item.vnfc;
+            this.protocol = this.item.protocol;
             this.action = this.item.action;
             var artifactList = this.item['artifact-list'];
-            for (var i = 0; i < artifactList.length; i++) {
-                var artifactName = artifactList[i]['artifact-name'];
-                var array = artifactName.split('_');
-                if (array[0].toUpperCase() === 'TEMPLATE') {
-                    this.artifactName = artifactName;
-                }
-            }
         }
         else {
             this.item = {
@@ -170,18 +169,9 @@
                 'scopeType': ''
             };
         }
-        this.initialAction = this.item.action;
-        this.subscription = this.activeRoutes.url.subscribe(UrlSegment => {
-            this.actionType = UrlSegment[0].path;
-        });
-
-        if (this.actionType === 'myTemplates') {
-            this.mappingEditorService.fromScreen = 'MappingScreen';
-        }
         this.mappingEditorService.paramData = [];
         this.identifier = this.mappingEditorService.identifier;
 
-
     }
 
     //========================== End of ngOnInit() Method============================================
@@ -190,25 +180,20 @@
     }
 
     //========================== End of browseOption() Method============================================
-
     ngOnDestroy() {
         this.prepareFileName();
         if( this.subscription ) { this.subscription.unsubscribe(); }
-        if( this.nameValueSubscription ) { this.nameValueSubscription.unsubscribe(); }
+       // if( this.nameValueSubscription ) { this.nameValueSubscription.unsubscribe(); }
     }
 
     //========================== End of ngOnDestroy() Method============================================
     ngAfterViewInit() {
-        if (this.mappingEditorService.fromScreen === 'MappingScreen') {
-            this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
-            this.fileType = sessionStorage.getItem('fileType');
-            if (this.configMappingEditorContent)
-                this.mappingEditorService.initialise(this.mappingComponent.templateeditor.getEditor(), this.configMappingEditorContent, this.modal);
-        }
+        this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
+        this.fileType = sessionStorage.getItem('fileType');
+        if (this.configMappingEditorContent)
+          this.mappingEditorService.initialise(this.mappingComponent.templateeditor.getEditor(), this.configMappingEditorContent);
+        
         if (this.refObj) {
-
-            this.artifactRequest.action = this.item.action;
-            this.artifactRequest.vnfType = this.vnfType;
             if (this.vnfcType && this.vnfcType.length != 0) {
                 this.scopeName = this.vnfcType;
             }
@@ -234,13 +219,11 @@
                 // Create the file reader
                 let reader = new FileReader();
                 this.readFile(input.files[0], reader, (result) => {
-                    if ('Mapping Data' === this.selectedUploadType) {
-                        var jsonObject = JSON.parse(result);
-                        this.artifactRequest.paramsContent = JSON.stringify(jsonObject, null, 1);
-                        this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
-                        this.mappingEditorService.setParamContent(this.artifactRequest.paramsContent);
-                        localStorage['paramsContent'] = this.artifactRequest.paramsContent;
-                    }
+                    var jsonObject = JSON.parse(result);
+                    this.artifactRequest.paramsContent = JSON.stringify(jsonObject, null, 1);
+                    this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
+                    this.mappingEditorService.setParamContent(this.artifactRequest.paramsContent);
+                    localStorage['paramsContent'] = this.artifactRequest.paramsContent;
                     this.enableMerge = true;
                     this.initialData = result;
                     setTimeout(() => {
@@ -278,7 +261,6 @@
             // callback with the results
             callback(reader.result);
         };
-        this.notificationService.notifySuccessMessage('Uploading File ' + file.name + ':' + file.type + ':' + file.size);
         // Read the file
         reader.readAsText(file, 'UTF-8');
     }
@@ -290,44 +272,23 @@
     }
 
     //========================== End of onParamChanges() Method============================================
-
-    updateFileName(action: any, scopeName: any, versionNo: any) {
-        let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V.json';
-        this.downloadedFileName = fileName;
-        return fileName;
-    }
-
-    //========================== End of updateFileName() Method============================================
-    updateFileNameForConfigScaleOut(action: any, scopeName: any, versionNo: any, id: any) {
-        let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V_' + id + '.json';
-        this.downloadedFileName = fileName;
-        return fileName;
-    }
-    //========================== End of updateFileNameForConfigScaleOut() Method============================================
     prepareFileName(): any {
-        let fileNameObject: any = this.mappingEditorService.latestAction;
+        let fileNameObject: any = this.mappingEditorService.newObject;
         return fileNameObject;
     }
 
     //========================== End of prepareFileName() Method============================================
-
     retrieveNameValueFromAppc() {
         let refObj = this.refObj;
         if (refObj && refObj != undefined) {
             this.enableMerge = true;
             var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
             let fileName = '';
-            let id = this.mappingEditorService.identifier;
-            if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.versionNo, id);
-            else fileName = this.updateFileName(this.item.action, scopeName, this.versionNo);
-
+            fileName=refObj["param_artifact"]
             let input=this.utilityService.createPayloadForRetrieve(false, this.item.action, this.vnfType, fileName);
             let artifactContent: any;
             this.ngProgress.start();
-            this.nameValueSubscription = this.httpUtil.post({
-                url: environment.getDesigns,
-                data: input
-            }).subscribe(resp => {
+            this.apiService.callGetArtifactsApi(input).subscribe(resp => {
                 if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
                     this.nService.success('Success', 'Name/value pairs retrieved successfully from APPC');
                     this.enableMerge = true;
@@ -362,7 +323,6 @@
     }
 
     //========================== End of retrieveNameValueFromAppc() Method============================================
-
     formatNameValuePairs(namevaluePairs: string) {
         var string = namevaluePairs.substring(1, namevaluePairs.length - 1);
         var stringArr = string.split(',');
@@ -456,7 +416,7 @@
                                     'ruleTypeValues': arr2item.ruleTypeValues
                                 };
                                 pdDataArrayForSession.splice(i, 1, json);
-
+                                
                             }
 
                         });
@@ -471,9 +431,8 @@
             }
         }
         catch (error) {
-            console.log('Error occured in syncing param names' + JSON.stringify(error));
             this.nService.error('Error', 'Error synchronising with name values. Please check the format of json uploaded/ retrieved');
         }
     }
 
-}
+}
\ No newline at end of file
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css
index c8100e3..3d9c3f0 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css
@@ -17,7 +17,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
 
@@ -32,4 +31,16 @@
 
 .options-menu {
     padding: 3px 20px;
+}
+.ace_cursor{
+    background-color: greenyellow;
+    
+}
+.ace-monokai{
+    color: greenyellow;
+    
+}
+.ace_scroller{
+    color: white;
+    background-color: wheat;
 }
\ No newline at end of file
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
index 105f0ec..67bce4d 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
@@ -42,17 +42,17 @@
                         <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
                     </div>
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType">
-                        <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
+                            <label>Vnfc Type</label>  <label style="font-size:12px;">(NFC Function)</label>
+                            <input class="form-control" type="text" disabled value="{{vnfcType}}" />
                     </div>
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
-
+                
                     </div>
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                         <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
                     </div>
                     <div *ngIf="(action === 'ConfigScaleOut')" class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                         <label>Template Identifier</label><input class="form-control" type="text" [(ngModel)]="identifier" disabled />
-
                     </div>
                 </div>
             </div>
@@ -62,7 +62,8 @@
             <div class="input-group">
                 <input id="inputFile" class="file" #myInput type='file' (change)='fileChange(myInput)'>
                 <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload template from PC" style="width:80%">
-                <button (click)="browseOption($event)" [disabled]="!enableBrowse" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload Template File
+                <button (click)="browseOption($event)" [disabled]="!enableBrowse" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
+                    type="button">Upload Template File
                 </button>
             </div>
         </div>
@@ -70,7 +71,7 @@
         <br>
         <div class="row" style="margin-bottom: 20px;">
             <div class="col-md-12 text-right">
-                <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="syncTemplate()">Synchronize Template Parameters
+                <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="syncTemplate(0)">Synchronize Template Parameters
                 </button>
                 <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="mergeParams()"> Merge from Param
                 </button>
@@ -81,17 +82,15 @@
     <div><label for="textAreaGeneratedTemplate">
         <div class="mdl-card__title-text">File Editor</div>
     </label>
-        <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%; caret-color: white "></ace-editor>
+        <!-- <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: 'Infinity', fontSize: '13pt'}"
+            style="min-height: 500px; width: fit-content;scroll-snap-coordinate: 3%"></ace-editor> -->
+        <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: '100', fontSize: '13pt' }"
+            style="min-height: 200px; width: 100%; caret-color: white "></ace-editor>
     </div>
-    <app-modal [title]="'Confirmation'" [isShow]="false" [message]="'Template is saved and ready for creating parameter definition'" #modalComponent>
-    </app-modal>
+
     <modal #myModal>
-        <modal-header style="height:65px">
-            <h4 class="modal-title" style="position:absolute;">Enter Name for <b>"{{selectedWord}}"</b></h4>
-            <button type="button" class="close" aria-label="Close" (click)="modal.close()" style="margin-left:auto">
-                <span aria-hidden="true">&times;</span>
-            </button>
-            
+        <modal-header [show-close]="true">
+            <h4 class="modal-title">Enter Name for <b>"{{selectedWord}}"</b></h4>
         </modal-header>
         <modal-body>
             <div class="form-group row">
@@ -99,14 +98,16 @@
                 <div class="col-12">
                     <input class="form-control" [(ngModel)]="tempName" name="templateName" type="text" id="tempName">
                     <span class="error-message" [hidden]="checkNameEntered" style="color: red;">Required Field</span>
+                    <span class="error-message" [hidden]="checkSpace" style="color: red;">Name can't start or end with space(s)</span>
                 </div>
             </div>
         </modal-body>
         <modal-footer [show-default-buttons]="false">
+            <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent
+                    
+                   " (click)="modal.close();checkNameEntered=true;checkSpace=true;tempName=''">Cancel</button>
             <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="submitNameValues()">Submit
             </button>
-            <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent
-    
-    " (click)="modal.close()">Cancel</button>
+
         </modal-footer>
     </modal>
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
index 8afa5bc..760fbfe 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
@@ -3,8 +3,6 @@
 ===================================================================
 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
 ===================================================================
-Copyright (C) 2018 IBM.
-===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
@@ -23,7 +21,6 @@
 */
 
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
 import { HttpUtilService } from '../../../../shared/services/httpUtil/http-util.service';
 import { MappingEditorService } from '../../../../shared/services/mapping-editor.service';
 import { ArtifactRequest } from '../../../../shared/models/index';
@@ -38,31 +35,31 @@
 import { environment } from '../../../../../environments/environment';
 import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
 import { NgProgress } from 'ngx-progressbar';
-import { NgxSpinnerService } from 'ngx-spinner';
 import { UtilityService } from '../../../../shared/services/utilityService/utility.service';
+import { APIService } from "../../../../shared/services/cdt.apicall";
+import { ProcOnSrvSideSvc } from "../../../../shared/services/procOnSrvSide.service";
 declare var $: any
-const PARAM_DATA:string="param_data";
-const TEMPLATE_DATA:string="template_data";
+
 @Component({ selector: 'app-golden-configuration', templateUrl: './template-configuration.component.html', styleUrls: ['./template-configuration.component.css'] })
 export class GoldenConfigurationComponent implements OnInit {
-  clName= "TemplateConfigCompon";
+  clName= "TemplateConfComp";
   @ViewChild('templateeditor') templateeditor;
   @Input() configMappingEditorContent: string;
   @Input() isMappingComp: boolean;
   @ViewChild('myInput') myInputVariable: any;
+  // @ViewChild(ModalComponent) modalComponent: ModalComponent;
   @ViewChild('myModal') modal: ModalComponent;
   aceText: string = ""
   fileName: string = ""
   showTemplateVersionDiv: any;
   downloadedTemplateFileName: any;
   downloadedParamFileName: any;
-  templateVersionNo: any = '0.0.1';
+  templateVersionNo: any = require('../../../../../cdt.application.properties.json').versionNoForApiCall;
   saveToGuiCacheFlag = 'false';
   initialAction: any;
   public referenceData: Array<Object> = [];
   public scopeName: any;
-  public subscription: Subscription;
-  public templateSubscription : Subscription;
+  public subscription: any;
   public item: any = {};
   public goldenActions: Array<string> = [];
   public refNameObj = {};
@@ -78,7 +75,6 @@
   enableBrowse: boolean = true;
   enableMerge: boolean = false;
   uploadValidationSuccess: boolean = false;
-  fileExtension: any = "xml";
   apiToken = localStorage['apiToken'];
   public appDataObject: any;
   public downloadDataObject: any;
@@ -94,9 +90,10 @@
     { action: "StartApplication", value: "StartApplication" },
     { action: "StopApplication", value: "StopApplication" },
     { action: "DistributeTraffic", value: "DistributeTraffic" }
+
   ];
   options = {
-    timeOut: 1000,
+    timeOut: 4500,
     showProgressBar: true,
     pauseOnHover: true,
     clickToClose: true,
@@ -104,25 +101,30 @@
   }
   public replaceWord;
   public enableDownloadButtons: boolean = false;
-   
+
   constructor(
-    private buildDesignComponent: BuildDesignComponent, 
-    private paramShareService: ParamShareService, 
-    private dialogService: DialogService, 
-    private notificationService: NotificationService, 
-    private httpUtil: HttpUtilService, 
-    private mappingEditorService: MappingEditorService, 
-    private activeRoutes: ActivatedRoute, 
-    private router: Router, 
-    private nService: NotificationsService, 
-    private ngProgress: NgProgress,
-    private spinner: NgxSpinnerService,
-    private utilityService: UtilityService) {
+    private buildDesignComponent: BuildDesignComponent,
+    private apiService: APIService,
+    private utilityService: UtilityService,
+    private paramShareService: ParamShareService,
+    private dialogService: DialogService,
+    private notificationService: NotificationService,
+    private httpUtil: HttpUtilService,
+    private mappingEditorService: MappingEditorService,
+    private activeRoutes: ActivatedRoute,
+    private router: Router,
+    private nService: NotificationsService,
+    private procOnSrvSideSvc: ProcOnSrvSideSvc,
+    private ngProgress: NgProgress)
+  {
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": new: start.");
     this.artifactRequest.action = '';
     this.artifactRequest.version = '';
     this.artifactRequest.paramsContent = '{}';
     this.artifactRequest.paramKeysContent = '';
   }
+
   public templateEditor: any;
   public fileType: any = '';
   public actionType: any;
@@ -148,32 +150,33 @@
   editor: any;
   editorContent: any;
   tempName: any;
+  paramArtifactName: any;
   enableValidateTemplate: boolean = false;;
   public selectedUploadType: string = this.uploadTypes[0].value;
-  identifier: any;
+  checkSpace: boolean = true;
+
   public tempRetrievalResponse: any;
   public mergeStatus: boolean = false;
-
-  //======================================Start of ngOnInit() Method============================================
+  //====================================================
   ngOnInit() {
     var methName= "ngOnInit";
     if( this.utilityService.getTracelvl() > 0 )
       console.log( this.clName+": "+methName+": start.");
     var refObj = this.refObj = this.prepareFileName();
-    if( this.utilityService.getTracelvl() > 0 )
-      console.log( this.clName+": "+methName+
-        ": refObj:["+JSON.stringify(refObj)+"]");
+    // console.log("Ref object:  " + JSON.stringify(refObj))
     if (refObj && refObj != undefined) {
       this.item = refObj;
 
-      this.vnfType = this.item.scope["vnf-type"];
-      this.vnfcType = this.item.scope["vnfc-type"];
-      this.protocol = this.item['device-protocol'];
+      this.vnfType = this.item.vnf;
+      this.vnfcType = this.item.vnfc;
+      this.protocol = this.item.protocol;
       this.action = this.item.action;
       if( this.utilityService.getTracelvl() > 0 )
         console.log( this.clName+": "+methName+": vnfType:["+this.vnfType+
           "] vnfcType:["+this.vnfcType+"] protocol:["+this.protocol+"] action:["+
           this.action+"]");
+      this.artifactName = this.item["template_artifact"]
+      this.paramArtifactName = this.item["param_artifact"]
       this.artifactRequest.action = this.item.action;
       this.artifactRequest.vnfType = this.vnfType;
       if (this.vnfcType != undefined && this.vnfcType.length != 0) {
@@ -184,17 +187,21 @@
       }
     }
     else {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.clName+": "+methName+": refObj is not defined.");
       this.item = { "action": "", "scope": { "vnf-type": "", "vnfc-type": "" }, "vm": [], "protocol": "", "download-dg-reference": "", "user-name": "", "port-number": "", "artifact-list": [], "deviceTemplate": "", "scopeType": "" };
     }
     this.initialAction = this.item.action;
-    this.subscription = this.activeRoutes.url.subscribe(UrlSegment => {
+    this.activeRoutes.url.subscribe(UrlSegment => {
       this.actionType = UrlSegment[0].path
     })
     this.mappingEditorService.fromScreen = 'MappingScreen';
-    this.identifier = this.mappingEditorService.identifier;
+
   }
   //========================== End of ngOnInit() Method============================================
   ngOnDestroy() {
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": ngOnDestroy: start.");
     if (this.refObj && this.refObj != undefined) {
       if (this.configMappingEditorContent && this.configMappingEditorContent != undefined) {
         this.saveTemplate();
@@ -204,12 +211,14 @@
         this.mappingEditorService.changeNavDownloadData(this.downloadDataObject);
       }
     }
-
-    if(this.subscription) { this.subscription.unsubscribe(); }
-    if(this.templateSubscription) { this.templateSubscription.unsubscribe(); }
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": ngOnDestroy: finish.");
   }
   //========================== End of ngOnDestroy() Method============================================
   ngAfterViewInit() {
+    var methName= "ngAfterViewInit";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+": start.");
     if (this.mappingEditorService.latestAction) {
       this.refNameObj = this.mappingEditorService.latestAction;
       if (this.vnfcType !== 'null') {
@@ -218,47 +227,36 @@
       else {
         this.type = this.vnfType;
       }
-      for (let i = 0; i < this.refNameObj['artifact-list'].length; i++) {
-        let artifactList = this.refNameObj['artifact-list'];
-        if (artifactList[i]['artifact-type'] === 'config_template') {
-          var artifactName = artifactList[i]['artifact-name'];
-          var artifactNameWithoutExtension = '';
-                    if (artifactName) {
-            artifactNameWithoutExtension = artifactName.substring(0, artifactName.lastIndexOf("."));
-          }
-          if(this.mappingEditorService.identifier) {
-            if(artifactNameWithoutExtension.endsWith(this.mappingEditorService.identifier)) {
-                this.artifactName = artifactName;
-            }
-          }
-          else {
-            this.artifactName = artifactName;
-          }
-
-        }
-      }
     }
     let self = this;
     this.templateEditor = self.templateeditor.getEditor();
     this.templateeditor.getEditor().commands.addCommand({
+      name: 'annotateCommand',
+      bindKey: { win: 'ctrl-z', mac: 'Command-z' },
+      exec: (editor: any) => {
+        this.handleUndo(this.modal);
+      }
+    });
+    this.templateeditor.getEditor().commands.addCommand({
       name: 'annotateCommandAlternate',
       bindKey: { win: 'CTRL-4', mac: 'Command-4' },
       exec: (editor: any) => {
+        this.checkNameEntered = true;
+        this.checkSpace = true;
         this.handleAnnotation(this.modal);
       }
     });
-    this.templateeditor.getEditor().$enableBlockSelect = false;
-    this.templateeditor.getEditor().$enableMultiselect = false;
     if (this.mappingEditorService.fromScreen === 'MappingScreen') {
       this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
       this.fileType = sessionStorage.getItem('fileType');
     }
     if (this.configMappingEditorContent) {
       this.artifactRequest.templateContent = this.configMappingEditorContent;
-      this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
+      this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent);
     }
     if (this.refObj) {
-      if (this.mappingEditorService.getTemplateMappingDataFromStore() && this.mappingEditorService.getTemplateMappingDataFromStore() != undefined) {
+      if (this.mappingEditorService.getTemplateMappingDataFromStore() &&
+          this.mappingEditorService.getTemplateMappingDataFromStore() != undefined) {
         this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
       }
       else {
@@ -268,7 +266,8 @@
     else {
       this.Actions = [];
       this.enableBrowse = false;
-      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
+      this.nService.error("Error",
+        "Please enter Action and VNF type in Reference Data screen", this.options);
     }
   }
 
@@ -277,74 +276,58 @@
     $("#inputFile").trigger('click');
   }
   //========================== End of browseOption() Method============================================
-  //save to GUI
   public saveTemplate() {
-    this.saveToGuiCacheFlag = 'true';
+    var methName= "saveTemplate";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+": start.");
     this.mappingEditorService.paramData = [];
     if (this.configMappingEditorContent) {
-      this.initialData = this.configMappingEditorContent;
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": do refreshEditor ...");
       this.mappingEditorService.refreshEditor();
       let paramArr: any = []
       if (this.mappingEditorService.paramData && this.mappingEditorService.paramData != undefined) {
         if (this.mappingEditorService.paramData.length === 0 && this.mappingEditorService.hasErrorCode === true) {
-          this.nService.error("Error", 'Special characters error', 'Error')
+          this.nService.error("Error", 'Special characters error', this.options);
           return;
         }
         else {
           this.showError = false;
         }
       }
-      this.showTemplateVersionDiv = true;
-
-      if (this.mappingEditorService.fromScreen === 'MappingScreen') {
-        this.mappingEditorService.setTemplateMappingDataFromStore(this.configMappingEditorContent);
-      }
-      if (this.fileType === 'text/xml') {
-        sessionStorage.setItem('fileType', 'text/xml');
-      }
-      if (this.fileType === '') {
-        sessionStorage.setItem('fileType', '');
-      }
+      this.mappingEditorService.setTemplateMappingDataFromStore(this.configMappingEditorContent);
     }
   }
   //========================== End of saveTemplate() Method============================================
   retrieveTemplateFromAppc() {
+    var methName= "retrieveTemplateFromAppc";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( methName+": start ...");
     let refObj = this.refObj;
     if (refObj && refObj != undefined) {
-
       let fileName = this.artifactName;
       let input = this.utilityService.createPayloadForRetrieve(false, this.item.action, this.vnfType, fileName);
+      // console.log("Retrieve artifact payload=="+ payload);
       let artifactContent: any;
       this.ngProgress.start();
-      this.templateSubscription = this.httpUtil.post({
-        url: environment.getDesigns,
-        data: input
-      }).subscribe(resp => {
+      this.apiService.callGetArtifactsApi(input).subscribe(resp => {
         if (resp.output.status.code === '400' && resp.output.status.message === "success") {
-          this.nService.success("Success", "Template retrieved successfully from APPC");
+          this.nService.success("Success","Template retrieved successfully from APPC", this.options);
           this.tempRetrievalResponse = resp;
           let result = JSON.parse(resp.output.data.block).artifactInfo[0];
           result = result['artifact-content'];
-          if ('Generated Template' === this.selectedUploadType) {
-            this.configMappingEditorContent = result
-            this.artifactRequest.templateContent = this.configMappingEditorContent;
-            this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
-            if (this.artifactRequest.templateContent) {
-              this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
-            }
-          }
+          this.configMappingEditorContent = result
+          this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent);
           this.tempretrieveFlag = true;
           this.fileNameForTempSave = fileName;
-          this.enableDownloadButtons = true;
-          this.initialData = result;
           this.saveTemplate();
         }
         else {
-          this.nService.info("Information", "There is no template saved in APPC for the selected action!");
+          this.nService.info("Information","There is no template saved in APPC for the selected action!", this.options);
         }
         this.ngProgress.done();
       },
-        error => this.nService.error("Error", "Error in connecting to APPC Server"));
+      error => this.nService.error("Error", "Error in connecting to APPC Server",  this.options));
       setTimeout(() => {
         this.ngProgress.done();
       }, 3500);
@@ -352,41 +335,46 @@
   }
   //========================== End of retrieveTemplateFromAppc() Method============================================
   prepareAppData() {
+    var methName= "prepareAppData";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+": start.");
     let refObj = this.refObj;
     if (refObj && refObj != undefined) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.clName+": "+methName+": parse locStor.paramsContent");
       let paramsKeyValueFromEditor: JSON;
       try {
         paramsKeyValueFromEditor = JSON.parse(localStorage["paramsContent"]);
       }
       catch (error) {
-        console.log("Could not parse name value pairs==" + error);
+        console.log(methName+": Could not parse name value pairs:" + error);
       }
       if (paramsKeyValueFromEditor) {
-        this.showTemplateVersionDiv = true;
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.clName+": "+methName+
+            ": have paramsKeyValueFromEditor");
         let action = this.item.action;
-        var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
+        var scopeName =
+          this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
         var fileName = '';
-        let id = this.mappingEditorService.identifier;
-        if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.templateVersionNo, id);
-        else fileName = this.updateParamFileName(this.item.action, scopeName, this.templateVersionNo);
-
-        let vnfType = this.vnfType;
+        fileName = this.paramArtifactName;
         let Json = [paramsKeyValueFromEditor];
         let slashedPayload = this.appendSlashes(JSON.stringify(Json));
-        let data = this.utilityService.createPayLoadForSave(PARAM_DATA, this.vnfType, action, fileName, this.templateVersionNo, slashedPayload);
+        let data =
+          this.utilityService.createPayLoadForSave("param_data", this.vnfType, action, fileName, this.templateVersionNo, slashedPayload);
         this.appDataObject.template.nameValueData = data;
       }
       if (this.configMappingEditorContent) {
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.clName+": "+methName+
+            ": have configMappingEditorContent");
         let actualContent = this.configMappingEditorContent;
         this.mappingEditorService.generateTemplate(this.templateEditor);
-        this.showTemplateVersionDiv = true;
         let action = this.item.action;
         let versionandFileType: any;
         if (this.fileType === "text/xml") {
-
           versionandFileType = this.templateVersionNo + 'V.xml'
         } else {
-
           versionandFileType = this.templateVersionNo + 'V.json'
         }
         let fileName: any;
@@ -397,15 +385,30 @@
           fileName = this.artifactName;
         }
         let vnfType = this.vnfType;
-        let data = this.utilityService.createPayLoadForSave(TEMPLATE_DATA, this.vnfType, action, fileName, this.templateVersionNo, this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}'));
+
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.clName+": "+methName+
+            ": start replace: content length="+
+            this.configMappingEditorContent.length );
+        var replContent=
+          this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}');
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.clName+": "+methName+" replace done");
+
+        let data = this.utilityService.createPayLoadForSave("template_data", this.vnfType, action, fileName, this.templateVersionNo, replContent );
+
         this.appDataObject.template.templateData = data;
-        this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal);
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( this.clName+": "+methName+": initialise editor ...");
+        this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent);
       }
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.clName+": "+methName+": finish.");
     }
   }
   //========================== End of prepareAppData() Method============================================
   prepareFileName(): any {
-    let fileNameObject: any = this.mappingEditorService.latestAction;
+    let fileNameObject: any = this.mappingEditorService.newObject;
     this.appDataObject = this.mappingEditorService.appDataObject;
     this.downloadDataObject = this.mappingEditorService.downloadDataObject;
     this.referenceData = fileNameObject;
@@ -426,42 +429,29 @@
       var blob = new Blob([theJSON], {
         type: "text/json"
       });
-      this.showTemplateVersionDiv = true;
       let fileName: any;
       var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
-      let id = this.mappingEditorService.identifier;
-      if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.templateVersionNo, id);
-      else fileName = this.updateParamFileName(this.item.action, scopeName, this.templateVersionNo);
-
+      fileName = this.paramArtifactName;
       this.downloadDataObject.template.nameValueData = theJSON;
       this.downloadDataObject.template.nameValueFileName = fileName;
     }
     else {
-      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
+      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen", this.options);
     }
 
   }
   //========================== End of onDownloadParameter() Method============================================
-  updateParamFileName(action: any, scopeName: any, versionNo: any) {
-    let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V.json';
-    this.downloadedParamFileName = fileName;
-    return fileName;
-  }
-  //========================== End of updateParamFileName() Method============================================
-  updateFileNameForConfigScaleOut(action: any, scopeName: any, versionNo: any, id: any) {
-    let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V_' + id + '.json';
-    this.downloadedParamFileName = fileName;
-    return fileName;
-  }
-  //========================== End of updateFileNameForConfigScaleOut() Method============================================
   public onDownloadTemplate(artifact: string) {
+    var methName= "onDownloadTemplate";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( methName+": start: artifact:["+artifact+"] fileType:["+
+        this.fileType+"]");
     let actualContent = this.configMappingEditorContent;
     var textToSaveAsBlob: any;
     var config_template_fileName: any
     let refObj = this.refObj;
     let versionandFileType: string;
     if (artifact == 'Template' && this.artifactRequest && this.configMappingEditorContent && refObj) {
-      this.showTemplateVersionDiv = true;
       if (this.fileType === "text/xml") {
         textToSaveAsBlob = new Blob([this.configMappingEditorContent], {
           type: "text/xml"
@@ -483,7 +473,6 @@
       if (this.tempretrieveFlag) {
         config_template_fileName = this.fileNameForTempSave;
         var filextension = config_template_fileName.substring(config_template_fileName.indexOf("V") + 2, config_template_fileName.length);
-
         textToSaveAsBlob = new Blob([this.configMappingEditorContent], {
           type: "text/" + filextension
         });
@@ -491,27 +480,38 @@
       else {
         config_template_fileName = this.artifactName;
       }
-      this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal);
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": config_template_fileName:["+
+          config_template_fileName+"]");
+      this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent);
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": start replacements in content");
       this.downloadDataObject.template.templateData = this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}');
       this.downloadDataObject.template.templateFileName = config_template_fileName;
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": finish.");
     }
-
   }
   //========================== End of onDownloadTemplate() Method============================================
-  fileChange(input) {
+  fileChange( input) {
 
     let self = this;
     let refObj = this.refObj;
     this.enableValidateTemplate = true;
 
     if (refObj && refObj != undefined) {
+      // refObj = refObj[refObj.length - 1];
       if (input.files && input.files[0]) {
-        this.spinner.show();
+        //console.log("input files0" + JSON.stringify(input.files[0]))
         this.myfileName = input.files[0].name;
         this.fileName = input.files[0].name;
         this.fileType = input.files[0].type;
+        // var fileExtension = this.myfileName.substr(this.myfileName.lastIndexOf('.') + 1);
+
         let reader = new FileReader();
-        this.readFile(input.files[0], reader, (result) => {
+        // if(this.validateUploadedFile(fileExtension))
+        //{
+        this.readFile( input.files[0], reader, (result) => {
           if (this.fileType === 'text/xml') {
             sessionStorage.setItem('fileType', 'text/xml');
           }
@@ -523,13 +523,13 @@
             sessionStorage.setItem('fileType', '');
           }
 
-
           if ('Generated Template' === this.selectedUploadType) {
             this.configMappingEditorContent = result
             this.artifactRequest.templateContent = this.configMappingEditorContent;
+            // console.log("editor content==" + JSON.stringify(this.configMappingEditorContent))
             this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
             if (this.artifactRequest.templateContent) {
-              this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
+              this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent);
             }
           }
           this.enableDownloadButtons = true;
@@ -537,19 +537,21 @@
           this.saveTemplate();
           this.templateeditor.getEditor().$enableBlockSelect = false;
           this.templateeditor.getEditor().$enableMultiselect = false;
-          setTimeout(() => {
-                        /** spinner ends after 3.5 seconds */
-                        this.spinner.hide();
-          }, 3500);
+
         });
+        //  }
+        // else{
+        // this.nService.error("Error", "Incorrect File Format")
+        //this.configMappingEditorContent=''
+        //}
       }
       else {
-        this.nService.error("Error", "Failed to read file");
+        this.nService.error("Error", "Failed to read file", this.options);
       }
       this.myInputVariable.nativeElement.value = "";
     }
     else {
-      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
+      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen", this.options);
       return false;
     }
   }
@@ -560,7 +562,6 @@
       // callback with the results
       callback(reader.result);
     }
-    this.notificationService.notifySuccessMessage('Uploading File ' + file.name + ':' + file.type + ':' + file.size);
     // Read the file
     reader.readAsText(file, "UTF-8");
   }
@@ -590,43 +591,68 @@
   }
   //========================== End of appendSlashes() Method============================================
   prepareDownloadData() {
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": prepareDownloadData: start.");
     this.onDownloadParameter();
     this.onDownloadTemplate('Template');
   }
   //========================== End of prepareDownloadData() Method============================================
-  syncTemplate() {
-    this.mappingEditorService.replaceNamesWithBlankValues();
+  syncTemplate( callOrig: string ) {
+    var methName= "syncTemplate";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( methName+": start. callOrig:["+callOrig+"]");
+    if( callOrig == '0' ) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": this call is from HTML -start 1-st step.");
+      var ediContent= this.mappingEditorService.editor.session.getValue();
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": ediContent length="+ediContent.length );
+      if( this.utilityService.getTracelvl() > 1 )
+        console.log( methName+": ediContent(begin):["+
+          ediContent.substr(0,200)+"...]");
+      this.procOnSrvSideSvc.sendToSrv(
+        ediContent, this.mappingEditorService, this );
+    }
+    else
+    if( callOrig == '1' ) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": this call is from ProcOnSrvSideSvc -continue.");
+   // console.log( methName+": start replaceNamesWithBlankValues.");
+   // this.mappingEditorService.replaceNamesWithBlankValues();
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": start saveTemplate ...");
     this.saveTemplate();
-
     var templateData = this.mappingEditorService.paramData; //template data array
     var pdData = this.paramShareService.getSessionParamData(); //PD data array
     var paramsContent = localStorage["paramsContent"];
-
-    if (paramsContent && paramsContent != undefined) {
-      try {
-        var paramTabData = JSON.parse(paramsContent);
-      }
-      catch (error) {
-        console.log("error is : " + error)
-      }
-    }
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": paramsContent length="+paramsContent.length );
     var resultArr = [];
     var json = {};
     var resultParamObj = {};
     let checkNamesOnlyCondition: boolean = true;
 
     if (templateData && templateData != undefined) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": templateData (params) are not empty.");
       templateData.forEach(function (item) {
         if (item.paramValue !== "" && item.paramValue != undefined && item.paramValue != null) {
           checkNamesOnlyCondition = false;
         }
-
-      });
-
-      templateData.forEach(function (item) {
         resultParamObj[item.paramName] = item.paramValue;
       });
-      if (paramTabData && paramTabData != undefined) {
+      templateData = Array.from(new Set(templateData.map((itemInArray) => itemInArray.paramName)))
+      if( paramsContent && paramsContent != undefined) {
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( methName+": parse paramsContent ...");
+        try {
+          var paramTabData = JSON.parse(paramsContent);
+        }
+        catch (error) {
+          console.log( methName+": paramsContent parse error:" + error);
+        }
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( methName+": templateData length="+templateData.length );
         templateData.forEach(function (item) {
           for (var index in paramTabData) {
             if (item.paramName === index) {
@@ -642,134 +668,148 @@
                 }
               }
             }
-
           }
 
+          resultArr.push({
+            "name": item,
+            "type": null,
+            "description": null,
+            "required": null,
+            "default": null,
+            "source": "Manual",
+            "rule-type": null,
+            "request-keys": [{
+              "key-name": null,
+              "key-value": null
+            }, {
+              "key-name": null,
+              "key-value": null
+            }, {
+              "key-name": null,
+              "key-value": null
+            }],
+            "response-keys": [{
+              "key-name": null,
+              "key-value": null
+            }, {
+              "key-name": null,
+              "key-value": null
+            }, {
+              "key-name": null,
+              "key-value": null
+            }, {
+              "key-name": null,
+              "key-value": null
+            }, {
+              "key-name": null,
+              "key-value": null
+            }],
+            "ruleTypeValues": [null]
+          })
         });
-
       }
       localStorage["paramsContent"] = JSON.stringify(resultParamObj);
-      templateData = Array.from(new Set(templateData.map((itemInArray) => itemInArray.paramName)))
-
-      //reformatting arr1 to match with PD
-      templateData.forEach(function (item) {
-
-        resultArr.push({
-          "name": item,
-          "type": null,
-          "description": null,
-          "required": null,
-          "default": null,
-          "source": "Manual",
-          "rule-type": null,
-          "request-keys": [{
-            "key-name": null,
-            "key-value": null
-          }, {
-            "key-name": null,
-            "key-value": null
-          }, {
-            "key-name": null,
-            "key-value": null
-          }],
-          "response-keys": [{
-            "key-name": null,
-            "key-value": null
-          }, {
-            "key-name": null,
-            "key-value": null
-          }, {
-            "key-name": null,
-            "key-value": null
-          }, {
-            "key-name": null,
-            "key-value": null
-          }, {
-            "key-name": null,
-            "key-value": null
-          }],
-          "ruleTypeValues": [null]
-
-        })
-      });
+      if (pdData && pdData != undefined) {
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log( methName+
+            ": have pdData, resultArr.length="+resultArr.length );
+        for (var i = 0; i < resultArr.length; i++) {
+          pdData.forEach(function (arr2item) {
+            if (resultArr[i].name === arr2item.name) {
+              var json = {
+                "name": arr2item.name,
+                "type": arr2item.type,
+                "description": arr2item.description,
+                "required": arr2item.required,
+                "default": arr2item.default,
+                "source": arr2item.source,
+                "rule-type": arr2item["rule-type"],
+                "request-keys": arr2item["request-keys"],
+                "response-keys": arr2item["response-keys"],
+                "ruleTypeValues": arr2item.ruleTypeValues
+              };
+              resultArr.splice(i, 1, json)
+            }
+          });
+        };
+      }
+      this.paramShareService.setSessionParamData(resultArr);
+      this.mappingEditorService.paramData = [];
+      //navigate to PD page after sync
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( methName+": navigate to PD page after sync ...");
+      this
+        .router
+        .navigate(['../../../vnfs/design/parameterDefinitions/create']);
     }
-    if (pdData && pdData != undefined) {
-      for (var i = 0; i < resultArr.length; i++) {
-
-        pdData.forEach(function (arr2item) {
-          if (resultArr[i].name === arr2item.name) {
-
-            var json = {
-              "name": arr2item.name,
-              "type": arr2item.type,
-              "description": arr2item.description,
-              "required": arr2item.required,
-              "default": arr2item.default,
-              "source": arr2item.source,
-              "rule-type": arr2item["rule-type"],
-              "request-keys": arr2item["request-keys"],
-              "response-keys": arr2item["response-keys"],
-              "ruleTypeValues": arr2item.ruleTypeValues
-            };
-            resultArr.splice(i, 1, json)
-          }
-
-        });
-
-      };
-
     }
-    this.paramShareService.setSessionParamData(resultArr);
-    this.mappingEditorService.paramData = [];
-    //navigate to PD page after sync
-    this
-      .router
-      .navigate(['../../../vnfs/design/parameterDefinitions/create']);
   }
 
   //========================== End of syncTemplate() Method============================================
   mergeParams() {
     this.mergeStatus = this.mappingEditorService.autoAnnotateDataForParams();
     if (this.mergeStatus) {
-      this.nService.success("Success", "Merge Successful");
+      this.nService.success("Success", "Merge Successful", this.options);
     }
     else {
-      this.nService.error("Error", "Merge Unsuccessful");
+      this.nService.error("Error", "Merge Unsuccessful", this.options);
     }
     this.saveTemplate();
   }
   //========================== End of mergeParams() Method============================================  
   public handleAnnotation(modal) {
-
+    this.tempName = '';
     this.selectedWord = this.templateeditor.getEditor().session.getTextRange(this.templateeditor.getEditor().selectionRange);
     if (this.selectedWord && this.selectedWord != undefined) modal.open();
   }
   //========================== End of handleAnnotations() Method============================================ 
-  public submitNameValues() {
-    if (this.tempName) {
-      this.checkNameEntered = true;
+  public handleUndo(modal) {
+    let markersList = this.templateeditor.getEditor().session.getMarkers();
 
-      if (this.selectedWord) {
-        if (this.selectedWord.startsWith('${(')) {
-          var replaceWord: any = this.replaceWord = this.selectedWord.substring(3, this.selectedWord.indexOf(')=(')) + this.tempName;
-          this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord);
-
-        } else {
-          let mappingKey = this.mappingEditorService.getKeysForValues(this.selectedWord);
-          var replaceWord: any = this.replaceWord = '${(' + this.selectedWord + ')=(' + this.tempName + ')}';
-          this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord);
-
-        }
+    let filteredObj = {};
+    let lastMarker = Object.keys(markersList).filter(function (key) {
+      if (markersList[key]['clazz'] != 'undoMarker') {
+        filteredObj[key] = markersList[key]
       }
-      this.mappingEditorService.refreshEditor();
-      this.tempName = '';
-      this.modal.close();
+      return filteredObj;
+    });
+    this.templateeditor.getEditor().session.getUndoManager().undo();
+    this.templateeditor.getEditor().getSelection().clearSelection();
 
+    this.templateeditor.getEditor().session.removeMarker(this.templateeditor.getEditor().getSelection().session.$markerId);
+    this.templateeditor.getEditor().session.addMarker(markersList[parseInt(lastMarker[lastMarker.length - 1])].range, 'undoMarker', 'text')
+  }
+  //========================== End of handleUndo() Method============================================ 
+  public submitNameValues() {
+    this.checkNameEntered = true;
+    this.checkSpace = true;
+    if (this.tempName) {
+      if (this.tempName.startsWith(' ') || this.tempName.endsWith(' ')) {
+        this.checkSpace = false
+      }
+      else {
+        this.checkNameEntered = true;
+
+        if (this.selectedWord) {
+          if (this.selectedWord.startsWith('${(')) {
+            var replaceWord: any = this.replaceWord = this.selectedWord.substring(3, this.selectedWord.indexOf(')=(')) + this.tempName;
+            this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord);
+
+          } else {
+            let mappingKey = this.mappingEditorService.getKeysForValues(this.selectedWord);
+            var replaceWord: any = this.replaceWord = '${(' + this.selectedWord + ')=(' + this.tempName + ')}';
+            this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord);
+
+          }
+        }
+        this.mappingEditorService.refreshEditor();
+        this.tempName = '';
+        this.modal.close();
+      }
     }
     else {
       this.checkNameEntered = false;
     }
-
   }
   //========================== End of submitNameValues() Method============================================
 }