diff --git a/src/app/about-us/aboutus.component.css b/src/app/about-us/aboutus.component.css
index 225877c..93ac11c 100644
--- a/src/app/about-us/aboutus.component.css
+++ b/src/app/about-us/aboutus.component.css
@@ -20,7 +20,8 @@
 ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 */
+
 .textarea {
-    width: 100%;
+    width: 800px;
     height: 200px
 }
\ No newline at end of file
diff --git a/src/app/about-us/aboutus.component.html b/src/app/about-us/aboutus.component.html
index 0d641b9..d7460f3 100644
--- a/src/app/about-us/aboutus.component.html
+++ b/src/app/about-us/aboutus.component.html
@@ -30,8 +30,7 @@
                 <div class="mdl-card__title">
                     <div class="text-center">
                         Contact us @:
-                        <a href="mailto:{{contactUsMail.CONTACT_US_EMAIL}}?Subject={{contactUsMail.CONTACT_US_SUBJECT}}">
-                        CDT DEVELOPMENT TEAM </a>
+                        <a href="mailto:{{contactUsMail.CONTACT_US_EMAIL}}?Subject={{contactUsMail.CONTACT_US_SUBJECT}}">APPC DEVELOPMENT TEAM</a>
                     </div>
                 </div>
             </div>&emsp;&emsp;&emsp;&emsp;
@@ -62,7 +61,7 @@
                 </div>
                 <div class="text-right">
                     <div class="mdl-dialog__content">
-                        <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary"  (click)="versionLogFile(); versionLog.open();">VIEW CHANGE LOG</a>
+                        <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="open(content)">VIEW CHANGE LOG</a>
                     </div>
                 </div>
 
@@ -71,19 +70,3 @@
         </div>
     </div>
 </div>
-
-<!-- Modal for version Log and download file -->
-<modal #versionLog id="versionLog">
-    <modal-header [show-close]="true">
-        <h4 class="modal-title">VERSION CHANGE LOG</h4>
-    </modal-header>
-    <modal-body>
-        <textarea class="textarea">{{this.data}}</textarea>
-    </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)="downloadLogFile()">
-            Download
-        </button>
-        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" data-dismiss="modal">cancel</button>
-    </modal-footer>
-</modal>
diff --git a/src/app/about-us/aboutus.component.ts b/src/app/about-us/aboutus.component.ts
index 53b8a94..04eee0d 100644
--- a/src/app/about-us/aboutus.component.ts
+++ b/src/app/about-us/aboutus.component.ts
@@ -21,13 +21,16 @@
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit } from '@angular/core';
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Http } from '@angular/http';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { NotificationsService } from 'angular2-notifications';
 import { saveAs } from 'file-saver';
-import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DialogService } from 'ng2-bootstrap-modal';
+import { ConfirmComponent } from '../shared/confirmModal/confirm.component';
+import { appConstants } from '../../constants/app-constants';
 import {UtilityService} from '../shared/services/utilityService/utility.service';
 
 @Component({
@@ -35,13 +38,11 @@
     templateUrl: './aboutus.component.html',
     styleUrls: ['./aboutus.component.css']
 })
-export class AboutUsComponent implements OnInit {
-
+export class AboutUsComponent implements OnInit, OnDestroy {
     clName= "AboutUsComponent";
     public releaseName: any;
     public versionNo: any;
     public contactUsMail: any;
-
     public data: any;
     closeResult: string;
     versionLogSubscription: Subscription;
@@ -54,30 +55,48 @@
     };
 
     constructor(
-      private http: Http, private modalService: NgbModal,
+      private http: Http, private dialogService: DialogService, private notificationsService: NotificationsService,
       private utilSvc: UtilityService ) {
     }
 
     ngOnInit() {
         this.versionNo = require('./appVersion.json').versionNo;
         this.releaseName = require('./appVersion.json').releaseName;
-        this.contactUsMail = require('../../cdt.application.properties.json').CONTACT_US;
+        this.contactUsMail = require('../cdt.application.properties.json').CONTACT_US;
     }
 
-    versionLogFile() {
-        this.http.get('app/about-us/versionLog.txt')
-            .subscribe(res => this.data = res.text());
+    ngOnDestroy() {
+        if (this.versionLogSubscription) {
+            this.versionLogSubscription.unsubscribe();
+        }
     }
 
-    // open(content) {
-    //     this.modalService.open(content).result.then((result) => {
-    //         console.log('result', result)
-    //         this.closeResult = `Closed with: ${ result }`;
-    //     }, (reason) => {
-    //         console.log('reson', reason)
-    //         this.closeResult = `Dismissed ${ this.getDismissReason(reason) }`;
-    //     });
-    // }
+    versionLogFile(): Observable<any> {
+        return this.http.get('app/about-us/versionLog.txt');
+    }
+
+    open(content) {
+        this.versionLogSubscription = this.versionLogFile()
+            .subscribe((res) => {
+                this.data = res.text();
+                this.dialogService.addDialog(ConfirmComponent, {
+                    title: 'VERSION CHANGE LOG',
+                    message: this.data,
+                    cancelButtonText: 'CLOSE',
+                    confirmButtonText: 'DOWNLOAD'
+                }).subscribe(isConfirmed => {
+                    if (isConfirmed) {
+                        this.downloadLogFile()
+                    } else {
+                        // do nothing
+                    }
+                });
+
+            },
+        (error)=>{
+            this.notificationsService.error(appConstants.errors.error, 'unable to fetch change log details');
+        });
+    }
 
     downloadLogFile() {
         var blob = new Blob([this.data], {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d142ac2..fcff1d5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,34 +22,36 @@
 ============LICENSE_END============================================
 */
 
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {SimpleNotificationsModule} from 'angular2-notifications';
-import {HomeModule} from './home/home.module';
-import {AppComponent} from './app.component';
-import {AppRoutingModule} from './app.routing';
-import {SharedModule} from './shared/shared.module';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import {HashLocationStrategy, LocationStrategy} from '@angular/common';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {RouterModule} from '@angular/router';
-import {TestComponent} from './test/test.component';
-import {AboutUsComponent} from './about-us/aboutus.component';
-import {NgProgressModule} from 'ngx-progressbar';
-import {LoginGuardService} from './vnfs/LoginGuardService/Login-guard-service';
-import {Ng2Bs3ModalModule} from 'ng2-bs3-modal/ng2-bs3-modal';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SimpleNotificationsModule } from 'angular2-notifications';
+import { BootstrapModalModule } from 'ng2-bootstrap-modal';
+import { HomeModule } from './home/home.module';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app.routing';
+import { SharedModule } from './shared/shared.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { TestComponent } from './test/test.component';
+import { AboutUsComponent } from './about-us/aboutus.component';
+import { NgProgressModule } from 'ngx-progressbar';
+import { LoginGuardService } from './vnfs/LoginGuardService/Login-guard-service';
+import { ConfirmComponent } from './shared/confirmModal/confirm.component';
 import { NgxSpinnerModule } from 'ngx-spinner';
 
 @NgModule({
-    declarations: [AppComponent, TestComponent, AboutUsComponent],
+    declarations: [AppComponent, TestComponent, AboutUsComponent, ConfirmComponent],
     imports: [BrowserModule, FormsModule, HomeModule, SharedModule.forRoot(),
-        NgbModule.forRoot(), NoopAnimationsModule, AppRoutingModule, SimpleNotificationsModule, NgProgressModule, Ng2Bs3ModalModule, NgxSpinnerModule],
+        NgbModule.forRoot(), NoopAnimationsModule, AppRoutingModule, SimpleNotificationsModule, NgProgressModule, BootstrapModalModule, NgxSpinnerModule],
     exports: [RouterModule],
-    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, LoginGuardService],
+    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }, LoginGuardService],
+    entryComponents: [ConfirmComponent],
 
     bootstrap: [AppComponent]
 })
 
 export class AppModule {
-}
\ No newline at end of file
+}
diff --git a/src/app/cdt.application.properties.json b/src/app/cdt.application.properties.json
new file mode 100644
index 0000000..5040526
--- /dev/null
+++ b/src/app/cdt.application.properties.json
@@ -0,0 +1,8 @@
+{
+    "CONTACT_US": {
+        "CONTACT_US_EMAIL": "cdtSupportTeam@yourCompany.com",
+        "CONTACT_US_SUBJECT": "CDT Contact Us"
+    },
+    "username": "admin",
+    "password": "admin"
+}
\ No newline at end of file
diff --git a/src/app/home/home/home.component.html b/src/app/home/home/home.component.html
index ce6ec78..78189e5 100644
--- a/src/app/home/home/home.component.html
+++ b/src/app/home/home/home.component.html
@@ -20,14 +20,12 @@
 ============LICENSE_END============================================  -->
 <div class="android-more-section">
 
-    <div class="android-section-title mdl-typography--display-1-color-contrast" style="margin-inline-start: 15%">WELCOME TO CONTROLLER DESIGN TOOL
+    <div class="android-section-title mdl-typography--display-1-color-contrast">WELCOME TO CONTROLLER DESIGN TOOL
     </div>
     <div class="mdl-card__title">
-        <h4 class="mdl-card__title-text">The Controller Design Tool allows technology owners to create artifacts for Configuration and Life Cycle Management functions that are required
-            to manage the lifecycle of Virtual Network Functions (VNFs).<br> Select My VNFS to enter credentials and view existing designs or create new
-            ones.
+        <h4 class="mdl-card__title-text">The Controller Design Tool allows technology owners to create artifacts for Configuration and Life Cycle Management functions that are required to manage the lifecycle of Virtual Network Functions (VNFs).<br>            Select My VNFS to enter credentials and view existing designs or create new ones.
         </h4>
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/pipes/vm-filtering.pipe.ts b/src/app/pipes/vm-filtering.pipe.ts
index a036799..fdeb272 100644
--- a/src/app/pipes/vm-filtering.pipe.ts
+++ b/src/app/pipes/vm-filtering.pipe.ts
@@ -19,33 +19,20 @@
 
 ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================ */
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
-@Pipe({ name: 'vmFiltering', pure: false })
+@Pipe({name: 'vmFiltering', pure: false})
 export class VmFilteringPipe implements PipeTransform {
 
-    transform(value: any, action: any, templateId, newVnfc): any {
-        let filterValue
-        if(action == 'ConfigScaleOut'){
-            filterValue= templateId
-        } else if(action == 'Configure' || action == 'ConfigModify'){
-            filterValue= newVnfc
-        }
+    transform(value: any, action: any, templateId): any {
+
         if (action == 'ConfigScaleOut') {
             let x = value.filter(obj => {
                 //return value
-                return obj['template-id'] == filterValue;
+                return obj['template-id'] == templateId;
             });
 
-
-            return x;
-        } else if( action == 'Configure' || action == 'ConfigModify'){
-            let x = value.filter(obj => {
-                //return value
-                return ( obj['vnfcType-id'] == filterValue || obj['vnfcType-id'] == undefined);
-            });
-
-
+            console.log(x);
             return x;
         } else {
             return value;
diff --git a/src/app/shared/components/navigation/navigation.component.ts b/src/app/shared/components/navigation/navigation.component.ts
index af80749..522b11a 100644
--- a/src/app/shared/components/navigation/navigation.component.ts
+++ b/src/app/shared/components/navigation/navigation.component.ts
@@ -24,15 +24,14 @@
 */
 
 
-import {Component, Input, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
-import {EmitterService} from '../../services/emitter.service';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
+import { EmitterService } from '../../services/emitter.service';
 
 
-
-@Component({selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.css']})
-export class NavigationComponent implements OnInit {
+@Component({ selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.css'] })
+export class NavigationComponent implements OnInit, OnDestroy {
     navigationTabs: Array<Object> = [];
     //@ViewChild(GoldenConfigurationComponent) goldenConfig: GoldenConfigurationComponent;
     @Input() id: string;
diff --git a/src/app/shared/confirmModal/confirm.component.ts b/src/app/shared/confirmModal/confirm.component.ts
index 9da7991..5fbf4b3 100644
--- a/src/app/shared/confirmModal/confirm.component.ts
+++ b/src/app/shared/confirmModal/confirm.component.ts
@@ -28,6 +28,8 @@
 export interface ConfirmModel {
     title: string;
     message: string;
+    cancelButtonText: string;
+    confirmButtonText: string;
 }
 
 @Component({
@@ -36,15 +38,15 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close" (click)="close()">&times;</button>
-                    <h6 class="modal-title">{{title || 'Save all changes for current action to APPC database.'}}</h6>
+                    <h4 class="modal-title">{{title}}</h4>
+                    <button type="button" class="close" (click)="cancel()">&times;</button>
                 </div>
                 <div class="modal-body">
-                    <p>{{message || 'Do you want to save the changes?'}}</p>
+                    <p>{{message}}</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)="onCancel()">No</button>
-                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="onConfirm()">Yes</button>
+                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="confirm()">{{confirmButtonText}}</button>
+                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="cancel()">{{cancelButtonText}}</button>
                 </div>
             </div>
         </div>`
@@ -52,20 +54,22 @@
 export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
     title: string;
     message: string;
+    cancelButtonText: string;
+    confirmButtonText: string;
 
     constructor(dialogService: DialogService) {
         super(dialogService);
     }
 
-    onConfirm() {
-        // we set dialog result as true on click on Yes button,
+    confirm() {
+        // we set dialog result as true on click on confirm button,
         // then we can get dialog result from caller code
         this.result = true;
         this.close();
     }
 
-    onCancel() {
-        // we set dialog result as false on click on Yes button,
+    cancel() {
+        // we set dialog result as false on click on cancel/close button,
         // then we can get dialog result from caller code
         this.result = false;
         this.close();
diff --git a/src/app/shared/pipes/vm-filtering.pipe.ts b/src/app/shared/pipes/vm-filtering.pipe.ts
index a036799..c20397b 100644
--- a/src/app/shared/pipes/vm-filtering.pipe.ts
+++ b/src/app/shared/pipes/vm-filtering.pipe.ts
@@ -19,33 +19,19 @@
 
 ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================ */
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
-@Pipe({ name: 'vmFiltering', pure: false })
+@Pipe({name: 'vmFiltering', pure: false})
 export class VmFilteringPipe implements PipeTransform {
 
-    transform(value: any, action: any, templateId, newVnfc): any {
-        let filterValue
-        if(action == 'ConfigScaleOut'){
-            filterValue= templateId
-        } else if(action == 'Configure' || action == 'ConfigModify'){
-            filterValue= newVnfc
-        }
+    transform(value: any, action: any, templateId): any {
+
         if (action == 'ConfigScaleOut') {
             let x = value.filter(obj => {
                 //return value
-                return obj['template-id'] == filterValue;
+                return obj['template-id'] == templateId;
             });
 
-
-            return x;
-        } else if( action == 'Configure' || action == 'ConfigModify'){
-            let x = value.filter(obj => {
-                //return value
-                return ( obj['vnfcType-id'] == filterValue || obj['vnfcType-id'] == undefined);
-            });
-
-
             return x;
         } else {
             return value;
diff --git a/src/app/shared/services/cdt.apicall.ts b/src/app/shared/services/cdt.apicall.ts
deleted file mode 100644
index 9d7fbc2..0000000
--- a/src/app/shared/services/cdt.apicall.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
-============LICENSE_START==========================================
-===================================================================
-Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-===================================================================
-
-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.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-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 {Injectable} from '@angular/core';
-import {NotificationsService} from 'angular2-notifications';
-import { HttpUtilService } from './httpUtil/http-util.service';
-import { environment } from '../../../environments/environment';
-
-
-@Injectable()
-export class APIService {
-
-    constructor(private notificationService: NotificationsService, private httpUtils: HttpUtilService) {
-    }
-
-    public callGetArtifactsApi(payloadData){
-        console.log("APIService: PAYLOAD====>"+JSON.stringify(payloadData));
-       return this.httpUtils.post({
-            url: environment.getDesigns,
-            data: payloadData
-            })/*.subscribe(response => {
-                if (this.checkResult(response, action, artifactType)) {
-                    //Call the respective response handler.
-                }
-            },
-            error => this.notificationService.error('Error', this.connectionErrorMessage))*/
-    }
-
-    
-
-}
diff --git a/src/app/shared/services/httpUtil/http-util.service.ts b/src/app/shared/services/httpUtil/http-util.service.ts
index 688f3ea..43e6d4f 100644
--- a/src/app/shared/services/httpUtil/http-util.service.ts
+++ b/src/app/shared/services/httpUtil/http-util.service.ts
@@ -28,22 +28,23 @@
 export class HttpUtilService {
     headers: Headers;
     options: RequestOptions
-    private username = require('../../../../cdt.application.properties.json').username;
-    private password = require('../../../../cdt.application.properties.json').password;
+    private username = require('../../../cdt.application.properties.json').username;
+    private password = require('../../../cdt.application.properties.json').password;
     constructor(private http: Http) {
         this.headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
+        this.options = new RequestOptions({headers: this.headers}); //
     }
-    get(req) {
 
+    get(req) {
         return this
             .http
             .get(req.url, this.options)
             .map((res: Response) => res.json())
     }
+
     post(req) {
         this.headers.append('Authorization', 'Basic ' + btoa(this.username + ':' + this.password));
         this.options = new RequestOptions({ headers: this.headers });
-
         return this
             .http
             .post(req.url, req.data, this.options)
diff --git a/src/app/shared/services/mapping-editor.service.ts b/src/app/shared/services/mapping-editor.service.ts
index cb47687..b9e2b53 100644
--- a/src/app/shared/services/mapping-editor.service.ts
+++ b/src/app/shared/services/mapping-editor.service.ts
@@ -68,11 +68,11 @@
     public latestAction: any;
     public selectedWord: any;
     identifier: any;
-    private selectedVNFCType;
     private _navItem = {};
     private _observer: Observer<any>;
     private referenceList = [];
-    newObject: any
+    newObject: any;
+
     constructor() {
         this.navChange$ = new Observable(observer =>
             this._observer = observer).share();
@@ -106,20 +106,12 @@
     }
     selectedObj(data) {
         this.newObject = data;
-        
     }
+
     saveLatestIdentifier(identifier) {
         this.identifier = identifier;
     }
 
-    setSelectedVNFCType(vnfcType) {
-        this.selectedVNFCType = vnfcType;
-    }
-
-    getSelectedVNFCType() {
-        return this.selectedVNFCType;
-    }
-
     public getParamContent() {
         return this.paramContent;
     }
@@ -137,15 +129,15 @@
         
     }
 
-    public initialise(editor: any, editorContent: string): void {
+    public initialise(editor: any, editorContent: string, modal: any): void {
         this.editor = editor;
         this.editor.session = editor.session;
         this.editor.selection.session.$backMarkers = {};
         this.editorContent = editorContent;
         this.editor.$blockScrolling = Infinity;
         this.editor.$blockSelectEnabled = false;
-        //this.initialiseCommands(modal);
-        //this.editor.setValue(this.editorContent);
+        this.initialiseCommands(modal);
+        this.editor.setValue(this.editorContent);
         this.refreshEditor();
     }
 
@@ -206,7 +198,7 @@
             for (var prop in paramJson) {
                 let value: string = paramJson[prop];
                 if (value) {
-                    var occurances = this.editor.findAll(value, { regExp: false });
+                    var occurances = this.editor.findAll(value, {regExp: false});
                     var ranges = this.editor.getSelection().getAllRanges();
                     if (ranges && occurances && occurances > 0) {
 
@@ -269,8 +261,8 @@
         selectedRange.start.column = selectedRange.start.column - 1;
         selectedRange.end.column = selectedRange.end.column + 1;
         if ((this.editor.session.getTextRange(selectedRange).startsWith(' ')
-            || this.editor.session.getTextRange(selectedRange).startsWith('"')
-            || this.editor.session.getTextRange(selectedRange).startsWith('>'))
+                || this.editor.session.getTextRange(selectedRange).startsWith('"')
+                || this.editor.session.getTextRange(selectedRange).startsWith('>'))
             && (this.editor.session.getTextRange(selectedRange).endsWith(' ')
                 || this.editor.session.getTextRange(selectedRange).endsWith('"')
                 || this.editor.session.getTextRange(selectedRange).endsWith(',')
@@ -321,7 +313,7 @@
     }
 
     public autoAnnotateTemplateForParam(): void {
-        var occurances = this.editor.findAll(this.T_KEY_EXPRESSION, { regExp: true });
+        var occurances = this.editor.findAll(this.T_KEY_EXPRESSION, {regExp: true});
         var ranges = this.editor.getSelection().getAllRanges();
         if (ranges) {
             for (var r = 0; r < ranges.length; r++) {
@@ -370,25 +362,19 @@
     }
 
     replaceNamesWithBlankValues() {
-        var occurances = this.editor.findAll(this.SYNC_T_KEY_EXPRESSION, { regExp: true });
+        var occurances = this.editor.findAll(this.SYNC_T_KEY_EXPRESSION, {regExp: true});
         var ranges = this.editor.getSelection().getAllRanges();
         if (occurances > 0) {
             if (ranges) {
                 for (var r = 0; r < ranges.length; r++) {
                     let selectedRange: any = ranges[r];
-                    // console.log("Selected range == " + selectedRange)
                     let selectedWord: string = this.editor.session.getTextRange(selectedRange);
                     let specialKeys = (selectedWord.substring(2, selectedWord.length - 1)).match(this.checkSpecialCharsReg);
-                    // console.log("Selected word == " + selectedWord.length)
-                    //if (!selectedWord.startsWith('<') || !selectedWord.startsWith('{')) {
-                    if (specialKeys && specialKeys.length) {
-                    }
-
-                    else if (selectedWord && this.checkAppliedForNamesOnly(selectedRange) && !specialKeys && this.checkComments(selectedRange)) {
+                    if (selectedWord && this.checkAppliedForNamesOnly(selectedRange) && !specialKeys) {
                         let replaceWord: any = this.KEY_START + '' + this.KEY_MID + selectedWord.substring(2, selectedWord.length - 1) + this.KEY_END;
                         this.editor.session.replace(selectedRange, replaceWord);
                     }
-                    // }
+                   
                 }
             }
         }
@@ -402,8 +388,7 @@
             this.hasErrorCode = false;
             for (var r = 0; r < ranges.length; r++) {
                 let keyValue: string = this.editor.session.getTextRange(ranges[r]);
-                //console.log("keyValues==="+keyValue)
-                if (this.checkComments(ranges[r]) && keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
                     let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
                     let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
                     let specialKeys = key.match(this.checkSpecialCharsReg);
@@ -413,7 +398,7 @@
                         if (this.fromScreen === 'TemplateScreen') {
                             if (key) {
                                 paramJson[key] = value;
-                                var obj: any = { 'paramName': '', 'paramValue': '' };
+                                var obj: any = {'paramName': '', 'paramValue': ''};
                                 obj.paramName = key;
                                 obj.paramValue = value;
                                 paramData.push(obj);
@@ -423,7 +408,7 @@
                         else if (this.fromScreen === 'MappingScreen') {
                             if (key) {
                                 paramJson[key] = value;
-                                var obj: any = { 'paramName': '', 'paramValue': '' };
+                                var obj: any = {'paramName': '', 'paramValue': ''};
                                 obj.paramName = key;
                                 obj.paramValue = value;
 
@@ -464,13 +449,13 @@
     public refreshMarker(): void {
         if (this.editor) {
             this.hasErrorCode = false;
-            var occurances = this.editor.findAll(this.KEY_EXPRESSION, { regExp: true });
+            var occurances = this.editor.findAll(this.KEY_EXPRESSION, {regExp: true});
             var ranges = this.editor.getSelection().getAllRanges();
             var keysList = [];
             // Populate missing keys
             for (var r = 0; r < ranges.length; r++) {
                 let keyValue: string = this.editor.session.getTextRange(ranges[r]);
-                if (this.checkComments(ranges[r]) && keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
                     let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
                     let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
                     let specialKeys = key.match(this.checkSpecialCharsReg);
@@ -523,7 +508,7 @@
     public generateTemplate(templateEditor: any): void {
         if (templateEditor) {
             templateEditor.setValue(this.editor.getValue());
-            var occurances = templateEditor.findAll(this.KEY_EXPRESSION, { regExp: true });
+            var occurances = templateEditor.findAll(this.KEY_EXPRESSION, {regExp: true});
             var ranges = templateEditor.getSelection().getAllRanges();
             if (ranges) {
                 for (var r = 0; r < ranges.length; r++) {
@@ -547,7 +532,7 @@
 
     public generateParams(paramsEditor: any, paramsKeyValueEditor: any): JSON {
         if (paramsEditor && paramsKeyValueEditor) {
-            var occurances = this.editor.findAll(this.KEY_EXPRESSION, { regExp: true });
+            var occurances = this.editor.findAll(this.KEY_EXPRESSION, {regExp: true});
             var ranges = this.editor.getSelection().getAllRanges();
             if (ranges) {
                 let paramsJSON: JSON = JSON.parse('{}');
@@ -608,4 +593,4 @@
     }
 
 
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/services/procOnSrvSide.service.ts b/src/app/shared/services/procOnSrvSide.service.ts
deleted file mode 100644
index 17666d3..0000000
--- a/src/app/shared/services/procOnSrvSide.service.ts
+++ /dev/null
@@ -1,343 +0,0 @@
-//.. processing document on the server side
-import { Injectable } from '@angular/core';
-//import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Http, Response, Headers, RequestOptions } from '@angular/http';
-import { Observable } from 'rxjs';
-import { NotificationsService } from 'angular2-notifications';
-
-import { UtilityService } from '../../shared/services/utilityService/utility.service';
-
-//const httpOptionsT = {
- // headers: new HttpHeaders({ 'Content-Type': 'text/plain' })
-//};
-
-@Injectable(
-// { providedIn: 'root' }
-)
-export class ProcOnSrvSideSvc
-{
-  clName: string = "ProcOnSrvSideSvc";
-  public theUrl: string = "/api/proc_cont";
-  public resUrlPfx: string = "/api/get_result";
-  public parmsUrlPfx: string = "/api/get_params";
-  public taskId: string = '';
-  public stringBuf: string;
-  public responBuf: string;
-  public procResult: string;
-  public parmsBuf: string;
-  public responObj: any;
- // private respObs: Observable<string>;
-  private respObs: Observable<Response>;
-  private respObsObj: Observable<Object>;
-  public ppartLen: number = 102400; //.. 102912 is too large payload
- // public ppartLen: number = 10240;
-  public ppartCnt: number = 0;
-  public p_offset: number = 0;
-  public interval: any;
-  cycleCnt: number;
-  cycleMAX: number = 40;
-  editorHolder: any;
-  templSyncer: any;
-  fHeaders: Headers;
-  rOptions: RequestOptions;
-  noptions = {
-    timeOut: 4000,
-    showProgressBar: true,
-    pauseOnHover: true,
-    clickToClose: true,
-    maxLength: 250
-  };
-  prevTstampInt: number = 0;
-  currTstampInt: number = 0;
-  notifDelayMsec: number = 1200;
-
-  constructor(
-   // private http: HttpClient,
-    private http: Http,
-    private utilSvc: UtilityService,
-    private nService: NotificationsService )
-  {
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(this.clName+": new: start");
-    this.fHeaders= new Headers({'Content-Type': 'text/plain'});
-    this.rOptions= new RequestOptions({'responseType':0});
-  }
-
-  sendToSrv( content: string, editorHolder: any, templSyncer: any ) {
-    var methName= "sendToSrv";
-    this.stringBuf= content;
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(this.clName+": "+methName+": start: content length="+
-        this.stringBuf.length );
-    this.editorHolder= editorHolder;
-    this.templSyncer= templSyncer;
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(this.clName+": "+methName+": emptying editor...");
-    this.editorHolder.editor.session.setValue("temp empty");
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log( this.clName+": "+methName+": theUrl:["+this.theUrl+"]");
-    this.nService.info( "Start processing",
-      "sending: content length="+this.stringBuf.length, this.noptions );
-    this.taskId= '';
-    let contLen= this.stringBuf.length;
-    if( this.utilSvc.getTracelvl() > 0 ) 
-      console.log(this.clName+": "+methName+": content length="+contLen+
-        " ppartLen="+this.ppartLen );
-    this.ppartCnt= 1+ Math.floor(contLen / this.ppartLen);
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(this.clName+": "+methName+": ppartCnt="+ this.ppartCnt );
-    if( this.ppartCnt > 1 ) {
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log(this.clName+": "+methName+": will send multiple parts...");
-      this.nService.info( "Start processing", "will send multiple parts...");
-      this.prevTstampInt= Date.now();
-      this.p_offset= 0;
-      let ppart= this.stringBuf.substr( this.p_offset, this.ppartLen );
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log(this.clName+": "+methName+": First part:["+ppart+"]");
-      //.. first
-      this.sendPart( this.theUrl, ppart, 1 );
-    }
-    else { //.. ppartCnt == 1
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log(this.clName+": "+methName+": will send all-in-1");
-      this.nService.info( "Start processing",
-        "will send all-in-1 part", this.noptions);
-      this.prevTstampInt= Date.now();
-      //.. single
-      var sUrl= this.theUrl+"?part=1of1";
-      this.sendPart( sUrl, this.stringBuf, 1 );
-    };
-  }
-
-  sendPart( postUrl: string, contPart: string, partNum: number ) {
-    var methName= "sendPart";
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(this.clName+": "+methName+": start: Url:["+postUrl+"]");
-    this.currTstampInt= Date.now();
-      let ntDiff= this.currTstampInt - this.prevTstampInt;
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log( this.clName+": "+methName+
-          ":  prevTstampInt="+this.prevTstampInt+
-          " currTstampInt="+this.currTstampInt+" the diff="+ntDiff );
-    if( ntDiff > this.notifDelayMsec ) {
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log(this.clName+": "+methName+": notif.delay's long enough.");
-      this.prevTstampInt= this.currTstampInt;
-      this.nService.info( "Transferring file",
-        " part Number="+partNum, this.noptions );
-    };
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(this.clName+": "+methName+": part length="+ contPart.length );
-    this.respObs=
-      this.http.post( postUrl, contPart, this.rOptions );
-     // this.http.post<string>( postUrl, contPart, httpOptionsT );
-   // this.respObs.subscribe( (respo: string) => {
-    this.respObs.subscribe( (respo: Response) => {
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+": got response:["+respo+"]");
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log( this.clName+": "+methName+": json:["+
-          JSON.stringify(respo)+"]");
-      this.responBuf= respo.text();
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+": responBuf:["+this.responBuf+"]");
-      if( this.taskId.length < 1 ) {
-        if( this.utilSvc.getTracelvl() > 0 )
-          console.log( this.clName+": "+methName+
-            ": taskId is empty -get it from response");
-        let respObj= JSON.parse(this.responBuf);
-        if( this.utilSvc.getTracelvl() > 0 )
-          console.log( this.clName+": "+methName+": respObj.taskId:["+
-            respObj.taskId+"]");
-        if( respObj.taskId == null || respObj.taskId.length == 0 ) {
-          let errMsg= this.clName+": "+methName+
-            ": Error: failed to get taskId from the server response !";
-          console.log( errMsg );
-          this.nService.error( "Transferring file", errMsg, this.noptions );
-          return;
-        }
-        else { //.. extracted respObj.taskId
-          this.taskId= respObj.taskId;
-          if( this.utilSvc.getTracelvl() > 0 )
-            console.log( this.clName+": "+methName+": obtained new taskId:["+
-              this.taskId+"]");
-          this.nService.info( "Transferring file",
-            "current taskId:["+this.taskId+"]", this.noptions);
-        };
-      };
-      let tpercent= (100.0*partNum/this.ppartCnt).toFixed();
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+
-          ": part#="+partNum+" transfer percent="+tpercent );
-      this.currTstampInt= Date.now();
-      let ntDiff= this.currTstampInt - this.prevTstampInt;
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log( this.clName+": "+methName+
-          ":  prevTstampInt="+this.prevTstampInt+
-          " currTstampInt="+this.currTstampInt+" the diff="+ntDiff );
-      if( ntDiff > this.notifDelayMsec ) {
-        if( this.utilSvc.getTracelvl() > 1 )
-          console.log(this.clName+": "+methName+": notif.delay long enough.");
-        this.prevTstampInt= this.currTstampInt;
-        this.nService.info( "Transferring file",
-          " progress: "+tpercent+" %", this.noptions );
-       //" part Number="+partNum+" vs part Count="+this.ppartCnt, this.noptions );
-      };
-      if( partNum < this.ppartCnt ) {
-       // this.nService.info( methName,"need to send more parts...");
-        let partN= partNum + 1;
-        this.p_offset= this.p_offset + this.ppartLen;
-        var ppart= '';
-        if( partN < this.ppartCnt ) {
-          if( this.utilSvc.getTracelvl() > 0 )
-            console.log(this.clName+": "+methName+
-              ":  next part is not the last: partN="+partN );
-          ppart= this.stringBuf.substr( this.p_offset, this.ppartLen );
-        }
-        else {
-          if( this.utilSvc.getTracelvl() > 0 )
-            console.log(this.clName+": "+methName+ ": next part is the last.");
-          ppart= this.stringBuf.substr( this.p_offset );
-        };
-        if( this.utilSvc.getTracelvl() > 0 )
-          console.log(this.clName+": "+methName+": next part:["+ppart+"]");
-        let nUrl=
-          this.theUrl+"?taskId="+this.taskId+"&part="+partN+"of"+this.ppartCnt;
-        if( this.utilSvc.getTracelvl() > 0 )
-          console.log(this.clName+": "+methName+": next Url:["+nUrl+"]");
-        this.sendPart( nUrl, ppart, partN );
-      }
-      else { //.. partNum == this.ppartCnt
-        this.nService.info( "Transferring file",
-          "all "+this.ppartCnt+ " parts are sent - check processing...",
-          this.noptions);
-        var progrUrl= "/api/get_progress?taskId="+this.taskId;
-        if( this.utilSvc.getTracelvl() > 0 )
-          console.log(this.clName+": "+methName+": progrUrl:["+progrUrl+"]");
-        this.showProcProgr( progrUrl );
-      };
-    },
-    error => {
-      console.log( this.clName+": "+methName+
-        ": got Error:["+JSON.stringify(error)+']');
-      this.responBuf= JSON.stringify(error);
-      this.nService.error( "Transferring file",
-        " Error:["+this.responBuf+"]", this.noptions);
-    });
-  }
-
-  showProcProgr( proUrl: string ) {
-    var methName= "showProcProgr";
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log(methName+": start: proUrl:["+proUrl+"]");
-    this.cycleCnt= 0;
-    this.interval = setInterval( () => {
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log(methName+": call getProcProgr");
-      this.getProcProgr( proUrl );
-    }, 2500 );
-  }
-
-  getProcProgr( proUrl: string ) {
-    var methName= "getProcProgr";
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log( methName+": getProcProgr: start: proUrl:["+proUrl+"]");
-    this.cycleCnt++;
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log( methName+": cycleCnt="+this.cycleCnt );
-    this.nService.info( "Processing",
-      "Requesting server status...", this.noptions);
-   // this.respObsObj=
-   //   this.http.get( proUrl );
-    this.respObs=
-      this.http.get( proUrl );
-   // this.respObs.subscribe( (respo: string) => {
-    //this.respObsObj.subscribe( (respo)  => {
-    this.respObs.subscribe( (respo: Response) => {
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( methName+": response:["+JSON.stringify(respo)+"]");
-      this.responBuf= respo.text();
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( methName+": responBuf:["+this.responBuf+"]");
-      let respObj= JSON.parse(this.responBuf);
-     // this.responObj= respo; //.. Object
-      if( respObj.percentage != undefined &&
-          respObj.percentage != null )
-      {
-        if( this.utilSvc.getTracelvl() > 0 )
-          console.log(methName+": got percentage:["+respObj.percentage+"]");
-        if( respObj.percentage >= 100.0 ) {
-          if( this.utilSvc.getTracelvl() > 0 )
-            console.log(methName+": percentage == 100 !");
-          this.nService.info( "Processing completed",
-            "The server finished: 100% !", this.noptions);
-          clearInterval( this.interval );
-          if( this.utilSvc.getTracelvl() > 0 )
-            console.log(methName+": getting the processing result...");
-          this.getProcResult();
-        }
-      };
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log(methName+": cycleCnt="+this.cycleCnt+
-          " vs MAX="+this.cycleMAX );
-      if( this.cycleCnt > this.cycleMAX ) {
-        this.nService.error( "Processing",
-          "Too many status requests - stop !",this.noptions );
-        clearInterval( this.interval );
-      }
-    },
-    error => {
-      console.log( this.clName+": "+methName+":  got Error:["+
-        JSON.stringify(error)+']');
-      this.responObj= error; //.. as Object
-      this.nService.error( "Processing"," Error:["+
-         JSON.stringify(error)+']', this.noptions );
-      clearInterval( this.interval );
-    });
-  }
-
-  getProcResult() {
-    var methName= "getProcResult";
-    let resUrl= this.resUrlPfx+"?taskId="+this.taskId;
-    if( this.utilSvc.getTracelvl() > 0 )
-      console.log( this.clName+": "+methName+": start: resUrl:["+resUrl+"]");
-    this.respObs=
-      this.http.get( resUrl, this.rOptions );
-     // this.http.get( resUrl, {responseType: 'text'} );
-   // this.respObs.subscribe( (respo: string) => {
-    this.respObs.subscribe( (respo: Response) => {
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+": got response:["+respo+"]");
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log( this.clName+": "+methName+": json:["+
-          JSON.stringify(respo)+"]");
-      this.responBuf= respo.text();
-      if( this.utilSvc.getTracelvl() > 1 )
-        console.log( this.clName+": "+methName+": responBuf:["+this.responBuf+"]");
-      if( this.utilSvc.getTracelvl() == 0 ) {
-        let respoBg= this.responBuf.substr(0, 300);
-        console.log(this.clName+": "+methName+": response Begin:["+respoBg+"...]");
-      };
-      this.procResult= this.responBuf;
-      this.nService.info( "Processing completed",
-        "the result length="+this.procResult.length, this.noptions );
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+
-          ": setting response to the editor...");
-      this.editorHolder.editor.session.setValue( this.procResult );
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+": calling syncTemplate ...");
-      this.templSyncer.syncTemplate('1');
-      if( this.utilSvc.getTracelvl() > 0 )
-        console.log( this.clName+": "+methName+": finished.");
-    },
-    error => {
-      console.log( this.clName+": "+methName+": subscribe Error:["+
-        JSON.stringify(error)+']');
-      this.procResult= JSON.stringify(error);
-      this.nService.error( "Getting Processing result",
-        " Error:["+JSON.stringify(error)+']', this.noptions);
-    });
-  }
-}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 54b9c1b..8959587 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -43,44 +43,31 @@
 import {ParamShareService} from './services/paramShare.service';
 import {TidyTableModule} from './modules/tidy-table/tidy-table.module';
 import {UtilityService} from './services/utilityService/utility.service';
-import {ProcOnSrvSideSvc} from './services/procOnSrvSide.service';
-
+import {VmFilteringPipe} from '../pipes/vm-filtering.pipe';
 import {SimpleNotificationsModule} from 'angular2-notifications';
 import { NgProgressModule } from 'ngx-progressbar';
 import {FormsModule} from '@angular/forms';
-import { VmFilteringPipe } from './pipes/vm-filtering.pipe';
-import {APIService} from './services/cdt.apicall'
-
 
 @NgModule({
     imports: [
         FormsModule,
-        CommonModule, HttpModule, RouterModule, TidyTableModule,
-       // HttpClient, HttpHeaders,
-        NgProgressModule, NgbModule, SimpleNotificationsModule.forRoot()],
+        CommonModule, HttpModule, RouterModule, TidyTableModule, NgProgressModule, NgbModule, SimpleNotificationsModule.forRoot()],
 
     declarations: [VmFilteringPipe,
+
         HelpComponent,
-        HeaderComponent, NavigationComponent, LogoutComponent, Collapse,
-        Dropdown, DropdownNotClosableZone, DropdownOpen, DropDownToggleDirective
+        HeaderComponent, NavigationComponent, LogoutComponent, Collapse, Dropdown, DropdownNotClosableZone, DropdownOpen, DropDownToggleDirective
     ],
-    exports: [
-      VmFilteringPipe, NgProgressModule, NgbModule, HelpComponent,
-      DropDownToggleDirective, HeaderComponent, NavigationComponent,
-      LogoutComponent, TidyTableModule, Collapse, Dropdown,
-      DropdownNotClosableZone, DropdownOpen
-    ]
+    exports: [VmFilteringPipe, NgProgressModule, NgbModule, HelpComponent, DropDownToggleDirective, HeaderComponent, NavigationComponent, LogoutComponent, TidyTableModule, Collapse, Dropdown, DropdownNotClosableZone, DropdownOpen]
 })
 export class SharedModule {
 
     static forRoot(): ModuleWithProviders {
         return {
             ngModule: SharedModule,
-            providers: [
-                HttpUtilService, EmitterService, NotificationService,
-                UtilityService,APIService, ProcOnSrvSideSvc,
-                ParamShareService, MappingEditorService
-            ]
+            providers: [HttpUtilService, EmitterService, NotificationService,
+                UtilityService,
+                ParamShareService, MappingEditorService]
         };
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/test/test.component.html b/src/app/test/test.component.html
index 26165d9..8147f05 100644
--- a/src/app/test/test.component.html
+++ b/src/app/test/test.component.html
@@ -61,13 +61,6 @@
             </div>
 
         </div>
-        <div class="row" style="padding: 10px 15px">
-                <div class="col-lg-3 col-sm-6 col-md-4 col-xs-12">
-                    <label>Force Flag  </label>
-                    <input [(ngModel)]="force" name="Force Flag" type="checkbox">
-                </div>
-        </div>
-
     </div>
 </div>
 <br>
@@ -126,9 +119,7 @@
     <div style="padding-left:60%;padding-bottom:0.5cm">
         <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!enableDownload" (click)="download()">Download Raw Request/Response
         </button>
-        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" [disabled]="!enableAbort" (click)="abortTest()">Abandon Test
-        </button>
-
+        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" [disabled]="!enableAbort" (click)="abortTest()">Abandon Test</button>    
     </div>
 </div>
 <br>
@@ -140,15 +131,14 @@
             <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-left: 25%">
                 <input placeholder="Request Id" [(ngModel)]="requestId" class="mdl-textfield__input" id="requestId" required name="requestId">
             </div><br/>
-            <button style="margin-left: 33%" type="submit" [disabled]="!enablePollButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary"
-                (click)=pollTestStatus()>Poll Test Status
+            <button style="margin-left: 30%" type="submit" [disabled]="!enablePollButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)=pollTestStatus()>Poll Test Status
             </button>
             <br/><br/>
             <div class="col-md-12">
-                <span style="margin-left: 11%"><b>POLL TEST STATUS RESPONSE</b></span>
+                <span style="margin-left: 18.5%"><b>POLL TEST STATUS RESPONSE</b></span>
             </div>
 
-            <div style="margin-left: 11%;height:150px;width:80%;border:solid 2px grey;overflow:scroll;overflow-x:hidden;overflow-y:hidden;">
+            <div style="margin-left: 18.5%;height:130px;width:60%;border:solid 2px grey;overflow:scroll;overflow-x:hidden;overflow-y:hidden;">
 
                 <div *ngIf="showStatusResponseDiv">
                     <div *ngIf="enableCounterDiv"><b>Poll test no {{pollCounter}}</b></div>
diff --git a/src/app/test/test.component.ts b/src/app/test/test.component.ts
index 347bde6..f3f6a94 100644
--- a/src/app/test/test.component.ts
+++ b/src/app/test/test.component.ts
@@ -25,7 +25,6 @@
 import { saveAs } from 'file-saver';
 import { Location } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NotificationService } from '.././shared/services/notification.service';
 import { ParamShareService } from '.././shared/services/paramShare.service';
 import { MappingEditorService } from '.././shared/services/mapping-editor.service';
 import { NotificationsService } from 'angular2-notifications';
@@ -62,7 +61,7 @@
     vnfcType: any;
     protocol: any;
     mode: any = 'NORMAL';
-    public force = 'TRUE';
+    force: any = 'True';
     ttl: any;
     public formattedNameValuePairs = {};
     public requestId = '';
@@ -88,11 +87,10 @@
     public apiRequest = '';
     public apiResponse = '';
     public statusResponse;
-    public appcTimestampResponse;
     public outputTimeStamp;
     public status;
     public statusReason;
-    public errorResponse;
+    public errorResponse; 
     public timer;
     public subscribe;
     public enableTestButton: boolean = false;
@@ -103,39 +101,30 @@
     public enableCounterDiv: boolean = false;
     public enableDownload: boolean = false;
     private userId = localStorage['userId'];
-    timeStampInt: number;
-    AppcTimeStampInt: number;
-    AppcTimeDiff: number;
-    isAppcTimestampReceived: boolean = false;
-
-    constructor (private location: Location, private activeRoutes: ActivatedRoute, private notificationService: NotificationService, private nService: NotificationsService, private router: Router, private paramShareService: ParamShareService, private mappingEditorService: MappingEditorService, private httpUtil: HttpUtilService,
-        private utiltiy: UtilityService, private ngProgress: NgProgress, private spinner: NgxSpinnerService) {
+    constructor (
+    private location: Location, 
+    private activeRoutes: ActivatedRoute,
+    private nService: NotificationsService, 
+    private router: Router, 
+    private paramShareService: ParamShareService, 
+    private mappingEditorService: MappingEditorService, 
+    private httpUtil: HttpUtilService,
+    private utiltiy: UtilityService, 
+    private ngProgress: NgProgress,
+    private spinner: NgxSpinnerService
+    ) {
 
     }
 
     ngOnInit() {
-        let timeStampI = new Date();
-        console.log("ngOnInit: local timeStamp:[" + timeStampI + "]");
-        let timeStampS = timeStampI.toISOString();
-        console.log("ngOnInit: local ISO timestamp:[" + timeStampS + "]");
-        //.. send HTTP request to APPC
-        this.getAppcTimestamp();
+
+
     }
 
 
-    /*public download() {
-      let stringData: any;
-      stringData = JSON.stringify(this.paramShareService.getSessionParamData());
-      let paramsKeyValueFromEditor: JSON;
-      paramsKeyValueFromEditor = JSON.parse(stringData);
-      let fileName = 'param_' + this.action + '_' + this.type + '_' + "0.0.1" + 'V';
-      this.JSONToCSVConvertor([paramsKeyValueFromEditor], fileName, true);
-
-    }*/
-
     public download() {
         if (this.apiRequest) {
-            var fileName = 'test_' + this.action + '_' + this.actionIdentifiers['vnf-id'] + '_request.json';
+            var fileName = 'test_' + this.action + '_' + this.actionIdentifiers['vnf-id'] + '_request';
             var theJSON = this.apiRequest;
             if (fileName != null || fileName != '') {
                 var blob = new Blob([theJSON], {
@@ -149,7 +138,7 @@
         }
 
         if (this.apiResponse) {
-            var fileName = 'test_' + this.action + '_' + this.actionIdentifiers['vnf-id'] + '_response.json';
+            var fileName = 'test_' + this.action + '_' + this.actionIdentifiers['vnf-id'] + '_response';
             var theJSON = this.apiResponse;
             if (fileName != null || fileName != '') {
                 var blob = new Blob([theJSON], {
@@ -168,7 +157,6 @@
         this.enableTestButton = true;
         this.enablePollButton = true;
         if (this.subscribe && this.subscribe != undefined) this.subscribe.unsubscribe();
-        this.apiResponse="Test has been abandoned and polling stopped";
         this.nService.info("Information", "Test has been abandoned and polling stopped");
     }
 
@@ -302,7 +290,7 @@
 
 
     constructTestPayload(listName2, listName3, key, value) {
-        if ((listName2 == undefined || listName2 == '') && (listName3 == undefined || listName3 == '')) {
+        if (listName2 == undefined && listName3 == undefined) {
             this.subPayload[key] = value;
         }
         if (listName2) {
@@ -317,7 +305,7 @@
             }
             else {
                 this.vnfcJson[key] = value;
-                this.vmJson['vnfc'] = [this.vnfcJson];
+                this.vmJson['vnfc'] = this.vnfcJson;
                 this.flag = 1;
             }
             if (this.vmJson) this.lastvmJson = this.vmJson;
@@ -329,22 +317,7 @@
     }
 
     constructRequest() {
-        this.timeStampInt = Date.now(); //.. milliseconds
-        let timeStamp;
-        console.log("constructRequest: isAppcTimestampReceived:" +
-            (this.isAppcTimestampReceived ? "true" : "false"));
-        if (this.isAppcTimestampReceived) {
-            console.log("constructRequest: AppcTimeDiff:[" + this.AppcTimeDiff + "]");
-            this.timeStampInt += this.AppcTimeDiff;
-            timeStamp = new Date(this.timeStampInt).toISOString();
-            console.log("constructRequest: got timeStamp from APPC:[" + timeStamp + "]");
-        }
-        else { //.. still not received
-            console.log('constructRequest: Appc Timestamp is not ready (use local)');
-            this.timeStampInt -= 100000;
-            timeStamp = new Date(this.timeStampInt).toISOString();
-        };
-        console.log('constructRequest: timeStamp:[' + timeStamp + ']');
+        let timeStamp = new Date().toISOString();
         let reqId;
         this.requestId = reqId = new Date().getTime().toString();
         let data = {
@@ -357,7 +330,7 @@
                     'sub-request-id': this.requestId,
                     'flags': {
                         'mode': 'NORMAL',
-                        'force': this.force.toString().toUpperCase(),
+                        'force': 'TRUE',
                         'ttl': 3600
                     }
                 },
@@ -366,15 +339,6 @@
                 'payload': JSON.stringify(this.payload)
             }
         };
-        if (this.action == 'Unlock') {
-            let payload = JSON.parse(data.input['payload']);
-            data.input['common-header']['request-id'] = payload['request-id'];
-            data.input['common-header']['sub-request-id'] = payload['request-id'];
-        }
-
-        if(this.action == 'Unlock' || this.action == 'Lock' || this.action == 'CheckLock') {
-            delete data.input['payload'];
-        }
 
         return data;
     }
@@ -384,20 +348,13 @@
         this.enableTestButton = false;
         this.enablePollButton = false;
         this.timer = Observable.interval(10000);
-        if(this.action == 'Unlock' || this.action == 'Lock' || this.action == 'CheckLock') {
-            this.enablePollButton = true;
-            this.enableBrowse = true;
-            this.enableTestButton = true;
-            this.requestId = '';
-        } else {
-            this.subscribe = this.timer.subscribe((t) => this.pollTestStatus());
-        }
+        this.subscribe = this.timer.subscribe((t) => this.pollTestStatus());
         this.ngProgress.start();
         this.apiRequest = JSON.stringify(this.constructRequest());
 
         this.httpUtil.post(
             {
-                url: environment.testVnf + "?urlAction=" + this.getUrlEndPoint(this.action),
+                url: environment.testVnf + "?urlAction=" + this.getUrlEndPoint(this.action.toLowerCase()),
                 data: this.apiRequest
             })
             .subscribe(resp => {
@@ -408,11 +365,10 @@
             },
                 error => {
                     this.nService.error('Error', 'Error in connecting to APPC Server');
-                    // this.enableBrowse = true;
+                    this.enableBrowse = true;
                     this.enableTestButton = true;
                     this.enablePollButton = true;
                     this.enableCounterDiv = false;
-                    this.enableBrowse = true;
                     if (this.subscribe && this.subscribe != undefined) this.subscribe.unsubscribe();
 
                 });
@@ -422,98 +378,10 @@
         }, 3500);
     }
 
-    getAppcTimestamp() {
-        this.timeStampInt = Date.now(); //.. milliseconds
-        console.log("getAppcTimestamp: timeStampInt:[" + this.timeStampInt + "]");
-        let timeStampP = new Date(this.timeStampInt).toISOString();
-        console.log("getAppcTimestamp: from int timestamp:[" + timeStampP + "]");
-        this.isAppcTimestampReceived = false;
-        let reqId = new Date().getTime().toString();
-        try {
-            let data = {
-                'input': {
-                    'design-request': {
-                        'request-id': reqId,
-                        'action': 'getAppcTimestampUTC',
-                        'payload': '{}'
-                    }
-                }
-            };
-            console.log('getAppcTimestamp: sending httpUtil.post...');
-            this.httpUtil.post(
-                {
-                    url: environment.getDesigns, data: data
-                })
-                .subscribe(resp => {
-                    this.appcTimestampResponse = resp;
-                    // this.appcTimestampResponse = JSON.stringify(resp);
-                    console.log('appcTimestampResponse:[' + resp + ']');
-                    this.parseAppcTimestamp(this.appcTimestampResponse);
-                });
-        }
-        catch (e) {
-            this.nService.warn('status',
-                'Error while retrieving APPC Timestamp(using local by default)!');
-        }
-    }
-
-    parseAppcTimestamp(tstampStr: string) {
-        //.. parse the response to get timestamp as milliseconds
-        // input format: YYYY-MM-DDTHH:mm:ss.sssZ (24 chars)
-        var rexp =
-            new RegExp(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})\.(\d{3})Z/);
-        var mresult = rexp.exec(tstampStr);
-        if (mresult[0]) {
-            console.log("parseAppcTimestamp: response format is OK...");
-            var aYearS = mresult[1];
-            var aYear = parseInt(aYearS, 10);
-            var aMonS = mresult[2];
-            var aMon = parseInt(aMonS, 10) - 1;
-            var aDayS = mresult[3];
-            var aDay = parseInt(aDayS, 10);
-            var aHrS = mresult[4];
-            var aHr = parseInt(aHrS, 10);
-            var aMntS = mresult[5];
-            var aMnt = parseInt(aMntS, 10);
-            var aSecS = mresult[6];
-            var aSec = parseInt(aSecS, 10);
-            var aMsecS = mresult[7];
-            var aMsec = parseInt(aMsecS, 10);
-            this.AppcTimeStampInt =
-                Date.UTC(aYear, aMon, aDay, aHr, aMnt, aSec, aMsec);
-            console.log(
-                "parseAppcTimestamp: AppcTimeStampInt:[" + this.AppcTimeStampInt + "]");
-            let timeStampP = new Date(this.AppcTimeStampInt).toISOString();
-            console.log("parseAppcTimestamp: from int timestamp:[" + timeStampP + "]");
-            //.. AppcTimeDiff - time difference in milliseconds
-            this.AppcTimeDiff = this.AppcTimeStampInt - this.timeStampInt;
-            console.log("parseAppcTimestamp: AppcTimeDiff:[" + this.AppcTimeDiff + "]");
-            this.isAppcTimestampReceived = true;
-        }
-        else {
-            throw new Error(
-                'The received APPC Timestamp is not matching expected format: YYYY-MM-DDTHH:mm:ss.sssZ !');
-        }
-    }
 
     pollTestStatus() {
         if (this.requestId && this.actionIdentifiers['vnf-id']) {
-            // console.log("payload==" + JSON.stringify(this.payload))
-            this.timeStampInt = Date.now(); //.. milliseconds
-            let timeStamp;
-            console.log("pollTestStatus: isAppcTimestampReceived:" +
-                (this.isAppcTimestampReceived ? "true" : "false"));
-            if (this.isAppcTimestampReceived) {
-                this.timeStampInt += this.AppcTimeDiff;
-                timeStamp = new Date(this.timeStampInt).toISOString();
-                console.log("pollTestStatus: got timeStamp from APPC:[" + timeStamp + "]");
-            }
-            else { //.. still not received
-                console.log('pollTestStatus: Appc Timestamp is not ready (use local)');
-                this.timeStampInt -= 100000;
-                timeStamp = new Date(this.timeStampInt).toISOString();
-            };
-            console.log("pollTestStatus: timestamp:[" + timeStamp + "]");
+            let timeStamp = new Date().toISOString();
             let reqId = new Date().getTime().toString();
             let data = {
                 'input': {
@@ -525,7 +393,7 @@
                         'sub-request-id': reqId,
                         'flags': {
                             'mode': 'NORMAL',
-                            'force': this.force.toString().toUpperCase(),
+                            'force': 'TRUE',
                             'ttl': 3600
                         }
                     },
@@ -567,14 +435,10 @@
                         if (status.toUpperCase() === 'SUCCESS' || status.toUpperCase() === 'SUCCESSFUL') {
                             if (this.subscribe && this.subscribe != undefined) this.subscribe.unsubscribe();
                             this.enablePollButton = true;
-                            this.enableBrowse = true;
-                            this.enableTestButton = true;
                         }
                         if (status.toUpperCase() === 'FAILED') {
                             if (this.subscribe && this.subscribe != undefined) this.subscribe.unsubscribe();
                             this.enablePollButton = true;
-                            this.enableBrowse = true;
-                            this.enableTestButton = true;
                         }
                     }
                     else {
@@ -592,14 +456,11 @@
                         this.showStatusResponseDiv = false;
                         this.errorResponse = 'Error Connecting to APPC server';
                         this.enableCounterDiv = false;
-                        this.enableBrowse = true;
-                        this.enableTestButton = true;
                         if (this.subscribe && this.subscribe != undefined) {
                             this.subscribe.unsubscribe();
                             this.enablePollButton = true;
                         }
                     });
-
         }
         else {
             this.nService.error("Error", "Please enter vnf Id & request Id");
@@ -608,16 +469,43 @@
     }
 
     getUrlEndPoint(action) {
-        let charArray = action.split('');
-        let url = '';
-        for (let i = 0; i < charArray.length; i++) {
-            if (charArray[i] == charArray[i].toUpperCase() && i != 0) {
-                url = url + '-';
-            }
-            url = url + charArray[i];
+        switch (action) {
+            case 'configmodify':
+                return 'config-modify';
+            case 'configbackup':
+                return 'config-backup';
+            case 'configrestore':
+                return 'config-restore';
+            case 'healthcheck':
+                return 'health-check';
+            case 'quiescetraffic':
+                return 'quiesce-traffic';
+            case 'resumetraffic':
+                return 'resume-traffic';
+            case 'distributetraffic':
+                return 'distribute-traffic';
+            case 'startapplication':
+                return 'start-application';
+            case 'stopapplication':
+                return 'stop-application';
+            case 'upgradebackout':
+                return 'upgrade-backout';
+            case 'upgradepostcheck':
+                return 'upgrade-post-check';
+            case 'upgradeprecheck':
+                return 'upgrade-pre-check';
+            case 'upgradesoftware':
+                return 'upgrade-software';
+            case 'upgradebackup':
+                return 'upgrade-backup';
+            case 'attachvolume':
+                return 'attach-volume';
+            case 'detachvolume':
+                return 'detach-volume';
+            default:
+                return action.toLowerCase();
         }
 
-        return url.toLowerCase();
     }
 
     setValuesOnFileUploadFailure() {        
diff --git a/src/app/vnfs/LoginGuardService/Login-guard-service.ts b/src/app/vnfs/LoginGuardService/Login-guard-service.ts
index 1e7e752..ddec7b5 100644
--- a/src/app/vnfs/LoginGuardService/Login-guard-service.ts
+++ b/src/app/vnfs/LoginGuardService/Login-guard-service.ts
@@ -24,13 +24,11 @@
 import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
 
 import {Injectable} from '@angular/core';
-import {MappingEditorService} from '../../shared/services/mapping-editor.service';
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Injectable()
 export class LoginGuardService implements CanActivate {
 
-    constructor(private ngbModal: NgbModal, private mapService: MappingEditorService, private router: Router) {
+    constructor(private router: Router) {
     }
 
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
@@ -44,4 +42,4 @@
         }
 
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/vnfs/auth-guard-modal/auth-guard-modal.ts b/src/app/vnfs/auth-guard-modal/auth-guard-modal.ts
index 31c748b..ec03978 100644
--- a/src/app/vnfs/auth-guard-modal/auth-guard-modal.ts
+++ b/src/app/vnfs/auth-guard-modal/auth-guard-modal.ts
@@ -23,7 +23,6 @@
 ============LICENSE_END============================================ */
 
 import {Component, OnInit} from '@angular/core';
-import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-auth-guard-modal',
@@ -32,7 +31,7 @@
 })
 export class AuthGuardModalComponent implements OnInit {
 
-    constructor(public activeModal: NgbActiveModal) {
+    constructor() {
     }
 
     ngOnInit() {
diff --git a/src/app/vnfs/build-artifacts/build-artifacts.component.html b/src/app/vnfs/build-artifacts/build-artifacts.component.html
index fad94cb..33d8064 100644
--- a/src/app/vnfs/build-artifacts/build-artifacts.component.html
+++ b/src/app/vnfs/build-artifacts/build-artifacts.component.html
@@ -23,11 +23,9 @@
 <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 fb1e6fc..d95b478 100644
--- a/src/app/vnfs/build-artifacts/build-artifacts.component.ts
+++ b/src/app/vnfs/build-artifacts/build-artifacts.component.ts
@@ -28,7 +28,7 @@
 import { NotificationsService } from 'angular2-notifications';
 import { appConstants } from '../../../constants/app-constants';
 
-export const ACTIONS_REQUIRED_DROPDOWN = ['Configure', 'ConfigModify', 'ConfigScaleOut']
+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 +37,7 @@
     public refDataRequiredFiels: boolean = false;
     public refList;
 
-    constructor (private router: Router, private notificationsService: NotificationsService) {
+    constructor(private router: Router, private notificationsService: NotificationsService) {
     }
 
     ngOnInit() {
@@ -70,31 +70,33 @@
         }
     }
 
-    public getRefData(referenceList, reqObj?) {
+    public getRefData( referenceList, reqObj?) {
+        console.log( "getRefData: start: referenceList.action:["+
+          referenceList.action+"]");
         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') {
-                //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;
+        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;
             }
-            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 2bd1bc9..14af6ab 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,8 +31,6 @@
 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');
 
@@ -40,7 +38,7 @@
 
 @Injectable()
 export class ParameterDefinitionService {
-    clName= "ParameterDefinitionSvc";
+
     public vnfcTypeData: string = '';
     public selectedUploadType: string;
     @ViewChild(ModalComponent) modalComponent: ModalComponent;
@@ -65,12 +63,9 @@
     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) {
     }
 
@@ -84,8 +79,6 @@
         this.protocol = protocol;
         this.action = action;
         this.artifact_fileName = artifactName;
-        this.appDataObject = this.mappingEditorService.appDataObject;
-        this.downloadDataObject = this.mappingEditorService.downloadDataObject;
     }
 
     public afterInit(artifactName, displayParamObjects) {
@@ -96,8 +89,7 @@
     /* Saves pd to appc */
     public sendPD(yamlString: String) {
         let result: any;
-        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 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': {
@@ -106,7 +98,7 @@
                     'payload': payload
                 }
             }
-        };*/
+        };
         this.appDataObject.pd = input;
     }
 
@@ -122,78 +114,26 @@
         return result;
     }
 
-    //.. 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') {
+    //========================== 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') {
                 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============================================
@@ -202,7 +142,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;
@@ -212,6 +152,7 @@
         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++) {
@@ -259,8 +200,8 @@
             }
         }
     }
-    //========================== End of formatKeys() Method============================================
 
+    //========================== 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++) {
@@ -328,7 +269,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;
@@ -364,22 +305,14 @@
         return result;
     }
 
-    //========================== 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 prepareFileName(): any {
+        let fileNameObject: any = this.mappingEditorService.latestAction;
+        this.appDataObject = this.mappingEditorService.appDataObject;
+        this.downloadDataObject = this.mappingEditorService.downloadDataObject;
+        return fileNameObject;
     }
 
-
-    
     public destroy(displayParamObjects) {
         this.displayParamObjects = displayParamObjects;
         if (this.mappingEditorService.referenceNameObjects) {
@@ -405,8 +338,6 @@
             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',
@@ -431,14 +362,7 @@
                 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]);
@@ -486,18 +410,7 @@
                 }
                 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 6cae750..799627b 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
@@ -40,11 +40,10 @@
                 <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}}" />
@@ -143,7 +142,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 6ba8e52..f7d1837 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
@@ -38,7 +38,6 @@
 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');
 
@@ -51,11 +50,9 @@
     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;
@@ -109,12 +106,11 @@
     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,
@@ -126,26 +122,33 @@
     }
 
     ngOnInit() {
-      var methName= "ngOnInit";
-        this.selectedActionReference = this.mappingEditorService.newObject;
+        this.selectedActionReference = this.parameterDefinitionService.prepareFileName();
         if (this.selectedActionReference && this.selectedActionReference != undefined) {
-          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+"]");
+
+            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;
+                    }
+                }
             }
-            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 {
@@ -162,26 +165,22 @@
                 'scopeType': ''
             };
         }
-        //let path = this.location.path
-        /* this.activeRoutes.url.subscribe(UrlSegment => {
-             this.actionType = UrlSegment[0].path
-         })
-         */
+
+        this.template_id = this.mappingEditorService.identifier;
     }
 
     ngAfterViewInit() {
-        if( this.mappingEditorService.latestAction) {
+        if (this.mappingEditorService.latestAction) {
             this.displayParamObjects = [];
             this.modelParamDefinitionObjects = [];
-            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);
+            if (this.paramShareService.getSessionParamData() != undefined && this.paramShareService.getSessionParamData().length > 0) {
+                this.getPDFromSession();
             } else {
-              this.getPD();
+                this.ngProgress.start();
+                this.getPD();
+                setTimeout(() => {
+                this.ngProgress.done();
+            }, 3500);
             }
         } else {
             this.nService.error(appConstants.errors.error, appConstants.errors["noAction&VNFTypeInRDscreenError"]);
@@ -192,20 +191,19 @@
 
     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;
-        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];
+        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];
                 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));
@@ -214,19 +212,20 @@
 
     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;
     }
@@ -267,10 +266,6 @@
             // 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);
@@ -299,7 +294,8 @@
         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++) {
@@ -321,7 +317,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;
@@ -344,7 +340,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 a795f2a..1b4c470 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
@@ -134,7 +134,4 @@
 .file {
     visibility: hidden;
     position: absolute;
-}
-
-.col-md-1point5 {width: 12%}
-.col-md-2point5 {width: 21%;}
+}
\ No newline at end of file
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 65847e1..564cd32 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,19 +44,18 @@
                     <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')">
-                    <label>VNFC Type</label>  <label style="font-size:12px;">(NFC Function)</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>
                     <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,userForm)" [ngModel]="vnfcIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                    <select *ngIf="isVnfcTypeList" class="form-control" id="vnfcType" (ngModelChange)="vnfcChanged($event,content,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')">
+                <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>
@@ -73,19 +72,16 @@
                         <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)="identifierModal.open()">Assign New Template Identifier</a></span>
+                    (click)="showIdentifier()">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)">
@@ -141,7 +137,6 @@
                                     <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
@@ -155,15 +150,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 (NFC Function)</label>
+                                    <label style="font-size:12px;">VNFC Type</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-3 col-sm-6 col-md-3 col-xs-12">
-                                    <label style="font-size:12px">VNFC Function Code (NFC Naming Code)</label>
+                                <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
+                                    <label style="font-size:12px">VNFC Function 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 OAM VIP</label>
+                                    <label style="font-size:12px;">IPAddress V4</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>
@@ -179,7 +174,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-1 col-sm-6 col-md-1 col-xs-12">
+                                <div class="col-lg-2 col-sm-6 col-md-2 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>
@@ -203,29 +198,29 @@
                                 </div>
                             </div>
                             <div *ngIf="referenceDataObject.vm?.length>0">
-                                <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 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 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-md-1point5">
+                                            <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <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  (NFC Function)</label>
+                                                <label style="font-size:12px;">VNFC Type</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-md-2point5">
-                                                <label style="font-size:12px;">VNFC Function Code (NFC Naming Code)</label>
+                                            <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
+                                                <label style="font-size:12px;">VNFC Function 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 OAM VIP</label>
+                                                <label style="font-size:12px;">IPAddress V4</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}}
@@ -322,7 +317,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">
@@ -333,20 +328,45 @@
     </modal-footer>
 </modal>
 
-<!-- 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 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>
         </div>
-    </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>
+    </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>
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 0a3c090..17a23e2 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,7 +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);
 you may not use this software except in compliance with the License.
@@ -16,21 +17,18 @@
 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 * 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';
@@ -38,18 +36,16 @@
 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 { APIService } from "../../../shared/services/cdt.apicall";
-
+import { appConstants } from '../../../../constants/app-constants';
 // 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',
@@ -58,7 +54,8 @@
     providers: [ReferenceDataFormUtil]
 })
 export class ReferenceDataformComponent implements OnInit {
-    public classNm= "ReferenceDataformComp";
+    public classNm = "ReferenceDataformCompon";
+    @ViewChild(ModalComponent) modalComponent: ModalComponent;
     public showUploadStatus: boolean = false;
     public fileUploaded: boolean = false;
     public uploadedData: any;
@@ -89,8 +86,8 @@
     errorMessage = '';
     invalid = true;
     fileName: any;
-    vnfcIdentifier;
-    oldVnfcIdentifier: any
+    vnfcIdentifier = '';
+    oldVnfcIdentifier: any;
     public uploadFileName: any;
     public addVmClickedFlag: boolean = false;
     public getExcelUploadStatus: boolean = false;
@@ -110,13 +107,13 @@
     identifierDrpValues: any = [];
     //settings for the notifications.
     options = {
-        timeOut: 4500,
+        timeOut: 1000,
         showProgressBar: true,
         pauseOnHover: true,
         clickToClose: true,
         maxLength: 200
     };
-    //initializing this object to contain all the parameters to be captured later
+    //initializing this object to contain all the parameters to be captured
     public referenceDataObject = {
         action: '',
         'action-level': 'vnf',
@@ -129,12 +126,31 @@
         'artifact-list': []
     };
     public refernceScopeObj = { sourceType: '', from: '', to: '' };
-    public actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', '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 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 ipAddressBoolean = ['', 'Y', 'N'];
     public Sample: any = {
         'vnfc-instance': '1',
@@ -170,64 +186,49 @@
     public firstArrayElement = [];
     public remUploadedDataArray = [];
     isConfigScaleOut = false
-    isConfigOrConfigModify = false
-    configScaleOutExist: boolean
+    isConfigureAction = false;
+    configScaleOutExist: boolean = true;
     displayVnfc = 'false';
     isVnfcType: boolean;
     isVnfcTypeList: boolean = true;
-    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;
+    public actionList = {
+        "ConfigScaleOut": "ConfigScaleOut",
+        "Configure": "Configure"
+    };
+    public versionNoForApiCall = "0.0.1";
     private displayVMBlock: boolean = true;
 
-    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() );
+    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.");
     }
 
     ngOnInit() {
-      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;
+        let methName = "ngOnInit";
+        if (this.utilityService.getTracelvl() > 0)
+            console.log(this.classNm + ": " + methName + ": start.");
         this.displayVnfc = sessionStorage.getItem("vnfcSelectionFlag");
         if (this.configScaleOutExist) {
-            this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions', 'ConfigScaleOut'];
+            this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'DistributeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions', 'ConfigScaleOut'];
         } else {
-            this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions'];
+            this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'DistributeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions'];
         }
         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',
@@ -239,57 +240,40 @@
             '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 (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.");
+        if (cacheData != undefined && cacheData != null && cacheData.length > 0) {
+            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 = [];
@@ -297,34 +281,23 @@
         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+": tempAllData:["+
-            JSON.stringify(this.tempAllData)+"]");
-        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 + ": finish.");
     }
 
-    //setting the value to display or hide the template identifier dropdown in the screen
     toggleIdentifier(data) {
         if (data == 'ConfigScaleOut') {
             this.isConfigScaleOut = true
@@ -336,42 +309,64 @@
 
     //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();
-            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.
+            this.httpUtils.post({
+                url: environment.getDesigns,
+                data: data
+            }).subscribe(resp => {
+                if (this.utilityService.getTracelvl() > 1)
+                    console.log(this.classNm + ": getArtifact: got response ...");
                 if (resp.output.data.block != undefined) {
-                    this.nService.success('Status', 'data fetched ');
+                    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);
                     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 == 'ConfigScaleOut') {
-                        this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
+                    if (this.referenceDataObject.action == appConstants.Actions.configScaleOut) {
+                        this.groupAnotationType = [appConstants.groupAnotationType.blank, appConstants.groupAnotationType.firstVnfcName, appConstants.groupAnotationType.fixedValue, appConstants.groupAnotationType.relativeValue, appConstants.groupAnotationType.existingGroupName];
                     }
-                    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;
-
-                    this.processReferenceDataAfterRetrieval();
+                    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.getArtifactsOpenStack();
                 } else {
                     this.nService.success('Status', 'Sorry !!! I dont have any artifact Named : ' + (JSON.parse(sessionStorage.getItem('updateParams')))['artifact-name']);
@@ -388,19 +383,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
@@ -411,20 +406,20 @@
             this.isVnfcType = false
             this.displayVnfc = 'true'
             this.isVnfcTypeList = true
-            if(!this.mappingEditorService.newObject || !this.mappingEditorService.newObject.vnfc) {
+            if (!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;
             }
-            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.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
@@ -439,14 +434,17 @@
             this.displayVnfc = 'false'
             this.isVnfcTypeList = false
         }
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log(this.classNm+": displayHideVnfc: finish. isVnfcType:["+
-          this.isVnfcType+" displayVnfc:["+this.displayVnfc+"] isVnfcTypeList:["+
-          this.isVnfcTypeList+"]");
+        if (this.utilityService.getTracelvl() > 1)
+            console.log(this.classNm + ": displayHideVnfc: finish. isVnfcType:[" +
+                this.isVnfcType + " displayVnfc:[" + this.displayVnfc + "] isVnfcTypeList:[" +
+                this.isVnfcTypeList + "]");
     }
 
-    //reinitializing the required values. when changing to template or pd sending the values to mapping service
+    //reinitializing the required values
     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);
@@ -455,7 +453,7 @@
         this.firstArrayElement = [];
         this.uploadFileName = '';
     }
-    // vaidating the number
+
     numberValidation(event: any) {
         if (this.numberTest.test(event) && event != 0) {
             this.numberOfVmTest = true;
@@ -466,8 +464,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);
         }
@@ -475,10 +473,8 @@
             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,
@@ -489,10 +485,11 @@
         };
         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;
@@ -511,7 +508,6 @@
         }
     }
 
-
     //to remove the VM's created by the user
     removeFeature(vmNumber: any, index: any, templateId) {
         if (this.referenceDataObject.action == "Configure") {
@@ -520,8 +516,6 @@
                 if (arrIndex >= vmNumber) {
                     obj["vm-instance"] = obj["vm-instance"] - 1
                 }
-                // obj["vm-instance"] = arrIndex+1
-
             })
         } else {
             let data = this.referenceDataObject.vm.filter(obj => {
@@ -542,7 +536,6 @@
         }
 
     }
-    //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
@@ -551,50 +544,19 @@
 
     }
 
-    //add new VM's to the configure and configmodify. 
+    //add new VM's to the configure
     addVms() {
         let arr = [];
-
         let mberOFVm = Number(this.refernceScopeObj.from);
-        let key
-        if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') {
-            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') {
-            let existingVmsLength = this.referenceDataObject.vm.map(obj => {
-                if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') {
-                    return obj["vnfcType-id"] == this.templateIdentifier
-                } else if (this.referenceDataObject.action == 'ConfigScaleOut') {
-                    return obj["template-id"] == this.templateIdentifier
-                }
+        if (this.referenceDataObject.action == 'ConfigScaleOut') {
+            let existingVmsLength = this.referenceDataObject.vm.filter(obj => {
+                return obj['template-id'] == this.templateIdentifier
             }).length;
-            //mberOFVm = existingVmsLength + mberOFVm;
+            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') {
-                identifierValue = this.vnfcIdentifier
-            }
+            for (var i = (existingVmsLength); i < mberOFVm; i++) {
 
-            for (var i = 0; i < mberOFVm; i++) {
-                if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') {
-
-                    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)] });
-                    }
-
-                }
-
+                this.referenceDataObject.vm.push({ 'template-id': this.templateIdentifier, 'vm-instance': (existingVmsLength + index + 1), vnfc: [Object.assign({}, this.Sample)] });
                 index++;
             }
 
@@ -611,43 +573,25 @@
         }
     }
 
-    //preparing reference obj with required business use cases
+    //Reference object to create reference data
     prepareReferenceObject(isSaving?: any) {
-      let methName= "prepareReferenceObject";
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( this.classNm+": "+methName+": start: isSaving:["+
-          isSaving+"]");
+        if (this.utilityService.getTracelvl() > 0)
+            console.log(this.classNm + ": prepareReferenceObject: start.");
         let scopeName = this.resetParamsOnVnfcType();
-        let extension = this.referenceDataFormUtil.decideExtension(this.referenceDataObject);
+        let extension = this.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;
         }
-        else{
-            this.referenceDataObject['firstRowVmSpreadSheet']=undefined;
-        }
-        //ditaching the object from the form and processing pfurther
+        //detaching the object from the form and processing further
         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());
@@ -657,65 +601,74 @@
         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) {
-            throw new Error('Cannot upload multiple files on the entry');
+            console.log(this.classNm + ": upload: Error: got no file !");
+            throw new Error(appConstants.errors.multipleFileUploadError);
         }
+        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;
-                for (var i = 0; i < arrData[0].length; i++) {
-                    this.firstArrayElement.push(arrData[0][i].replace(/[\n\r]+/g, ''))
-                }
+                this.firstArrayElement = arrData[0];
                 var remUploadedDataArray = arrData;
                 remUploadedDataArray.shift();
                 this.remUploadedDataArray = remUploadedDataArray;
                 if (arrData != null) {
                     this.getExcelUploadStatus = true;
-                    this.nService.success('Success', 'Vm capabilities data uploaded successfully');
+                    this.nService.success(appConstants.notifications.titles.success, appConstants.messages.vmDataUploadSuccess);
 
                 }
                 else {
-                    this.nService.success('Error', 'Empty Vm capabilities file uploaded');
+                    this.nService.success(appConstants.notifications.titles.error, appConstants.messages.emptyVmUpload);
                 }
             };
             reader.readAsBinaryString(target.files[0]);
         }
         else {
-            this.nService.error('Error', 'Incorrect VM capabilities file uploaded');
+            this.nService.error(appConstants.notifications.titles.error, appConstants.messages.incorrectVmUpload);
         }
 
     }
 
     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];
@@ -723,7 +676,6 @@
                 if (data[j] != undefined) {
                     if (data[j].toUpperCase() === 'Y') {
                         vnfcFuncCodeArray.push(this.firstArrayElement[j]);
-                        //vnfcFuncCodeArray.push({name:this.firstArrayElement[j]});
                     }
                 }
             }
@@ -734,7 +686,7 @@
                     'action-level': 'vm',
                     'scope': {
                         'vnf-type': this.referenceDataObject['scope']['vnf-type'], //need to confirm what should be this value
-                        'vnfc-type-list': null
+                        'vnfc-type': null
                     },
                     'vnfc-function-code-list': vnfcFuncCodeArray,
                     'template': 'N',
@@ -747,76 +699,88 @@
         }
     }
 
-    //download the templae pd and reference file with all the actions added.
+    //download template
     save(form: any, isValid: boolean) {
-        // will show error message
-        this.showValidationErrors(this.referenceDataObject);
+        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;
+        }
 
         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.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);
+            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)
         }
     }
 
-  /*  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;
-    }*/
+    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)
+    }
+
     // save the values to the cache, on action change without download
-    validateDataAndSaveToAppc( valid, form, event) {
-      let methName= "validateDataAndSaveToAppc";
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( this.classNm+": "+methName+": start: valid:["+valid+"]");
+    validateDataAndSaveToAppc(valid, form, event) {
+        if (this.utilityService.getTracelvl() > 0)
+            console.log(this.classNm + ": validateDataAndSaveToAppc: 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) {
@@ -846,18 +810,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';
-        /*var tempAllData=this.removeParamFileNameBeforeSave(this.tempAllData);
-        this.tempAllData=tempAllData;*/
-        this.saveReferenceDataToAppc(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
+        this.saveReferenceDataToAppc(
+            JSON.stringify({ reference_data: this.tempAllData }), this.referenceDataObject.scope['vnf-type'], fileName);
 
         var templateData = JSON.stringify(this.appData.template.templateData);
         var nameValueData = JSON.stringify(this.appData.template.nameValueData);
@@ -869,6 +833,8 @@
 
     // 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 => {
@@ -880,12 +846,14 @@
         }
     }
 
-    //preparig and send the data to the API.
-    saveReferenceDataToAppc(artifactData, dataJson, fileName) {
+    //.. 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 + "]");
         let data = [];
         let slashedPayload = this.referenceDataFormUtil.appendSlashes(artifactData);
-
-        let payload = this.utilityService.createPayLoadForSave("reference_data", dataJson['scope']['vnf-type'], "AllAction", fileName, this.versionNoForApiCall, slashedPayload);
+        let payload = this.utilityService.createPayLoadForSave("reference_data", vnf_type, "AllAction", fileName, this.versionNoForApiCall, slashedPayload);
         this.ngProgress.start();
         this.httpUtils.post({
             url: environment.getDesigns,
@@ -909,8 +877,9 @@
             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;
@@ -919,11 +888,22 @@
         }
     }
 
+    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;
@@ -945,7 +925,6 @@
                                 return;
                             }
                         }
-
                         this.displayVnfc = 'false';
                         this.isVnfcType = false;
                         this.isVnfcTypeList = false;
@@ -955,37 +934,55 @@
                                 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));
-                        //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
-                        // }
+                        if (this.utilityService.getTracelvl() > 0)
+                            console.log(this.classNm + ": fileChange: read & parsed.");
                         this.notificationService.notifySuccessMessage('Reference Data file successfully uploaded..');
-                        this.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);
+                        }
+                        if (this.utilityService.getTracelvl() > 0)
+                            console.log(this.classNm + ": fileChange: " +
+                                "referenceDataObject.action:[" +
+                                this.referenceDataObject.action + "]");
                         this.toggleIdentifier(this.referenceDataObject.action)
-                        this.populateExistinAction(this.referenceDataObject.action)
                         this.configDrp(this.referenceDataObject.action)
-
-
-                        this.processReferenceDataAfterRetrieval();
-
+                        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.getArtifactsOpenStack();
                         if (this.referenceDataObject.template == null) {
                             this.referenceDataObject.template = 'Y';
@@ -993,37 +990,27 @@
                         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('Error', 'Incorrect file format');
+                        this.nService.error(appConstants.notifications.titles.error, appConstants.messages.incorrectFileFormat);
                     }
                 }
                 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
@@ -1037,8 +1024,9 @@
     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': '',
@@ -1061,9 +1049,10 @@
     //         this.referenceDataObject.scope['vnfc-type'] = '';
     //     }
     // }
-    // resetting the form
+
     resetForm() {
-        console.log( this.classNm+": resetForm: start.");
+        if (this.utilityService.getTracelvl() > 0)
+            console.log(this.classNm + ": resetForm: start.");
         this.referenceDataObject['action-level'] = 'vnf';
         this.referenceDataObject.template = 'Y';
         this.referenceDataObject['device-protocol'] = '';
@@ -1075,12 +1064,8 @@
 
     // this method gets called with the action as parameter and the respective action details are fetched and assigned to the current page
     populateExistinAction(data) {
-      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)+"]");
+        if (this.utilityService.getTracelvl() > 0)
+            console.log(this.classNm + ": populateExistinAction: start.");
         let existAction = this.tempAllData.findIndex(obj => {
             return obj.action == data;
         });
@@ -1091,11 +1076,12 @@
             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 {
-            console.log( this.classNm+": populateExistinAction: action not found");
+            if (this.utilityService.getTracelvl() > 0)
+                console.log(this.classNm + ": populateExistinAction: action not found");
             this.resetForm();
             this.referenceDataObject.action = data;
         }
@@ -1108,6 +1094,7 @@
             case 'UpgradeBackout':
             case 'ResumeTraffic':
             case 'QuiesceTraffic':
+            case 'DistributeTraffic':
             case 'UpgradeBackup':
             case 'UpgradePostCheck':
             case 'UpgradePreCheck':
@@ -1133,38 +1120,38 @@
         }
     }
 
-    //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)+"]");
+    //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 + "]");
         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;
-          if( this.utilityService.getTracelvl() > 0 )
-            console.log( this.classNm+": "+methName+
-              ": userForm valid and oldAction defined");
+            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
-                    if(isConfirmed) {
+                    console.log(this.classNm + ": " + methName + ":  isConfirmed:[" +
+                        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') {
 
@@ -1186,6 +1173,8 @@
                         // 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 + '';
@@ -1194,27 +1183,27 @@
                         this.refernceScopeObj.from = '';
                     }
 
-                    if (this.referenceDataObject.action === 'Configure' || this.referenceDataObject.action === 'ConfigModify') {
-                        this.isConfigOrConfigModify = true;
+                    if (this.referenceDataObject.action === 'Configure' || this.referenceDataObject.action === 'ConfigModify' || this.referenceDataObject.action === 'DistributeTraffic') {
+                        this.isConfigureAction = true;
                     } else {
-                        this.isConfigOrConfigModify = false;
+                        this.isConfigureAction = 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 + '';
@@ -1223,7 +1212,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);
@@ -1232,61 +1221,74 @@
                 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 = this.referencDataTab;
+            this.buildDesignComponent.tabs = [
+                {
+                    type: 'dropdown',
+                    name: 'Reference Data',
+                    url: 'references',
+                }];
         }
         else {
-            this.buildDesignComponent.tabs = this.allTabs;
+            this.buildDesignComponent.tabs = [
+                {
+                    name: 'Reference Data',
+                    url: 'references',
+                }, {
+                    name: 'Template',
+                    url: 'templates/myTemplates',
+                }, {
+                    name: 'Parameter Definition',
+                    url: 'parameterDefinitions/create'
+                }/*, {
+                    name: "Test",
+                    url: 'test',
+                }*/
+            ];
         }
-        if (data == 'Configure' || data == 'ConfigModify') {
+        if (data == 'Configure' || data == 'ConfigModify' || data == 'DistributeTraffic') {
             this.nonConfigureAction = false;
         } else {
             this.nonConfigureAction = true;
         }
     }
-    // removing and adding the url key based on the protocol selected
+
     deviceProtocolChange() {
-      let methName= "deviceProtocolChange";
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( this.classNm+": "+methName+": start.");
+        console.log(this.classNm + ": deviceProtocolChange: 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})
-        if( this.utilityService.getTracelvl() > 0 )
-          console.log( this.classNm+": "+methName+": tempAllData:["+
-            JSON.stringify(this.tempAllData)+"]");
+        this.buildDesignComponent.getRefData(
+            { ...this.referenceDataObject, displayVnfc: this.displayVnfc },
+            { reqField: this.templateIdentifier });
     }
 
     // used to call or trigger save object on template Identifier changes
     idChange(data, userForm) {
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( this.classNm+": idChange: start: data:["+data+"]");
+        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"
@@ -1294,95 +1296,78 @@
             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) {
-      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']+"]");
+    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'] + "]");
         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;
-      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+"]");
+        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 ((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 = '';
-                         //.. 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 );
-                     }
-                 });
+                // 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 {
             if (data != null) {
@@ -1391,9 +1376,8 @@
         }
     }
 
-    clearCache()
-    //needed for the the clearing template cache.
-    {
+    clearCache() {
+        console.log(this.classNm + ": clearCache: start.");
         // get the value and save the userid and persist it.
         this.clearTemplateCache();
         this.clearPdCache();
@@ -1414,6 +1398,74 @@
         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');
     }
@@ -1422,13 +1474,9 @@
         $('#excelInputFile').trigger('click');
     }
 
-    /* showIdentifier() {
-         $('#identifierModal').modal();
-     }
- 
-     showVnfcPopup() {
-         $('#vnfcModal').modal();
-     }*/
+    showIdentifier() {
+        $('#identifierModal').modal();
+    }
 
     addToIdentDrp() {
         if (!(this.referenceDataObject['template-id-list'])) {
@@ -1437,48 +1485,49 @@
         if (!(this.referenceDataObject['template-id-list'].indexOf(this.templateId.trim()) > -1)) {
             this.referenceDataObject['template-id-list'].push(this.templateId.trim());
         }
-
-        // Changing newVnfcType value to blank otherwise it will show previous value in text box of popup
-        this.templateId = ''
+        // Changing 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();
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log(this.classNm+
-          ": addVnfc: start: newVnfcTypeV:["+newVnfcTypeV+"]");
+        var newVnfcTypeV = this.newVnfcType.trim();
+        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 {
-            this.vnfcIdentifier = newVnfcTypeV;
+            //  this.vnfcIdentifier = newVnfcTypeV;
+        } else if (this.referenceDataObject.scope['vnfc-type-list'].length == 0) {
+            //  this.vnfcIdentifier = newVnfcTypeV;
         }
-        //this.referenceDataObject['vnfcIdentifier'] = this.vnfcIdentifier;
+        this.vnfcIdentifier = newVnfcTypeV;
+        console.log(this.classNm +
+            ": addVnfc: 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") {
+            if (obj.action == "Configure" || obj.action == "ConfigModify" || obj.action == "DistributeTraffic") {
                 obj.scope['vnfc-type-list'] = this.referenceDataObject.scope['vnfc-type-list']
             }
             this.resetArtifactList(obj);
         });
-        //this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
-      this.setVnfcTypeInSample( newVnfcTypeV );
-      let userForm = {valid: true};
-      this.vnfcChanged(this.newVnfcType, userForm)
+        console.log(this.classNm + ": addVnfc: scope vnfc-type:[" +
+            this.referenceDataObject.scope['vnfc-type'] + "]");
+        this.setVnfcTypeInSample(newVnfcTypeV);
         // 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'] = ""
@@ -1505,121 +1554,98 @@
     }
 
     resetParamsOnVnfcType() {
-        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;
+        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'];
             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 {
-            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-level'] = 'vnf';
+            scopeName = this.referenceDataObject.scope['vnfc-type'];
+            if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify' || this.referenceDataObject.action == 'DistributeTraffic') {
+                this.referenceDataObject['action-level'] = 'vnfc';
                 this.referenceDataObject['scopeType'] = 'vnfc-type';
             } else {
                 this.referenceDataObject['action-level'] = 'vnf';
                 this.referenceDataObject['scopeType'] = 'vnf-type';
             }
         }
-        this.referenceDataObject.scope['vnfc-type'] = this.referenceDataObject.scope['vnfc-type'] ? this.referenceDataObject.scope['vnfc-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 + "]");
         return scopeName
     }
 
-    //used to form the structure of the reference file
+    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;
+    }
     prepareArtifactList(scopeName, extension) {
+        console.log(this.classNm + ": prepareArtifactList: start: scopeName:[" +
+            scopeName + "] extension:[" + extension + "]");
         this.referenceDataObject['artifact-list'] = [];
-        let configTemplate
-        let pdTemplate
-        let paramValue
-        let vnf = this.referenceDataObject.scope['vnf-type']
-        if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') {
-            let vnfcTypeList = this.referenceDataObject.scope['vnfc-type-list'];
-            let pd_fileName
-            let config_template_fileName
-
-            let param_fileName
-            if (vnfcTypeList && vnfcTypeList.length > 0) {
-
-
-                for (var x = 0; x < vnfcTypeList.length; x++) {
+        //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 "_"
-                    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);
+                    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;
 
+                    configTemplate = {
+                        'artifact-name': 'template_' + config_template_fileName,
+                        'artifact-type': 'config_template'
+                    };
+                    pdTemplate = {
+                        'artifact-name': 'pd_' + pd_fileName,
+                        'artifact-type': 'parameter_definitions'
+                    };
                     this.referenceDataObject['artifact-list'].push(configTemplate,
-                        pdTemplate, paramValue
+                        pdTemplate
                     );
                 }
-            } 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');
@@ -1637,78 +1663,26 @@
         }
         return newObj
     }
-    // used to replace the data in tempall obj and form the artifact names
     pushOrReplaceTempData(newObj, action) {
-        let configTemplate
-        let pdTemplate
-        let paramValue
-        if (newObj.action == "Configure" || newObj.action == "ConfigModify") {
-            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
+        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 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]);
@@ -1721,10 +1695,8 @@
             }
         } else {
             if (newObj.action != '') {
-
                 this.tempAllData.push(newObj);
                 this.mappingEditorService.saveLatestAction(newObj);
-
                 if (newObj.action == "ConfigScaleOut") {
                     this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier);
                 }
@@ -1734,9 +1706,12 @@
                 }
             }
         }
+
     }
+
     // 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']
@@ -1746,28 +1721,25 @@
         if (newObj.action != 'HealthCheck') {
             delete newObj['url'];
         }
-        if (newObj.action != "Configure" && newObj.action != "ConfigModify") {
+        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-list': [{
+                'artifact-name': 'reference_AllAction' + '_' + scopeName + '_' + '0.0.1V.json',
+                'artifact-type': 'reference_template'
+            }]
         };
-        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';
         });
@@ -1779,18 +1751,12 @@
     }
 
     resetTempData() {
-      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)) {
+        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) {
                 for (var i = 0; i < this.tempAllData.length; i++) {
                     var result = false;
-
                     if (this.tempAllData[i].action === 'AllAction') {
                         result = true;
                     }
@@ -1809,27 +1775,26 @@
     }
 
     trackByFn(index, item) {
-        return index; // or item.id
+        return index;
     }
+
     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;
 
@@ -1852,6 +1817,54 @@
         }
     }
 
+    /**
+     * 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 === '') {
@@ -1866,16 +1879,10 @@
         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) {
-      if( this.utilityService.getTracelvl() > 0 )
-        console.log( this.classNm+": resetArtifactList: start...");
+        console.log(this.classNm + ": resetArtifactList: start...");
         let vnfcTypeList = obj.scope['vnfc-type-list'];
         let vnf = this.referenceDataObject.scope['vnf-type']
         let pd_fileName
@@ -1913,86 +1920,4 @@
             );
         }
     }
-
-    /**
-     * 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 bb564b7..00e014c 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,7 +35,9 @@
     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 apiService: APIService) {
+    constructor(
+      private notificationService: NotificationsService, private utilityService:UtilityService, private httpUtils: HttpUtilService
+    ) {
     }
 
     checkResult(result: any) {
@@ -152,10 +154,13 @@
         return paramValue;
     }
 
-    handleApiData(data,artifactType)
+    handleApiData(payloadData,artifactType)
     {
-        this.response = this.apiService.callGetArtifactsApi(data);
-        this.response.subscribe(response => {
+        this.response =
+        this.httpUtils.post({
+            url: environment.getDesigns,
+            data: payloadData });
+        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 dc5e812..26cbf27 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
@@ -69,12 +69,13 @@
                         <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>  <label style="font-size:12px;">(NFC Function)</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><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}}" />
@@ -107,24 +108,14 @@
             </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>
\ No newline at end of file
+</tabs>
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 a4e0539..40a5291 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
@@ -44,7 +44,6 @@
 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;
 
@@ -102,13 +101,14 @@
     @ViewChild('myInputParam') myInputParam: any;
     @ViewChild(ModalComponent) modalComponent: ModalComponent;
     @ContentChildren(Tab) tabs: QueryList<Tab>;
-    public subscription: any;
+    public subscription: Subscription;
     public item: any = {};
     vnfType: any = '';
     vnfcType: any = '';
     protocol: any = '';
     refObj: any;
-    public paramsContent:any;
+    public paramsContent = localStorage['paramsContent'];
+    nameValueSubscription: Subscription;
 
     constructor(
         private buildDesignComponent: BuildDesignComponent,
@@ -122,9 +122,7 @@
         private nService: NotificationsService,
         private ngProgress: NgProgress,
         private spinner: NgxSpinnerService,
-        private apiService:APIService, 
-        private utilityService: UtilityService
-        
+        private utilityService: UtilityService,
     ) {
         this.artifactRequest.action = '';
         this.artifactRequest.version = '';
@@ -134,27 +132,29 @@
     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.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;
             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,9 +170,18 @@
                 '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============================================
@@ -181,20 +190,25 @@
     }
 
     //========================== 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() {
-        this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
-        this.fileType = sessionStorage.getItem('fileType');
-        if (this.configMappingEditorContent)
-          this.mappingEditorService.initialise(this.mappingComponent.templateeditor.getEditor(), this.configMappingEditorContent);
-        
+        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);
+        }
         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;
             }
@@ -220,11 +234,13 @@
                 // Create the file reader
                 let reader = new FileReader();
                 this.readFile(input.files[0], reader, (result) => {
-                    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;
+                    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;
+                    }
                     this.enableMerge = true;
                     this.initialData = result;
                     setTimeout(() => {
@@ -262,6 +278,7 @@
             // 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');
     }
@@ -273,23 +290,44 @@
     }
 
     //========================== 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.newObject;
+        let fileNameObject: any = this.mappingEditorService.latestAction;
         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 = '';
-            fileName=refObj["param_artifact"]
+            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);
+
             let input=this.utilityService.createPayloadForRetrieve(false, this.item.action, this.vnfType, fileName);
             let artifactContent: any;
             this.ngProgress.start();
-            this.apiService.callGetArtifactsApi(input).subscribe(resp => {
+            this.nameValueSubscription = 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', 'Name/value pairs retrieved successfully from APPC');
                     this.enableMerge = true;
@@ -324,6 +362,7 @@
     }
 
     //========================== End of retrieveNameValueFromAppc() Method============================================
+
     formatNameValuePairs(namevaluePairs: string) {
         var string = namevaluePairs.substring(1, namevaluePairs.length - 1);
         var stringArr = string.split(',');
@@ -417,7 +456,7 @@
                                     'ruleTypeValues': arr2item.ruleTypeValues
                                 };
                                 pdDataArrayForSession.splice(i, 1, json);
-                                
+
                             }
 
                         });
@@ -432,8 +471,9 @@
             }
         }
         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 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 @@
 
 .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 @@
                         <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 @@
             <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 @@
         <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 @@
     <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 @@
                 <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 @@
 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 { 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 @@
   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 @@
     { 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 @@
   }
   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 @@
   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 @@
       }
     }
     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 @@
         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 @@
       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 @@
     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 @@
     $("#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 @@
   }
   //========================== 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 @@
           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 @@
       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 @@
       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 @@
       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 @@
             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 @@
           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 @@
       // 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 @@
   }
   //========================== 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 @@
                 }
               }
             }
+
           }
 
-          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============================================
 }
diff --git a/src/app/vnfs/myvnfs/myvnfs.component.css b/src/app/vnfs/myvnfs/myvnfs.component.css
index f105a7d..c1b1169 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.css
+++ b/src/app/vnfs/myvnfs/myvnfs.component.css
@@ -32,7 +32,4 @@
 table.table th,
 table.table td {
     padding: 0rem;
-}
-.error-message {
-    color: red;
-}
+}
\ No newline at end of file
diff --git a/src/app/vnfs/myvnfs/myvnfs.component.html b/src/app/vnfs/myvnfs/myvnfs.component.html
index 097cf1e..3bfabc3 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.html
+++ b/src/app/vnfs/myvnfs/myvnfs.component.html
@@ -34,7 +34,7 @@
         </div>
         <div class="row">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                <div class="table-responsive" style="height:600px; overflow: auto;">
+                <div class="table-responsive" style="height:auto; overflow: auto;">
                     <table class="table">
                         <thead>
                             <tr>
@@ -54,7 +54,6 @@
                             <tr *ngFor="let item of vnfData | orderBy:sortBy:sortOrder | tableFilter:filterQuery:filter">
                                 <td>{{item['vnf-type']}}</td>
                                 <td>{{item['vnfc-type']}}</td>
-                                <!--td>{{defineData(item)}}</td-->
                                 <!-- <td>{{item.incart}}</td> -->
                                 <!-- <td>{{item.protocol}}</td>
                             <td>{{item.action}}</td> -->
@@ -85,9 +84,6 @@
         </div>
     </div>
     <div class="col-lg-12-ln2">
-        <!-- <button type="button" (click)="buildNewDesign(content)" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Create New
-            VNF Type
-        </button> -->
         <button type="button" (click)="createVnfcModal.open()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
             Create New VNF Type
         </button>
@@ -97,7 +93,7 @@
 <!-- <ng-template #content let-c="close" let-d="dismiss">
     <form ngNativeValidate (ngSubmit)="c('yes')">
         <div class="modal-header">
-            <h4 class="modal-title">Enter VNF Type</h4>
+            <h4 class="modal-title">Enter VNF type and VNFC to proceed</h4>
             <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                 <span aria-hidden="true">&times;</span>
             </button>
@@ -107,25 +103,29 @@
             <div class="form-group row">
                 <label for="example-text-input" class="col-12 col-form-label">Enter Vnf Type</label>
                 <div class="col-12">
-                    <input pattern=".*[^ ].*" required name="vnfType" class="form-control" (ngModelChange)="validateVnfName($event)" [(ngModel)]="vnfType" type="text" id="vnfType">
-                    <span class="error-message">{{errorMessage}}</span>
+                    <input required name="vnfType" class="form-control" [(ngModel)]="vnfType" type="text" id="vnfType">
                 </div>
-
             </div>
             <div class="form-check">
                 <label class="form-check-label">
-                    <input  name="vnfcRequired" class="form-check-input" [(ngModel)]="vnfcRequired" type="checkbox"
+                    <input name="vnfcRequired" class="form-check-input" [(ngModel)]="vnfcRequired" type="checkbox"
                            id="vnfcRequired">
-                    This VNF has VNFC templates
+                    Enter vnfc info
                 </label>
             </div>
+            <div class="form-group row" *ngIf="vnfcRequired">
+                <label for="example-search-input" class="col-12 col-form-label">Enter Vnfc Type</label>
+                <div class="col-12">
+                    <input required name="vnfcType" class="form-control" [(ngModel)]="vnfcType" type="text" id="vnfcType">
+                </div>
+            </div>
         </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')">Proceed To Upload
+        " (click)="c('yes')">Proceed anyway
             </button>
-            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" [disabled]="invalid">Next
+            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Next
             </button>
 
         </div>
@@ -164,4 +164,4 @@
             </button>
         </modal-footer>
     </form>
-</modal>
\ No newline at end of file
+</modal>
diff --git a/src/app/vnfs/myvnfs/myvnfs.component.ts b/src/app/vnfs/myvnfs/myvnfs.component.ts
index 49f4f42..a124705 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.ts
+++ b/src/app/vnfs/myvnfs/myvnfs.component.ts
@@ -55,8 +55,8 @@
     }
     subscription: Subscription;
 
-    constructor (private paramShareService: ParamShareService, private ngProgress: NgProgress, private httpUtil: HttpUtilService, private router: Router, private activeROute: ActivatedRoute,
-        private mappingEditorService: MappingEditorService, private modalService: NgbModal) {
+    constructor(private paramShareService: ParamShareService, private ngProgress: NgProgress, private httpUtil: HttpUtilService, private router: Router, private activeROute: ActivatedRoute,
+        private mappingEditorService: MappingEditorService, private modalService: NgbModal, private nService: NotificationsService) {
     }
 
     ngOnInit() {
@@ -89,22 +89,28 @@
     getArtifacts(data) {
         let tempObj: any;
         this.ngProgress.start();
+      //this.subscription = this.httpUtil.post({
         this.httpUtil.post({
             url: environment.getDesigns,
             data: data
         })
-            .subscribe(resp => {
+            .subscribe( resp => {
                 if (resp.output.data.block !== undefined && resp.output.data.block !== null && resp.output.data.block.length !== 0) {
-                    tempObj = JSON.parse(resp.output.data.block);
-                    this.vnfData = tempObj.designInfo;
+                  console.log("getArtifacts: resp:", resp.output.data.block);
+                  tempObj = JSON.parse(resp.output.data.block);
+                  this.vnfData = tempObj.designInfo;
                 }
-                if (this.vnfData === undefined || this.vnfData === null || this.vnfData.length === 0) {
+                if (this.vnfData == undefined || this.vnfData == null || this.vnfData.length == 0) {
                     this.noData = true;
-                    // this.noDataMsg = resp.output.status.message;
+                    // this.noDataMsg = resp.output.data.status.message;
                 } else {
                     this.noData = false;
                 }
+                console.log("getArtifacts: noData:"+this.noData);
                 this.ngProgress.done();
+            },
+            error => {
+              this.nService.error(appConstants.errors.error, appConstants.errors.connectionError)
             });
 
         this.filter = ['vnf-type', 'vnfc-type', 'artifact-name'];
@@ -118,25 +124,14 @@
     getData() {
     }
 
-    buildNewDesign(response) {
-
-        // this.modalService.open(content).result.then(res => {
-        //     if(res=='yes'){
-        //         sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType}));
-        //         sessionStorage.setItem("vnfcSelectionFlag",''+this.vnfcRequired+'')
-        //     } else{
-        //         sessionStorage.setItem('vnfParams',"")
-        //     }
-
-        //     this.mappingEditorService.referenceNameObjects = undefined;
-        //     this.mappingEditorService.identifier = '';
-        //     //this.mappingEditorService.newObject = {};
-        //     this.router.navigate([
-        //             'vnfs', 'design', 'references'
-        //     ]);
-
-        // });
-
+    buildNewDesign( response) {
+     // this.modalService.open(content).result.then(res => {
+     //     this.mappingEditorService.referenceNameObjects = undefined;
+     //     sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType, vnfcType: this.vnfcType }));
+     //     this.router.navigate([
+     //             'vnfs', 'design', 'references'
+     //         ]);
+     // });
         if (response == 'yes') {
             sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType }));
             sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '')
@@ -203,7 +198,7 @@
 
     clearCache() {
         // get the value and save the userid and persist it.
-        sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '')
+        sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '');
         this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
         localStorage['paramsContent'] = '{}';
         this.mappingEditorService.setParamContent(undefined);
@@ -217,20 +212,4 @@
         this.mappingEditorService.changeNavAppData(appData);
         this.mappingEditorService.changeNavDownloadData(downloadData);
     }
-    defineData(item) {
-        let artVnfc = item['artifact-name'].substring(this.lastIndexofEnd("AllAction_", item['artifact-name']), item['artifact-name'].lastIndexOf("_"))
-        if (item['vnf-type'] == artVnfc && item['vnfc-type'] == 'null') {
-
-            return item['vnfc-type']
-        } else {
-            return ""
-        }
-
-    }
-    lastIndexofEnd(str, originlStr) {
-        var io = originlStr.lastIndexOf(str);
-        return io == -1 ? -1 : io + str.length;
-    }
-
-
-}
\ No newline at end of file
+}
diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.css b/src/app/vnfs/userlogin-form/userlogin-form.component.css
index 64db1d0..4df88b5 100644
--- a/src/app/vnfs/userlogin-form/userlogin-form.component.css
+++ b/src/app/vnfs/userlogin-form/userlogin-form.component.css
@@ -21,6 +21,7 @@
 ============LICENSE_END============================================
 */
 
-.error-message {
-    color: red;
-}
+/* .error-msg{
+
+    color: red
+} */
\ No newline at end of file
diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.html b/src/app/vnfs/userlogin-form/userlogin-form.component.html
index 605cb45..af58842 100644
--- a/src/app/vnfs/userlogin-form/userlogin-form.component.html
+++ b/src/app/vnfs/userlogin-form/userlogin-form.component.html
@@ -30,12 +30,10 @@
                 <form #userForm="ngForm" (ngSubmit)="getData()">
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                         <input placeholder="Enter user Id" class="mdl-textfield__input" id="userId" required
-                               [(ngModel)]="userId" name="userId" value="" #user="ngModel" (ngModelChange)="validateUserName()">
-                            <span class="error-message">{{errorMessage}}</span>  
+                               [(ngModel)]="userId" name="userId" value="" #user="ngModel">
                     </div>
-                    
                     <div class="form-group text-right">
-                        <button type="submit" [disabled]="invalid"
+                        <button type="submit" [disabled]="!userForm.form.valid"
                                 class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
                             Submit
                         </button>
diff --git a/src/app/vnfs/userlogin-form/userlogin-form.component.ts b/src/app/vnfs/userlogin-form/userlogin-form.component.ts
index c62e9bb..188fe81 100644
--- a/src/app/vnfs/userlogin-form/userlogin-form.component.ts
+++ b/src/app/vnfs/userlogin-form/userlogin-form.component.ts
@@ -31,8 +31,6 @@
 
     userId: string = '';
     returnUrl:string
-    invalid = true;
-    errorMessage = '';
 
     constructor(private router: Router, private utiltiy: UtilityService, private route: ActivatedRoute
         ) {
@@ -52,23 +50,4 @@
        this.router.navigateByUrl(this.returnUrl);
     }
 
-    validateUserName(){
-        if (!this.userId.trim() || this.userId.length < 1) {
-            this.errorMessage = '';
-            this.invalid = true;
-        }else if(this.userId.startsWith(' ') || this.userId.endsWith(' ')){
-            this.errorMessage = 'Leading and trailing space is not allowed';
-            this.invalid = true;
-        } else if(this.userId.includes('  ')){
-            this.errorMessage = 'More than one space is not allowed in username';
-             this.invalid = true;
-        } else if(this.userId.length > 50) {
-            this.errorMessage = 'Username should be of minimum one character and maximum 50 character';
-             this.invalid = true;
-        }else {
-            this.invalid = false;
-            this.errorMessage = '';
-        }
-    }
-
 }
diff --git a/src/app/vnfs/vnfs.module.ts b/src/app/vnfs/vnfs.module.ts
index e4e4ad0..5268033 100644
--- a/src/app/vnfs/vnfs.module.ts
+++ b/src/app/vnfs/vnfs.module.ts
@@ -2,6 +2,10 @@
 ============LICENSE_START==========================================
 ===================================================================
 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+===================================================================
+Copyright (C) 2018 IBM.
 ===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
@@ -21,38 +25,35 @@
 ============LICENSE_END============================================
 */
 
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {CommonModule} from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 // modules
-import {VnfRoutingModule} from './vnf.routing';
-import {SharedModule} from '../shared/shared.module';
-
-import {AceEditorComponent} from 'ng2-ace-editor';
-// components
-import {MyvnfsComponent} from './myvnfs/myvnfs.component';
-import {ReferenceDataformComponent} from './build-artifacts/reference-dataform/reference-dataform.component';
-import {GoldenConfigurationComponent} from './build-artifacts/template-holder/template-configuration/template-configuration.component';
-import {ParameterComponent} from './build-artifacts/parameter-definitions/parameter.component';
-import {ParameterHolderComponent} from './build-artifacts/parameter-holder/parameter-holder.component';
-import {BootstrapModalModule} from 'ng2-bootstrap-modal';
-import {BuildDesignComponent} from './build-artifacts/build-artifacts.component';
-import {userloginFormComponent} from './userlogin-form/userlogin-form.component';
-import {ReferenceDataHolderComponent} from './build-artifacts/reference-data-holder/reference-data-holder.component';
-import {VnfsComponent} from './vnfs/vnfs.component';
-import {ConfirmComponent} from '../shared/confirmModal/confirm.component';
-import {GoldenConfigurationHolderComponent} from './build-artifacts/template-holder/template-holder.component';
-import {GoldenConfigurationMappingComponent} from './build-artifacts/template-holder/param-name-value/param-name-value.component';
-import {Tab} from './build-artifacts/template-holder/param-name-value/tab';
-import {Tabs} from './build-artifacts/template-holder/param-name-value/tabs';
-import {Ng2Bs3ModalModule} from 'ng2-bs3-modal/ng2-bs3-modal';
-import {AuthGuardModalComponent} from './auth-guard-modal/auth-guard-modal';
-import {GCAuthGuardService} from './GCAuthGuard/gcauth-guard.service';
-import {LoginGuardService} from './LoginGuardService/Login-guard-service';
-import {SimpleNotificationsModule} from 'angular2-notifications';
+import { VnfRoutingModule } from './vnf.routing';
+import { SharedModule } from '../shared/shared.module';
 import { NgxSpinnerModule } from 'ngx-spinner';
-
-//import {SyncResultsComponent} from './build-artifacts/sync-results/sync-results.component';
+import { AceEditorComponent } from 'ng2-ace-editor';
+// components
+import { MyvnfsComponent } from './myvnfs/myvnfs.component';
+import { ReferenceDataformComponent } from './build-artifacts/reference-dataform/reference-dataform.component';
+import { GoldenConfigurationComponent } from './build-artifacts/template-holder/template-configuration/template-configuration.component';
+import { ParameterComponent } from './build-artifacts/parameter-definitions/parameter.component';
+import { ParameterHolderComponent } from './build-artifacts/parameter-holder/parameter-holder.component';
+import { BootstrapModalModule } from 'ng2-bootstrap-modal';
+import { BuildDesignComponent } from './build-artifacts/build-artifacts.component';
+import { userloginFormComponent } from './userlogin-form/userlogin-form.component';
+import { ReferenceDataHolderComponent } from './build-artifacts/reference-data-holder/reference-data-holder.component';
+import { ModalComponent } from '../shared/modal/modal.component';
+import { VnfsComponent } from './vnfs/vnfs.component';
+import { GoldenConfigurationHolderComponent } from './build-artifacts/template-holder/template-holder.component';
+import { GoldenConfigurationMappingComponent } from './build-artifacts/template-holder/param-name-value/param-name-value.component';
+import { Tab } from './build-artifacts/template-holder/param-name-value/tab';
+import { Tabs } from './build-artifacts/template-holder/param-name-value/tabs';
+import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
+import { AuthGuardModalComponent } from './auth-guard-modal/auth-guard-modal';
+import { GCAuthGuardService } from './GCAuthGuard/gcauth-guard.service';
+import { LoginGuardService } from './LoginGuardService/Login-guard-service';
+import { SimpleNotificationsModule } from 'angular2-notifications';
 
 
 export const components = [
@@ -66,19 +67,19 @@
     VnfsComponent,
     ReferenceDataformComponent,
     ReferenceDataHolderComponent,
+    ModalComponent,
     GoldenConfigurationHolderComponent,
     AceEditorComponent,
     Tab,
     Tabs,
-    ConfirmComponent,
-    AuthGuardModalComponent
-   // SyncResultsComponent
+    AuthGuardModalComponent,
+
 
 ];
 
 export const modules = [
     CommonModule, VnfRoutingModule, SharedModule.forRoot(),
-    FormsModule, BootstrapModalModule, Ng2Bs3ModalModule, NgxSpinnerModule, SimpleNotificationsModule.forRoot()
+    FormsModule, BootstrapModalModule, Ng2Bs3ModalModule, SimpleNotificationsModule.forRoot(),NgxSpinnerModule
 
 ];
 
@@ -88,7 +89,7 @@
     providers: [GCAuthGuardService, LoginGuardService],
 
 
-    entryComponents: [ConfirmComponent, AuthGuardModalComponent]
+    entryComponents: [AuthGuardModalComponent]
 })
 export class VnfsModule {
-}
\ No newline at end of file
+}
diff --git a/src/cdt.application.properties.json b/src/cdt.application.properties.json
deleted file mode 100644
index 5be2a49..0000000
--- a/src/cdt.application.properties.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "source": "INSTAR",
-    "CONTACT_US": {
-        "CONTACT_US_EMAIL": "appc@list.onap.org",
-        "CONTACT_US_SUBJECT": "CDT Query/Feedback"
-    },
-    "username": "m97292@appc.att.com",
-    "password": "enc:Ai8KDxN7EANwATsV",
-    "displayConfigScaleout": false,
-    "Actions": {
-        "ConfigScaleOut": "ConfigScaleOut",
-        "Configure": "Configure"
-    },
-    "versionNoForApiCall": "0.0.1"
-}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 92b4755..57ba1f2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -69,7 +69,6 @@
     margin: 0;
 }
 
-
 /* Disable ugly boxes around images in IE10 */
 
 a img {
@@ -148,35 +147,17 @@
     z-index: 20
 }
 
-.undoMarker {
-    position: absolute;
-    background: #272822;
-    z-index: 30
-}
-
 .noKeyedMarker {
     position: absolute;
     background: orange;
     z-index: 20
 }
 
-.ace_editor .ace_marker-layer .ace_selection {
-    background:blue !important;
-}
-
 .defaultMarker {
     position: absolute;
     background: lightgreen;
     z-index: 20;
 }
-.ace_cursor{
-    background-color: transparent;
-    
-}
-.ace-monokai{
-    color: greenyellow;
-    
-}
 
 .android-header {
     overflow: visible;
@@ -217,7 +198,7 @@
     width: 800px;
 }
 
-.android-search-box.is-focused+.android-navigation-container {
+.android-search-box.is-focused + .android-navigation-container {
     opacity: 0;
     width: 100px;
 }
@@ -455,6 +436,9 @@
     padding-bottom: 24px;
 }
 
+.android-card-container {
+}
+
 .android-card-container .mdl-card__media {
     overflow: hidden;
     background: transparent;
@@ -524,16 +508,17 @@
     cursor: pointer;
 }
 
-
 /**** Mobile layout ****/
 
 @media (max-width: 900px) {
     .android-navigation-container {
         display: none;
     }
+
     .android-title {
         display: none !important;
     }
+
     .android-mobile-title {
         display: block !important;
         position: absolute;
@@ -541,77 +526,66 @@
         top: 12px;
         transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }
+
     /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
      consecutive "+" operators in some cases. Therefore, we need to use both
      here to cover all the bases. */
-    .android.android-search-box.is-focused~.android-mobile-title,
-    .android-search-box.is-focused+.android-navigation-container+.android-mobile-title {
+    .android.android-search-box.is-focused ~ .android-mobile-title,
+    .android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
         opacity: 0;
     }
+
     .android-more-button {
         display: none;
     }
+
     .android-search-box.is-focused {
         width: calc(100% - 48px);
     }
+
     .android-search-box .mdl-textfield__expandable-holder {
         width: 100%;
     }
+
     .android-be-together-section {
         height: 350px;
     }
+
     .android-slogan {
         font-size: 26px;
         margin: 0 16px;
         padding-top: 24px;
     }
+
     .android-sub-slogan {
         font-size: 16px;
         margin: 0 16px;
         padding-top: 8px;
     }
+
     .android-create-character {
         padding-top: 200px;
         font-size: 16px;
     }
+
     .android-create-character img {
         height: 12px;
     }
+
     .android-fab {
         display: none;
     }
+
     .android-wear-band-text {
         margin-left: 0;
         padding: 16px;
     }
+
     .android-footer .mdl-mega-footer--bottom-section {
         display: none;
     }
 }
 
-input[type=text]:read-only {
-    background: #d8d4d4;
-}
-
-.nav-tabs .nav-item .nav-link {
-    color: #000000;
-}
-
-#versionLog .modal-dialog {
-    width: 100%;
-    max-width: 800px;
-}
-
-/* Overriding Ng2-Bs3-Modal css */
-.modal-header {
-    flex-direction: row-reverse;
-}
-
-/* Overriding ng2-bootstrap-modal css ( Confirmation Modal ) */
-dialog-wrapper .modal {
-    background-color: rgba(0, 0, 0, 0.288);
-}
-
-dialog-wrapper .modal-dialog .modal-content {
-    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
+input[type=text]:readonly {
+    background: #e0dada;
 }
\ No newline at end of file