Initial seed code contribution for CDT

Issue-ID: APPC-682
Change-Id: I0331ffce2a430195c29d0d1b2295966f9eb28699
Signed-off-by: Skip Wonnell <skip@att.com>

1 files changed, 711 insertions, 0 deletions

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
new file mode 100644
index 0000000..9ea95ec
--- /dev/null
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.ts
@@ -0,0 +1,711 @@
+/*
+============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 { Component, ContentChildren, OnInit, QueryList, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MappingEditorService } from '../../../../shared/services/mapping-editor.service';
+import { HttpUtilService } from '../../../../shared/services/httpUtil/http-util.service';
+import { GoldenConfigurationComponent } from '../template-configuration/template-configuration.component';
+import { ArtifactRequest } from '../../../../shared/models/index';
+import { NotificationService } from '../../../../shared/services/notification.service';
+import { ModalComponent } from '../../../../shared/modal/modal.component';
+import { saveAs } from 'file-saver';
+import { DialogService } from 'ng2-bootstrap-modal';
+import { ConfirmComponent } from '../../../../shared/confirmModal/confirm.component';
+import { BuildDesignComponent } from '../../build-artifacts.component';
+import { ParamShareService } from '../../../../shared/services/paramShare.service';
+import { NotificationsService } from 'angular2-notifications';
+import { Tab } from './tab';
+import { environment } from '../../../../../environments/environment';
+import { NgProgress } from 'ngx-progressbar';
+import * as XLSX from 'xlsx';
+
+type AOA = Array<Array<any>>;
+
+function s2ab(s: string): ArrayBuffer {
+    const buf = new ArrayBuffer(s.length);
+    const view = new Uint8Array(buf);
+    for (let i = 0; i !== s.length; ++i) {
+        view[i] = s.charCodeAt(i) & 0xFF;
+    }
+    return buf;
+}
+
+declare var $: any;
+
+@Component({
+    selector: 'app-golden-configuration-mapping',
+    templateUrl: './param-name-value.component.html',
+    styleUrls: ['./param-name-value.component.css']
+})
+export class GoldenConfigurationMappingComponent implements OnInit {
+    enableMappingSave: boolean = false;
+    aceText: string = '';
+    fileName: string = '';
+    actionType: any;
+    modal: any;
+    configMappingEditorContent: any;
+    fileType: any = '';
+    myfileName: any;
+    initialData: any;
+    scopeName: any;
+    downloadedFileName: any;
+    enableSaveToAppc: boolean = false;
+    versionNo: any = '0.0.1';
+    showVersionDiv: boolean = false;
+    initialAction: any;
+    title: any;
+    message: any;
+    enableMappingBrowse: boolean = true;
+    enableDownload: boolean = false;
+    showMappingDownloadDiv: boolean = false;
+    mapppingDownloadType: any;
+    action: any;
+    artifactName: any;
+    enableMerge: boolean = false;
+    apiToken = localStorage['apiToken'];
+    userId = localStorage['userId'];
+    public uploadTypes = [
+        {
+            value: 'Mapping Data',
+            display: 'Sample Json Param File'
+        }
+    ];
+    selectedUploadType: string = this.uploadTypes[0].value;
+    options = {
+        timeOut: 1000,
+        showProgressBar: true,
+        pauseOnHover: true,
+        clickToClose: true,
+        maxLength: 200
+    };
+    artifactRequest: ArtifactRequest = new ArtifactRequest();
+    @ViewChild(GoldenConfigurationComponent) mappingComponent: GoldenConfigurationComponent;
+    @ViewChild('templateeditor') templateeditor;
+    @ViewChild('myInputParam') myInputParam: any;
+    @ViewChild(ModalComponent) modalComponent: ModalComponent;
+    @ContentChildren(Tab) tabs: QueryList<Tab>;
+    public subscription: any;
+    public item: any = {};
+
+    public Actions = [
+        { action: 'ConfigBackup', value: 'ConfigBackup' },
+        { action: 'ConfigModify', value: 'ConfigModify' },
+        { action: 'ConfigRestore', value: 'ConfigRestore' },
+        { action: 'Configure', value: 'Configure' },
+        { action: 'GetRunningConfig', value: 'GetRunningConfig' },
+        { action: 'HealthCheck', value: 'HealthCheck' },
+        { action: 'StartApplication', value: 'StartApplication' },
+        { action: 'StopApplication', value: 'StopApplication' }
+    ];
+    vnfType: any;
+    vnfcType: any;
+    protocol: any;
+    refObj: any;
+    public paramsContent = localStorage['paramsContent'];
+
+    constructor (private buildDesignComponent: BuildDesignComponent, private paramShareService: ParamShareService, private router: Router, private httpUtil: HttpUtilService, private dialogService: DialogService, private activeRoutes: ActivatedRoute, private mappingEditorService: MappingEditorService, private notificationService: NotificationService, private nService: NotificationsService, private ngProgress: NgProgress) {
+        this.artifactRequest.action = '';
+        this.artifactRequest.version = '';
+        this.artifactRequest.paramKeysContent = '';
+    }
+
+    ngOnInit() {
+        var refObj = this.refObj = this.prepareFileName();
+        if (refObj && refObj != undefined) {
+            if (this.paramsContent && this.paramsContent != undefined && this.paramsContent !== '{}') {
+                this.artifactRequest.paramsContent = this.formatNameValuePairs(this.paramsContent);
+                // this.artifactRequest.paramsContent = this.paramsContent;
+
+            }
+            else {
+                this.artifactRequest.paramsContent = '{}';
+            }
+
+            //  refObj = refObj[refObj.length - 1];
+            this.item = refObj;
+            this.vnfType = this.item.scope['vnf-type'];
+            this.vnfcType = this.item.scope['vnfc-type'];
+            this.protocol = this.item['device-protocol'];
+            this.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 = {
+                '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.actionType = UrlSegment[0].path;
+        });
+        if (this.actionType === 'configureTemplate') {
+            this.mappingEditorService.fromScreen = 'TemplateScreen';
+        }
+        if (this.actionType === 'myTemplates') {
+            this.mappingEditorService.fromScreen = 'MappingScreen';
+        }
+        this.mappingEditorService.paramData = [];
+
+
+    }
+
+    //========================== End of ngOnInit() Method============================================
+    browseOption() {
+        $('#filesparam').trigger('click');
+    }
+
+    //========================== End of browseOption() Method============================================
+    selectedNavItem(item: any) {
+        this.item = item;
+    }
+
+    //========================== End of selectedNavItem() Method============================================
+    ngOnDestroy() {
+        this.prepareFileName();
+    }
+
+    //========================== End of ngOnDestroy() Method============================================
+    ngAfterViewInit() {
+        if (this.mappingEditorService.fromScreen === 'MappingScreen') {
+            this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
+            this.fileType = sessionStorage.getItem('fileType');
+            if (this.configMappingEditorContent)
+                this.mappingEditorService.initialise(this.mappingComponent.templateeditor.getEditor(), this.configMappingEditorContent, this.modal);
+        }
+        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;
+            }
+            else {
+                this.scopeName = this.vnfType;
+            }
+        }
+        else {
+            this.Actions = [];
+            this.enableMappingBrowse = false;
+        }
+    }
+
+    //========================== End of ngAfterViewInit() Method============================================
+    upload(evt: any) {
+        /* wire up file reader */
+        if (evt.target.files[0]) {
+            const target: DataTransfer = <DataTransfer>(evt.target);
+            this.myfileName = evt.target.files[0].name;
+            var fileExtension = this.myfileName.substr(this.myfileName.lastIndexOf('.') + 1);
+            if (fileExtension.toUpperCase() === 'xls'.toUpperCase()) {
+                if (target.files.length != 1) {
+                    throw new Error('Cannot upload multiple files on the entry');
+                }
+                const reader = new FileReader();
+                reader.onload = (e: any) => {
+                    /* read workbook */
+                    const bstr = e.target.result;
+                    const wb = XLSX.read(bstr, { type: 'binary' });
+                    /* grab first sheet */
+                    const wsname = wb.SheetNames[0];
+                    const ws = wb.Sheets[wsname];
+                    /* save data */
+                    let arrData = (<AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 })));
+                    var jsonStr = arrData.toString();
+                    var JsonArr = jsonStr.split(',');
+                    var finalStr = '{\r\n';
+                    for (var i = 0; i < JsonArr.length; i = i + 2) {
+                        var key = JsonArr[i];
+                        var value = JsonArr[i + 1];
+                        finalStr = finalStr + key + ':' + value + ',\r\n';
+                    }
+                    finalStr = finalStr.substring(0, finalStr.length - 3) + '\r\n}';
+                    this.artifactRequest.paramsContent = finalStr;
+                    this.initialData = finalStr;
+                    this.enableMappingSave = true;
+                };
+                reader.readAsBinaryString(target.files[0]);
+                if ('Mapping Data' === this.selectedUploadType) {
+                    this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
+                    this.mappingEditorService.setParamContent(this.artifactRequest.paramsContent);
+                }
+            }
+            else {
+                let reader = new FileReader();
+                this.readFile(evt.target.files[0], reader, (result) => {
+                    if ('Mapping Data' === this.selectedUploadType) {
+                        var jsonObject = JSON.parse(result);
+                        this.artifactRequest.paramsContent = JSON.stringify(jsonObject, null, 1);
+                        this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
+                        this.mappingEditorService.setParamContent(this.artifactRequest.paramsContent);
+                    }
+                    this.initialData = result;
+                    this.enableMappingSave = true;
+                });
+            }
+        }
+        else {
+            this.notificationService.notifyErrorMessage('Failed to reading file..');
+        }
+        this.myInputParam.nativeElement.value = '';
+    }
+
+    //========================== End of upload() Method============================================
+    //uncommenting for 1710
+    public fileParamChange(input) {
+        if (input.files && input.files[0]) {
+            this.enableMappingSave = true;
+            this.myfileName = input.files[0].name;
+            var fileExtension = this.myfileName.substr(this.myfileName.lastIndexOf('.') + 1);
+            if (this.validateUploadedFile(fileExtension)) {
+                // Create the file reader
+                let reader = new FileReader();
+                this.readFile(input.files[0], reader, (result) => {
+                    if ('Mapping Data' === this.selectedUploadType) {
+                        var jsonObject = JSON.parse(result);
+                        this.artifactRequest.paramsContent = JSON.stringify(jsonObject, null, 1);
+                        this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
+                        this.mappingEditorService.setParamContent(this.artifactRequest.paramsContent);
+                        localStorage['paramsContent'] = this.artifactRequest.paramsContent;
+                    }
+                    this.enableMerge = true;
+                    this.initialData = result;
+                });
+            }
+            else {
+                this.nService.error("Error", "Incorrect File Format")
+                this.artifactRequest.paramsContent = ''
+            }
+        }
+        else {
+            this.nService.error("Error", "Failed to read file");
+        }
+        this.myInputParam.nativeElement.value = '';
+    }
+
+    //========================== End of fileParamChange() Method============================================
+    validateUploadedFile(fileExtension) {
+
+        if (fileExtension.toUpperCase() === 'json'.toUpperCase()) {
+            return true;
+        }
+        else {
+            return false;
+        }
+
+    }
+    //========================== End of validateUploadedFile() Method============================================
+    public readFile(file, reader, callback) {
+        // Set a callback funtion to fire after the file is fully loaded
+        reader.onload = () => {
+            // 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');
+    }
+
+    //========================== End of readFile() Method============================================
+    public onParamChanges(data) {
+        this.artifactRequest.paramsContent = data;
+        localStorage['paramsContent'] = this.artifactRequest.paramsContent;
+    }
+
+    //========================== End of onParamChanges() Method============================================
+    onDownloadParameter() {
+        let refObj = this.refObj;
+        if (refObj) {
+            // refObj = refObj[refObj.length - 1];
+            let paramsKeyValueFromEditor: JSON;
+            this.initialData = this.artifactRequest.paramsContent;
+            paramsKeyValueFromEditor = JSON.parse(this.artifactRequest.paramsContent);
+            let theJSON = JSON.stringify(paramsKeyValueFromEditor, null, '\t');
+            var blob = new Blob([theJSON], {
+                type: 'text/json'
+            });
+            this.showVersionDiv = true;
+            let fileName: any;
+            fileName = this.updateFileName(refObj.action, this.scopeName, this.versionNo);
+            saveAs(blob, fileName);
+        }
+        else {
+            this.nService.error('Error', 'Please enter Action and VNF type in Reference Data screen');
+
+        }
+    }
+
+    //========================== End of onDownloadParameter() Method============================================
+    JSONToCSVConvertor(JSONData, fileName, ShowLabel) {
+        //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
+        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
+        var CSV = '';
+        //This condition will generate the Label/Header
+        if (ShowLabel) {
+            var testRow = '';
+            for (var index in arrData[0]) {
+                CSV += index + '\t' + arrData[0][index] + '\r\n';
+            }
+        }
+        if (CSV == '') {
+            return;
+        }
+        //Initialize file format you want csv or xls
+        var uri = 'data:application/vnd.ms-excel,' + encodeURI(CSV);
+        var link = document.createElement('a');
+        link.href = uri;
+        link.download = fileName + '.xls';
+        //this part will append the anchor tag and remove it after automatic click
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    //========================== End of JSONToCSVConvertor() Method============================================
+    updateFileNameForXls(action: any, scopeName: any, versionNo: any) {
+        let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V';
+        return fileName;
+    }
+
+    //========================== End of updateFileNameForXls() Method============================================
+    appendSlashes(artifactData) {
+        let x = artifactData.replace(new RegExp(',"', 'g'), ',\"');
+        let y = x.replace(new RegExp('":', 'g'), '\":');
+        let z = y.replace(new RegExp('{"', 'g'), '{\"');
+        let t = z.replace(new RegExp(':"', 'g'), ':\"');
+        let m = t.replace(new RegExp('",', 'g'), '\",');
+        let n = y.replace(new RegExp('"}', 'g'), '\"}');
+        let nw = n.replace(new RegExp('{"', 'g'), '{\"');
+        let nw1 = nw.replace(new RegExp(':"', 'g'), ':\"');
+        let nw2 = nw1.replace(new RegExp('",', 'g'), '\",');
+        return nw2;
+    }
+
+    //========================== End of appendSlashes() 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============================================
+    prepareFileName(): any {
+        let fileNameObject: any = this.mappingEditorService.latestAction;
+        return fileNameObject;
+    }
+
+    //========================== End of prepareFileName() Method============================================
+    openModel(toShow: any, message: any, title: any) {
+        this.message = message;
+        this.title = title;
+        $('#modalButton').trigger('click');
+    }
+
+    //========================== End of openModel() Method============================================
+    checkSave(selectedAction): void {
+        if (this.actionType === 'updateTemplate') {
+            if (!this.buildDesignComponent.isReferenceFound(selectedAction, this.mappingEditorService.getReferenceList())) {
+                this.nService.error('Error', 'Reference Data not found. Please add Reference Data for Action:' + selectedAction);
+            }
+        }
+        if (this.initialData != this.artifactRequest.paramsContent) {
+            this.showConfirm(this.initialData);
+        }
+        else {
+            this.initialAction = this.item.action;
+        }
+    }
+
+    //========================== End of checkSave() Method============================================
+    showConfirm(initialData) {
+        let disposable = this.dialogService.addDialog(ConfirmComponent, {
+            title: 'Confirm title',
+            message: 'Confirm message'
+        })
+            .subscribe((isConfirmed) => {
+                //We get dialog result
+                if (isConfirmed) {
+                    this.artifactRequest.paramsContent = initialData;
+                    this.initialAction = this.item.action;
+                }
+                else {
+                    this.item.action = this.initialAction;
+                }
+            });
+    }
+
+    //========================== End of showConfirm() Method============================================
+    retrieveNameValueFromAppc() {
+        let refObj = this.refObj;
+        if (refObj && refObj != undefined) {
+            // console.log("REF OBJECT IN RETRIVE"+JSON.stringify(refObj));
+            this.enableMerge = true;
+            var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
+            let fileName = this.updateFileName(this.item.action, scopeName, this.versionNo);
+            let payload = '{"userID": "' + this.userId + '", "action": "' + this.item.action + '", "vnf-type" : "' + this.vnfType + '", "artifact-type":"APPC-CONFIG", "artifact-name":"' + fileName + '"}';
+            // console.log("payload OBJECT IN RETRIVE"+JSON.stringify(payload));
+            let input = {
+                'input': {
+                    'design-request': {
+                        'request-id': this.apiToken,
+                        'action': 'getArtifact',
+                        'payload': payload
+                    }
+                }
+            };
+
+            console.log('Retrieve name value from appc payload===>>' + payload);
+            let artifactContent: any;
+            this.ngProgress.start();
+            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;
+                    let result = JSON.parse(resp.output.data.block).artifactInfo[0];
+                    result = result['artifact-content'];
+                    var string = result.substring(2, result.length - 2);
+                    var stringArr = string.split(',');
+                    var newStringArr = [];
+                    var resultStr = '{\r\n';
+                    for (var index in stringArr) {
+                        newStringArr[index] = stringArr[index] + ',\r\n';
+                    }
+                    for (var index in newStringArr) {
+                        resultStr = resultStr + newStringArr[index];
+                    }
+                    resultStr = resultStr.substring(0, resultStr.length - 3) + '\r\n}';
+                    this.artifactRequest.paramsContent = resultStr;
+                    this.mappingEditorService.setParamContent(resultStr);
+                    localStorage['paramsContent'] = resultStr;
+                    this.enableMappingSave = true;
+                }
+                else {
+                    this.nService.info('Information', 'There are no name value pairs saved in APPC for the selected action!');
+                }
+                this.ngProgress.done();
+            },
+                error => this.nService.error('Error', 'Error in connecting to APPC Server'));
+        }
+        setTimeout(() => {
+            this.ngProgress.done();
+        }, 3500);
+    }
+
+    //========================== End of retrieveNameValueFromAppc() Method============================================
+    saveNameValueToAppc() {
+        let refObj = this.refObj;
+        if (refObj && refObj != undefined) {
+            // refObj = refObj[refObj.length - 1];
+            let paramsKeyValueFromEditor = JSON.parse(this.artifactRequest.paramsContent);
+            let action = this.item.action;
+            let fileName = this.updateFileName(refObj.action, this.scopeName, this.versionNo);
+            let vnfType = this.vnfType;
+            let Json = [paramsKeyValueFromEditor];
+            let slashedPayload = this.appendSlashes(JSON.stringify(Json));
+            let newPayload =
+                {
+                    'userID': this.userId,
+                    'vnf-type': this.vnfType,
+                    'action': action,
+                    'artifact-name': fileName,
+                    'artifact-type': 'APPC-CONFIG',
+                    'artifact-version': this.versionNo,
+                    'artifact-contents': slashedPayload
+                };
+            let data =
+                {
+                    'input': {
+                        'design-request': {
+                            'request-id': this.apiToken,
+                            'action': 'uploadArtifact',
+                            'payload': JSON.stringify(newPayload)
+                        }
+                    }
+                };
+            this
+                .httpUtil
+                .post(
+                { url: environment.getDesigns, data: data })
+                .subscribe(resp => {
+                    if (resp.output.status.code === '400' && resp.output.status.message === 'success') {
+                        this.nService.success('Success', 'Name/value pairs saved successfully to APPC');
+                    }
+                    if (resp.output.status.code === '401') {
+                        this.nService.error('Error', resp.output.status.message);
+                    }
+                },
+                error => this.nService.error('Error', 'Could not save name value pairs. Error in connecting APPC Server'));
+        }
+        setTimeout(() => {
+            this.ngProgress.done();
+        }, 3500);
+    }
+
+    //========================== End of saveNameValueToAppc() Method============================================
+    formatNameValuePairs(namevaluePairs: string) {
+        //var string = namevaluePairs.substring(2, namevaluePairs.length - 2);
+        /*  var stringArr = string.split(",");
+          var newStringArr = [];
+          var resultStr = "{\r\n\"";
+          for (var index in stringArr) {
+            newStringArr[index] = stringArr[index] + ",\r\n";
+          }
+          for (var index in newStringArr) {
+            resultStr = resultStr + newStringArr[index];
+          }
+          resultStr = resultStr.substring(0, resultStr.length - 3) + "\"\r\n}"
+          return resultStr;*/
+
+        var string = namevaluePairs.substring(1, namevaluePairs.length - 1);
+        var stringArr = string.split(',');
+        var newStringArr = [];
+        var resultStr = '{\r\n';
+        for (var index in stringArr) {
+            newStringArr[index] = stringArr[index] + ',\r\n';
+        }
+        for (var index in newStringArr) {
+            resultStr = resultStr + newStringArr[index];
+        }
+        resultStr = resultStr.substring(0, resultStr.length - 3) + '\r\n}';
+        return resultStr;
+    }
+
+    //========================== End of formatNameValuePairs() Method============================================
+
+    public syncParam() {
+        var paramNameValuesStr = localStorage['paramsContent'];
+        var pdData = this.paramShareService.getSessionParamData();
+        var paramNameValues = [];
+        var pdDataArrayForParamShare = [];
+        var pdDataArrayForSession = [];
+        try {
+            paramNameValues = JSON.parse(paramNameValuesStr);
+            console.log('Param Name values array==' + JSON.stringify(paramNameValues));
+            if (paramNameValues && paramNameValues != undefined) {
+                for (var index in paramNameValues) {
+                    var json = {
+                        'paramName': index,
+                        'paramValue': paramNameValues[index]
+                    };
+                    pdDataArrayForParamShare.push(json);
+
+                    pdDataArrayForSession.push({
+                        'name': index,
+                        '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]
+
+                    });
+
+                }
+                this.paramShareService.setTemplateData(pdDataArrayForParamShare);
+
+                if (pdData && pdData != undefined) {
+                    for (var i = 0; i < pdDataArrayForSession.length; i++) {
+
+                        pdData.forEach(function (arr2item) {
+                            if (pdDataArrayForSession[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
+                                };
+                                pdDataArrayForSession.splice(i, 1, json);
+                                //  console.log("Result array index ==" + JSON.stringify(resultArr[i]))
+                            }
+
+                        });
+
+                    }
+                }
+
+                this.paramShareService.setSessionParamData(pdDataArrayForSession);
+
+                this.router.navigate(['../../../vnfs/design/parameterDefinitions/create']);
+
+            }
+        }
+        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