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