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