Revert "multiple asible servers support"

Some functionality was accidentally removed

This reverts commit 611c9da62c2e266f9facd97dc9f340ce311060a3.

Change-Id: I1aefbbc0ede8cdda59acc8bdf7b047e506aad813
Signed-off-by: Patrick Brady <patrick.brady@att.com>
Issue-ID: APPC-1510

3 files changed, 274 insertions, 326 deletions

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 646d3ce..c8100e3 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
@@ -32,16 +32,4 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
 
 .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 67bce4d..105f0ec 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 @@ limitations under the License.
                         <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>  <label style="font-size:12px;">(NFC Function)</label>
-                            <input class="form-control" type="text" disabled value="{{vnfcType}}" />
+                        <label>Vnfc Type</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,8 +62,7 @@ limitations under the License.
             <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>
@@ -71,7 +70,7 @@ limitations under the License.
         <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(0)">Synchronize Template Parameters
+                <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>
                 <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>
@@ -82,15 +81,17 @@ limitations under the License.
     <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: '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>
+        <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 [show-close]="true">
-            <h4 class="modal-title">Enter Name for <b>"{{selectedWord}}"</b></h4>
+        <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>
         <modal-body>
             <div class="form-group row">
@@ -98,16 +99,14 @@ limitations under the License.
                 <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 64777ea..8afa5bc 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,6 +3,8 @@
 ===================================================================
 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);
@@ -17,11 +19,11 @@ 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.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
 
 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';
@@ -36,31 +38,31 @@ import { BuildDesignComponent } from '../../build-artifacts.component';
 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= "TemplateConfComp";
+  clName= "TemplateConfigCompon";
   @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 = require('../../../../../cdt.application.properties.json').versionNoForApiCall;
+  templateVersionNo: any = '0.0.1';
   saveToGuiCacheFlag = 'false';
   initialAction: any;
   public referenceData: Array<Object> = [];
   public scopeName: any;
-  public subscription: any;
+  public subscription: Subscription;
+  public templateSubscription : Subscription;
   public item: any = {};
   public goldenActions: Array<string> = [];
   public refNameObj = {};
@@ -76,6 +78,7 @@ export class GoldenConfigurationComponent implements OnInit {
   enableBrowse: boolean = true;
   enableMerge: boolean = false;
   uploadValidationSuccess: boolean = false;
+  fileExtension: any = "xml";
   apiToken = localStorage['apiToken'];
   public appDataObject: any;
   public downloadDataObject: any;
@@ -89,10 +92,11 @@ export class GoldenConfigurationComponent implements OnInit {
     { action: "GetRunningConfig", value: "GetRunningConfig" },
     { action: "HealthCheck", value: "HealthCheck" },
     { action: "StartApplication", value: "StartApplication" },
-    { action: "StopApplication", value: "StopApplication" }
+    { action: "StopApplication", value: "StopApplication" },
+    { action: "DistributeTraffic", value: "DistributeTraffic" }
   ];
   options = {
-    timeOut: 4500,
+    timeOut: 1000,
     showProgressBar: true,
     pauseOnHover: true,
     clickToClose: true,
@@ -100,30 +104,25 @@ export class GoldenConfigurationComponent implements OnInit {
   }
   public replaceWord;
   public enableDownloadButtons: boolean = false;
-
+   
   constructor(
-    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.");
+    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) {
     this.artifactRequest.action = '';
     this.artifactRequest.version = '';
     this.artifactRequest.paramsContent = '{}';
     this.artifactRequest.paramKeysContent = '';
   }
-
   public templateEditor: any;
   public fileType: any = '';
   public actionType: any;
@@ -149,33 +148,32 @@ export class GoldenConfigurationComponent implements OnInit {
   editor: any;
   editorContent: any;
   tempName: any;
-  paramArtifactName: any;
   enableValidateTemplate: boolean = false;;
   public selectedUploadType: string = this.uploadTypes[0].value;
-  checkSpace: boolean = true;
-
+  identifier: any;
   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();
-    // console.log("Ref object:  " + JSON.stringify(refObj))
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+
+        ": refObj:["+JSON.stringify(refObj)+"]");
     if (refObj && refObj != undefined) {
       this.item = refObj;
 
-      this.vnfType = this.item.vnf;
-      this.vnfcType = this.item.vnfc;
-      this.protocol = this.item.protocol;
+      this.vnfType = this.item.scope["vnf-type"];
+      this.vnfcType = this.item.scope["vnfc-type"];
+      this.protocol = this.item['device-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) {
@@ -186,21 +184,17 @@ export class GoldenConfigurationComponent implements OnInit {
       }
     }
     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.activeRoutes.url.subscribe(UrlSegment => {
+    this.subscription = 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();
@@ -210,14 +204,12 @@ export class GoldenConfigurationComponent implements OnInit {
         this.mappingEditorService.changeNavDownloadData(this.downloadDataObject);
       }
     }
-    if( this.utilityService.getTracelvl() > 0 )
-      console.log( this.clName+": ngOnDestroy: finish.");
+
+    if(this.subscription) { this.subscription.unsubscribe(); }
+    if(this.templateSubscription) { this.templateSubscription.unsubscribe(); }
   }
   //========================== 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') {
@@ -226,36 +218,47 @@ export class GoldenConfigurationComponent implements OnInit {
       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.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
     }
     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 {
@@ -265,8 +268,7 @@ export class GoldenConfigurationComponent implements OnInit {
     else {
       this.Actions = [];
       this.enableBrowse = false;
-      this.nService.error("Error",
-        "Please enter Action and VNF type in Reference Data screen", this.options);
+      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
     }
   }
 
@@ -275,58 +277,74 @@ export class GoldenConfigurationComponent implements OnInit {
     $("#inputFile").trigger('click');
   }
   //========================== End of browseOption() Method============================================
+  //save to GUI
   public saveTemplate() {
-    var methName= "saveTemplate";
-    if( this.utilityService.getTracelvl() > 0 )
-      console.log( this.clName+": "+methName+": start.");
+    this.saveToGuiCacheFlag = 'true';
     this.mappingEditorService.paramData = [];
     if (this.configMappingEditorContent) {
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( methName+": do refreshEditor ...");
+      this.initialData = this.configMappingEditorContent;
       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', this.options);
+          this.nService.error("Error", 'Special characters error', 'Error')
           return;
         }
         else {
           this.showError = false;
         }
       }
-      this.mappingEditorService.setTemplateMappingDataFromStore(this.configMappingEditorContent);
+      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', '');
+      }
     }
   }
   //========================== 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.apiService.callGetArtifactsApi(input).subscribe(resp => {
+      this.templateSubscription = this.httpUtil.post({
+        url: environment.getDesigns,
+        data: input
+      }).subscribe(resp => {
         if (resp.output.status.code === '400' && resp.output.status.message === "success") {
-          this.nService.success("Success","Template retrieved successfully from APPC", this.options);
+          this.nService.success("Success", "Template retrieved successfully from APPC");
           this.tempRetrievalResponse = resp;
           let result = JSON.parse(resp.output.data.block).artifactInfo[0];
           result = result['artifact-content'];
-          this.configMappingEditorContent = result
-          this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent);
+          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.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.options);
+          this.nService.info("Information", "There is no template saved in APPC for the selected action!");
         }
         this.ngProgress.done();
       },
-      error => this.nService.error("Error", "Error in connecting to APPC Server",  this.options));
+        error => this.nService.error("Error", "Error in connecting to APPC Server"));
       setTimeout(() => {
         this.ngProgress.done();
       }, 3500);
@@ -334,46 +352,41 @@ export class GoldenConfigurationComponent implements OnInit {
   }
   //========================== 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(methName+": Could not parse name value pairs:" + error);
+        console.log("Could not parse name value pairs==" + error);
       }
       if (paramsKeyValueFromEditor) {
-        if( this.utilityService.getTracelvl() > 0 )
-          console.log( this.clName+": "+methName+
-            ": have paramsKeyValueFromEditor");
+        this.showTemplateVersionDiv = true;
         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 = '';
-        fileName = this.paramArtifactName;
+        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;
         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;
@@ -384,30 +397,15 @@ export class GoldenConfigurationComponent implements OnInit {
           fileName = this.artifactName;
         }
         let vnfType = this.vnfType;
-
-        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 );
-
+        let data = this.utilityService.createPayLoadForSave(TEMPLATE_DATA, this.vnfType, action, fileName, this.templateVersionNo, this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}'));
         this.appDataObject.template.templateData = data;
-        if( this.utilityService.getTracelvl() > 0 )
-          console.log( this.clName+": "+methName+": initialise editor ...");
-        this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent);
+        this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal);
       }
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+": finish.");
     }
   }
   //========================== End of prepareAppData() Method============================================
   prepareFileName(): any {
-    let fileNameObject: any = this.mappingEditorService.newObject;
+    let fileNameObject: any = this.mappingEditorService.latestAction;
     this.appDataObject = this.mappingEditorService.appDataObject;
     this.downloadDataObject = this.mappingEditorService.downloadDataObject;
     this.referenceData = fileNameObject;
@@ -428,29 +426,42 @@ export class GoldenConfigurationComponent implements OnInit {
       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, '');
-      fileName = this.paramArtifactName;
+      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);
+
       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.options);
+      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
     }
 
   }
   //========================== 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"
@@ -472,6 +483,7 @@ export class GoldenConfigurationComponent implements OnInit {
       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
         });
@@ -479,38 +491,27 @@ export class GoldenConfigurationComponent implements OnInit {
       else {
         config_template_fileName = this.artifactName;
       }
-      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.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal);
       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]) {
-        //console.log("input files0" + JSON.stringify(input.files[0]))
+        this.spinner.show();
         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();
-        // if(this.validateUploadedFile(fileExtension))
-        //{
-        this.readFile( input.files[0], reader, (result) => {
+        this.readFile(input.files[0], reader, (result) => {
           if (this.fileType === 'text/xml') {
             sessionStorage.setItem('fileType', 'text/xml');
           }
@@ -522,13 +523,13 @@ export class GoldenConfigurationComponent implements OnInit {
             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.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
             }
           }
           this.enableDownloadButtons = true;
@@ -536,21 +537,19 @@ export class GoldenConfigurationComponent implements OnInit {
           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.options);
+        this.nService.error("Error", "Failed to read file");
       }
       this.myInputVariable.nativeElement.value = "";
     }
     else {
-      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen", this.options);
+      this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
       return false;
     }
   }
@@ -561,6 +560,7 @@ export class GoldenConfigurationComponent implements OnInit {
       // 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,68 +590,43 @@ export class GoldenConfigurationComponent implements OnInit {
   }
   //========================== 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( 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 ...");
+  syncTemplate() {
+    this.mappingEditorService.replaceNamesWithBlankValues();
     this.saveTemplate();
+
     var templateData = this.mappingEditorService.paramData; //template data array
     var pdData = this.paramShareService.getSessionParamData(); //PD data array
     var paramsContent = localStorage["paramsContent"];
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( methName+": paramsContent length="+paramsContent.length );
+
+    if (paramsContent && paramsContent != undefined) {
+      try {
+        var paramTabData = JSON.parse(paramsContent);
+      }
+      catch (error) {
+        console.log("error is : " + error)
+      }
+    }
     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;
       });
-      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 );
+      if (paramTabData && paramTabData != undefined) {
         templateData.forEach(function (item) {
           for (var index in paramTabData) {
             if (item.paramName === index) {
@@ -667,148 +642,134 @@ export class GoldenConfigurationComponent implements OnInit {
                 }
               }
             }
+
           }
 
-          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);
-      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']);
+      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) {
+      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.options);
+      this.nService.success("Success", "Merge Successful");
     }
     else {
-      this.nService.error("Error", "Merge Unsuccessful", this.options);
+      this.nService.error("Error", "Merge Unsuccessful");
     }
     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 handleUndo(modal) {
-    let markersList = this.templateeditor.getEditor().session.getMarkers();
-
-    let filteredObj = {};
-    let lastMarker = Object.keys(markersList).filter(function (key) {
-      if (markersList[key]['clazz'] != 'undoMarker') {
-        filteredObj[key] = markersList[key]
-      }
-      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;
+      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);
+      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);
+        } 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();
       }
+      this.mappingEditorService.refreshEditor();
+      this.tempName = '';
+      this.modal.close();
+
     }
     else {
       this.checkNameEntered = false;
     }
+
   }
   //========================== End of submitNameValues() Method============================================
 }