gerrit.onap Code Review - appc/cdt.git/blob

   1 /*
   2 ============LICENSE_START==========================================
   3 ===================================================================
   4 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   5 ===================================================================
   6 Copyright (C) 2018 IBM.
   7 ===================================================================
   8
   9 Unless otherwise specified, all software contained herein is licensed
  10 under the Apache License, Version 2.0 (the License);
  11 you may not use this software except in compliance with the License.
  12 You may obtain a copy of the License at
  13
  14     http://www.apache.org/licenses/LICENSE-2.0
  15
  16 Unless required by applicable law or agreed to in writing, software
  17 distributed under the License is distributed on an "AS IS" BASIS,
  18 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  19 See the License for the specific language governing permissions and
  20 limitations under the License.
  21
  22 ============LICENSE_END============================================
  23 */
  24
  25 import { Component, Input, OnInit, ViewChild } from '@angular/core';
  26 import { HttpUtilService } from '../../../../shared/services/httpUtil/http-util.service';
  27 import { MappingEditorService } from '../../../../shared/services/mapping-editor.service';
  28 import { ArtifactRequest } from '../../../../shared/models/index';
  29 import { ActivatedRoute, Router } from '@angular/router';
  30 import { saveAs } from 'file-saver';
  31 import { NotificationService } from '../../../../shared/services/notification.service';
  32 import { NotificationsService } from 'angular2-notifications';
  33 import { ParamShareService } from '../../../../shared/services/paramShare.service';
  34 import { DialogService } from 'ng2-bootstrap-modal';
  35 import { ConfirmComponent } from '../../../../shared/confirmModal/confirm.component';
  36 import { BuildDesignComponent } from '../../build-artifacts.component';
  37 import { environment } from '../../../../../environments/environment';
  38 import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
  39 import { NgProgress } from 'ngx-progressbar';
  40 import { NgxSpinnerService } from 'ngx-spinner';
  41 import { UtilityService } from '../../../../shared/services/utilityService/utility.service';
  42 declare var $: any
  43 const PARAM_DATA:string="param_data";
  44 const TEMPLATE_DATA:string="template_data";
  45 @Component({ selector: 'app-golden-configuration', templateUrl: './template-configuration.component.html', styleUrls: ['./template-configuration.component.css'] })
  46 export class GoldenConfigurationComponent implements OnInit {
  47   @ViewChild('templateeditor') templateeditor;
  48   @Input() configMappingEditorContent: string;
  49   @Input() isMappingComp: boolean;
  50   @ViewChild('myInput') myInputVariable: any;
  51   @ViewChild('myModal') modal: ModalComponent;
  52   aceText: string = ""
  53   fileName: string = ""
  54   showTemplateVersionDiv: any;
  55   downloadedTemplateFileName: any;
  56   downloadedParamFileName: any;
  57   templateVersionNo: any = '0.0.1';
  58   saveToGuiCacheFlag = 'false';
  59   initialAction: any;
  60   public referenceData: Array<Object> = [];
  61   public scopeName: any;
  62   public subscription: any;
  63   public item: any = {};
  64   public goldenActions: Array<string> = [];
  65   public refNameObj = {};
  66   public action = '';
  67   public artifactName = '';
  68   public type;
  69   public showError: boolean = false;
  70   public tempretrieveFlag: boolean = false;
  71   public fileNameForTempSave;
  72   initialData: any;
  73   showDownloadDiv: boolean = false;
  74   downloadType: any;
  75   enableBrowse: boolean = true;
  76   enableMerge: boolean = false;
  77   uploadValidationSuccess: boolean = false;
  78   fileExtension: any = "xml";
  79   apiToken = localStorage['apiToken'];
  80   public appDataObject: any;
  81   public downloadDataObject: any;
  82   public checkNameEntered: boolean = true;
  83   public selectedWord: any = this.mappingEditorService.getSelectedWord();
  84   public Actions = [
  85     { action: "ConfigBackup", value: "ConfigBackup" },
  86     { action: "ConfigModify", value: "ConfigModify" },
  87     { action: "ConfigRestore", value: "ConfigRestore" },
  88     { action: "Configure", value: "Configure" },
  89     { action: "GetRunningConfig", value: "GetRunningConfig" },
  90     { action: "HealthCheck", value: "HealthCheck" },
  91     { action: "StartApplication", value: "StartApplication" },
  92     { action: "StopApplication", value: "StopApplication" }
  93   ];
  94   options = {
  95     timeOut: 1000,
  96     showProgressBar: true,
  97     pauseOnHover: true,
  98     clickToClose: true,
  99     maxLength: 200
 100   }
 101   public replaceWord;
 102   public enableDownloadButtons: boolean = false;
 103
 104   constructor(
 105     private buildDesignComponent: BuildDesignComponent,
 106     private paramShareService: ParamShareService,
 107     private dialogService: DialogService,
 108     private notificationService: NotificationService,
 109     private httpUtil: HttpUtilService,
 110     private mappingEditorService: MappingEditorService,
 111     private activeRoutes: ActivatedRoute,
 112     private router: Router,
 113     private nService: NotificationsService,
 114     private ngProgress: NgProgress,
 115     private spinner: NgxSpinnerService,
 116     private utilityService: UtilityService) {
 117     this.artifactRequest.action = '';
 118     this.artifactRequest.version = '';
 119     this.artifactRequest.paramsContent = '{}';
 120     this.artifactRequest.paramKeysContent = '';
 121   }
 122   public templateEditor: any;
 123   public fileType: any = '';
 124   public actionType: any;
 125   public myfileName: any;
 126   userId = localStorage['userId'];
 127   public artifactRequest: ArtifactRequest = new ArtifactRequest();
 128   public showUploadStatus: boolean = false;
 129   public uploadStatus: boolean = false;
 130   public uploadTypes = [
 131     {
 132       value: 'Generated Template',
 133       display: 'Sample Json Param File'
 134     },
 135     {
 136       value: 'Mapping Data',
 137       display: 'Sample Json Param File'
 138     }
 139   ];
 140   vnfType: any = '';
 141   vnfcType: any = '';
 142   protocol: any = '';
 143   refObj: any;
 144   editor: any;
 145   editorContent: any;
 146   tempName: any;
 147   enableValidateTemplate: boolean = false;;
 148   public selectedUploadType: string = this.uploadTypes[0].value;
 149   identifier: any;
 150   public tempRetrievalResponse: any;
 151   public mergeStatus: boolean = false;
 152
 153   //======================================Start of ngOnInit() Method============================================
 154   ngOnInit() {
 155     var refObj = this.refObj = this.prepareFileName();
 156     if (refObj && refObj != undefined) {
 157       this.item = refObj;
 158
 159       this.vnfType = this.item.scope["vnf-type"];
 160       this.vnfcType = this.item.scope["vnfc-type"];
 161       this.protocol = this.item['device-protocol'];
 162       this.action = this.item.action;
 163       this.artifactRequest.action = this.item.action;
 164       this.artifactRequest.vnfType = this.vnfType;
 165       if (this.vnfcType != undefined && this.vnfcType.length != 0) {
 166         this.scopeName = this.vnfcType;
 167       }
 168       else {
 169         this.scopeName = this.vnfType;
 170       }
 171     }
 172     else {
 173       this.item = { "action": "", "scope": { "vnf-type": "", "vnfc-type": "" }, "vm": [], "protocol": "", "download-dg-reference": "", "user-name": "", "port-number": "", "artifact-list": [], "deviceTemplate": "", "scopeType": "" };
 174     }
 175     this.initialAction = this.item.action;
 176     this.activeRoutes.url.subscribe(UrlSegment => {
 177       this.actionType = UrlSegment[0].path
 178     })
 179     this.mappingEditorService.fromScreen = 'MappingScreen';
 180     this.identifier = this.mappingEditorService.identifier;
 181   }
 182   //========================== End of ngOnInit() Method============================================
 183   ngOnDestroy() {
 184     if (this.refObj && this.refObj != undefined) {
 185       if (this.configMappingEditorContent && this.configMappingEditorContent != undefined) {
 186         this.saveTemplate();
 187         this.prepareAppData();
 188         this.prepareDownloadData();
 189         this.mappingEditorService.changeNavAppData(this.appDataObject);
 190         this.mappingEditorService.changeNavDownloadData(this.downloadDataObject);
 191       }
 192     }
 193   }
 194   //========================== End of ngOnDestroy() Method============================================
 195   ngAfterViewInit() {
 196     if (this.mappingEditorService.latestAction) {
 197       this.refNameObj = this.mappingEditorService.latestAction;
 198       if (this.vnfcType !== 'null') {
 199         this.type = this.vnfcType;
 200       }
 201       else {
 202         this.type = this.vnfType;
 203       }
 204       for (let i = 0; i < this.refNameObj['artifact-list'].length; i++) {
 205         let artifactList = this.refNameObj['artifact-list'];
 206         if (artifactList[i]['artifact-type'] === 'config_template') {
 207           var artifactName = artifactList[i]['artifact-name'];
 208           var artifactNameWithoutExtension = '';
 209                     if (artifactName) {
 210             artifactNameWithoutExtension = artifactName.substring(0, artifactName.lastIndexOf("."));
 211           }
 212           if(this.mappingEditorService.identifier) {
 213             if(artifactNameWithoutExtension.endsWith(this.mappingEditorService.identifier)) {
 214                 this.artifactName = artifactName;
 215             }
 216           }
 217           else {
 218             this.artifactName = artifactName;
 219           }
 220
 221         }
 222       }
 223     }
 224     let self = this;
 225     this.templateEditor = self.templateeditor.getEditor();
 226     this.templateeditor.getEditor().commands.addCommand({
 227       name: 'annotateCommandAlternate',
 228       bindKey: { win: 'CTRL-4', mac: 'Command-4' },
 229       exec: (editor: any) => {
 230         this.handleAnnotation(this.modal);
 231       }
 232     });
 233     this.templateeditor.getEditor().$enableBlockSelect = false;
 234     this.templateeditor.getEditor().$enableMultiselect = false;
 235     if (this.mappingEditorService.fromScreen === 'MappingScreen') {
 236       this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
 237       this.fileType = sessionStorage.getItem('fileType');
 238     }
 239     if (this.configMappingEditorContent) {
 240       this.artifactRequest.templateContent = this.configMappingEditorContent;
 241       this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
 242     }
 243     if (this.refObj) {
 244       if (this.mappingEditorService.getTemplateMappingDataFromStore() && this.mappingEditorService.getTemplateMappingDataFromStore() != undefined) {
 245         this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore();
 246       }
 247       else {
 248         if (this.artifactName) this.retrieveTemplateFromAppc();
 249       }
 250     }
 251     else {
 252       this.Actions = [];
 253       this.enableBrowse = false;
 254       this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
 255     }
 256   }
 257
 258   //========================== End of ngAfterViewInit() Method============================================
 259   browseOption() {
 260     $("#inputFile").trigger('click');
 261   }
 262   //========================== End of browseOption() Method============================================
 263   //save to GUI
 264   public saveTemplate() {
 265     this.saveToGuiCacheFlag = 'true';
 266     this.mappingEditorService.paramData = [];
 267     if (this.configMappingEditorContent) {
 268       this.initialData = this.configMappingEditorContent;
 269       this.mappingEditorService.refreshEditor();
 270       let paramArr: any = []
 271       if (this.mappingEditorService.paramData && this.mappingEditorService.paramData != undefined) {
 272         if (this.mappingEditorService.paramData.length === 0 && this.mappingEditorService.hasErrorCode === true) {
 273           this.nService.error("Error", 'Special characters error', 'Error')
 274           return;
 275         }
 276         else {
 277           this.showError = false;
 278         }
 279       }
 280       this.showTemplateVersionDiv = true;
 281
 282       if (this.mappingEditorService.fromScreen === 'MappingScreen') {
 283         this.mappingEditorService.setTemplateMappingDataFromStore(this.configMappingEditorContent);
 284       }
 285       if (this.fileType === 'text/xml') {
 286         sessionStorage.setItem('fileType', 'text/xml');
 287       }
 288       if (this.fileType === '') {
 289         sessionStorage.setItem('fileType', '');
 290       }
 291     }
 292   }
 293   //========================== End of saveTemplate() Method============================================
 294   retrieveTemplateFromAppc() {
 295     let refObj = this.refObj;
 296     if (refObj && refObj != undefined) {
 297
 298       let fileName = this.artifactName;
 299       let input = this.utilityService.createPayloadForRetrieve(false, this.item.action, this.vnfType, fileName);
 300       let artifactContent: any;
 301       this.ngProgress.start();
 302       this.httpUtil.post({
 303         url: environment.getDesigns,
 304         data: input
 305       }).subscribe(resp => {
 306         if (resp.output.status.code === '400' && resp.output.status.message === "success") {
 307           this.nService.success("Success", "Template retrieved successfully from APPC");
 308           this.tempRetrievalResponse = resp;
 309           let result = JSON.parse(resp.output.data.block).artifactInfo[0];
 310           result = result['artifact-content'];
 311           if ('Generated Template' === this.selectedUploadType) {
 312             this.configMappingEditorContent = result
 313             this.artifactRequest.templateContent = this.configMappingEditorContent;
 314             this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
 315             if (this.artifactRequest.templateContent) {
 316               this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
 317             }
 318           }
 319           this.tempretrieveFlag = true;
 320           this.fileNameForTempSave = fileName;
 321           this.enableDownloadButtons = true;
 322           this.initialData = result;
 323           this.saveTemplate();
 324         }
 325         else {
 326           this.nService.info("Information", "There is no template saved in APPC for the selected action!");
 327         }
 328         this.ngProgress.done();
 329       },
 330         error => this.nService.error("Error", "Error in connecting to APPC Server"));
 331       setTimeout(() => {
 332         this.ngProgress.done();
 333       }, 3500);
 334     }
 335   }
 336   //========================== End of retrieveTemplateFromAppc() Method============================================
 337   prepareAppData() {
 338     let refObj = this.refObj;
 339     if (refObj && refObj != undefined) {
 340       let paramsKeyValueFromEditor: JSON;
 341       try {
 342         paramsKeyValueFromEditor = JSON.parse(localStorage["paramsContent"]);
 343       }
 344       catch (error) {
 345         console.log("Could not parse name value pairs==" + error);
 346       }
 347       if (paramsKeyValueFromEditor) {
 348         this.showTemplateVersionDiv = true;
 349         let action = this.item.action;
 350         var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
 351         var fileName = '';
 352         let id = this.mappingEditorService.identifier;
 353         if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.templateVersionNo, id);
 354         else fileName = this.updateParamFileName(this.item.action, scopeName, this.templateVersionNo);
 355
 356         let vnfType = this.vnfType;
 357         let Json = [paramsKeyValueFromEditor];
 358         let slashedPayload = this.appendSlashes(JSON.stringify(Json));
 359         let data = this.utilityService.createPayLoadForSave(PARAM_DATA, this.vnfType, action, fileName, this.templateVersionNo, slashedPayload);
 360         this.appDataObject.template.nameValueData = data;
 361       }
 362       if (this.configMappingEditorContent) {
 363         let actualContent = this.configMappingEditorContent;
 364         this.mappingEditorService.generateTemplate(this.templateEditor);
 365         this.showTemplateVersionDiv = true;
 366         let action = this.item.action;
 367         let versionandFileType: any;
 368         if (this.fileType === "text/xml") {
 369
 370           versionandFileType = this.templateVersionNo + 'V.xml'
 371         } else {
 372
 373           versionandFileType = this.templateVersionNo + 'V.json'
 374         }
 375         let fileName: any;
 376         if (this.tempretrieveFlag) {
 377           fileName = this.fileNameForTempSave;
 378         }
 379         else {
 380           fileName = this.artifactName;
 381         }
 382         let vnfType = this.vnfType;
 383         let data = this.utilityService.createPayLoadForSave(TEMPLATE_DATA, this.vnfType, action, fileName, this.templateVersionNo, this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}'));
 384         this.appDataObject.template.templateData = data;
 385         this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal);
 386       }
 387     }
 388   }
 389   //========================== End of prepareAppData() Method============================================
 390   prepareFileName(): any {
 391     let fileNameObject: any = this.mappingEditorService.latestAction;
 392     this.appDataObject = this.mappingEditorService.appDataObject;
 393     this.downloadDataObject = this.mappingEditorService.downloadDataObject;
 394     this.referenceData = fileNameObject;
 395     return fileNameObject;
 396   }
 397   //========================== End of prepareFileName() Method============================================
 398   onDownloadParameter() {
 399     let refObj = this.refObj;
 400     if (refObj) {
 401       let paramsKeyValueFromEditor: JSON;
 402       try {
 403         paramsKeyValueFromEditor = JSON.parse(localStorage["paramsContent"]);
 404       }
 405       catch (error) {
 406         console.log("Could not parse name value pairs==" + error);
 407       }
 408       let theJSON = JSON.stringify(paramsKeyValueFromEditor, null, "\t")
 409       var blob = new Blob([theJSON], {
 410         type: "text/json"
 411       });
 412       this.showTemplateVersionDiv = true;
 413       let fileName: any;
 414       var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, '');
 415       let id = this.mappingEditorService.identifier;
 416       if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.templateVersionNo, id);
 417       else fileName = this.updateParamFileName(this.item.action, scopeName, this.templateVersionNo);
 418
 419       this.downloadDataObject.template.nameValueData = theJSON;
 420       this.downloadDataObject.template.nameValueFileName = fileName;
 421     }
 422     else {
 423       this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
 424     }
 425
 426   }
 427   //========================== End of onDownloadParameter() Method============================================
 428   updateParamFileName(action: any, scopeName: any, versionNo: any) {
 429     let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V.json';
 430     this.downloadedParamFileName = fileName;
 431     return fileName;
 432   }
 433   //========================== End of updateParamFileName() Method============================================
 434   updateFileNameForConfigScaleOut(action: any, scopeName: any, versionNo: any, id: any) {
 435     let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V_' + id + '.json';
 436     this.downloadedParamFileName = fileName;
 437     return fileName;
 438   }
 439   //========================== End of updateFileNameForConfigScaleOut() Method============================================
 440   public onDownloadTemplate(artifact: string) {
 441     let actualContent = this.configMappingEditorContent;
 442     var textToSaveAsBlob: any;
 443     var config_template_fileName: any
 444     let refObj = this.refObj;
 445     let versionandFileType: string;
 446     if (artifact == 'Template' && this.artifactRequest && this.configMappingEditorContent && refObj) {
 447       this.showTemplateVersionDiv = true;
 448       if (this.fileType === "text/xml") {
 449         textToSaveAsBlob = new Blob([this.configMappingEditorContent], {
 450           type: "text/xml"
 451         });
 452         versionandFileType = this.templateVersionNo + 'V.xml'
 453       }
 454       if (this.fileType === "text/plain") {
 455         textToSaveAsBlob = new Blob([this.configMappingEditorContent], {
 456           type: "text/plain"
 457         });
 458         versionandFileType = this.templateVersionNo + 'V.txt'
 459       }
 460       if (this.fileType === "text/json") {
 461         textToSaveAsBlob = new Blob([this.configMappingEditorContent], {
 462           type: "text/json"
 463         });
 464         versionandFileType = this.templateVersionNo + 'V.json'
 465       }
 466       if (this.tempretrieveFlag) {
 467         config_template_fileName = this.fileNameForTempSave;
 468         var filextension = config_template_fileName.substring(config_template_fileName.indexOf("V") + 2, config_template_fileName.length);
 469
 470         textToSaveAsBlob = new Blob([this.configMappingEditorContent], {
 471           type: "text/" + filextension
 472         });
 473       }
 474       else {
 475         config_template_fileName = this.artifactName;
 476       }
 477       this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal);
 478       this.downloadDataObject.template.templateData = this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}');
 479       this.downloadDataObject.template.templateFileName = config_template_fileName;
 480     }
 481
 482   }
 483   //========================== End of onDownloadTemplate() Method============================================
 484   fileChange(input) {
 485
 486     let self = this;
 487     let refObj = this.refObj;
 488     this.enableValidateTemplate = true;
 489
 490     if (refObj && refObj != undefined) {
 491       if (input.files && input.files[0]) {
 492         this.spinner.show();
 493         this.myfileName = input.files[0].name;
 494         this.fileName = input.files[0].name;
 495         this.fileType = input.files[0].type;
 496         let reader = new FileReader();
 497         this.readFile(input.files[0], reader, (result) => {
 498           if (this.fileType === 'text/xml') {
 499             sessionStorage.setItem('fileType', 'text/xml');
 500           }
 501           if (this.fileName.endsWith(".json")) {
 502             this.fileType = "text/json";
 503             sessionStorage.setItem('fileType', 'text/json');
 504           }
 505           if (this.fileType === '') {
 506             sessionStorage.setItem('fileType', '');
 507           }
 508
 509
 510           if ('Generated Template' === this.selectedUploadType) {
 511             this.configMappingEditorContent = result
 512             this.artifactRequest.templateContent = this.configMappingEditorContent;
 513             this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..');
 514             if (this.artifactRequest.templateContent) {
 515               this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal);
 516             }
 517           }
 518           this.enableDownloadButtons = true;
 519           this.initialData = result;
 520           this.saveTemplate();
 521           this.templateeditor.getEditor().$enableBlockSelect = false;
 522           this.templateeditor.getEditor().$enableMultiselect = false;
 523           setTimeout(() => {
 524                         /** spinner ends after 3.5 seconds */
 525                         this.spinner.hide();
 526           }, 3500);
 527         });
 528       }
 529       else {
 530         this.nService.error("Error", "Failed to read file");
 531       }
 532       this.myInputVariable.nativeElement.value = "";
 533     }
 534     else {
 535       this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen");
 536       return false;
 537     }
 538   }
 539   //========================== End of fileChange() Method============================================
 540   public readFile(file, reader, callback) {
 541     // Set a callback funtion to fire after the file is fully loaded
 542     reader.onload = () => {
 543       // callback with the results
 544       callback(reader.result);
 545     }
 546     this.notificationService.notifySuccessMessage('Uploading File ' + file.name + ':' + file.type + ':' + file.size);
 547     // Read the file
 548     reader.readAsText(file, "UTF-8");
 549   }
 550   //========================== End of readFile() Method============================================
 551   validateUploadedFile(fileExtension) {
 552
 553     if (fileExtension.toUpperCase() === 'json'.toUpperCase() || fileExtension.toUpperCase() === 'xml'.toUpperCase()) {
 554       return true;
 555     }
 556     else {
 557       return false;
 558     }
 559
 560   }
 561   //========================== End of validateUploadedFile() Method============================================
 562   appendSlashes(artifactData) {
 563     let x = artifactData.replace(new RegExp(',"', "g"), ',\"');
 564     let y = x.replace(new RegExp('":', 'g'), '\":');
 565     let z = y.replace(new RegExp('{"', 'g'), '{\"')
 566     let t = z.replace(new RegExp(':"', 'g'), ':\"')
 567     let m = t.replace(new RegExp('",', 'g'), '\",');
 568     let n = y.replace(new RegExp('"}', 'g'), '\"}')
 569     let nw = n.replace(new RegExp('{"', 'g'), '{\"');
 570     let nw1 = nw.replace(new RegExp(':"', 'g'), ':\"');
 571     let nw2 = nw1.replace(new RegExp('",', 'g'), '\",');
 572     return nw2;
 573   }
 574   //========================== End of appendSlashes() Method============================================
 575   prepareDownloadData() {
 576     this.onDownloadParameter();
 577     this.onDownloadTemplate('Template');
 578   }
 579   //========================== End of prepareDownloadData() Method============================================
 580   syncTemplate() {
 581     this.mappingEditorService.replaceNamesWithBlankValues();
 582     this.saveTemplate();
 583
 584     var templateData = this.mappingEditorService.paramData; //template data array
 585     var pdData = this.paramShareService.getSessionParamData(); //PD data array
 586     var paramsContent = localStorage["paramsContent"];
 587
 588     if (paramsContent && paramsContent != undefined) {
 589       try {
 590         var paramTabData = JSON.parse(paramsContent);
 591       }
 592       catch (error) {
 593         console.log("error is : " + error)
 594       }
 595     }
 596     var resultArr = [];
 597     var json = {};
 598     var resultParamObj = {};
 599     let checkNamesOnlyCondition: boolean = true;
 600
 601     if (templateData && templateData != undefined) {
 602       templateData.forEach(function (item) {
 603         if (item.paramValue !== "" && item.paramValue != undefined && item.paramValue != null) {
 604           checkNamesOnlyCondition = false;
 605         }
 606
 607       });
 608
 609       templateData.forEach(function (item) {
 610         resultParamObj[item.paramName] = item.paramValue;
 611       });
 612       if (paramTabData && paramTabData != undefined) {
 613         templateData.forEach(function (item) {
 614           for (var index in paramTabData) {
 615             if (item.paramName === index) {
 616               if (checkNamesOnlyCondition) {
 617                 resultParamObj[index] = paramTabData[index];
 618               }
 619               else {
 620                 if (item.paramValue === "") {
 621                   resultParamObj[index] = paramTabData[index];
 622                 }
 623                 else {
 624                   resultParamObj[index] = item.paramValue;
 625                 }
 626               }
 627             }
 628
 629           }
 630
 631         });
 632
 633       }
 634       localStorage["paramsContent"] = JSON.stringify(resultParamObj);
 635       templateData = Array.from(new Set(templateData.map((itemInArray) => itemInArray.paramName)))
 636
 637       //reformatting arr1 to match with PD
 638       templateData.forEach(function (item) {
 639
 640         resultArr.push({
 641           "name": item,
 642           "type": null,
 643           "description": null,
 644           "required": null,
 645           "default": null,
 646           "source": "Manual",
 647           "rule-type": null,
 648           "request-keys": [{
 649             "key-name": null,
 650             "key-value": null
 651           }, {
 652             "key-name": null,
 653             "key-value": null
 654           }, {
 655             "key-name": null,
 656             "key-value": null
 657           }],
 658           "response-keys": [{
 659             "key-name": null,
 660             "key-value": null
 661           }, {
 662             "key-name": null,
 663             "key-value": null
 664           }, {
 665             "key-name": null,
 666             "key-value": null
 667           }, {
 668             "key-name": null,
 669             "key-value": null
 670           }, {
 671             "key-name": null,
 672             "key-value": null
 673           }],
 674           "ruleTypeValues": [null]
 675
 676         })
 677       });
 678     }
 679     if (pdData && pdData != undefined) {
 680       for (var i = 0; i < resultArr.length; i++) {
 681
 682         pdData.forEach(function (arr2item) {
 683           if (resultArr[i].name === arr2item.name) {
 684
 685             var json = {
 686               "name": arr2item.name,
 687               "type": arr2item.type,
 688               "description": arr2item.description,
 689               "required": arr2item.required,
 690               "default": arr2item.default,
 691               "source": arr2item.source,
 692               "rule-type": arr2item["rule-type"],
 693               "request-keys": arr2item["request-keys"],
 694               "response-keys": arr2item["response-keys"],
 695               "ruleTypeValues": arr2item.ruleTypeValues
 696             };
 697             resultArr.splice(i, 1, json)
 698           }
 699
 700         });
 701
 702       };
 703
 704     }
 705     this.paramShareService.setSessionParamData(resultArr);
 706     this.mappingEditorService.paramData = [];
 707     //navigate to PD page after sync
 708     this
 709       .router
 710       .navigate(['../../../vnfs/design/parameterDefinitions/create']);
 711   }
 712
 713   //========================== End of syncTemplate() Method============================================
 714   mergeParams() {
 715     this.mergeStatus = this.mappingEditorService.autoAnnotateDataForParams();
 716     if (this.mergeStatus) {
 717       this.nService.success("Success", "Merge Successful");
 718     }
 719     else {
 720       this.nService.error("Error", "Merge Unsuccessful");
 721     }
 722     this.saveTemplate();
 723   }
 724   //========================== End of mergeParams() Method============================================
 725   public handleAnnotation(modal) {
 726
 727     this.selectedWord = this.templateeditor.getEditor().session.getTextRange(this.templateeditor.getEditor().selectionRange);
 728     if (this.selectedWord && this.selectedWord != undefined) modal.open();
 729   }
 730   //========================== End of handleAnnotations() Method============================================
 731   public submitNameValues() {
 732     if (this.tempName) {
 733       this.checkNameEntered = true;
 734
 735       if (this.selectedWord) {
 736         if (this.selectedWord.startsWith('${(')) {
 737           var replaceWord: any = this.replaceWord = this.selectedWord.substring(3, this.selectedWord.indexOf(')=(')) + this.tempName;
 738           this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord);
 739
 740         } else {
 741           let mappingKey = this.mappingEditorService.getKeysForValues(this.selectedWord);
 742           var replaceWord: any = this.replaceWord = '${(' + this.selectedWord + ')=(' + this.tempName + ')}';
 743           this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord);
 744
 745         }
 746       }
 747       this.mappingEditorService.refreshEditor();
 748       this.tempName = '';
 749       this.modal.close();
 750
 751     }
 752     else {
 753       this.checkNameEntered = false;
 754     }
 755
 756   }
 757   //========================== End of submitNameValues() Method============================================
 758 }