diff options
Diffstat (limited to 'src/app/vnfs/build-artifacts/template-holder/template-configuration')
3 files changed, 274 insertions, 326 deletions
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css index 646d3ce..c8100e3 100644 --- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css +++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.css @@ -32,16 +32,4 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property. .options-menu { padding: 3px 20px; -} -.ace_cursor{ - background-color: greenyellow; - -} -.ace-monokai{ - color: greenyellow; - -} -.ace_scroller{ - color: white; - background-color: wheat; }
\ No newline at end of file diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html index 67bce4d..105f0ec 100644 --- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html +++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html @@ -42,17 +42,17 @@ limitations under the License. <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" /> </div> <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType"> - <label>Vnfc Type</label> <label style="font-size:12px;">(NFC Function)</label> - <input class="form-control" type="text" disabled value="{{vnfcType}}" /> + <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" /> </div> <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType"> - + </div> <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" /> </div> <div *ngIf="(action === 'ConfigScaleOut')" class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> <label>Template Identifier</label><input class="form-control" type="text" [(ngModel)]="identifier" disabled /> + </div> </div> </div> @@ -62,8 +62,7 @@ limitations under the License. <div class="input-group"> <input id="inputFile" class="file" #myInput type='file' (change)='fileChange(myInput)'> <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload template from PC" style="width:80%"> - <button (click)="browseOption($event)" [disabled]="!enableBrowse" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" - type="button">Upload Template File + <button (click)="browseOption($event)" [disabled]="!enableBrowse" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload Template File </button> </div> </div> @@ -71,7 +70,7 @@ limitations under the License. <br> <div class="row" style="margin-bottom: 20px;"> <div class="col-md-12 text-right"> - <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="syncTemplate(0)">Synchronize Template Parameters + <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="syncTemplate()">Synchronize Template Parameters </button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="mergeParams()"> Merge from Param </button> @@ -82,15 +81,17 @@ limitations under the License. <div><label for="textAreaGeneratedTemplate"> <div class="mdl-card__title-text">File Editor</div> </label> - <!-- <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: 'Infinity', fontSize: '13pt'}" - style="min-height: 500px; width: fit-content;scroll-snap-coordinate: 3%"></ace-editor> --> - <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: '100', fontSize: '13pt' }" - style="min-height: 200px; width: 100%; caret-color: white "></ace-editor> + <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%; caret-color: white "></ace-editor> </div> - + <app-modal [title]="'Confirmation'" [isShow]="false" [message]="'Template is saved and ready for creating parameter definition'" #modalComponent> + </app-modal> <modal #myModal> - <modal-header [show-close]="true"> - <h4 class="modal-title">Enter Name for <b>"{{selectedWord}}"</b></h4> + <modal-header style="height:65px"> + <h4 class="modal-title" style="position:absolute;">Enter Name for <b>"{{selectedWord}}"</b></h4> + <button type="button" class="close" aria-label="Close" (click)="modal.close()" style="margin-left:auto"> + <span aria-hidden="true">×</span> + </button> + </modal-header> <modal-body> <div class="form-group row"> @@ -98,16 +99,14 @@ limitations under the License. <div class="col-12"> <input class="form-control" [(ngModel)]="tempName" name="templateName" type="text" id="tempName"> <span class="error-message" [hidden]="checkNameEntered" style="color: red;">Required Field</span> - <span class="error-message" [hidden]="checkSpace" style="color: red;">Name can't start or end with space(s)</span> </div> </div> </modal-body> <modal-footer [show-default-buttons]="false"> - <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent - - " (click)="modal.close();checkNameEntered=true;checkSpace=true;tempName=''">Cancel</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="submitNameValues()">Submit </button> - + <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent + + " (click)="modal.close()">Cancel</button> </modal-footer> </modal> diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts index 64777ea..8afa5bc 100644 --- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts +++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts @@ -3,6 +3,8 @@ =================================================================== Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. =================================================================== +Copyright (C) 2018 IBM. +=================================================================== Unless otherwise specified, all software contained herein is licensed under the Apache License, Version 2.0 (the License); @@ -17,11 +19,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -ECOMP is a trademark and service mark of AT&T Intellectual Property. ============LICENSE_END============================================ */ import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; import { HttpUtilService } from '../../../../shared/services/httpUtil/http-util.service'; import { MappingEditorService } from '../../../../shared/services/mapping-editor.service'; import { ArtifactRequest } from '../../../../shared/models/index'; @@ -36,31 +38,31 @@ import { BuildDesignComponent } from '../../build-artifacts.component'; import { environment } from '../../../../../environments/environment'; import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; import { NgProgress } from 'ngx-progressbar'; +import { NgxSpinnerService } from 'ngx-spinner'; import { UtilityService } from '../../../../shared/services/utilityService/utility.service'; -import { APIService } from "../../../../shared/services/cdt.apicall"; -import { ProcOnSrvSideSvc } from "../../../../shared/services/procOnSrvSide.service"; declare var $: any - +const PARAM_DATA:string="param_data"; +const TEMPLATE_DATA:string="template_data"; @Component({ selector: 'app-golden-configuration', templateUrl: './template-configuration.component.html', styleUrls: ['./template-configuration.component.css'] }) export class GoldenConfigurationComponent implements OnInit { - clName= "TemplateConfComp"; + clName= "TemplateConfigCompon"; @ViewChild('templateeditor') templateeditor; @Input() configMappingEditorContent: string; @Input() isMappingComp: boolean; @ViewChild('myInput') myInputVariable: any; - // @ViewChild(ModalComponent) modalComponent: ModalComponent; @ViewChild('myModal') modal: ModalComponent; aceText: string = "" fileName: string = "" showTemplateVersionDiv: any; downloadedTemplateFileName: any; downloadedParamFileName: any; - templateVersionNo: any = require('../../../../../cdt.application.properties.json').versionNoForApiCall; + templateVersionNo: any = '0.0.1'; saveToGuiCacheFlag = 'false'; initialAction: any; public referenceData: Array<Object> = []; public scopeName: any; - public subscription: any; + public subscription: Subscription; + public templateSubscription : Subscription; public item: any = {}; public goldenActions: Array<string> = []; public refNameObj = {}; @@ -76,6 +78,7 @@ export class GoldenConfigurationComponent implements OnInit { enableBrowse: boolean = true; enableMerge: boolean = false; uploadValidationSuccess: boolean = false; + fileExtension: any = "xml"; apiToken = localStorage['apiToken']; public appDataObject: any; public downloadDataObject: any; @@ -89,10 +92,11 @@ export class GoldenConfigurationComponent implements OnInit { { action: "GetRunningConfig", value: "GetRunningConfig" }, { action: "HealthCheck", value: "HealthCheck" }, { action: "StartApplication", value: "StartApplication" }, - { action: "StopApplication", value: "StopApplication" } + { action: "StopApplication", value: "StopApplication" }, + { action: "DistributeTraffic", value: "DistributeTraffic" } ]; options = { - timeOut: 4500, + timeOut: 1000, showProgressBar: true, pauseOnHover: true, clickToClose: true, @@ -100,30 +104,25 @@ export class GoldenConfigurationComponent implements OnInit { } public replaceWord; public enableDownloadButtons: boolean = false; - + constructor( - private buildDesignComponent: BuildDesignComponent, - private apiService: APIService, - private utilityService: UtilityService, - private paramShareService: ParamShareService, - private dialogService: DialogService, - private notificationService: NotificationService, - private httpUtil: HttpUtilService, - private mappingEditorService: MappingEditorService, - private activeRoutes: ActivatedRoute, - private router: Router, - private nService: NotificationsService, - private procOnSrvSideSvc: ProcOnSrvSideSvc, - private ngProgress: NgProgress) - { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": new: start."); + private buildDesignComponent: BuildDesignComponent, + private paramShareService: ParamShareService, + private dialogService: DialogService, + private notificationService: NotificationService, + private httpUtil: HttpUtilService, + private mappingEditorService: MappingEditorService, + private activeRoutes: ActivatedRoute, + private router: Router, + private nService: NotificationsService, + private ngProgress: NgProgress, + private spinner: NgxSpinnerService, + private utilityService: UtilityService) { this.artifactRequest.action = ''; this.artifactRequest.version = ''; this.artifactRequest.paramsContent = '{}'; this.artifactRequest.paramKeysContent = ''; } - public templateEditor: any; public fileType: any = ''; public actionType: any; @@ -149,33 +148,32 @@ export class GoldenConfigurationComponent implements OnInit { editor: any; editorContent: any; tempName: any; - paramArtifactName: any; enableValidateTemplate: boolean = false;; public selectedUploadType: string = this.uploadTypes[0].value; - checkSpace: boolean = true; - + identifier: any; public tempRetrievalResponse: any; public mergeStatus: boolean = false; - //==================================================== + + //======================================Start of ngOnInit() Method============================================ ngOnInit() { var methName= "ngOnInit"; if( this.utilityService.getTracelvl() > 0 ) console.log( this.clName+": "+methName+": start."); var refObj = this.refObj = this.prepareFileName(); - // console.log("Ref object: " + JSON.stringify(refObj)) + if( this.utilityService.getTracelvl() > 0 ) + console.log( this.clName+": "+methName+ + ": refObj:["+JSON.stringify(refObj)+"]"); if (refObj && refObj != undefined) { this.item = refObj; - this.vnfType = this.item.vnf; - this.vnfcType = this.item.vnfc; - this.protocol = this.item.protocol; + this.vnfType = this.item.scope["vnf-type"]; + this.vnfcType = this.item.scope["vnfc-type"]; + this.protocol = this.item['device-protocol']; this.action = this.item.action; if( this.utilityService.getTracelvl() > 0 ) console.log( this.clName+": "+methName+": vnfType:["+this.vnfType+ "] vnfcType:["+this.vnfcType+"] protocol:["+this.protocol+"] action:["+ this.action+"]"); - this.artifactName = this.item["template_artifact"] - this.paramArtifactName = this.item["param_artifact"] this.artifactRequest.action = this.item.action; this.artifactRequest.vnfType = this.vnfType; if (this.vnfcType != undefined && this.vnfcType.length != 0) { @@ -186,21 +184,17 @@ export class GoldenConfigurationComponent implements OnInit { } } else { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": refObj is not defined."); this.item = { "action": "", "scope": { "vnf-type": "", "vnfc-type": "" }, "vm": [], "protocol": "", "download-dg-reference": "", "user-name": "", "port-number": "", "artifact-list": [], "deviceTemplate": "", "scopeType": "" }; } this.initialAction = this.item.action; - this.activeRoutes.url.subscribe(UrlSegment => { + this.subscription = this.activeRoutes.url.subscribe(UrlSegment => { this.actionType = UrlSegment[0].path }) this.mappingEditorService.fromScreen = 'MappingScreen'; - + this.identifier = this.mappingEditorService.identifier; } //========================== End of ngOnInit() Method============================================ ngOnDestroy() { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": ngOnDestroy: start."); if (this.refObj && this.refObj != undefined) { if (this.configMappingEditorContent && this.configMappingEditorContent != undefined) { this.saveTemplate(); @@ -210,14 +204,12 @@ export class GoldenConfigurationComponent implements OnInit { this.mappingEditorService.changeNavDownloadData(this.downloadDataObject); } } - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": ngOnDestroy: finish."); + + if(this.subscription) { this.subscription.unsubscribe(); } + if(this.templateSubscription) { this.templateSubscription.unsubscribe(); } } //========================== End of ngOnDestroy() Method============================================ ngAfterViewInit() { - var methName= "ngAfterViewInit"; - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": start."); if (this.mappingEditorService.latestAction) { this.refNameObj = this.mappingEditorService.latestAction; if (this.vnfcType !== 'null') { @@ -226,36 +218,47 @@ export class GoldenConfigurationComponent implements OnInit { else { this.type = this.vnfType; } + for (let i = 0; i < this.refNameObj['artifact-list'].length; i++) { + let artifactList = this.refNameObj['artifact-list']; + if (artifactList[i]['artifact-type'] === 'config_template') { + var artifactName = artifactList[i]['artifact-name']; + var artifactNameWithoutExtension = ''; + if (artifactName) { + artifactNameWithoutExtension = artifactName.substring(0, artifactName.lastIndexOf(".")); + } + if(this.mappingEditorService.identifier) { + if(artifactNameWithoutExtension.endsWith(this.mappingEditorService.identifier)) { + this.artifactName = artifactName; + } + } + else { + this.artifactName = artifactName; + } + + } + } } let self = this; this.templateEditor = self.templateeditor.getEditor(); this.templateeditor.getEditor().commands.addCommand({ - name: 'annotateCommand', - bindKey: { win: 'ctrl-z', mac: 'Command-z' }, - exec: (editor: any) => { - this.handleUndo(this.modal); - } - }); - this.templateeditor.getEditor().commands.addCommand({ name: 'annotateCommandAlternate', bindKey: { win: 'CTRL-4', mac: 'Command-4' }, exec: (editor: any) => { - this.checkNameEntered = true; - this.checkSpace = true; this.handleAnnotation(this.modal); } }); + this.templateeditor.getEditor().$enableBlockSelect = false; + this.templateeditor.getEditor().$enableMultiselect = false; if (this.mappingEditorService.fromScreen === 'MappingScreen') { this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore(); this.fileType = sessionStorage.getItem('fileType'); } if (this.configMappingEditorContent) { this.artifactRequest.templateContent = this.configMappingEditorContent; - this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent); + this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal); } if (this.refObj) { - if (this.mappingEditorService.getTemplateMappingDataFromStore() && - this.mappingEditorService.getTemplateMappingDataFromStore() != undefined) { + if (this.mappingEditorService.getTemplateMappingDataFromStore() && this.mappingEditorService.getTemplateMappingDataFromStore() != undefined) { this.configMappingEditorContent = this.mappingEditorService.getTemplateMappingDataFromStore(); } else { @@ -265,8 +268,7 @@ export class GoldenConfigurationComponent implements OnInit { else { this.Actions = []; this.enableBrowse = false; - this.nService.error("Error", - "Please enter Action and VNF type in Reference Data screen", this.options); + this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen"); } } @@ -275,58 +277,74 @@ export class GoldenConfigurationComponent implements OnInit { $("#inputFile").trigger('click'); } //========================== End of browseOption() Method============================================ + //save to GUI public saveTemplate() { - var methName= "saveTemplate"; - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": start."); + this.saveToGuiCacheFlag = 'true'; this.mappingEditorService.paramData = []; if (this.configMappingEditorContent) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": do refreshEditor ..."); + this.initialData = this.configMappingEditorContent; this.mappingEditorService.refreshEditor(); let paramArr: any = [] if (this.mappingEditorService.paramData && this.mappingEditorService.paramData != undefined) { if (this.mappingEditorService.paramData.length === 0 && this.mappingEditorService.hasErrorCode === true) { - this.nService.error("Error", 'Special characters error', this.options); + this.nService.error("Error", 'Special characters error', 'Error') return; } else { this.showError = false; } } - this.mappingEditorService.setTemplateMappingDataFromStore(this.configMappingEditorContent); + this.showTemplateVersionDiv = true; + + if (this.mappingEditorService.fromScreen === 'MappingScreen') { + this.mappingEditorService.setTemplateMappingDataFromStore(this.configMappingEditorContent); + } + if (this.fileType === 'text/xml') { + sessionStorage.setItem('fileType', 'text/xml'); + } + if (this.fileType === '') { + sessionStorage.setItem('fileType', ''); + } } } //========================== End of saveTemplate() Method============================================ retrieveTemplateFromAppc() { - var methName= "retrieveTemplateFromAppc"; - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": start ..."); let refObj = this.refObj; if (refObj && refObj != undefined) { + let fileName = this.artifactName; let input = this.utilityService.createPayloadForRetrieve(false, this.item.action, this.vnfType, fileName); - // console.log("Retrieve artifact payload=="+ payload); let artifactContent: any; this.ngProgress.start(); - this.apiService.callGetArtifactsApi(input).subscribe(resp => { + this.templateSubscription = this.httpUtil.post({ + url: environment.getDesigns, + data: input + }).subscribe(resp => { if (resp.output.status.code === '400' && resp.output.status.message === "success") { - this.nService.success("Success","Template retrieved successfully from APPC", this.options); + this.nService.success("Success", "Template retrieved successfully from APPC"); this.tempRetrievalResponse = resp; let result = JSON.parse(resp.output.data.block).artifactInfo[0]; result = result['artifact-content']; - this.configMappingEditorContent = result - this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent); + if ('Generated Template' === this.selectedUploadType) { + this.configMappingEditorContent = result + this.artifactRequest.templateContent = this.configMappingEditorContent; + this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..'); + if (this.artifactRequest.templateContent) { + this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal); + } + } this.tempretrieveFlag = true; this.fileNameForTempSave = fileName; + this.enableDownloadButtons = true; + this.initialData = result; this.saveTemplate(); } else { - this.nService.info("Information","There is no template saved in APPC for the selected action!", this.options); + this.nService.info("Information", "There is no template saved in APPC for the selected action!"); } this.ngProgress.done(); }, - error => this.nService.error("Error", "Error in connecting to APPC Server", this.options)); + error => this.nService.error("Error", "Error in connecting to APPC Server")); setTimeout(() => { this.ngProgress.done(); }, 3500); @@ -334,46 +352,41 @@ export class GoldenConfigurationComponent implements OnInit { } //========================== End of retrieveTemplateFromAppc() Method============================================ prepareAppData() { - var methName= "prepareAppData"; - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": start."); let refObj = this.refObj; if (refObj && refObj != undefined) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": parse locStor.paramsContent"); let paramsKeyValueFromEditor: JSON; try { paramsKeyValueFromEditor = JSON.parse(localStorage["paramsContent"]); } catch (error) { - console.log(methName+": Could not parse name value pairs:" + error); + console.log("Could not parse name value pairs==" + error); } if (paramsKeyValueFromEditor) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+ - ": have paramsKeyValueFromEditor"); + this.showTemplateVersionDiv = true; let action = this.item.action; - var scopeName = - this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, ''); + var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, ''); var fileName = ''; - fileName = this.paramArtifactName; + let id = this.mappingEditorService.identifier; + if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.templateVersionNo, id); + else fileName = this.updateParamFileName(this.item.action, scopeName, this.templateVersionNo); + + let vnfType = this.vnfType; let Json = [paramsKeyValueFromEditor]; let slashedPayload = this.appendSlashes(JSON.stringify(Json)); - let data = - this.utilityService.createPayLoadForSave("param_data", this.vnfType, action, fileName, this.templateVersionNo, slashedPayload); + let data = this.utilityService.createPayLoadForSave(PARAM_DATA, this.vnfType, action, fileName, this.templateVersionNo, slashedPayload); this.appDataObject.template.nameValueData = data; } if (this.configMappingEditorContent) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+ - ": have configMappingEditorContent"); let actualContent = this.configMappingEditorContent; this.mappingEditorService.generateTemplate(this.templateEditor); + this.showTemplateVersionDiv = true; let action = this.item.action; let versionandFileType: any; if (this.fileType === "text/xml") { + versionandFileType = this.templateVersionNo + 'V.xml' } else { + versionandFileType = this.templateVersionNo + 'V.json' } let fileName: any; @@ -384,30 +397,15 @@ export class GoldenConfigurationComponent implements OnInit { fileName = this.artifactName; } let vnfType = this.vnfType; - - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+ - ": start replace: content length="+ - this.configMappingEditorContent.length ); - var replContent= - this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}'); - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+" replace done"); - - let data = this.utilityService.createPayLoadForSave("template_data", this.vnfType, action, fileName, this.templateVersionNo, replContent ); - + let data = this.utilityService.createPayLoadForSave(TEMPLATE_DATA, this.vnfType, action, fileName, this.templateVersionNo, this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}')); this.appDataObject.template.templateData = data; - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": initialise editor ..."); - this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent); + this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal); } - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": "+methName+": finish."); } } //========================== End of prepareAppData() Method============================================ prepareFileName(): any { - let fileNameObject: any = this.mappingEditorService.newObject; + let fileNameObject: any = this.mappingEditorService.latestAction; this.appDataObject = this.mappingEditorService.appDataObject; this.downloadDataObject = this.mappingEditorService.downloadDataObject; this.referenceData = fileNameObject; @@ -428,29 +426,42 @@ export class GoldenConfigurationComponent implements OnInit { var blob = new Blob([theJSON], { type: "text/json" }); + this.showTemplateVersionDiv = true; let fileName: any; var scopeName = this.scopeName.replace(/ /g, '').replace(new RegExp('/', "g"), '_').replace(/ /g, ''); - fileName = this.paramArtifactName; + let id = this.mappingEditorService.identifier; + if (id) fileName = this.updateFileNameForConfigScaleOut(this.item.action, scopeName, this.templateVersionNo, id); + else fileName = this.updateParamFileName(this.item.action, scopeName, this.templateVersionNo); + this.downloadDataObject.template.nameValueData = theJSON; this.downloadDataObject.template.nameValueFileName = fileName; } else { - this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen", this.options); + this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen"); } } //========================== End of onDownloadParameter() Method============================================ + updateParamFileName(action: any, scopeName: any, versionNo: any) { + let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V.json'; + this.downloadedParamFileName = fileName; + return fileName; + } + //========================== End of updateParamFileName() Method============================================ + updateFileNameForConfigScaleOut(action: any, scopeName: any, versionNo: any, id: any) { + let fileName = 'param_' + action + '_' + scopeName + '_' + versionNo + 'V_' + id + '.json'; + this.downloadedParamFileName = fileName; + return fileName; + } + //========================== End of updateFileNameForConfigScaleOut() Method============================================ public onDownloadTemplate(artifact: string) { - var methName= "onDownloadTemplate"; - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": start: artifact:["+artifact+"] fileType:["+ - this.fileType+"]"); let actualContent = this.configMappingEditorContent; var textToSaveAsBlob: any; var config_template_fileName: any let refObj = this.refObj; let versionandFileType: string; if (artifact == 'Template' && this.artifactRequest && this.configMappingEditorContent && refObj) { + this.showTemplateVersionDiv = true; if (this.fileType === "text/xml") { textToSaveAsBlob = new Blob([this.configMappingEditorContent], { type: "text/xml" @@ -472,6 +483,7 @@ export class GoldenConfigurationComponent implements OnInit { if (this.tempretrieveFlag) { config_template_fileName = this.fileNameForTempSave; var filextension = config_template_fileName.substring(config_template_fileName.indexOf("V") + 2, config_template_fileName.length); + textToSaveAsBlob = new Blob([this.configMappingEditorContent], { type: "text/" + filextension }); @@ -479,38 +491,27 @@ export class GoldenConfigurationComponent implements OnInit { else { config_template_fileName = this.artifactName; } - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": config_template_fileName:["+ - config_template_fileName+"]"); - this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent); - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": start replacements in content"); + this.mappingEditorService.initialise(this.templateeditor.getEditor(), actualContent, this.modal); this.downloadDataObject.template.templateData = this.configMappingEditorContent.replace(/\(([^()]|(R))*\)=\(/g, '').replace(/\)}/g, '}'); this.downloadDataObject.template.templateFileName = config_template_fileName; - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": finish."); } + } //========================== End of onDownloadTemplate() Method============================================ - fileChange( input) { + fileChange(input) { let self = this; let refObj = this.refObj; this.enableValidateTemplate = true; if (refObj && refObj != undefined) { - // refObj = refObj[refObj.length - 1]; if (input.files && input.files[0]) { - //console.log("input files0" + JSON.stringify(input.files[0])) + this.spinner.show(); this.myfileName = input.files[0].name; this.fileName = input.files[0].name; this.fileType = input.files[0].type; - // var fileExtension = this.myfileName.substr(this.myfileName.lastIndexOf('.') + 1); - let reader = new FileReader(); - // if(this.validateUploadedFile(fileExtension)) - //{ - this.readFile( input.files[0], reader, (result) => { + this.readFile(input.files[0], reader, (result) => { if (this.fileType === 'text/xml') { sessionStorage.setItem('fileType', 'text/xml'); } @@ -522,13 +523,13 @@ export class GoldenConfigurationComponent implements OnInit { sessionStorage.setItem('fileType', ''); } + if ('Generated Template' === this.selectedUploadType) { this.configMappingEditorContent = result this.artifactRequest.templateContent = this.configMappingEditorContent; - // console.log("editor content==" + JSON.stringify(this.configMappingEditorContent)) this.notificationService.notifySuccessMessage('Configuration Template file successfully uploaded..'); if (this.artifactRequest.templateContent) { - this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent); + this.mappingEditorService.initialise(this.templateeditor.getEditor(), this.artifactRequest.templateContent, this.modal); } } this.enableDownloadButtons = true; @@ -536,21 +537,19 @@ export class GoldenConfigurationComponent implements OnInit { this.saveTemplate(); this.templateeditor.getEditor().$enableBlockSelect = false; this.templateeditor.getEditor().$enableMultiselect = false; - + setTimeout(() => { + /** spinner ends after 3.5 seconds */ + this.spinner.hide(); + }, 3500); }); - // } - // else{ - // this.nService.error("Error", "Incorrect File Format") - //this.configMappingEditorContent='' - //} } else { - this.nService.error("Error", "Failed to read file", this.options); + this.nService.error("Error", "Failed to read file"); } this.myInputVariable.nativeElement.value = ""; } else { - this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen", this.options); + this.nService.error("Error", "Please enter Action and VNF type in Reference Data screen"); return false; } } @@ -561,6 +560,7 @@ export class GoldenConfigurationComponent implements OnInit { // callback with the results callback(reader.result); } + this.notificationService.notifySuccessMessage('Uploading File ' + file.name + ':' + file.type + ':' + file.size); // Read the file reader.readAsText(file, "UTF-8"); } @@ -590,68 +590,43 @@ export class GoldenConfigurationComponent implements OnInit { } //========================== End of appendSlashes() Method============================================ prepareDownloadData() { - if( this.utilityService.getTracelvl() > 0 ) - console.log( this.clName+": prepareDownloadData: start."); this.onDownloadParameter(); this.onDownloadTemplate('Template'); } //========================== End of prepareDownloadData() Method============================================ - syncTemplate( callOrig: string ) { - var methName= "syncTemplate"; - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": start. callOrig:["+callOrig+"]"); - if( callOrig == '0' ) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": this call is from HTML -start 1-st step."); - var ediContent= this.mappingEditorService.editor.session.getValue(); - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": ediContent length="+ediContent.length ); - if( this.utilityService.getTracelvl() > 1 ) - console.log( methName+": ediContent(begin):["+ - ediContent.substr(0,200)+"...]"); - this.procOnSrvSideSvc.sendToSrv( - ediContent, this.mappingEditorService, this ); - } - else - if( callOrig == '1' ) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": this call is from ProcOnSrvSideSvc -continue."); - // console.log( methName+": start replaceNamesWithBlankValues."); - // this.mappingEditorService.replaceNamesWithBlankValues(); - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": start saveTemplate ..."); + syncTemplate() { + this.mappingEditorService.replaceNamesWithBlankValues(); this.saveTemplate(); + var templateData = this.mappingEditorService.paramData; //template data array var pdData = this.paramShareService.getSessionParamData(); //PD data array var paramsContent = localStorage["paramsContent"]; - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": paramsContent length="+paramsContent.length ); + + if (paramsContent && paramsContent != undefined) { + try { + var paramTabData = JSON.parse(paramsContent); + } + catch (error) { + console.log("error is : " + error) + } + } var resultArr = []; var json = {}; var resultParamObj = {}; let checkNamesOnlyCondition: boolean = true; if (templateData && templateData != undefined) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": templateData (params) are not empty."); templateData.forEach(function (item) { if (item.paramValue !== "" && item.paramValue != undefined && item.paramValue != null) { checkNamesOnlyCondition = false; } + + }); + + templateData.forEach(function (item) { resultParamObj[item.paramName] = item.paramValue; }); - templateData = Array.from(new Set(templateData.map((itemInArray) => itemInArray.paramName))) - if( paramsContent && paramsContent != undefined) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": parse paramsContent ..."); - try { - var paramTabData = JSON.parse(paramsContent); - } - catch (error) { - console.log( methName+": paramsContent parse error:" + error); - } - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": templateData length="+templateData.length ); + if (paramTabData && paramTabData != undefined) { templateData.forEach(function (item) { for (var index in paramTabData) { if (item.paramName === index) { @@ -667,148 +642,134 @@ export class GoldenConfigurationComponent implements OnInit { } } } + } - resultArr.push({ - "name": item, - "type": null, - "description": null, - "required": null, - "default": null, - "source": "Manual", - "rule-type": null, - "request-keys": [{ - "key-name": null, - "key-value": null - }, { - "key-name": null, - "key-value": null - }, { - "key-name": null, - "key-value": null - }], - "response-keys": [{ - "key-name": null, - "key-value": null - }, { - "key-name": null, - "key-value": null - }, { - "key-name": null, - "key-value": null - }, { - "key-name": null, - "key-value": null - }, { - "key-name": null, - "key-value": null - }], - "ruleTypeValues": [null] - }) }); + } localStorage["paramsContent"] = JSON.stringify(resultParamObj); - if (pdData && pdData != undefined) { - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+ - ": have pdData, resultArr.length="+resultArr.length ); - for (var i = 0; i < resultArr.length; i++) { - pdData.forEach(function (arr2item) { - if (resultArr[i].name === arr2item.name) { - var json = { - "name": arr2item.name, - "type": arr2item.type, - "description": arr2item.description, - "required": arr2item.required, - "default": arr2item.default, - "source": arr2item.source, - "rule-type": arr2item["rule-type"], - "request-keys": arr2item["request-keys"], - "response-keys": arr2item["response-keys"], - "ruleTypeValues": arr2item.ruleTypeValues - }; - resultArr.splice(i, 1, json) - } - }); - }; - } - this.paramShareService.setSessionParamData(resultArr); - this.mappingEditorService.paramData = []; - //navigate to PD page after sync - if( this.utilityService.getTracelvl() > 0 ) - console.log( methName+": navigate to PD page after sync ..."); - this - .router - .navigate(['../../../vnfs/design/parameterDefinitions/create']); + templateData = Array.from(new Set(templateData.map((itemInArray) => itemInArray.paramName))) + + //reformatting arr1 to match with PD + templateData.forEach(function (item) { + + resultArr.push({ + "name": item, + "type": null, + "description": null, + "required": null, + "default": null, + "source": "Manual", + "rule-type": null, + "request-keys": [{ + "key-name": null, + "key-value": null + }, { + "key-name": null, + "key-value": null + }, { + "key-name": null, + "key-value": null + }], + "response-keys": [{ + "key-name": null, + "key-value": null + }, { + "key-name": null, + "key-value": null + }, { + "key-name": null, + "key-value": null + }, { + "key-name": null, + "key-value": null + }, { + "key-name": null, + "key-value": null + }], + "ruleTypeValues": [null] + + }) + }); } + if (pdData && pdData != undefined) { + for (var i = 0; i < resultArr.length; i++) { + + pdData.forEach(function (arr2item) { + if (resultArr[i].name === arr2item.name) { + + var json = { + "name": arr2item.name, + "type": arr2item.type, + "description": arr2item.description, + "required": arr2item.required, + "default": arr2item.default, + "source": arr2item.source, + "rule-type": arr2item["rule-type"], + "request-keys": arr2item["request-keys"], + "response-keys": arr2item["response-keys"], + "ruleTypeValues": arr2item.ruleTypeValues + }; + resultArr.splice(i, 1, json) + } + + }); + + }; + } + this.paramShareService.setSessionParamData(resultArr); + this.mappingEditorService.paramData = []; + //navigate to PD page after sync + this + .router + .navigate(['../../../vnfs/design/parameterDefinitions/create']); } //========================== End of syncTemplate() Method============================================ mergeParams() { this.mergeStatus = this.mappingEditorService.autoAnnotateDataForParams(); if (this.mergeStatus) { - this.nService.success("Success", "Merge Successful", this.options); + this.nService.success("Success", "Merge Successful"); } else { - this.nService.error("Error", "Merge Unsuccessful", this.options); + this.nService.error("Error", "Merge Unsuccessful"); } this.saveTemplate(); } //========================== End of mergeParams() Method============================================ public handleAnnotation(modal) { - this.tempName = ''; + this.selectedWord = this.templateeditor.getEditor().session.getTextRange(this.templateeditor.getEditor().selectionRange); if (this.selectedWord && this.selectedWord != undefined) modal.open(); } //========================== End of handleAnnotations() Method============================================ - public handleUndo(modal) { - let markersList = this.templateeditor.getEditor().session.getMarkers(); - - let filteredObj = {}; - let lastMarker = Object.keys(markersList).filter(function (key) { - if (markersList[key]['clazz'] != 'undoMarker') { - filteredObj[key] = markersList[key] - } - return filteredObj; - }); - this.templateeditor.getEditor().session.getUndoManager().undo(); - this.templateeditor.getEditor().getSelection().clearSelection(); - - this.templateeditor.getEditor().session.removeMarker(this.templateeditor.getEditor().getSelection().session.$markerId); - this.templateeditor.getEditor().session.addMarker(markersList[parseInt(lastMarker[lastMarker.length - 1])].range, 'undoMarker', 'text') - } - //========================== End of handleUndo() Method============================================ public submitNameValues() { - this.checkNameEntered = true; - this.checkSpace = true; if (this.tempName) { - if (this.tempName.startsWith(' ') || this.tempName.endsWith(' ')) { - this.checkSpace = false - } - else { - this.checkNameEntered = true; + this.checkNameEntered = true; - if (this.selectedWord) { - if (this.selectedWord.startsWith('${(')) { - var replaceWord: any = this.replaceWord = this.selectedWord.substring(3, this.selectedWord.indexOf(')=(')) + this.tempName; - this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord); + if (this.selectedWord) { + if (this.selectedWord.startsWith('${(')) { + var replaceWord: any = this.replaceWord = this.selectedWord.substring(3, this.selectedWord.indexOf(')=(')) + this.tempName; + this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord); - } else { - let mappingKey = this.mappingEditorService.getKeysForValues(this.selectedWord); - var replaceWord: any = this.replaceWord = '${(' + this.selectedWord + ')=(' + this.tempName + ')}'; - this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord); + } else { + let mappingKey = this.mappingEditorService.getKeysForValues(this.selectedWord); + var replaceWord: any = this.replaceWord = '${(' + this.selectedWord + ')=(' + this.tempName + ')}'; + this.templateeditor.getEditor().session.replace(this.templateeditor.getEditor().session.selection.getRange(), replaceWord); - } } - this.mappingEditorService.refreshEditor(); - this.tempName = ''; - this.modal.close(); } + this.mappingEditorService.refreshEditor(); + this.tempName = ''; + this.modal.close(); + } else { this.checkNameEntered = false; } + } //========================== End of submitNameValues() Method============================================ } |