From 063a3f1741d0cb20d5ee80590339fec54ab1acdd Mon Sep 17 00:00:00 2001 From: Barath Kumar R Date: Tue, 29 Dec 2020 16:35:09 +0530 Subject: [PATCH] Bug 1383 Error when consulting NS instance's topology * SOL006 Descriptor topology changes Change-Id: I79afb00dfb54ce2c9dc02c0c4b7bbe435b07a915 Signed-off-by: Barath Kumar R --- src/app/dashboard/DashboardComponent.ts | 47 +- .../ns-instances/NSInstancesComponent.ts | 14 +- .../ns-primitive/NSPrimitiveComponent.html | 6 +- .../ns-primitive/NSPrimitiveComponent.ts | 94 ++- .../ns-topology/NSTopologyComponent.html | 4 - .../ns-topology/NSTopologyComponent.ts | 178 ++-- .../vnf-instances/VNFInstancesComponent.ts | 2 +- src/app/layouts/header/HeaderComponent.html | 14 +- src/app/layouts/header/HeaderComponent.ts | 23 +- .../ns-packages/NSPackagesComponent.ts | 10 +- .../ns-composer/NSComposerComponent.html | 93 +-- .../ns-composer/NSComposerComponent.ts | 677 ++++++++------- .../vnf-composer/VNFComposerComponent.html | 191 ++--- .../vnf-composer/VNFComposerComponent.ts | 787 ++++++++++-------- .../vnf-packages/VNFPackagesComponent.ts | 30 +- .../clone-package/ClonePackageComponent.ts | 34 +- .../compose-packages/ComposePackages.ts | 63 +- .../ConfirmationTopologyComponent.html | 6 +- src/app/utilities/delete/DeleteComponent.ts | 4 +- .../NsPackagesActionComponent.ts | 2 +- .../VNFPackagesActionComponent.ts | 2 +- src/assets/i18n/de.json | 12 +- src/assets/i18n/en.json | 12 +- src/assets/i18n/es.json | 12 +- src/assets/i18n/pt.json | 12 +- src/assets/scss/app.scss | 3 + src/models/CommonModel.ts | 12 +- src/models/NSDModel.ts | 84 +- src/models/NSInstanceModel.ts | 18 +- src/models/VNFDModel.ts | 246 +++--- src/services/AuthenticationService.ts | 2 + src/services/SharedService.ts | 8 +- 32 files changed, 1405 insertions(+), 1297 deletions(-) diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts index 8df0e7c..56b79a4 100644 --- a/src/app/dashboard/DashboardComponent.ts +++ b/src/app/dashboard/DashboardComponent.ts @@ -34,7 +34,6 @@ import { SDNControllerModel } from 'SDNControllerModel'; import { SharedService } from 'SharedService'; import { ProjectRoleMappings, UserDetail } from 'UserModel'; import { VimAccountDetails } from 'VimAccountModel'; -import { VNFDDetails } from 'VNFDModel'; import { VNFInstanceDetails } from 'VNFInstanceModel'; /** @@ -189,13 +188,13 @@ export class DashboardComponent implements OnInit { /** Get all the projects @public */ public getUserAccessedProjects(): void { - this.projectService.getUserProjects().subscribe((projects: UserDetail) => { + this.projectService.getUserProjects().subscribe((projects: UserDetail): void => { const projectList: {}[] = projects.project_role_mappings; this.projectList = projectList.filter( - (thing: ProjectRoleMappings, i: number, arr: []) => arr - .findIndex((t: ProjectRoleMappings) => t.project_name === thing.project_name) === i + (thing: ProjectRoleMappings, i: number, arr: []): boolean => arr + .findIndex((t: ProjectRoleMappings): boolean => t.project_name === thing.project_name) === i ); - }, (error: Error) => { + }, (error: Error): void => { // TODO: Handle failure }); } @@ -203,14 +202,14 @@ export class DashboardComponent implements OnInit { /** Fetching all the Project in dashboard @public */ public getAllProjects(): void { this.isProjectsLoadingResults = true; - this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]) => { + this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]): void => { this.allProjectList = []; - projectsData.forEach((projectData: ProjectDetails) => { + projectsData.forEach((projectData: ProjectDetails): void => { const projectDataObj: ProjectData = this.generateProjectData(projectData); this.allProjectList.push(projectDataObj); }); this.isProjectsLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); this.isProjectsLoadingResults = false; }); @@ -230,9 +229,9 @@ export class DashboardComponent implements OnInit { /** Function to check admin privilege @public */ public checkAdminPrivilege(): void { if (!this.isAdmin) { - this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => { + this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}): void => { this.currentProjectDetails = projectDetails; - }, (error: Error) => { + }, (error: Error): void => { // TODO: Handle failure }); } @@ -241,9 +240,9 @@ export class DashboardComponent implements OnInit { /** Get VNFD Package details @public */ public getVnfdPackageCount(): void { this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL) - .subscribe((vnfdPackageData: VNFDDetails[]) => { + .subscribe((vnfdPackageData: []): void => { this.vnfdPackageCount = vnfdPackageData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -251,9 +250,9 @@ export class DashboardComponent implements OnInit { /** Get NSD Package details @public */ public getNsdPackageCount(): void { this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL) - .subscribe((nsdPackageData: NSDDetails[]) => { + .subscribe((nsdPackageData: NSDDetails[]): void => { this.nsdPackageCount = nsdPackageData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -262,12 +261,12 @@ export class DashboardComponent implements OnInit { public getNsInstanceCount(): void { this.isCanvasLoadingResults = true; this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) - .subscribe((nsInstancesData: NSInstanceDetails[]) => { + .subscribe((nsInstancesData: NSInstanceDetails[]): void => { this.nsInstancesDataArr = nsInstancesData; this.nsInstanceCount = nsInstancesData.length; this.nsInstanceChart(); this.isCanvasLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); this.isCanvasLoadingResults = false; }); @@ -275,7 +274,7 @@ export class DashboardComponent implements OnInit { /** Get NS Instance chart details @public */ public nsInstanceChart(): void { - this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => { + this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails): void => { const operationalStatus: string = nsdInstanceData['operational-status']; const configStatus: string = nsdInstanceData['config-status']; if (operationalStatus === 'failed' || configStatus === 'failed') { @@ -288,7 +287,7 @@ export class DashboardComponent implements OnInit { }); const now: Date = new Date(); const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit))); - this.createdTimes.forEach((createdTime: string) => { + this.createdTimes.forEach((createdTime: string): void => { this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter))); }); this.drawNsChart(); @@ -342,9 +341,9 @@ export class DashboardComponent implements OnInit { /** Get VNFD instance details @public */ public getVnfInstanceCount(): void { this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL) - .subscribe((vnfInstanceData: VNFInstanceDetails[]) => { + .subscribe((vnfInstanceData: VNFInstanceDetails[]): void => { this.vnfInstanceCount = vnfInstanceData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -352,9 +351,9 @@ export class DashboardComponent implements OnInit { /** Get VIM account details @public */ public getVimAccountCount(): void { this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL) - .subscribe((vimAccountData: VimAccountDetails[]) => { + .subscribe((vimAccountData: VimAccountDetails[]): void => { this.vimAccountCount = vimAccountData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -362,9 +361,9 @@ export class DashboardComponent implements OnInit { /** Get SDN Controller Count @public */ public getSDNControllerCount(): void { this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL) - .subscribe((sdnControllerData: SDNControllerModel[]) => { + .subscribe((sdnControllerData: SDNControllerModel[]): void => { this.sdnControllerCount = sdnControllerData.length; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } diff --git a/src/app/instances/ns-instances/NSInstancesComponent.ts b/src/app/instances/ns-instances/NSInstancesComponent.ts index 07184da..41bb384 100644 --- a/src/app/instances/ns-instances/NSInstancesComponent.ts +++ b/src/app/instances/ns-instances/NSInstancesComponent.ts @@ -124,7 +124,7 @@ export class NSInstancesComponent implements OnInit { this.generateTableColumn(); this.generateTableSettings(); this.generateData(); - this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); }); + this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); }); } /** Generate smart table row title and filters @public */ @@ -219,9 +219,9 @@ export class NSInstancesComponent implements OnInit { /** generateData initiate the ns-instance list @public */ public generateData(): void { this.isLoadingResults = true; - this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]) => { + this.restService.getResource(environment.NSDINSTANCES_URL).subscribe((nsdInstancesData: NSInstanceDetails[]): void => { this.nsInstanceData = []; - nsdInstancesData.forEach((nsdInstanceData: NSInstanceDetails) => { + nsdInstancesData.forEach((nsdInstanceData: NSInstanceDetails): void => { const nsDataObj: NSDInstanceData = { name: nsdInstanceData.name, identifier: nsdInstanceData.id, @@ -229,7 +229,7 @@ export class NSInstancesComponent implements OnInit { OperationalStatus: nsdInstanceData['operational-status'], ConfigStatus: nsdInstanceData['config-status'], DetailedStatus: nsdInstanceData['detailed-status'], - memberIndex: nsdInstanceData.nsd['constituent-vnfd'], + memberIndex: nsdInstanceData.nsd.df, nsConfig: nsdInstanceData.nsd['ns-configuration'] }; this.nsInstanceData.push(nsDataObj); @@ -239,10 +239,10 @@ export class NSInstancesComponent implements OnInit { } else { this.checkDataClass = 'dataTables_empty'; } - this.dataSource.load(this.nsInstanceData).then((data: {}) => { + this.dataSource.load(this.nsInstanceData).then((data: {}): void => { this.isLoadingResults = false; }).catch(); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); this.isLoadingResults = false; }); @@ -262,7 +262,7 @@ export class NSInstancesComponent implements OnInit { /** Instantiate NS using modalservice @public */ public instantiateNS(): void { const modalRef: NgbModalRef = this.modalService.open(InstantiateNsComponent, { backdrop: 'static' }); - modalRef.result.then((result: MODALCLOSERESPONSEDATA) => { + modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => { if (result) { this.generateData(); } diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.html b/src/app/instances/ns-primitive/NSPrimitiveComponent.html index 82e3992..2f3c155 100644 --- a/src/app/instances/ns-primitive/NSPrimitiveComponent.html +++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.html @@ -31,10 +31,10 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
- +
- +
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts index d5cf565..50f7707 100644 --- a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts +++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts @@ -23,14 +23,15 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from ' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { TranslateService } from '@ngx-translate/core'; import { NotifierService } from 'angular-notifier'; -import { APIURLHEADER, ERRORDATA, URLPARAMS } from 'CommonModel'; +import { APIURLHEADER, ERRORDATA, PRIMITIVEDATA, PRIMITIVETYPES, URLPARAMS } from 'CommonModel'; import { DataService } from 'DataService'; import { environment } from 'environment'; -import { KDUPRIMITIVELEVEL, NSData, VDUPRIMITIVELEVEL } from 'NSDModel'; +import { KDUPRIMITIVELEVEL, NSData, VDUPRIMITIVELEVEL, VNFPROFILE } from 'NSDModel'; import { NSPrimitiveParams } from 'NSInstanceModel'; import { RestService } from 'RestService'; import { SharedService } from 'SharedService'; import { isNullOrUndefined } from 'util'; +import { CONFIGPRIMITIVE, DF, VDUCONFIG, VDUPROFILE, VNFCONFIG, VNFD } from 'VNFDModel'; /** * Creating component @@ -76,13 +77,13 @@ export class NSPrimitiveComponent implements OnInit { public primitiveList: {}[]; /** Contains objects that is used to hold types of primitive @public */ - public primitiveTypeList: {}[] = []; + public primitiveTypeList: PRIMITIVETYPES[] = []; /** Model value used to hold selected primitive type @public */ public primitiveType: string; /** Contains list of VDU primitive lists @public */ - public vduList: {}[]; + public vduList: VDUPROFILE[]; /** Contains list of KDU primitive lists @public */ public kduList: {}[]; @@ -137,12 +138,15 @@ export class NSPrimitiveComponent implements OnInit { ]; } + /** convenience getter for easy access to form fields */ + get f(): FormGroup['controls'] { return this.primitiveForm.controls; } + /** * Lifecyle Hooks the trigger before component is instantiate */ public ngOnInit(): void { /** Setting up initial value for NSD */ - this.dataService.currentMessage.subscribe((event: NSData) => { + this.dataService.currentMessage.subscribe((event: NSData): void => { if (event.identifier !== undefined || event.identifier !== '' || event.identifier !== null) { this.nsdId = event.identifier; } @@ -150,14 +154,11 @@ export class NSPrimitiveComponent implements OnInit { this.initializeForm(); } - /** convenience getter for easy access to form fields */ - get f(): FormGroup['controls'] { return this.primitiveForm.controls; } - /** initialize Forms @public */ public initializeForm(): void { this.primitiveForm = this.formBuilder.group({ primitive: [null, [Validators.required]], - vnf_member_index: [null, [Validators.required]], + member_vnf_index: [null, [Validators.required]], vdu_id: [null, [Validators.required]], kdu_name: [null, [Validators.required]], primitive_params: this.formBuilder.array([this.primitiveParamsBuilder()]) @@ -194,7 +195,7 @@ export class NSPrimitiveComponent implements OnInit { this.objectPrimitiveParams = {}; this.sharedService.cleanForm(this.primitiveForm); if (this.primitiveForm.invalid) { return; } // Proceed, onces form is valid - this.primitiveForm.value.primitive_params.forEach((params: NSPrimitiveParams) => { + this.primitiveForm.value.primitive_params.forEach((params: NSPrimitiveParams): void => { if (params.primitive_params_name !== null && params.primitive_params_value !== '') { this.objectPrimitiveParams[params.primitive_params_name] = params.primitive_params_value; } @@ -206,17 +207,17 @@ export class NSPrimitiveComponent implements OnInit { }; if (this.primitiveType === 'VNF_Primitive') { // tslint:disable-next-line: no-string-literal - primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index; + primitiveParamsPayLoads['member_vnf_index'] = this.primitiveForm.value.member_vnf_index; } if (this.primitiveType === 'VDU_Primitive') { // tslint:disable-next-line: no-string-literal - primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index; + primitiveParamsPayLoads['member_vnf_index'] = this.primitiveForm.value.member_vnf_index; // tslint:disable-next-line: no-string-literal primitiveParamsPayLoads['vdu_id'] = this.primitiveForm.value.vdu_id; } if (this.primitiveType === 'KDU_Primitive') { // tslint:disable-next-line: no-string-literal - primitiveParamsPayLoads['vnf_member_index'] = this.primitiveForm.value.vnf_member_index; + primitiveParamsPayLoads['member_vnf_index'] = this.primitiveForm.value.member_vnf_index; // tslint:disable-next-line: no-string-literal primitiveParamsPayLoads['kdu_name'] = this.primitiveForm.value.kdu_name; } @@ -224,23 +225,23 @@ export class NSPrimitiveComponent implements OnInit { url: environment.NSDINSTANCES_URL + '/' + this.nsdId + '/action' }; this.isLoadingResults = true; - this.restService.postResource(apiURLHeader, primitiveParamsPayLoads).subscribe((result: {}) => { + this.restService.postResource(apiURLHeader, primitiveParamsPayLoads).subscribe((result: {}): void => { this.activeModal.dismiss(); this.notifierService.notify('success', this.translateService.instant('PAGE.NSPRIMITIVE.EXECUTEDSUCCESSFULLY')); this.isLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.isLoadingResults = false; this.restService.handleError(error, 'post'); }); } /** Primitive type change event @public */ - public primitiveTypeChange(data: { value: string }): void { + public primitiveTypeChange(data: PRIMITIVETYPES): void { this.primitiveList = []; this.primitiveParameter = []; this.initializeForm(); if (data.value === 'NS_Primitive') { this.getNSInfo(this.params.name); - this.setUpdateValueandValidation('vnf_member_index'); + this.setUpdateValueandValidation('member_vnf_index'); } if (data.value === 'VNF_Primitive' || data.value === 'KDU_Primitive' || data.value === 'NS_Primitive') { this.setUpdateValueandValidation('vdu_id'); @@ -250,11 +251,11 @@ export class NSPrimitiveComponent implements OnInit { } } /** Member index change event */ - public indexChange(data: {}, getType?: string): void { + public indexChange(data: VNFPROFILE, getType?: string): void { this.getFormControl('vdu_id').setValue(null); this.getFormControl('kdu_name').setValue(null); - if (data) { - this.getVnfdInfo(data['vnfd-id-ref'], getType); + if (data['vnfd-id'] !== null) { + this.getVnfdInfo(data['vnfd-id'], getType); } else { this.primitiveList = []; this.getFormControl('primitive').setValue(null); @@ -266,7 +267,7 @@ export class NSPrimitiveComponent implements OnInit { this.primitiveList = data[selectedType + '-configuration']['config-primitive']; } /** Primivtive change event */ - public primitiveChange(data: { parameter: {}[] }): void { + public primitiveChange(data: PRIMITIVEDATA): void { this.primitiveParameter = []; const formArr: FormArray = this.getFormControl('primitive_params') as FormArray; formArr.controls = []; @@ -276,11 +277,13 @@ export class NSPrimitiveComponent implements OnInit { } } /** Generate vdu section @public */ - public generateVDUData(vduData: VDUPRIMITIVELEVEL): VDUPRIMITIVELEVEL { + public generateVDUData(vduData: VDUPROFILE, vduConfig: VDUCONFIG[]): VDUPROFILE { + const getVDUConfig: VDUCONFIG = vduConfig.filter((itemData: VDUCONFIG): boolean => + itemData.id === vduData['vdu-configuration-id'])[0]; return { id: vduData.id, - name: vduData.name, - 'vdu-configuration': vduData['vdu-configuration'] + name: vduData.id, + 'vdu-configuration': getVDUConfig }; } /** Generate kdu section @public */ @@ -297,13 +300,13 @@ export class NSPrimitiveComponent implements OnInit { this.getFormControl(formName).updateValueAndValidity(); } /** Update primitive value based on parameter */ - private updatePrimitive(primitive: { parameter: {}[] }): void { + private updatePrimitive(primitive: PRIMITIVEDATA): void { if (primitive.parameter) { this.primitiveParameter = primitive.parameter; } else { this.primitiveParameter = []; const formArr: AbstractControl[] = this.getControls(); - formArr.forEach((formGp: FormGroup) => { + formArr.forEach((formGp: FormGroup): void => { formGp.controls.primitive_params_name.setValidators([]); formGp.controls.primitive_params_name.updateValueAndValidity(); formGp.controls.primitive_params_value.setValidators([]); @@ -316,24 +319,33 @@ export class NSPrimitiveComponent implements OnInit { this.primitiveList = []; this.primitiveParameter = []; this.getFormControl('primitive').setValue(null); - const apiUrl: string = environment.VNFPACKAGES_URL + '?short-name=' + vnfdRef; + const apiUrl: string = environment.VNFPACKAGES_URL + '?product-name=' + vnfdRef; this.isLoadingResults = true; this.restService.getResource(apiUrl) - .subscribe((vnfdInfo: {}) => { - if (vnfdInfo[0]['vnf-configuration'] !== undefined && vnfdInfo[0]['vnf-configuration']) { + .subscribe((vnfdInfo: VNFD[]): void => { + const vnfInstances: VNFD = vnfdInfo[0]; + if (!isNullOrUndefined(vnfInstances.df) && !isNullOrUndefined(vnfInstances['vnf-configuration'])) { this.getFormControl('vdu_id').setValidators([]); this.getFormControl('kdu_name').setValidators([]); - this.primitiveList = vnfdInfo[0]['vnf-configuration']['config-primitive']; + vnfInstances.df.forEach((df: DF): void => { + if (df['vnf-configuration-id'] !== undefined) { + const vnfprimitiveList: VNFCONFIG = vnfInstances['vnf-configuration'] + .filter((itemData: VNFCONFIG): boolean => itemData.id === df['vnf-configuration-id'])[0]; + this.primitiveList = vnfprimitiveList['config-primitive']; + } + }); } if (getType === 'VDU_Primitive') { this.kduList = []; this.vduList = []; this.primitiveList = []; - if (!isNullOrUndefined(vnfdInfo[0].vdu)) { - vnfdInfo[0].vdu.forEach((vduData: VDUPRIMITIVELEVEL) => { - if (vduData['vdu-configuration']) { - const vduDataObj: VDUPRIMITIVELEVEL = this.generateVDUData(vduData); - this.vduList.push(vduDataObj); + if (!isNullOrUndefined(vnfInstances.df) && !isNullOrUndefined(vnfInstances['vdu-configuration'])) { + vnfInstances.df.forEach((df: DF): void => { + if (df['vdu-profile'] !== undefined) { + df['vdu-profile'].forEach((element: VDUPROFILE): void => { + const vduDataObj: VDUPROFILE = this.generateVDUData(element, vnfInstances['vdu-configuration']); + this.vduList.push(vduDataObj); + }); } }); } @@ -342,8 +354,8 @@ export class NSPrimitiveComponent implements OnInit { this.kduList = []; this.vduList = []; this.primitiveList = []; - if (!isNullOrUndefined(vnfdInfo[0].kdu)) { - vnfdInfo[0].kdu.forEach((kduData: KDUPRIMITIVELEVEL) => { + if (!isNullOrUndefined(vnfInstances.kdu)) { + vnfInstances.kdu.forEach((kduData: KDUPRIMITIVELEVEL): void => { if (kduData['kdu-configuration']) { const kduDataObj: KDUPRIMITIVELEVEL = this.generateKDUData(kduData); this.kduList.push(kduDataObj); @@ -352,7 +364,7 @@ export class NSPrimitiveComponent implements OnInit { } } this.isLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.isLoadingResults = false; this.restService.handleError(error, 'get'); }); @@ -362,10 +374,10 @@ export class NSPrimitiveComponent implements OnInit { this.primitiveList = []; this.primitiveParameter = []; this.getFormControl('primitive').setValue(null); - const apiUrl: string = environment.NSDESCRIPTORS_URL + '?short-name=' + nsdRef; + const apiUrl: string = environment.NSDESCRIPTORS_URL + '?name=' + nsdRef; this.isLoadingResults = true; this.restService.getResource(apiUrl) - .subscribe((nsdInfo: {}) => { + .subscribe((nsdInfo: {}): void => { if (!isNullOrUndefined(nsdInfo[0]['ns-configuration'])) { this.primitiveList = !isNullOrUndefined(nsdInfo[0]['ns-configuration']['config-primitive']) ? nsdInfo[0]['ns-configuration']['config-primitive'] : []; @@ -373,7 +385,7 @@ export class NSPrimitiveComponent implements OnInit { this.primitiveList = []; } this.isLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.isLoadingResults = false; this.restService.handleError(error, 'get'); }); diff --git a/src/app/instances/ns-topology/NSTopologyComponent.html b/src/app/instances/ns-topology/NSTopologyComponent.html index 0a3051c..d500535 100644 --- a/src/app/instances/ns-topology/NSTopologyComponent.html +++ b/src/app/instances/ns-topology/NSTopologyComponent.html @@ -61,10 +61,6 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
- - - - diff --git a/src/app/instances/ns-topology/NSTopologyComponent.ts b/src/app/instances/ns-topology/NSTopologyComponent.ts index 44c6309..668f251 100644 --- a/src/app/instances/ns-topology/NSTopologyComponent.ts +++ b/src/app/instances/ns-topology/NSTopologyComponent.ts @@ -27,7 +27,7 @@ import { ERRORDATA } from 'CommonModel'; import * as d3 from 'd3'; import { environment } from 'environment'; import * as HttpStatus from 'http-status-codes'; -import { VNFDCONNECTIONPOINTREF } from 'NSDModel'; +import { CCI, DF, VLC, VNFPROFILE } from 'NSDModel'; import { COMPOSERNODES, CONNECTIONPOINT, NSD, NSDVLD, NSINFO, NSInstanceDetails, NSINSTANCENODES, VLINFO, VNFRINFO } from 'NSInstanceModel'; import { GRAPHDETAILS, Tick, TickPath } from 'NSTopologyModel'; import { RestService } from 'src/services/RestService'; @@ -159,7 +159,7 @@ export class NSTopologyComponent { this.force.stop(); } this.forceSimulationActive = alreadyFixedIsActive; - this.nodes.forEach((d: COMPOSERNODES) => { + this.nodes.forEach((d: COMPOSERNODES): void => { d.fx = (alreadyFixedIsActive) ? null : d.x; d.fy = (alreadyFixedIsActive) ? null : d.y; }); @@ -211,49 +211,48 @@ export class NSTopologyComponent { } /** Prepare all the information for node creation @private */ private generateData(): void { - this.restService.getResource(environment.NSINSTANCESCONTENT_URL + '/' + this.nsIdentifier).subscribe((nsData: NSInstanceDetails) => { - this.nsData = nsData; - this.nsInfo = { - nsInstanceID: nsData._id, - nsName: nsData.name, - nsOperationalStatus: nsData['operational-status'], - nsConfigStatus: nsData['config-status'], - nsDetailedStatus: nsData['detailed-status'], - nsResourceOrchestrator: nsData['resource-orchestrator'] - }; - if (this.nsData['constituent-vnfr-ref'] !== undefined) { - this.generateVNFRCPNodes(); - } - if (this.nsData.vld !== undefined) { - this.generateVLDNetworkNodes(); - } - setTimeout(() => { - this.pushAllNodes(); - this.generateVNFDCP(); - this.generateVLDCP(); + this.restService.getResource(environment.NSINSTANCESCONTENT_URL + '/' + this.nsIdentifier) + .subscribe((nsData: NSInstanceDetails): void => { + this.nsData = nsData; + this.nsInfo = { + nsInstanceID: nsData._id, + nsName: nsData.name, + nsOperationalStatus: nsData['operational-status'], + nsConfigStatus: nsData['config-status'], + nsDetailedStatus: nsData['detailed-status'], + nsResourceOrchestrator: nsData['resource-orchestrator'] + }; + if (this.nsData['constituent-vnfr-ref'] !== undefined) { + this.generateVNFRCPNodes(); + } + if (this.nsData.vld !== undefined) { + this.generateVLDNetworkNodes(); + } + setTimeout((): void => { + this.pushAllNodes(); + this.generateVNFDCP(); + this.generateVLDCP(); + this.isLoadingResults = false; + this.createNode(this.nodes, this.links); + }, this.TIMEOUT); + }, (error: ERRORDATA): void => { this.isLoadingResults = false; - this.createNode(this.nodes, this.links); - }, this.TIMEOUT); - }, (error: ERRORDATA) => { - this.isLoadingResults = false; - if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) { - this.router.navigateByUrl('404', { skipLocationChange: true }).catch(); - } else { - this.restService.handleError(error, 'get'); - } - }); + if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) { + this.router.navigateByUrl('404', { skipLocationChange: true }).catch(); + } else { + this.restService.handleError(error, 'get'); + } + }); } - /** Fetching all the VNFR Information @private */ private generateVNFRCPNodes(): void { - this.nsData['constituent-vnfr-ref'].forEach((vnfdrID: string) => { - this.restService.getResource(environment.VNFINSTANCES_URL + '/' + vnfdrID).subscribe((vndfrDetail: NSD) => { + this.nsData['constituent-vnfr-ref'].forEach((vnfdrID: string): void => { + this.restService.getResource(environment.VNFINSTANCES_URL + '/' + vnfdrID).subscribe((vndfrDetail: NSD): void => { this.nodes.push({ id: vndfrDetail['vnfd-ref'] + ':' + vndfrDetail['member-vnf-index-ref'], nodeTypeRef: 'vnfd', cp: vndfrDetail['connection-point'], vdur: vndfrDetail.vdur, - vld: vndfrDetail.vld, nsID: vndfrDetail['nsr-id-ref'], vnfdID: vndfrDetail['vnfd-id'], vimID: vndfrDetail['vim-account-id'], @@ -264,7 +263,7 @@ export class NSTopologyComponent { selectorId: 'nsInst-' + vndfrDetail.id }); // Fetching all the connection point of VNF & Interface - vndfrDetail['connection-point'].forEach((cp: CONNECTIONPOINT) => { + vndfrDetail['connection-point'].forEach((cp: CONNECTIONPOINT): void => { this.nodes.push({ id: cp.name + ':' + vndfrDetail['member-vnf-index-ref'], vndfCPRef: vndfrDetail['vnfd-ref'] + ':' + vndfrDetail['member-vnf-index-ref'], @@ -272,32 +271,29 @@ export class NSTopologyComponent { name: cp.name }); }); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); }); } - /** Fetching all the VLD/Network Information @private */ private generateVLDNetworkNodes(): void { this.nsdData = this.nsData.nsd; - this.nsdData.vld.forEach((ref: NSDVLD) => { + this.nsdData['virtual-link-desc'].forEach((ref: NSDVLD): void => { this.nodes.push({ id: ref.id, nodeTypeRef: 'vld', - name: ref.name, + name: ref.id, type: ref.type, - vnfdCP: ref['vnfd-connection-point-ref'], + vnfdCP: this.nsdData.df, vimNetworkName: ref['vim-network-name'], - shortName: ref['short-name'], selectorId: 'nsInst-' + ref.id }); }); } - /** Pushing connection points of path/links nodes @private */ private pushAllNodes(): void { - this.nodes.forEach((nodeList: NSINSTANCENODES) => { + this.nodes.forEach((nodeList: NSINSTANCENODES): void => { if (nodeList.nodeTypeRef === 'vnfd') { this.vnfdNodes.push(nodeList); } else if (nodeList.nodeTypeRef === 'vld') { @@ -307,13 +303,12 @@ export class NSTopologyComponent { } }); } - /** Get CP position based on vndf @private */ private generateVNFDCP(): void { - this.vnfdNodes.forEach((list: NSINSTANCENODES) => { - const vndfPos: number = this.nodes.map((e: NSINSTANCENODES) => { return e.id; }).indexOf(list.id); + this.vnfdNodes.forEach((list: NSINSTANCENODES): void => { + const vndfPos: number = this.nodes.map((e: NSINSTANCENODES): string => { return e.id; }).indexOf(list.id); this.cpCount = 0; - this.nodes.forEach((res: NSINSTANCENODES) => { + this.nodes.forEach((res: NSINSTANCENODES): void => { if (res.nodeTypeRef === 'cp' && res.vndfCPRef === list.id) { this.links.push({ source: this.nodes[vndfPos], target: this.nodes[this.cpCount] }); } @@ -321,44 +316,49 @@ export class NSTopologyComponent { }); }); } - /** Get CP position based on vld @private */ private generateVLDCP(): void { let vldPos: number = 0; - this.vldNodes.forEach((list: NSINSTANCENODES) => { + this.vldNodes.forEach((list: NSINSTANCENODES): void => { if (!isNullOrUndefined(list.vnfdCP)) { - list.vnfdCP.forEach((cpRef: VNFDCONNECTIONPOINTREF) => { - this.cpCount = 0; - this.nodes.forEach((res: NSINSTANCENODES) => { - if (res.nodeTypeRef === 'cp' && res.id === cpRef['vnfd-connection-point-ref'] + ':' + cpRef['member-vnf-index-ref']) { - this.links.push({ source: this.nodes[vldPos], target: this.nodes[this.cpCount] }); - } - this.cpCount++; + list.vnfdCP.forEach((cpRef: DF): void => { + cpRef['vnf-profile'].forEach((vnfProfile: VNFPROFILE): void => { + vnfProfile['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => { + resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => { + this.cpCount = 0; + this.nodes.forEach((res: NSINSTANCENODES): void => { + if (res.nodeTypeRef === 'cp' && + res.id === resultCCI['constituent-cpd-id'] + ':' + resultCCI['constituent-base-element-id']) { + this.links.push({ source: this.nodes[vldPos], target: this.nodes[this.cpCount] }); + } + this.cpCount++; + }); + }); + }); }); }); vldPos++; } }); } - /** Node is created and render at D3 region @private */ private createNode(nodes: NSINSTANCENODES[], links: {}[]): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); d3.selectAll('svg#graphContainer > *').remove(); - d3.select(window).on('keydown', () => { this.keyDown(); }); - d3.select(window).on('keyup', () => { this.keyUp(); }); + d3.select(window).on('keydown', (): void => { this.keyDown(); }); + d3.select(window).on('keyup', (): void => { this.keyUp(); }); this.svg = d3.select('#graphContainer') .attr('oncontextmenu', 'return false;') .attr('width', graphContainerAttr.width) .attr('height', graphContainerAttr.height); this.force = d3.forceSimulation() .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength)) - .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance)) + .force('link', d3.forceLink().id((d: TickPath): string => d.id).distance(graphContainerAttr.distance)) .force('center', d3.forceCenter(graphContainerAttr.width / graphContainerAttr.forcex, graphContainerAttr.height / graphContainerAttr.forcey)) .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex)) .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey)) - .on('tick', () => { this.tick(); }); + .on('tick', (): void => { this.tick(); }); // handles to link and node element groups this.path = this.svg.append('svg:g').selectAll('path'); this.network = this.svg.append('svg:g').selectAll('network'); @@ -366,12 +366,11 @@ export class NSTopologyComponent { this.circle = this.svg.append('svg:g').selectAll('circle'); this.restart(nodes, links); } - /** Update force layout (called automatically each iteration) @private */ private tick(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); // draw directed edges with proper padding from node centers - this.path.attr('class', 'link').attr('d', (d: Tick) => { + this.path.attr('class', 'link').attr('d', (d: Tick): string => { const deltaX: number = d.target.x - d.source.x; const deltaY: number = d.target.y - d.source.y; const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY); @@ -385,29 +384,27 @@ export class NSTopologyComponent { const targetY: number = d.target.y - (targetPadding * normY); return `M${sourceX},${sourceY}L${targetX},${targetY}`; }); - this.network.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`); - this.square.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`); - this.circle.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`); + this.network.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`); + this.square.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`); + this.circle.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`); } - /** Update graph (called when needed) @private */ private restart(nodes: NSINSTANCENODES[], links: {}[]): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); this.path = this.path.data(links); const vnfdNodes: {}[] = []; const vldNodes: {}[] = []; const cpNodes: {}[] = []; // NB: Nodes are known by id, not by index! - nodes.forEach((nodeList: NSINSTANCENODES) => { + nodes.forEach((nodeList: NSINSTANCENODES): void => { if (nodeList.nodeTypeRef === 'vnfd') { vnfdNodes.push(nodeList); } else if (nodeList.nodeTypeRef === 'vld') { vldNodes.push(nodeList); } else if (nodeList.nodeTypeRef === 'cp') { cpNodes.push(nodeList); } }); - this.square = this.square.data(vnfdNodes, (d: { id: number }) => d.id); - this.network = this.network.data(vldNodes, (d: { id: number }) => d.id); - this.circle = this.circle.data(cpNodes, (d: { id: number }) => d.id); + this.square = this.square.data(vnfdNodes, (d: COMPOSERNODES): string => d.id); + this.network = this.network.data(vldNodes, (d: COMPOSERNODES): string => d.id); + this.circle = this.circle.data(cpNodes, (d: COMPOSERNODES): string => d.id); this.resetAndCreateNodes(); this.force.nodes(nodes).force('link').links(links); //Set the graph in motion this.force.alphaTarget(graphContainerAttr.alphaTarget).restart(); } - /** Rest and create nodes @private */ private resetAndCreateNodes(): void { this.path.exit().remove(); @@ -424,7 +421,6 @@ export class NSTopologyComponent { this.path = gPath.merge(this.path); this.circle = this.gCircle.merge(this.circle); } - /** Events handles when Shift Click to perform create cp @private */ // tslint:disable-next-line: no-any private singleClick(nodeSelected: any, d: COMPOSERNODES): void { @@ -470,16 +466,16 @@ export class NSTopologyComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: COMPOSERNODES) => { return d.selectorId; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/VNFD.svg') - .on('click', (d: COMPOSERNODES) => { this.singleClick(this.gSquare, d); this.onNodeClickToggleSidebar(); }); + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.gSquare, d); this.onNodeClickToggleSidebar(); }); this.gSquare.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: COMPOSERNODES) => d.id); + .text((d: COMPOSERNODES): string => d.id); } - /** Settings all the network attributes of nodes @private */ private getgNetwork(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); @@ -489,16 +485,16 @@ export class NSTopologyComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: COMPOSERNODES) => { return d.selectorId; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/VL.svg') - .on('click', (d: COMPOSERNODES) => { this.singleClick(this.gNetwork, d); this.onNodeClickToggleSidebar(); }); + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.gNetwork, d); this.onNodeClickToggleSidebar(); }); this.gNetwork.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: COMPOSERNODES) => d.name); + .text((d: COMPOSERNODES): string => d.name); } - /** Settings all the connection point attributes of nodes @private */ private getgCircle(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); @@ -508,14 +504,22 @@ export class NSTopologyComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) + .call(this.onDragDrop()) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/CP.svg'); this.gCircle.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: COMPOSERNODES) => d.name); + .text((d: COMPOSERNODES): string => d.name); + } + /** drag event @private */ + // tslint:disable-next-line: no-any + private onDragDrop(): any { + return d3.drag().filter(this.dragFilter) + .on('start', this.dragstarted) + .on('drag', this.dragged) + .on('end', this.dragended); } - /** Key press event @private */ private keyDown(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); @@ -545,6 +549,10 @@ export class NSTopologyComponent { this.svg.classed('ctrl', false); } } + /** Events handles when to drag using filter for the keys @private */ + private dragFilter(): boolean { + return d3.event.ctrlKey && !d3.event.button; + } /** Events handles when dragstarted @private */ private dragstarted(d: COMPOSERNODES): void { d.fx = d.x; diff --git a/src/app/instances/vnf-instances/VNFInstancesComponent.ts b/src/app/instances/vnf-instances/VNFInstancesComponent.ts index d829ee2..fdfe9fa 100644 --- a/src/app/instances/vnf-instances/VNFInstancesComponent.ts +++ b/src/app/instances/vnf-instances/VNFInstancesComponent.ts @@ -141,7 +141,7 @@ export class VNFInstancesComponent implements OnInit { this.isLoadingResults = true; this.restService.getResource(environment.VNFINSTANCES_URL).subscribe((vnfInstancesData: VNFInstanceDetails[]) => { this.vnfInstanceData = []; - vnfInstancesData.forEach((vnfInstanceData: VNFInstanceDetails) => { + vnfInstancesData.forEach((vnfInstanceData: VNFInstanceDetails): void => { const vnfDataObj: {} = { VNFD: vnfInstanceData['vnfd-ref'], diff --git a/src/app/layouts/header/HeaderComponent.html b/src/app/layouts/header/HeaderComponent.html index a9ff5ac..c7b3bae 100644 --- a/src/app/layouts/header/HeaderComponent.html +++ b/src/app/layouts/header/HeaderComponent.html @@ -15,13 +15,16 @@ limitations under the License. Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in) --> -Here is a newer {{'APPVERSION' | translate}} {{PACKAGEVERSION}} - of OSM! + + {{'NEWVERSIONTAG' | translate:{appVersion: sharedService.osmVersion} }} + +
short-name{{(virtualLink.shortName)?virtualLink.shortName:'-'}}
Name {{(virtualLink.name)?virtualLink.name:'-'}}
- - + + - - + +
{{'PAGE.NSPACKAGE.NSCOMPOSE.MEMBER-VNF-INDEX' | translate}}{{ vnfData['member-vnf-index'] }}id{{ vnfData.id }}
{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}{{ vnfData['vnfd-id-ref'] }}vnfd-id{{ vnfData['vnfd-id'] }}
@@ -154,20 +127,24 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i - - + + + + + + - - + + - - + + - - + +
{{'PAGE.NSPACKAGE.NSCOMPOSE.VLD-ID' | translate}}{{ vlDetails['name'] }}id{{ vnfData.id }}
vnfd-id{{ vnfData['vnfd-id'] }}
{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-CP-REF' | translate}}{{ cpData['vnfd-connection-point-ref'] }}constituent-base-element-id{{ cpData['constituent-base-element-id'] }}
{{'MEMBERINDEX' | translate}}{{ cpData['member-vnf-index-ref'] }}constituent-cpd-id{{ cpData['constituent-cpd-id'] }}
{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}{{ cpData['vnfd-id-ref'] }}virtual-link-profile-id{{ virtualLinkProfileID }}
@@ -211,9 +188,9 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
  • + container="body" ngbTooltip="{{ list['product-name'] }}"> -  {{ list['short-name'] }} +  {{ list['product-name'] }}
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts index 687f4fa..7ef8394 100644 --- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts +++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts @@ -18,7 +18,6 @@ /** * @file NS Compose Component */ -// tslint:disable: no-increment-decrement import { HttpHeaders } from '@angular/common/http'; import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; @@ -32,11 +31,20 @@ import { DataService } from 'DataService'; import { environment } from 'environment'; import * as HttpStatus from 'http-status-codes'; import * as jsyaml from 'js-yaml'; -import { COMPOSERNODES, CONSTITUENTVNFD, GRAPHDETAILS, NSDDetails, Tick, TickPath, VLD, VNFDCONNECTIONPOINTREF } from 'NSDModel'; +import { + CCI, + COMPOSERNODES, + DF, + GRAPHDETAILS, + NSData, + NSDATACREATION, + NSDDetails, + Tick, TickPath, VLC, VLD, VNFPROFILE +} from 'NSDModel'; import { RestService } from 'RestService'; import { SharedService } from 'SharedService'; import { isNullOrUndefined } from 'util'; -import { VNFData, VNFDDetails } from 'VNFDModel'; +import { VNFD, VNFData } from 'VNFDModel'; /** * Creating component @@ -57,14 +65,11 @@ export class NSComposerComponent { /** dataService to pass the data from one component to another @public */ public dataService: DataService; /** Contains VNFD Informations @public */ - public vnfdPackageDetails: VNFData = { identifier: '', shortName: '', vendor: '', description: '', version: '', id: '', name: '' }; + public nsPackageDetails: NSData = { id: '', name: '', description: '', version: '', designer: '' }; /** Contains VL Details @public */ - public vlDetails: VLD = { - name: '', - 'mgmt-network': true, - 'vim-network-name': '', - type: '', - id: '' + public virtualLinkDesc: VLD = { + id: '', + 'mgmt-network': true }; /** Contains the information of the type of modification @public */ public putType: string; @@ -87,19 +92,21 @@ export class NSComposerComponent { /** Contains the node information of VNF @public */ public vnfNodes: {}[] = []; /** contains the VNF Details @public */ - public vnfData: CONSTITUENTVNFD; + public vnfData: VNFPROFILE; + /** contains the Virtual Link connectivity Details @public */ + public virtualLinkProfileID: string; /** Need to show the VNF Details @public */ public isShowVNFDetails: boolean = false; /** Contains the node information of CP @public */ public cpNodes: {}[] = []; /** Need to show the CP Details */ - public cpData: VNFDCONNECTIONPOINTREF; + public cpData: CCI; /** Need to show the VNF Details @public */ public isShowCPDetails: boolean = false; /** random number count @public */ public randomNumberLength: number; /** Contains the vnfd information @public */ - public vnfList: VNFDDetails[] = []; + public vnfList: VNFD[] = []; /** Add the activeclass for the selected @public */ public activeClass: string = 'active'; /** Add the fixed class for the freeze @public */ @@ -109,7 +116,7 @@ export class NSComposerComponent { /** Give the message for the loading @public */ public message: string = 'PLEASEWAIT'; /** Get VNF selected node @public */ - public getVNFSelectedData: VNFDDetails[]; + public getVNFSelectedData: VNFD; /** Assign the forcesimulation active @public */ public forceSimulationActive: boolean = false; /** Assign pinned class for the button when freezed @public */ @@ -145,26 +152,14 @@ export class NSComposerComponent { private force: any; /** Contains all the selected node @private */ private selectedNode: COMPOSERNODES[] = []; - /** variables used for CP @private */ - private iConnectionPointRef: number = 0; /** Contains the connected point @private */ private connectionPoint: string; - /** Contains all the NSD information @private */ - private nsd: string; - /** Contains all the VNFD information @private */ - private vnfd: string; /** Contains id of the node @private */ private identifier: string; - /** Variables used for cp @private */ - private jConnectionPointRef: number = 0; /** Contains copy of NSD information @private */ private nsdCopy: string; /** Contains the VNFD copy @private */ private vnfdCopy: string; - /** Contains name of the node @private */ - private name: string; - /** Contains member vnf index value of the node @private */ - private memberVnfIndexValue: number = 0; /** Contains path information of the node */ // tslint:disable-next-line:no-any private path: any; @@ -198,8 +193,8 @@ export class NSComposerComponent { private setVnfdName: string; /** Contains all methods related to shared @private */ private sharedService: SharedService; - /** Contains selected node VLD objects @private */ - private selectedVLDResult: VLD; + /** Contains selected node VNF profile objects @private */ + private selectedVNFProfile: VNFPROFILE[]; constructor(injector: Injector) { this.injector = injector; @@ -234,106 +229,107 @@ export class NSComposerComponent { } /** On clicking redirect to NS edit page @public */ public onEdit(): void { - this.router.navigate(['/packages/ns/edit/', this.identifier]).catch(() => { + this.router.navigate(['/packages/ns/edit/', this.identifier]).catch((): void => { // Catch Navigation Error }); } /** Events handles drop at D3 region @public */ public drop(ev: DragEvent): void { - event.preventDefault(); - this.name = ev.dataTransfer.getData('text'); - if (this.name === 'vl') { + ev.preventDefault(); + const getDropedName: string = ev.dataTransfer.getData('text'); + if (getDropedName === 'vl') { this.svg.selectAll('*').remove(); this.vldropComposer(); } else { this.svg.selectAll('*').remove(); - this.vnfd = ev.dataTransfer.getData('text'); - this.vnfdropComposer(); + const vnfdName: string = ev.dataTransfer.getData('text'); + this.vnfdropComposer(vnfdName); } } /** Drop VL Composer Data @public */ public vldropComposer(): void { this.randomNumberLength = CONSTANTNUMBER.randomNumber; - const generateId: string = 'ns_vl_' + this.randomString( - this.randomNumberLength, - '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' - ); - if (this.nsData.vld !== undefined) { - this.nsData.vld.push({ - 'vim-network-name': 'PUBLIC', - name: generateId, - 'mgmt-network': true, - type: 'ELAN', - id: generateId - }); - } else { - Object.assign(this.nsData, { - vld: [{ - 'vim-network-name': 'PUBLIC', - name: generateId, - 'mgmt-network': true, - type: 'ELAN', - id: generateId - }] - }); + const generateId: string = 'ns_vl_' + this.sharedService.randomString(); + if (this.nsData['virtual-link-desc'] === undefined) { + this.nsData['virtual-link-desc'] = []; } + this.nsData['virtual-link-desc'].push({ + id: generateId, + 'mgmt-network': false + }); this.putType = 'nsdadd'; this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType); } /** Drop VNFD Composer Data @public */ - public vnfdropComposer(): void { - if (this.nsData['constituent-vnfd'] !== undefined) { - this.nsData['constituent-vnfd'].push({ - 'vnfd-id-ref': this.vnfd, - 'member-vnf-index': ++this.memberVnfIndexValue + public vnfdropComposer(vnfdName: string): void { + const vnfID: string = 'ns_vnfd_' + this.sharedService.randomString(); + if (this.nsData.df.length > 0) { + this.addVNFDID(vnfdName); + this.nsData.df.forEach((res: DF): void => { + if (res['vnf-profile'] === undefined) { + res['vnf-profile'] = []; + } + res['vnf-profile'].push({ + id: vnfID, + 'virtual-link-connectivity': [], + 'vnfd-id': vnfdName + }); }); } else { - Object.assign(this.nsData, { - 'constituent-vnfd': [{ - 'vnfd-id-ref': this.vnfd, - 'member-vnf-index': ++this.memberVnfIndexValue + Object.assign(this.nsData.df, { + id: 'default-df', + 'vnf-profile': [{ + id: vnfID, + 'virtual-link-connectivity': [], + 'vnfd-id': vnfdName }] }); } this.putType = 'vnfdadd'; this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType); } + /** Add the VNFD-ID while drop VNFD if not exists @public */ + public addVNFDID(vnfdName: string): void { + const vnfdIDArray: string[] = this.nsData['vnfd-id']; + if (vnfdIDArray !== undefined) { + if (vnfdIDArray.indexOf(vnfdName) === -1) { + vnfdIDArray.push(vnfdName); + } + } else { + Object.assign(this.nsData, { + 'vnfd-id': [vnfdName] + }); + } + } /** Events handles allow drop on D3 region @public */ public allowDrop(ev: DragEvent): void { ev.preventDefault(); } /** Save NSD Information @public */ public saveNSD(): void { - if (this.vnfdPackageDetails.shortName !== undefined) { - this.nsData['short-name'] = this.vnfdPackageDetails.shortName; - } - if (this.vnfdPackageDetails.vendor !== undefined) { - this.nsData.vendor = this.vnfdPackageDetails.vendor; + if (this.nsPackageDetails.id !== undefined) { + this.nsData.id = this.nsPackageDetails.id; } - if (this.vnfdPackageDetails.description !== undefined) { - this.nsData.description = this.vnfdPackageDetails.description; + if (this.nsPackageDetails.name !== undefined) { + this.nsData.name = this.nsPackageDetails.name; } - if (this.vnfdPackageDetails.version !== undefined) { - this.nsData.version = this.vnfdPackageDetails.version; + if (this.nsPackageDetails.description !== undefined) { + this.nsData.description = this.nsPackageDetails.description; } - if (this.vnfdPackageDetails.id !== undefined) { - this.nsData.id = this.vnfdPackageDetails.id; + if (this.nsPackageDetails.version !== undefined) { + this.nsData.version = this.nsPackageDetails.version; } - if (this.vnfdPackageDetails.name !== undefined) { - this.nsData.name = this.vnfdPackageDetails.name; + if (this.nsPackageDetails.designer !== undefined) { + this.nsData.designer = this.nsPackageDetails.designer; } this.putType = 'nsdUpdate'; this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType); } /** Save Virtual Link @public */ public saveVL(vlid: string): void { - this.nsData.vld.forEach((result: VLD) => { + this.nsData['virtual-link-desc'].forEach((result: VLD): void => { if (result.id === vlid) { - result.name = this.vlDetails.name; - result['mgmt-network'] = !isNullOrUndefined(this.vlDetails['mgmt-network']) ? this.vlDetails['mgmt-network'] : true; - result['vim-network-name'] = !isNullOrUndefined(this.vlDetails['vim-network-name']) ? this.vlDetails['vim-network-name'] : ''; - result.type = this.vlDetails.type; - result.id = this.vlDetails.id; + result['mgmt-network'] = !isNullOrUndefined(this.virtualLinkDesc['mgmt-network']) ? this.virtualLinkDesc['mgmt-network'] : true; } }); this.putType = 'vlUpdate'; @@ -367,18 +363,17 @@ export class NSComposerComponent { url: apiURL + '/' + identifier + '/nsd_content', httpOptions: { headers: this.headers } }; - const nsData: {} = {}; - nsData['nsd:nsd-catalog'] = {}; - nsData['nsd:nsd-catalog'].nsd = []; - nsData['nsd:nsd-catalog'].nsd.push(data); - const descriptorInfo: string = jsyaml.dump(nsData, {sortKeys: true}); + const nsData: NSDATACREATION = { nsd: { nsd: [] } }; + nsData.nsd.nsd = []; + nsData.nsd.nsd.push(data); + const descriptorInfo: string = jsyaml.dump(nsData, { sortKeys: true }); this.sharedService.targzFile({ packageType: 'nsd', id: this.identifier, descriptor: descriptorInfo }) .then((content: ArrayBuffer): void => { - this.restService.putResource(apiURLHeader, content).subscribe((res: {}) => { + this.restService.putResource(apiURLHeader, content).subscribe((res: {}): void => { this.generateData(); this.notifierService.notify('success', this.translateService.instant(successMessage)); this.isLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.generateData(); this.restService.handleError(error, 'put'); this.isLoadingResults = false; @@ -393,7 +388,7 @@ export class NSComposerComponent { const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Info'; modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.INFO'); - modalRef.result.then((result: MODALCLOSERESPONSEDATA) => { + modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => { if (result) { // empty } @@ -408,7 +403,7 @@ export class NSComposerComponent { this.force.stop(); } this.forceSimulationActive = alreadyFixedIsActive; - this.nodes.forEach((d: COMPOSERNODES) => { + this.nodes.forEach((d: COMPOSERNODES): void => { d.fx = (alreadyFixedIsActive) ? null : d.x; d.fy = (alreadyFixedIsActive) ? null : d.y; }); @@ -430,9 +425,9 @@ export class NSComposerComponent { } /** Prepare the information of the VNFD @private */ private generateVNFData(): void { - this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFDDetails[]) => { + this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFD[]): void => { this.vnfList = vnfdPackageData; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); }); } @@ -440,32 +435,29 @@ export class NSComposerComponent { private generateDataNSDTopology(): void { this.nodes = []; this.links = []; - this.iConnectionPointRef = 0; - this.jConnectionPointRef = 0; - this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL + '/' + this.identifier).subscribe((nsData: NSDDetails) => { + this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL + '/' + this.identifier).subscribe((nsData: NSDDetails): void => { delete nsData._admin; delete nsData._id; delete nsData._links; this.nsData = nsData; - this.vnfdPackageDetails.shortName = nsData['short-name']; - this.vnfdPackageDetails.vendor = nsData.vendor; - this.vnfdPackageDetails.description = nsData.description; - this.vnfdPackageDetails.version = nsData.version; - this.vnfdPackageDetails.id = nsData.id; - this.vnfdPackageDetails.name = nsData.name; - if (nsData.vld !== undefined) { + this.generateNSInfo(nsData); + if (nsData['virtual-link-desc'] !== undefined) { /** Details of the VL */ this.nsDataVLD(nsData); } - if (nsData['constituent-vnfd'] !== undefined) { - /** Details of the VNFD */ - this.nsDataConstituentVNFD(nsData); + if (this.nsData.df.length > 0) { + this.nsData.df.forEach((res: DF): void => { + if (res['vnf-profile'] !== undefined) { + /** Details of the VNFD */ + this.nsDataConstituentVNFD(nsData); + } + }); } - if (nsData.vld !== undefined) { + if (nsData.df.length > 0) { this.nsDataVLDLinkCreation(nsData); } this.separateAndCreatenode(); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) { this.router.navigateByUrl('404', { skipLocationChange: true }).catch(); } else { @@ -475,78 +467,88 @@ export class NSComposerComponent { this.isShowNSDDetails = false; }); } - /** nsData-vld undefined Call this function @private */ + /** Generate the NS Package Information */ + private generateNSInfo(nsData: NSDDetails): void { + this.nsPackageDetails.id = nsData.id; + this.nsPackageDetails.name = nsData.name; + this.nsPackageDetails.description = nsData.description; + this.nsPackageDetails.version = nsData.version; + this.nsPackageDetails.designer = nsData.designer; + } + /** nsData VL node creation function @private */ private nsDataVLD(nsData: NSDDetails): void { - nsData.vld.forEach((res: VLD) => { + nsData['virtual-link-desc'].forEach((res: VLD): void => { this.nodes.push({ id: res.id, reflexive: false, type: 'vld', name: res.id, selectorId: res.id }); - this.nsd = res.id; - if (res['vnfd-connection-point-ref'] !== undefined) { - res['vnfd-connection-point-ref'].forEach((result: VNFDCONNECTIONPOINTREF) => { - this.nodes.push( - { - id: this.nsd + ++this.iConnectionPointRef + ':' + result['vnfd-connection-point-ref'], - reflexive: false, - type: 'ns', - name: result['vnfd-connection-point-ref'], - nodeIndex: result['member-vnf-index-ref'], - selectorId: result['vnfd-connection-point-ref'] + '_' + result['member-vnf-index-ref'] + '-osm-' + this.nsd - }); - }); - } }); } - /** nsData constituent-vnfd undefined Call this function @private */ + /** nsData VNFD node creation function @private */ private nsDataConstituentVNFD(nsData: NSDDetails): void { - nsData['constituent-vnfd'].forEach((res: CONSTITUENTVNFD) => { - this.nodes.push( - { - id: res['vnfd-id-ref'] + ':' + res['member-vnf-index'], - reflexive: false, - type: 'vnfd', - name: res['vnfd-id-ref'], - nodeIndex: res['member-vnf-index'], - selectorId: res['vnfd-id-ref'] + '_' + res['member-vnf-index'] - }); - this.vnfd = res['vnfd-id-ref']; - this.memberVnfIndexValue = res['member-vnf-index']; + nsData.df.forEach((resDF: DF): void => { + resDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => { + this.nodes.push( + { + id: resVNF['vnfd-id'] + ':' + resVNF.id, + reflexive: false, + type: 'vnfd', + name: resVNF['vnfd-id'], + nodeIndex: resVNF.id, + selectorId: resVNF['vnfd-id'] + '_' + resVNF.id + }); + if (resVNF['virtual-link-connectivity'] !== undefined) { + this.nsDataCP(resVNF, resVNF.id); + } + }); }); } - - /** nsData-vld undefined Call this function @private */ - private nsDataVLDLinkCreation(nsData: NSDDetails): void { - nsData.vld.forEach((res: VLD) => { - this.nsdCopy = res.id; - if (res['vnfd-connection-point-ref'] !== undefined) { - this.nsDataVNFDConnectionPointRefrence(res); - } + /** nsData CP node creation function @private */ + private nsDataCP(resVNF: VNFPROFILE, vnfID: string): void { + resVNF['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => { + resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => { + this.nodes.push( + { + id: vnfID + ':' + resultCCI['constituent-base-element-id'] + index + ':' + resultCCI['constituent-cpd-id'], + reflexive: false, + type: 'ns', + name: resultCCI['constituent-cpd-id'], + nodeIndex: resultCCI['constituent-base-element-id'], + selectorId: 'osm-' + resultCCI['constituent-cpd-id'] + '-' + vnfID + resultCCI['constituent-base-element-id'] + index + }); + }); }); } - /** nsData-vnfd-connection-point-ref undefined Call this function @private */ - private nsDataVNFDConnectionPointRefrence(res: VLD): void { - res['vnfd-connection-point-ref'].forEach((result: VNFDCONNECTIONPOINTREF) => { - this.connectionPoint = this.nsdCopy + ++this.jConnectionPointRef + ':' + result['vnfd-connection-point-ref']; - this.vnfdCopy = result['vnfd-id-ref'] + ':' + result['member-vnf-index-ref']; - const connectionPointPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.connectionPoint); - const nsdPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.nsdCopy); - const vnfdPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.vnfdCopy); - this.links.push( - { - source: this.nodes[connectionPointPos], - target: this.nodes[nsdPos] - }, - { - source: this.nodes[connectionPointPos], - target: this.nodes[vnfdPos] + /** nsData Link node creation function @private */ + private nsDataVLDLinkCreation(nsData: NSDDetails): void { + nsData.df.forEach((resDF: DF): void => { + if (resDF['vnf-profile'] !== undefined) { + resDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => { + this.nsdCopy = resVNF['vnfd-id'] + ':' + resVNF.id; + if (resVNF['virtual-link-connectivity'] !== undefined) { + this.nsDataVNFDConnectionPointRefrence(resVNF); + } }); + } }); } - /** Generate random string @private */ - private randomString(length: number, chars: string): string { - let result: string = ''; - for (let randomStringRef: number = length; randomStringRef > 0; --randomStringRef) { - result += chars[Math.floor(Math.random() * chars.length)]; - } - return result; + /** nsDataVNFDConnectionPointRefrence undefined Call this function @private */ + private nsDataVNFDConnectionPointRefrence(resVNF: VNFPROFILE): void { + resVNF['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => { + resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => { + this.vnfdCopy = resultVLC['virtual-link-profile-id']; + this.connectionPoint = resVNF.id + ':' + resultCCI['constituent-base-element-id'] + index + ':' + resultCCI['constituent-cpd-id']; + const connectionPointPos: number = this.nodes.map((e: COMPOSERNODES): string => { return e.id; }).indexOf(this.connectionPoint); + const nsdPos: number = this.nodes.map((e: COMPOSERNODES): string => { return e.id; }).indexOf(this.nsdCopy); + const vnfdPos: number = this.nodes.map((e: COMPOSERNODES): string => { return e.id; }).indexOf(this.vnfdCopy); + this.links.push( + { + source: this.nodes[connectionPointPos], + target: this.nodes[nsdPos] + }, + { + source: this.nodes[connectionPointPos], + target: this.nodes[vnfdPos] + }); + }); + }); } /** Separate and create node @private */ private separateAndCreatenode(): void { @@ -581,7 +583,7 @@ export class NSComposerComponent { /** Separate the nodes along with its tyep @private */ private seprateNodes(node: COMPOSERNODES[]): void { this.vlNodes = []; this.vnfNodes = []; this.cpNodes = []; - node.forEach((nodeList: COMPOSERNODES) => { + node.forEach((nodeList: COMPOSERNODES): void => { if (nodeList.type === 'vld') { this.vlNodes.push(nodeList); } else if (nodeList.type === 'vnfd') { @@ -595,21 +597,20 @@ export class NSComposerComponent { private createnode(node: COMPOSERNODES[]): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); d3.selectAll('svg#graphContainer > *').remove(); - d3.select(window).on('keydown', () => { this.keyDown(); }); - d3.select(window).on('keyup', () => { this.keyUp(); }); + d3.select(window).on('keydown', (): void => { this.keyDown(); }); + d3.select(window).on('keyup', (): void => { this.keyUp(); }); this.svg = d3.select('#graphContainer') .attr('oncontextmenu', 'return false;') - .attr('width', graphContainerAttr.width) - .attr('height', graphContainerAttr.height) - .on('mousemove', () => { this.mousemove(); }); + .attr('viewBox', `0 0 ${graphContainerAttr.width} ${graphContainerAttr.height}`) + .on('mousemove', (): void => { this.mousemove(); }); this.force = d3.forceSimulation() .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength)) - .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance)) + .force('link', d3.forceLink().id((d: TickPath): string => d.id).distance(graphContainerAttr.distance)) .force('center', d3.forceCenter(graphContainerAttr.width / graphContainerAttr.forcex, graphContainerAttr.height / graphContainerAttr.forcey)) .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex)) .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey)) - .on('tick', () => { this.tick(); }); + .on('tick', (): void => { this.tick(); }); this.dragLine = this.svg.append('svg:path').attr('class', 'link dragline hidden').attr('d', 'M0,0L0,0'); this.path = this.svg.append('svg:g').selectAll('path'); this.vlNode = this.svg.append('svg:g').selectAll('vlnode'); @@ -622,7 +623,7 @@ export class NSComposerComponent { private tick(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); // draw directed edges with proper padding from node centers - this.path.attr('class', 'link').attr('d', (d: Tick) => { + this.path.attr('class', 'link').attr('d', (d: Tick): string => { const deltaX: number = d.target.x - d.source.x; const deltaY: number = d.target.y - d.source.y; const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY); @@ -635,18 +636,18 @@ export class NSComposerComponent { const targetX: number = d.target.x - (targetPadding * normX); const targetY: number = d.target.y - (targetPadding * normY); return `M${sourceX},${sourceY}L${targetX},${targetY}`; - }).on('dblclick', (d: Tick) => { this.getDeleteLinkConfirmation(d); }); - this.vlNode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`); - this.vnfdnode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`); - this.cpnode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`); + }).on('dblclick', (d: Tick): void => { this.getDeleteLinkConfirmation(d); }); + this.vlNode.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`); + this.vnfdnode.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`); + this.cpnode.attr('transform', (t: TickPath): string => `translate(${t.x},${t.y})`); } /** Update graph (called when needed) at D3 region @private */ private restart(node: COMPOSERNODES[]): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); this.path = this.path.data(this.links); - this.vlNode = this.vlNode.data(this.vlNodes, (d: COMPOSERNODES) => d.id); - this.vnfdnode = this.vnfdnode.data(this.vnfNodes, (d: COMPOSERNODES) => d.id); - this.cpnode = this.cpnode.data(this.cpNodes, (d: COMPOSERNODES) => d.id); + this.vlNode = this.vlNode.data(this.vlNodes, (d: COMPOSERNODES): string => d.id); + this.vnfdnode = this.vnfdnode.data(this.vnfNodes, (d: COMPOSERNODES): string => d.id); + this.cpnode = this.cpnode.data(this.cpNodes, (d: COMPOSERNODES): string => d.id); this.resetAndCreateNodes(); this.force.nodes(node).force('link').links(this.links); this.force.alphaTarget(graphContainerAttr.alphaTarget).restart(); @@ -679,17 +680,18 @@ export class NSComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: COMPOSERNODES) => { return d.selectorId; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/VL.svg') - .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); }) - .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); }) - .on('click', (d: COMPOSERNODES) => { this.singleClick(this.vlNode, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.vlNode, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gvlNode.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: COMPOSERNODES) => d.id); + .text((d: COMPOSERNODES): string => d.id); } /** Setting all the VNFD nodes @private */ private getVNFDNodes(): void { @@ -700,17 +702,18 @@ export class NSComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: COMPOSERNODES) => { return d.selectorId; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/VNFD.svg') - .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); }) - .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); }) - .on('click', (d: COMPOSERNODES) => { this.singleClick(this.vnfdnode, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.vnfdnode, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gvnfdNode.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: COMPOSERNODES) => d.id); + .text((d: COMPOSERNODES): string => d.name); } /** Setting all the CP nodes @private */ private getCPNodes(): void { @@ -721,17 +724,18 @@ export class NSComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: COMPOSERNODES) => { return d.selectorId; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.selectorId; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/CP.svg') - .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); }) - .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); }) - .on('click', (d: COMPOSERNODES) => { this.singleClick(this.cpnode, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.cpnode, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gcpNode.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: COMPOSERNODES) => d.id); + .text((d: COMPOSERNODES): string => d.name); } /** Events handles when mousemove it will capture the selected node data @private */ private mousemove(): void { @@ -740,41 +744,43 @@ export class NSComposerComponent { `M${this.mousedownNode.x},${this.mousedownNode.y}L${d3.mouse(d3.event.currentTarget)[0]},${d3.mouse(d3.event.currentTarget)[1]}`); } /** Get confirmation Before Deleting the Link in Topology @private */ - private getAddConfirmation(mouseData: COMPOSERNODES, getNsData: NSDDetails, addType: string, getVLDIndex: number): void { + private getAddConfirmation(mouseData: COMPOSERNODES, getNsData: NSDDetails, addType: string, getVLDIndex: string): void { let findVNFName: string = ''; let findVLDID: string = ''; if (mouseData.type === 'vld') { findVNFName = this.mouseupNode.name; findVLDID = this.mousedownNode.id; + this.vlName = this.mousedownNode.name; } else { findVNFName = this.mousedownNode.name; findVLDID = this.mouseupNode.id; + this.vlName = this.mouseupNode.name; + } + if (getNsData['vnfd-id'] !== undefined) { + getNsData['vnfd-id'].forEach((resVNFid: string): void => { + if (resVNFid === findVNFName) { + this.getVNFSelectedData = this.vnfList.filter((vnfList: VNFD): boolean => vnfList.id === findVNFName)[0]; + this.setVnfdConnectionPointRef = this.getVNFSelectedData['mgmt-cp']; + this.setVnfdName = this.getVNFSelectedData['product-name']; + this.selectedVNFProfile = getNsData.df[0]['vnf-profile']; + } + }); } - getNsData.vld.forEach((result: VLD) => { - if (result.id === findVLDID) { - this.vlName = result.name; - this.getVNFSelectedData = this.vnfList.filter((vnfList: VNFDDetails) => vnfList.id === findVNFName); - this.setVnfdConnectionPointRef = this.getVNFSelectedData[0]['mgmt-interface'].cp; - this.setVnfdName = this.getVNFSelectedData[0].name; - this.selectedVLDResult = result; - } - }); if (this.vlName !== undefined && this.setVnfdName !== undefined && this.setVnfdConnectionPointRef !== undefined) { const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Add'; - modalRef.componentInstance.cpDetails = this.getVNFSelectedData[0]['connection-point']; + modalRef.componentInstance.cpDetails = this.getVNFSelectedData['ext-cpd']; this.translateService.get('PAGE.TOPOLOGY.ADDINGCP', { vlname: '' + this.vlName + '', vnfdname: '' + this.setVnfdName + '', cpname: '' + this.setVnfdConnectionPointRef + '' - }).subscribe((res: string) => { + }).subscribe((res: string): void => { modalRef.componentInstance.topologyname = res; }); modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.CONNECTIONPOINT'); - modalRef.result.then((result: MODALCLOSERESPONSEWITHCP) => { + modalRef.result.then((result: MODALCLOSERESPONSEWITHCP): void => { if (result) { - this.nsData = getNsData; - this.generateCPForVNF(this.selectedVLDResult, result.connection_point, getVLDIndex); + this.generateCPForVNF(this.selectedVNFProfile, result.connection_point, getVLDIndex); this.addData(environment.NSDESCRIPTORS_URL, this.identifier, getNsData, addType); } else { this.deselectPath(); @@ -785,26 +791,32 @@ export class NSComposerComponent { this.notifierService.notify('error', this.translateService.instant('ERROR')); } } - /** Generate connection point for vnf using vld @private */ - private generateCPForVNF(result: VLD, cp: string, getVLDIndex: number): void { - if (result['vnfd-connection-point-ref'] !== undefined) { - result['vnfd-connection-point-ref'].push({ - 'member-vnf-index-ref': getVLDIndex, - 'vnfd-connection-point-ref': cp, - 'vnfd-id-ref': this.getVNFSelectedData[0].name + private generateCPForVNF(result: VNFPROFILE[], cp: string, getVLDIndex: string): void { + if (result !== undefined) { + result.forEach((resultVNFPROFILE: VNFPROFILE, index: number): void => { + if (getVLDIndex === resultVNFPROFILE.id) { + resultVNFPROFILE['virtual-link-connectivity'].push({ + 'constituent-cpd-id': [{ + 'constituent-base-element-id': getVLDIndex, + 'constituent-cpd-id': cp + }], + 'virtual-link-profile-id': this.vlName + }); + } }); } else { Object.assign(result, { - 'vnfd-connection-point-ref': [{ - 'member-vnf-index-ref': getVLDIndex, - 'vnfd-connection-point-ref': cp, - 'vnfd-id-ref': this.getVNFSelectedData[0].name + 'virtual-link-connectivity': [{ + 'constituent-cpd-id': [{ + 'constituent-base-element-id': getVLDIndex, + 'constituent-cpd-id': cp + }], + 'virtual-link-profile-id': this.vlName }] }); } } - /** Events handles when mousedown click it will capture the selected node data @private */ private mouseDown(d: COMPOSERNODES): void { event.preventDefault(); @@ -827,12 +839,12 @@ export class NSComposerComponent { this.mouseupNode = d; if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'vnfd') { const getOldVLDIndex: string[] = this.mouseupNode.id.split(':'); - const setOldVLDindex: number = +getOldVLDIndex[1]; + const setOldVLDindex: string = getOldVLDIndex[1]; this.putType = 'cpAdded'; this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex); } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'vld') { const getOldVLDIndex: string[] = this.mousedownNode.id.split(':'); - const setOldVLDindex: number = +getOldVLDIndex[1]; + const setOldVLDindex: string = getOldVLDIndex[1]; this.putType = 'cpAdded'; this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex); } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'ns') { @@ -894,27 +906,39 @@ export class NSComposerComponent { this.deselectAllNodes(); nodeSeleced.select('#' + d.selectorId).classed(this.activeClass, !alreadyIsActive); if (d.type === 'vld' && !alreadyIsActive) { - this.nsData.vld.forEach((result: VLD) => { + this.nsData['virtual-link-desc'].forEach((result: VLD): void => { if (result.id === d.id) { this.showRightSideInfo(false, true, false, false); - this.vlDetails = result; + this.virtualLinkDesc = result; } }); } else if (d.type === 'vnfd' && !alreadyIsActive) { - this.nsData['constituent-vnfd'].forEach((result: CONSTITUENTVNFD) => { - if (result['member-vnf-index'] === d.nodeIndex && result['vnfd-id-ref'] === d.name) { - this.showRightSideInfo(false, false, true, false); - this.vnfData = result; + this.nsData.df.forEach((res: DF): void => { + if (res['vnf-profile'] !== undefined) { + res['vnf-profile'].forEach((resVNF: VNFPROFILE): void => { + if (resVNF.id === d.nodeIndex && resVNF['vnfd-id'] === d.name) { + this.showRightSideInfo(false, false, true, false); + this.vnfData = resVNF; + } + }); } }); } else if (d.type === 'ns' && !alreadyIsActive) { - this.nsData.vld.forEach((result: VLD) => { - if (result['vnfd-connection-point-ref'] !== undefined) { - result['vnfd-connection-point-ref'].forEach((resultCP: VNFDCONNECTIONPOINTREF) => { - if (resultCP['member-vnf-index-ref'] === d.nodeIndex && resultCP['vnfd-connection-point-ref'] === d.name) { - this.cpData = resultCP; - this.vlDetails = result; - this.showRightSideInfo(false, false, false, true); + this.nsData.df.forEach((resultDF: DF): void => { + if (resultDF['vnf-profile'] !== undefined) { + resultDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => { + if (resVNF['virtual-link-connectivity'] !== undefined) { + resVNF['virtual-link-connectivity'].forEach((resultVLC: VLC, index: number): void => { + resultVLC['constituent-cpd-id'].forEach((resultCCI: CCI): void => { + const connectionPointID: string = resVNF.id + ':' + resultCCI['constituent-base-element-id'] + index + ':' + resultCCI['constituent-cpd-id']; + if (connectionPointID === d.id) { + this.cpData = resultCCI; + this.vnfData = resVNF; + this.virtualLinkProfileID = resultVLC['virtual-link-profile-id']; + this.showRightSideInfo(false, false, false, true); + } + }); + }); } }); } @@ -927,9 +951,9 @@ export class NSComposerComponent { private getDeleteLinkConfirmation(d: Tick): void { const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Delete'; - modalRef.componentInstance.topologyname = this.translateService.instant('PAGE.TOPOLOGY.LINK'); + modalRef.componentInstance.topologyname = this.translateService.instant('PAGE.TOPOLOGY.LINK') + ' - ' + d.source.id; modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.LINK'; - modalRef.result.then((result: MODALCLOSERESPONSEDATA) => { + modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => { if (result) { this.doubleClickLink(d); } @@ -938,20 +962,32 @@ export class NSComposerComponent { /** Events handles when Double Click to Delete the link @private */ private doubleClickLink(d: Tick): void { let getID: string = ''; - if (d.target.type === 'vld') { - getID = d.target.id; - } else if (d.source.type === 'vld') { + let getName: string = ''; + let getNodeIndex: string; + if (d.source.type === 'ns') { getID = d.source.id; + getName = d.source.name; + getNodeIndex = d.source.nodeIndex; } - this.nodes.forEach((res: COMPOSERNODES) => { - if (res.id === getID) { - if (this.nsData.vld !== undefined) { - this.nsData.vld.forEach((vldresult: VLD) => { - if (vldresult.id === getID) { - delete vldresult['vnfd-connection-point-ref']; - } - }); - } + /** Split the selected node of connectionpoint */ + const selectedNode: string[] = getID.split(':'); + this.nsData.df.forEach((resultDF: DF): void => { + if (resultDF['vnf-profile'] !== undefined) { + resultDF['vnf-profile'].forEach((elementVNF: VNFPROFILE): void => { + const selectedVNFProfileID: string = selectedNode[0]; + /** If VNF ID is equal to selected VNFProfile ID check the VLC of CCI to match the id and name to remove the VLC index */ + if (selectedVNFProfileID === elementVNF.id) { + elementVNF['virtual-link-connectivity'].forEach((elementVLC: VLC, index: number): void => { + const posCCI: number = elementVLC['constituent-cpd-id'].findIndex((e: CCI): boolean => { + const getCID: string = elementVNF.id + ':' + e['constituent-base-element-id'] + index + ':' + e['constituent-cpd-id']; + return getID === getCID; + }); + if (posCCI !== -1) { + elementVNF['virtual-link-connectivity'].splice(index, 1); + } + }); + } + }); } }); this.putType = 'linkdelete'; @@ -969,7 +1005,7 @@ export class NSComposerComponent { } else if (d.type === 'ns') { modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.CONNECTIONPOINT'; } - modalRef.result.then((result: MODALCLOSERESPONSEDATA) => { + modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => { if (result) { this.doubleClick(d); } @@ -978,72 +1014,95 @@ export class NSComposerComponent { /** Events handles when Double Click to Delete @private */ private doubleClick(d: COMPOSERNODES): void { const deletedNode: COMPOSERNODES = d; - this.nodes.forEach((res: COMPOSERNODES) => { + this.nodes.forEach((res: COMPOSERNODES, i: number): void => { if (res.id === d.id) { if (deletedNode.type === 'vld') { - const pos: number = this.nsData.vld.map((e: VLD) => { return e.id; }).indexOf(d.id); - this.nsData.vld.splice(pos, 1); + /** Remove the virtual-link-desc related to VL */ + const pos: number = this.nsData['virtual-link-desc'].map((e: VLD): string => { return e.id; }).indexOf(d.id); + this.nsData['virtual-link-desc'].splice(pos, 1); + /** Remove the virtual-link-connectivity between VL and VNFD */ + this.nsData.df.forEach((resultDF: DF): void => { + if (resultDF['vnf-profile'] !== undefined) { + resultDF['vnf-profile'].forEach((resVNF: VNFPROFILE): void => { + const getVLArray: number[] = resVNF['virtual-link-connectivity'].map((e: VLC, index: number): number => { + if (e['virtual-link-profile-id'] === d.id) { + return index; + } + }); + if (getVLArray.length > 0) { + getVLArray.forEach((removeIndex: number): void => { + const index: string = removeIndex.toString(); + resVNF['virtual-link-connectivity'].splice(resVNF['virtual-link-connectivity'][index], 1); + }); + } + }); + } + }); this.putType = 'nsddelete'; } else if (deletedNode.type === 'vnfd') { - const constituentVNFD: string[] = []; - if (this.nsData['constituent-vnfd'] !== undefined) { - this.nsData['constituent-vnfd'].forEach((ref: CONSTITUENTVNFD) => { - constituentVNFD.push(ref['vnfd-id-ref'] + ':' + ref['member-vnf-index']); - }); - } - const pos: number = constituentVNFD.map((e: string) => { return e; }).indexOf(d.id); - this.nsData['constituent-vnfd'].splice(pos, 1); - const getCP: string[] = d.id.split(':'); - const memberVnfIndexRef: number = +getCP[1]; - const vnfdIDRef: string = getCP[0]; - if (this.nsData.vld !== undefined) { - this.nsData.vld.forEach((resf: VLD) => { - if (resf['vnfd-connection-point-ref'] !== undefined) { - resf['vnfd-connection-point-ref'].forEach((connectionPoint: VNFDCONNECTIONPOINTREF, index: number) => { - if (+connectionPoint['member-vnf-index-ref'] === memberVnfIndexRef && connectionPoint['vnfd-id-ref'] === vnfdIDRef) { - resf['vnfd-connection-point-ref'].splice(index, 1); - } + this.nsData.df.forEach((resultDF: DF): void => { + if (resultDF['vnf-profile'] !== undefined) { + /** Remove the vnf-profile related to VNFD */ + const posVNF: number = resultDF['vnf-profile'].findIndex((e: VNFPROFILE): boolean => { + return e['vnfd-id'] === d.name && e.id === d.nodeIndex; + }); + resultDF['vnf-profile'].splice(posVNF, 1); + /** Check the VNFD exists in any vnf-profile */ + const isVNFDExists: boolean = resultDF['vnf-profile'].some((e: VNFPROFILE): boolean => { + return e['vnfd-id'] === d.name; + }); + /** If VNFD not exists in the vnf-profile remove from vnfd-id */ + if (!isVNFDExists) { + const posVNFD: number = this.nsData['vnfd-id'].findIndex((e: string): boolean => { + return e === d.name; }); + this.nsData['vnfd-id'].splice(posVNFD, 1); } - }); - } + } + }); this.putType = 'vnfddelete'; } else if (deletedNode.type === 'ns') { - const getCP: string[] = d.selectorId.split('-osm-'); - const memberVnfIndexRef: number = d.nodeIndex; - const vnfdIDRef: string = getCP[getCP.length - 1]; - if (this.nsData.vld !== undefined) { - this.nsData.vld.forEach((resf: VLD) => { - if (resf['vnfd-connection-point-ref'] !== undefined && resf.id === vnfdIDRef) { - resf['vnfd-connection-point-ref'].forEach((connectionPoint: VNFDCONNECTIONPOINTREF, index: number) => { - if (connectionPoint['member-vnf-index-ref'] === memberVnfIndexRef) { - resf['vnfd-connection-point-ref'].splice(index, 1); - } - }); - } - }); - } + /** Split the selected node */ + const selectedNode: string[] = d.id.split(':'); + this.nsData.df.forEach((resultDF: DF): void => { + if (resultDF['vnf-profile'] !== undefined) { + resultDF['vnf-profile'].forEach((elementVNF: VNFPROFILE): void => { + const selectedVNFProfileID: string = selectedNode[0]; + /** If VNF ID is equal to selected VNFProfile ID check the VLC of CCI to match the id and name to remove the VLC index */ + if (selectedVNFProfileID === elementVNF.id) { + elementVNF['virtual-link-connectivity'].forEach((elementVLC: VLC, index: number): void => { + const posCCI: number = elementVLC['constituent-cpd-id'].findIndex((e: CCI): boolean => { + const getID: string = elementVNF.id + ':' + e['constituent-base-element-id'] + index + ':' + e['constituent-cpd-id']; + return d.id === getID; + }); + if (posCCI !== -1) { + elementVNF['virtual-link-connectivity'].splice(index, 1); + } + }); + } + }); + } + }); this.putType = 'nsdelete'; } this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType); } }); } + /** drag event @private */ + // tslint:disable-next-line: no-any + private onDragDrop(): any { + return d3.drag().filter(this.dragFilter) + .on('start', this.dragstarted) + .on('drag', this.dragged) + .on('end', this.dragended); + } /** Key press event @private */ private keyDown(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); if (this.lastKeyDown !== -1) { return; } this.lastKeyDown = d3.event.keyCode; if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) { - this.gvlNode.call(d3.drag() - .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended) - ); - this.gvnfdNode.call(d3.drag() - .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended) - ); - this.gcpNode.call(d3.drag() - .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended) - ); this.svg.classed('ctrl', true); } } @@ -1058,6 +1117,10 @@ export class NSComposerComponent { this.svg.classed('ctrl', false); } } + /** Events handles when to drag using filter for the keys @private */ + private dragFilter(): boolean { + return d3.event.ctrlKey && !d3.event.button; + } /** Events handles when dragstarted @private */ private dragstarted(d: COMPOSERNODES): void { d.fx = d.x; diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html index 2aa8f12..a947069 100644 --- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html +++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html @@ -21,9 +21,12 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
{{'PAGE.TOPOLOGY.VNFD' | translate}} {{'PAGE.TOPOLOGY.VDU' | translate}} - {{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}} - {{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}} - {{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' | translate}} + {{'PAGE.TOPOLOGY.VIRTUALLINK' | + translate}} + {{'PAGE.TOPOLOGY.CONNECTIONPOINT' | + translate}} + {{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' | + translate}} @@ -34,41 +37,42 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
- -
- + +
+ +
+
+
+ +
+
-
- +
+
-
+
- -
- + +
+
-
- -
- -
-
- @@ -79,116 +83,74 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
+
-
+
-
-
+
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
+
+ [(ngModel)]="cpInfo.id">
-
-
+
- -
- -
-
-
- -
- + +
+
- @@ -199,28 +161,10 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
-
- -
- -
-
-
- -
- -
-
-
- -
-
-
- -
- +
+
@@ -247,17 +191,17 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
  • - +  {{'PAGE.TOPOLOGY.VDU' | translate}}
  • - +  {{'PAGE.TOPOLOGY.CP' | translate}}
  • - +  {{'PAGE.TOPOLOGY.INTVL' | translate}}
    • @@ -271,7 +215,8 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
    diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts index bf78d7f..081874a 100644 --- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts +++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts @@ -24,7 +24,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { TranslateService } from '@ngx-translate/core'; import { NotifierService } from 'angular-notifier'; -import { APIURLHEADER, ERRORDATA, GETAPIURLHEADER, MODALCLOSERESPONSEDATA } from 'CommonModel'; +import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel'; import { ConfirmationTopologyComponent } from 'ConfirmationTopology'; import * as d3 from 'd3'; import { DataService } from 'DataService'; @@ -33,11 +33,7 @@ import * as HttpStatus from 'http-status-codes'; import * as jsyaml from 'js-yaml'; import { RestService } from 'RestService'; import { SharedService } from 'SharedService'; -import { isNullOrUndefined } from 'util'; -import { - COMPOSERNODES, CONNECTIONPOINT, GRAPHDETAILS, InternalVLD, Tick, TickPath, - VDU, VDUInternalConnectionPoint, VLDInternalConnectionPoint, VNFDInterface, VNFDNODE -} from 'VNFDModel'; +import { COMPOSERNODES, EXTCPD, GRAPHDETAILS, INTCPD, IVLD, Tick, TickPath, VDU, VDUINTCPD, VNFD, VNFDATA, VNIR } from 'VNFDModel'; /** * Creating component @@ -60,10 +56,8 @@ export class VNFComposerComponent { public randomNumberLength: number; /** Contains the vnfd information @public */ public vnfList: string[] = []; - /** Contains node type @public */ - public nodeTypeRef: string; /** Contains VNFD Information @public */ - public vnfdInfo: VNFDNODE = { shortName: '', description: '', version: '', id: '', name: '' }; + public vnfdInfo: VNFD = { 'product-name': '', description: '', version: '', id: '', provider: '' }; /** Contains right panel box information @public */ public showRightSideInfo: string = ''; /** Add the fixed class for the freeze @public */ @@ -78,7 +72,6 @@ export class VNFComposerComponent { public classApplied: boolean = false; /** Contains sidebar open status @public */ public sideBarOpened: boolean = false; - /** Contains SVG attributes @private */ // tslint:disable-next-line:no-any private svg: any; @@ -106,7 +99,7 @@ export class VNFComposerComponent { // tslint:disable-next-line:no-any private intConnectionPoint: any; /** Contains the node information @private */ - private nodes: VNFDNODE[] = []; + private nodes: COMPOSERNODES[] = []; /** Contains the link information of nodes @private */ private links: {}[] = []; /** Instance of the rest service @private */ @@ -136,7 +129,7 @@ export class VNFComposerComponent { // tslint:disable-next-line:no-any private gIntConnectionPoint: any; /** Contains all the information about VNF Details @private */ - private vnfdPackageDetails: VNFDNODE; + private vnfdPackageDetails: VNFD; /** Conatins mousedown action @private */ private mousedownNode: COMPOSERNODES = null; /** Conatins mouseup action @private */ @@ -149,12 +142,18 @@ export class VNFComposerComponent { private lastKeyDown: number = -1; /** Contains VDU Information @private */ private vduInfo: VDU; + /** Contains VDU Old value Information @private */ + private oldVDUID: string; /** Contains Internal VL Information @private */ - private intvlInfo: InternalVLD; + private intvlInfo: IVLD; + /** Contains Internal VL Old value Information @private */ + private oldintVLID: string; /** Contains Connection Point Information @private */ - private cpInfo: CONNECTIONPOINT; + private cpInfo: EXTCPD; + /** Contains Connection Point Old value Information @private */ + private oldCPID: string; /** Contains Internal Connection Point Information @private */ - private intcpInfo: VLDInternalConnectionPoint; + private intcpInfo: VNIR; /** Instance of the modal service @private */ private modalService: NgbModal; @@ -187,43 +186,26 @@ export class VNFComposerComponent { public generateData(): void { this.nodes = []; this.links = []; this.vnfdPackageDetails = null; this.showRightSideInfo = 'vnfdInfo'; - const httpOptions: GETAPIURLHEADER = { - headers: new HttpHeaders({ - 'Content-Type': 'application/zip', - Accept: 'text/plain', - 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' - }), - responseType: 'text' - }; - this.restService.getResource(environment.VNFPACKAGES_URL + '/' + this.identifier + '/vnfd', httpOptions) - .subscribe((vnfdPackageDetails: VNFDNODE) => { + this.restService.getResource(environment.VNFPACKAGESCONTENT_URL + '/' + this.identifier) + .subscribe((vnfdPackageDetails: VNFD): void => { try { - const getJson: string = jsyaml.load(vnfdPackageDetails.toString(), { json: true }); - if (getJson.hasOwnProperty('vnfd-catalog')) { - this.vnfdPackageDetails = getJson['vnfd-catalog'].vnfd[0]; - } else if (getJson.hasOwnProperty('vnfd:vnfd-catalog')) { - this.vnfdPackageDetails = getJson['vnfd:vnfd-catalog'].vnfd[0]; - } else if (getJson.hasOwnProperty('vnfd')) { - // tslint:disable-next-line: no-string-literal - this.vnfdPackageDetails = getJson['vnfd'][0]; - } - this.generateCPPoint(this.vnfdPackageDetails); - this.generateVDU(this.vnfdPackageDetails); - this.generateInternalVLD(this.vnfdPackageDetails); - this.generateInternalCP(this.vnfdPackageDetails); - this.generateIntVLCPLinks(this.vnfdPackageDetails); - this.generateVDUCPLinks(this.vnfdPackageDetails); + delete vnfdPackageDetails._admin; + delete vnfdPackageDetails._id; + delete vnfdPackageDetails._links; + this.vnfdPackageDetails = vnfdPackageDetails; + this.generateVDU(vnfdPackageDetails); + this.generateCPPoint(vnfdPackageDetails); + this.generateInternalVLD(vnfdPackageDetails); + this.generateInternalCP(vnfdPackageDetails); + this.generateIntVLCPLinks(vnfdPackageDetails); + this.generateVDUCPLinks(vnfdPackageDetails); this.createNode(this.nodes); - this.vnfdInfo.shortName = this.vnfdPackageDetails['short-name']; - this.vnfdInfo.description = this.vnfdPackageDetails.description; - this.vnfdInfo.version = this.vnfdPackageDetails.version; - this.vnfdInfo.id = this.vnfdPackageDetails.id; - this.vnfdInfo.name = this.vnfdPackageDetails.name; + this.generateVNFInfo(vnfdPackageDetails); } catch (e) { this.notifierService.notify('error', this.translateService.instant('ERROR')); } this.isLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { error.error = typeof error.error === 'string' ? jsyaml.load(error.error) : error.error; if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) { this.router.navigateByUrl('404', { skipLocationChange: true }).catch(); @@ -234,6 +216,14 @@ export class VNFComposerComponent { this.showRightSideInfo = ''; }); } + /** Generate the VNF Package Information */ + public generateVNFInfo(vnfdPackageDetails: VNFD): void { + this.vnfdInfo['product-name'] = vnfdPackageDetails['product-name']; + this.vnfdInfo.description = vnfdPackageDetails.description; + this.vnfdInfo.version = vnfdPackageDetails.version; + this.vnfdInfo.id = vnfdPackageDetails.id; + this.vnfdInfo.provider = vnfdPackageDetails.provider; + } /** Events handles at drag on D3 region @public */ // tslint:disable-next-line:no-any public drag(ev: any): void { @@ -242,14 +232,14 @@ export class VNFComposerComponent { /** Events handles drop at D3 region @public */ public drop(ev: DragEvent): void { ev.preventDefault(); - this.nodeTypeRef = ev.dataTransfer.getData('text'); - if (this.nodeTypeRef === 'vdu') { + const getDropedName: string = ev.dataTransfer.getData('text'); + if (getDropedName === 'vdu') { this.svg.selectAll('*').remove(); this.vduDropCompose(); - } else if (this.nodeTypeRef === 'cp') { + } else if (getDropedName === 'cp') { this.svg.selectAll('*').remove(); this.cpDropCompose(); - } else if (this.nodeTypeRef === 'intvl') { + } else if (getDropedName === 'intvl') { this.svg.selectAll('*').remove(); this.intvlDropCompose(); } @@ -258,65 +248,79 @@ export class VNFComposerComponent { public allowDrop(ev: DragEvent): void { ev.preventDefault(); } - /** Generate and list CP points @public */ - public generateCPPoint(vnfdPackageDetails: VNFDNODE): void { - if (vnfdPackageDetails['connection-point'] !== undefined) { - vnfdPackageDetails['connection-point'].forEach((cp: CONNECTIONPOINT) => { - this.nodes.push({ id: cp.name, nodeTypeRef: 'cp', name: cp.name, type: cp.type }); + /** Generate and list VDU @public */ + public generateVDU(vnfdPackageDetails: VNFD): void { + if (vnfdPackageDetails.vdu !== undefined) { + vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + this.nodes.push({ + id: vdu.id, + name: vdu.name, + reflexive: false, + type: 'vdu' + }); }); } } - /** Generate and list VDU @public */ - public generateVDU(vnfdPackageDetails: VNFDNODE): void { - if (vnfdPackageDetails.vdu !== undefined) { - vnfdPackageDetails.vdu.forEach((vdu: VDU) => { + /** Generate and list CP points @public */ + public generateCPPoint(vnfdPackageDetails: VNFD): void { + if (vnfdPackageDetails['ext-cpd'] !== undefined) { + vnfdPackageDetails['ext-cpd'].forEach((cp: EXTCPD): void => { this.nodes.push({ - id: vdu.name, nodeTypeRef: 'vdu', 'cloud-init-file': vdu['cloud-init-file'], count: vdu.count, description: vdu.description, - vduID: vdu.id, name: vdu.name, interface: vdu.interface, 'vm-flavor': vdu['vm-flavor'] + id: cp['int-cpd'] !== undefined ? cp['int-cpd'].cpd : cp.id, + name: cp.id, + reflexive: false, + type: 'cp' }); }); } } /** Generate and list Internal VLD @public */ - public generateInternalVLD(vnfdPackageDetails: VNFDNODE): void { - if (vnfdPackageDetails['internal-vld'] !== undefined) { - vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => { + public generateInternalVLD(vnfdPackageDetails: VNFD): void { + if (vnfdPackageDetails['int-virtual-link-desc'] !== undefined) { + vnfdPackageDetails['int-virtual-link-desc'].forEach((ivld: IVLD): void => { this.nodes.push({ - id: internalVLD.name, nodeTypeRef: 'intvl', intVLID: internalVLD.id, - 'internal-connection-point': internalVLD['internal-connection-point'], - 'ip-profile-ref': internalVLD['ip-profile-ref'], name: internalVLD.name, 'short-name': internalVLD['short-name'], - type: internalVLD.type + id: ivld.id, + name: ivld.id, + reflexive: false, + type: 'intvl' }); }); } } /** Generate and list Internal CP @public */ - public generateInternalCP(vnfdPackageDetails: VNFDNODE): void { + public generateInternalCP(vnfdPackageDetails: VNFD): void { if (vnfdPackageDetails.vdu !== undefined) { - vnfdPackageDetails.vdu.forEach((intCP: VDUInternalConnectionPoint) => { - if (intCP['internal-connection-point'] !== undefined) { - intCP['internal-connection-point'].forEach((internalCP: VDUInternalConnectionPoint) => { - this.nodes.push({ - id: internalCP.name, nodeTypeRef: 'intcp', name: internalCP.name, - 'short-name': internalCP['short-name'], type: internalCP.type - }); + vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + if (vdu['int-cpd'] !== undefined) { + vdu['int-cpd'].forEach((intcpd: VDUINTCPD): void => { + if (intcpd['int-virtual-link-desc'] !== undefined) { + intcpd['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => { + this.nodes.push({ + id: intcpd.id, + name: vnir.name, + reflexive: false, + type: 'intcp' + }); + }); + } }); } }); } } /** Generate VDU External and Internal CP Links @public */ - public generateVDUCPLinks(vnfdPackageDetails: VNFDNODE): void { + public generateVDUCPLinks(vnfdPackageDetails: VNFD): void { if (vnfdPackageDetails.vdu !== undefined) { - vnfdPackageDetails.vdu.forEach((vdu: VDU) => { - const vduLink: string = vdu.name; - if (vdu.interface !== undefined) { - vdu.interface.forEach((interfaceDetails: VNFDInterface) => { - if (interfaceDetails['external-connection-point-ref'] !== undefined) { - this.links.push({ source: vduLink, target: interfaceDetails['external-connection-point-ref'] }); - } - if (interfaceDetails['internal-connection-point-ref'] !== undefined) { - this.links.push({ source: vduLink, target: interfaceDetails['internal-connection-point-ref'] }); + vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + const vduLink: string = vdu.id; + if (vdu['int-cpd'] !== undefined) { + vdu['int-cpd'].forEach((intCPD: VDUINTCPD): void => { + if (intCPD['int-virtual-link-desc'] !== undefined) { + intCPD['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => { + this.links.push({ source: vduLink, target: intCPD.id }); + }); + } else { + this.links.push({ source: vduLink, target: intCPD.id }); } }); } @@ -324,13 +328,17 @@ export class VNFComposerComponent { } } /** Generate Network/VLD/Internal VirtualLink, CP Links @public */ - public generateIntVLCPLinks(vnfdPackageDetails: VNFDNODE): void { - if (vnfdPackageDetails['internal-vld'] !== undefined) { - vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => { - const vldName: string = internalVLD.name; - if (internalVLD['internal-connection-point'] !== undefined) { - internalVLD['internal-connection-point'].forEach((intCP: VLDInternalConnectionPoint) => { - this.links.push({ source: vldName, target: intCP['id-ref'] }); + public generateIntVLCPLinks(vnfdPackageDetails: VNFD): void { + if (vnfdPackageDetails.vdu !== undefined) { + vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + if (vdu['int-cpd'] !== undefined) { + vdu['int-cpd'].forEach((intCPD: VDUINTCPD): void => { + const vldName: string = intCPD['int-virtual-link-desc']; + if (intCPD['int-virtual-link-desc'] !== undefined) { + intCPD['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => { + this.links.push({ source: vldName, target: intCPD.id }); + }); + } }); } }); @@ -338,52 +346,65 @@ export class VNFComposerComponent { } /** VNFD details can be saved on users inputs @public */ public saveVNFD(): void { - this.vnfdPackageDetails['short-name'] = this.vnfdInfo.shortName; + this.vnfdPackageDetails['product-name'] = this.vnfdInfo['product-name']; this.vnfdPackageDetails.description = this.vnfdInfo.description; this.vnfdPackageDetails.version = this.vnfdInfo.version; this.vnfdPackageDetails.id = this.vnfdInfo.id; - this.vnfdPackageDetails.name = this.vnfdInfo.name; + this.vnfdPackageDetails.provider = this.vnfdInfo.provider; this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); - delete this.vnfdPackageDetails.shortName; } /** VDU details can be saved on users inputs @public */ - public saveVDU(vduID: string): void { - this.vnfdPackageDetails.vdu.forEach((ref: VDU) => { - if (ref.id === vduID) { - ref.count = this.vduInfo.count; - ref.description = this.vduInfo.description; - ref.image = this.vduInfo.image; + public saveVDU(getVDUID: string): void { + const getOLDVDUID: string = this.oldVDUID; + this.vnfdPackageDetails.vdu.forEach((ref: VDU): void => { + if (ref.id === getVDUID) { ref.id = this.vduInfo.id; ref.name = this.vduInfo.name; + ref.description = this.vduInfo.description !== undefined ? this.vduInfo.description : ''; + ref['sw-image-desc'] = this.vduInfo['sw-image-desc']; + } + }); + this.vnfdPackageDetails['ext-cpd'].forEach((extCPD: EXTCPD): void => { + if (extCPD['int-cpd'] !== undefined) { + if (extCPD['int-cpd']['vdu-id'] === getOLDVDUID) { + extCPD['int-cpd']['vdu-id'] = this.vduInfo.id; + } } }); this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** IntVL details can be saved on users inputs @public */ public saveIntVL(intVLID: string): void { - this.vnfdPackageDetails['internal-vld'].forEach((ref: InternalVLD) => { - if (ref.id === intVLID) { - ref['short-name'] = this.intvlInfo.shortName; - ref.name = this.intvlInfo.name; - ref.type = this.intvlInfo.type; - ref['ip-profile-ref'] = !isNullOrUndefined(this.intvlInfo.ipProfileRef) ? this.intvlInfo.ipProfileRef : ''; - ref.id = this.intvlInfo.id; - delete ref.shortName; - delete ref.ipProfileRef; + const getOldID: string = this.oldintVLID; + this.vnfdPackageDetails['int-virtual-link-desc'].forEach((ivldDetails: IVLD): void => { + if (ivldDetails.id === intVLID) { + ivldDetails.id = this.intvlInfo.id; + } + }); + this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU): void => { + if (vduDetails['int-cpd'] !== undefined) { + vduDetails['int-cpd'].forEach((intCPDDetails: VDUINTCPD): void => { + if (intCPDDetails['int-virtual-link-desc'] !== undefined) { + if (intCPDDetails['int-virtual-link-desc'] === getOldID) { + intCPDDetails['int-virtual-link-desc'] = this.intvlInfo.id; + } + } + }); } }); this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** IntVL details can be saved on users inputs @public */ - public saveCP(cpName: string): void { - this.vnfdPackageDetails['connection-point'].forEach((ref: CONNECTIONPOINT) => { - if (ref.name === cpName) { - if (!isNullOrUndefined(this.cpInfo.type)) { - ref.type = this.cpInfo.type; - } - ref.name = this.cpInfo.name; + public saveCP(cpID: string): void { + const getOldCP: string = this.oldCPID; + this.vnfdPackageDetails['ext-cpd'].forEach((ref: EXTCPD): void => { + if (ref.id === cpID) { + ref.id = this.cpInfo.id; } }); + if (this.vnfdPackageDetails['mgmt-cp'] === getOldCP) { + this.vnfdPackageDetails['mgmt-cp'] = this.cpInfo.id; + } this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** Edit topology @public */ @@ -395,7 +416,7 @@ export class VNFComposerComponent { const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Info'; modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.INFO'); - modalRef.result.then((result: MODALCLOSERESPONSEDATA) => { + modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => { if (result) { // empty } @@ -410,7 +431,7 @@ export class VNFComposerComponent { this.force.stop(); } this.forceSimulationActive = alreadyFixedIsActive; - this.nodes.forEach((d: COMPOSERNODES) => { + this.nodes.forEach((d: COMPOSERNODES): void => { d.fx = (alreadyFixedIsActive) ? null : d.x; d.fy = (alreadyFixedIsActive) ? null : d.y; }); @@ -449,19 +470,21 @@ export class VNFComposerComponent { }; } /** Node is created and render at D3 region @private */ - private createNode(nodes: VNFDNODE[]): void { + private createNode(nodes: VNFD[]): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); d3.selectAll('svg#graphContainer > *').remove(); - d3.select(window).on('keydown', () => { this.keyDown(); }); - d3.select(window).on('keyup', () => { this.keyUp(); }); - this.svg = d3.select('#graphContainer').attr('oncontextmenu', 'return false;').attr('width', graphContainerAttr.width) - .attr('height', graphContainerAttr.height).on('mousemove', () => { this.mousemove(); }); + d3.select(window).on('keydown', (): void => { this.keyDown(); }); + d3.select(window).on('keyup', (): void => { this.keyUp(); }); + this.svg = d3.select('#graphContainer') + .attr('oncontextmenu', 'return false;') + .attr('viewBox', `0 0 ${graphContainerAttr.width} ${graphContainerAttr.height}`) + .on('mousemove', (): void => { this.mousemove(); }); this.force = d3.forceSimulation() - .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance)) + .force('link', d3.forceLink().id((d: TickPath): string => d.id).distance(graphContainerAttr.distance)) .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength)) .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex)) .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey)) - .on('tick', () => { this.tick(); }); + .on('tick', (): void => { this.tick(); }); this.path = this.svg.append('svg:g').selectAll('path'); this.dragLine = this.svg.append('svg:path').attr('class', 'link dragline hidden').attr('d', 'M0,0L0,0'); this.network = this.svg.append('svg:g').selectAll('network'); @@ -473,7 +496,7 @@ export class VNFComposerComponent { /** Update force layout (called automatically each iteration) @private */ private tick(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); - this.path.attr('d', (d: Tick) => { + this.path.attr('d', (d: Tick): string => { const deltaX: number = d.target.x - d.source.x; const deltaY: number = d.target.y - d.source.y; const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY); const normX: number = deltaX / dist; const normY: number = deltaY / dist; @@ -482,27 +505,27 @@ export class VNFComposerComponent { const sourceX: number = d.source.x + (sourcePadding * normX); const sourceY: number = d.source.y + (sourcePadding * normY); const targetX: number = d.target.x - (targetPadding * normX); const targetY: number = d.target.y - (targetPadding * normY); return `M${sourceX},${sourceY}L${targetX},${targetY}`; - }).on('dblclick', (d: Tick) => { this.getDeleteLinkConfirmation(d); }); - this.network.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`); - this.virutualDeploymentUnit.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`); - this.connectionPoint.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`); - this.intConnectionPoint.attr('transform', (d: TickPath) => `translate(${d.x},${d.y})`); + }).on('dblclick', (d: Tick): void => { this.getDeleteLinkConfirmation(d); }); + this.network.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`); + this.virutualDeploymentUnit.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`); + this.connectionPoint.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`); + this.intConnectionPoint.attr('transform', (d: TickPath): string => `translate(${d.x},${d.y})`); } /** Update graph (called when needed) @private */ - private restart(nodes: VNFDNODE[]): void { + private restart(nodes: VNFD[]): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); this.path = this.path.data(this.links); const cpNodes: {}[] = []; const vduNodes: {}[] = []; const vlNodes: {}[] = []; const intcpNodes: {}[] = []; //Nodes are known by id - nodes.forEach((nodeList: VNFDNODE) => { - if (nodeList.nodeTypeRef === 'cp') { cpNodes.push(nodeList); } - else if (nodeList.nodeTypeRef === 'vdu') { vduNodes.push(nodeList); } - else if (nodeList.nodeTypeRef === 'intvl') { vlNodes.push(nodeList); } - else if (nodeList.nodeTypeRef === 'intcp') { intcpNodes.push(nodeList); } + nodes.forEach((nodeList: COMPOSERNODES): void => { + if (nodeList.type === 'cp') { cpNodes.push(nodeList); } + else if (nodeList.type === 'vdu') { vduNodes.push(nodeList); } + else if (nodeList.type === 'intvl') { vlNodes.push(nodeList); } + else if (nodeList.type === 'intcp') { intcpNodes.push(nodeList); } }); - this.network = this.network.data(vlNodes, (d: { id: number }) => d.id); - this.virutualDeploymentUnit = this.virutualDeploymentUnit.data(vduNodes, (d: { id: number }) => d.id); - this.connectionPoint = this.connectionPoint.data(cpNodes, (d: { id: number }) => d.id); - this.intConnectionPoint = this.intConnectionPoint.data(intcpNodes, (d: { id: number }) => d.id); + this.network = this.network.data(vlNodes, (d: VNFD): string => d.id); + this.virutualDeploymentUnit = this.virutualDeploymentUnit.data(vduNodes, (d: VNFD): string => d.id); + this.connectionPoint = this.connectionPoint.data(cpNodes, (d: VNFD): string => d.id); + this.intConnectionPoint = this.intConnectionPoint.data(intcpNodes, (d: VNFD): string => d.id); this.resetAndCreateNodes(); this.force.nodes(nodes).force('link').links(this.links); //Set the graph in motion this.force.alphaTarget(graphContainerAttr.alphaTarget).restart(); @@ -538,17 +561,18 @@ export class VNFComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: VNFDNODE) => { return d.id; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.id; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/INTVL.svg') - .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); }) - .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); }) - .on('click', (d: VNFDNODE) => { this.singleClick(this.network, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.network, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gNetwork.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: { id: number }) => d.id); + .text((d: COMPOSERNODES): string => d.id); } /** Settings all the connection point attributes of nodes @private */ private getgVirutualDeploymentUnit(): void { @@ -559,17 +583,18 @@ export class VNFComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: VNFDNODE) => { return d.id; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.id; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/VDU.svg') - .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); }) - .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); }) - .on('click', (d: VNFDNODE) => { this.singleClick(this.virutualDeploymentUnit, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.virutualDeploymentUnit, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gVirutualDeploymentUnit.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: { id: string }) => d.id); + .text((d: COMPOSERNODES): string => d.id); } /** Settings all the connection point attributes of nodes @private */ private getgConnectionPoint(): void { @@ -580,17 +605,18 @@ export class VNFComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: VNFDNODE) => { return d.id; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.id; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/CP-VNF.svg') - .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); }) - .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); }) - .on('click', (d: VNFDNODE) => { this.singleClick(this.connectionPoint, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.connectionPoint, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gConnectionPoint.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: { id: string }) => d.id); + .text((d: COMPOSERNODES): string => d.name); } /** Settings all the internal connection point attributes of nodes @private */ private getgIntConnectionPoint(): void { @@ -601,86 +627,78 @@ export class VNFComposerComponent { .style('opacity', 1) .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) - .attr('id', (d: VNFDNODE) => { return d.id; }) + .call(this.onDragDrop()) + .attr('id', (d: COMPOSERNODES): string => { return d.id; }) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/INTCP.svg') - .on('mousedown', (d: VNFDNODE) => { this.mouseDown(d); }) - .on('mouseup', (d: VNFDNODE) => { this.mouseUp(d); }) - .on('click', (d: VNFDNODE) => { this.singleClick(this.intConnectionPoint, d); this.onNodeClickToggleSidebar(); }) - .on('dblclick', (d: VNFDNODE) => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); + .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) + .on('mouseup', (d: COMPOSERNODES): void => { this.mouseUp(d); }) + .on('click', (d: COMPOSERNODES): void => { this.singleClick(this.intConnectionPoint, d); this.onNodeClickToggleSidebar(); }) + .on('dblclick', (d: COMPOSERNODES): void => { this.getDeleteNodeConfirmation(d); this.onNodedblClickToggleSidebar(); }); this.gIntConnectionPoint.append('svg:text') .attr('class', 'node_text') .attr('y', graphContainerAttr.textY) - .text((d: { id: string }) => d.id); + .text((d: COMPOSERNODES): string => d.name); } /** Drop VDU Composer Data @private */ private vduDropCompose(): void { const randomID: string = this.sharedService.randomString(); - const vduNode: VNFDNODE[] = [{ - nodeTypeRef: 'vdu', id: 'vdu_' + randomID, count: 1, description: '', name: 'vdu_' + randomID, image: 'ubuntu', - interface: [], 'internal-connection-point': [], 'monitoring-param': [], 'vm-flavor': {} - }]; - const nodeCopy: VNFDNODE[] = this.nodes; - Array.prototype.push.apply(vduNode, nodeCopy); - this.nodes = vduNode; - if (this.vnfdPackageDetails.vdu === undefined) { this.vnfdPackageDetails.vdu = []; } + if (this.vnfdPackageDetails.vdu === undefined) { + this.vnfdPackageDetails.vdu = []; + } this.vnfdPackageDetails.vdu.push({ - id: 'vdu_' + randomID, count: 1, description: '', name: 'vdu_' + randomID, image: 'ubuntu', - interface: [], 'internal-connection-point': [], 'monitoring-param': [], 'vm-flavor': {} + id: 'vdu_' + randomID, + name: 'vdu_' + randomID, + description: '', + 'sw-image-desc': 'ubuntu', + 'int-cpd': [], + 'monitoring-parameter': [], + 'virtual-compute-desc': '', + 'virtual-storage-desc': [] }); this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** Drop CP Composer Data @private */ private cpDropCompose(): void { const randomID: string = this.sharedService.randomString(); - const cpNode: VNFDNODE[] = [{ nodeTypeRef: 'cp', id: 'cp_' + randomID, name: 'cp_' + randomID }]; - const nodeCopy: VNFDNODE[] = this.nodes; - Array.prototype.push.apply(cpNode, nodeCopy); - this.nodes = cpNode; - if (this.vnfdPackageDetails['connection-point'] === undefined) { - this.vnfdPackageDetails['connection-point'] = []; + if (this.vnfdPackageDetails['ext-cpd'] === undefined) { + this.vnfdPackageDetails['ext-cpd'] = []; + this.vnfdPackageDetails['mgmt-cp'] = 'cp_' + randomID; } - this.vnfdPackageDetails['connection-point'].push({ - id: 'cp_' + randomID, name: 'cp_' + randomID, type: 'VPORT' + this.vnfdPackageDetails['ext-cpd'].push({ + id: 'cp_' + randomID, + 'int-cpd': {} }); this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** Drop IntVL Composer Data @private */ private intvlDropCompose(): void { const randomID: string = this.sharedService.randomString(); - const intvlNode: VNFDNODE[] = [{ - nodeTypeRef: 'intvl', id: 'vnf_vl_' + randomID, name: 'vnf_vl_' + randomID, 'short-name': 'vnf_vl_' + randomID, 'ip-profile-ref': '', - type: 'ELAN' - }]; - const nodeCopy: VNFDNODE[] = this.nodes; - Array.prototype.push.apply(intvlNode, nodeCopy); - this.nodes = intvlNode; - if (this.vnfdPackageDetails['internal-vld'] === undefined) { this.vnfdPackageDetails['internal-vld'] = []; } - this.vnfdPackageDetails['internal-vld'].push({ - id: 'vnf_vl_' + randomID, name: 'vnf_vl_' + randomID, 'short-name': 'vnf_vl_' + randomID, - 'ip-profile-ref': '', type: 'ELAN', 'internal-connection-point': [] + if (this.vnfdPackageDetails['int-virtual-link-desc'] === undefined) { + this.vnfdPackageDetails['int-virtual-link-desc'] = []; + } + this.vnfdPackageDetails['int-virtual-link-desc'].push({ + id: 'vnf_vl_' + randomID }); this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** Add the Add Nodes Data @private */ - private addNodes(apiURL: string, identifier: string, data: VNFDNODE): void { + private addNodes(apiURL: string, identifier: string, data: VNFD): void { this.isLoadingResults = true; const apiURLHeader: APIURLHEADER = { url: apiURL + '/' + identifier + '/package_content', httpOptions: { headers: this.headers } }; - const vnfData: {} = {}; - vnfData['vnfd:vnfd-catalog'] = {}; - vnfData['vnfd:vnfd-catalog'].vnfd = []; - vnfData['vnfd:vnfd-catalog'].vnfd.push(data); + const vnfData: VNFDATA = {}; + vnfData.vnfd = data; const descriptorInfo: string = jsyaml.dump(vnfData, { sortKeys: true }); this.sharedService.targzFile({ packageType: 'vnfd', id: this.identifier, descriptor: descriptorInfo }) .then((content: ArrayBuffer): void => { - this.restService.putResource(apiURLHeader, content).subscribe((res: {}) => { + this.restService.putResource(apiURLHeader, content).subscribe((res: {}): void => { this.generateData(); this.notifierService.notify('success', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.UPDATEDSUCCESSFULLY')); this.isLoadingResults = false; - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.generateData(); this.restService.handleError(error, 'put'); this.isLoadingResults = false; @@ -691,7 +709,7 @@ export class VNFComposerComponent { }); } /** Events handles when mousedown click it will capture the selected node data @private */ - private mouseDown(d: VNFDNODE): void { + private mouseDown(d: COMPOSERNODES): void { event.preventDefault(); if (d3.event.ctrlKey) { return; } if (d3.event.shiftKey) { @@ -702,17 +720,17 @@ export class VNFComposerComponent { } } /** Event handles when mouseup event occures @private */ - private mouseUp(d: VNFDNODE): void { + private mouseUp(d: COMPOSERNODES): void { if (!this.mousedownNode) { return; } this.dragLine.classed('hidden', true); this.mouseupNode = d; - if (this.mousedownNode.nodeTypeRef === 'vdu') { + if (this.mousedownNode.type === 'vdu') { this.vduMouseDownNode(); - } else if (this.mousedownNode.nodeTypeRef === 'cp') { + } else if (this.mousedownNode.type === 'cp') { this.cpMouseDownNode(); - } else if (this.mousedownNode.nodeTypeRef === 'intvl') { + } else if (this.mousedownNode.type === 'intvl') { this.intVLMouseDownNode(); - } else if (this.mousedownNode.nodeTypeRef === 'intcp') { + } else if (this.mousedownNode.type === 'intcp') { this.intCPMouseDownNode(); } else { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.INVALIDSELECTION')); @@ -723,123 +741,131 @@ export class VNFComposerComponent { } /** Establish a connection point between vdu and other nodes @private */ private vduMouseDownNode(): void { - if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'cp') { + if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'cp') { this.vduCPConnection(this.mousedownNode.id, this.mouseupNode.id); - } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intcp') { + } else if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'intcp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDINTCP')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'vdu') { + } else if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'vdu') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVDUANDVDU')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'vdu' && this.mouseupNode.nodeTypeRef === 'intvl') { + } else if (this.mousedownNode.type === 'vdu' && this.mouseupNode.type === 'intvl') { this.vduIntvlConnection(this.mousedownNode.id, this.mouseupNode.id); } } - /** Establish a connection point between cp and other nodes @private */ private cpMouseDownNode(): void { - if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'vdu') { + if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'vdu') { this.vduCPConnection(this.mouseupNode.id, this.mousedownNode.id); - } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intvl') { + } else if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'intvl') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDVNFVL')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'intcp') { + } else if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'intcp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDINTCP')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'cp' && this.mouseupNode.nodeTypeRef === 'cp') { + } else if (this.mousedownNode.type === 'cp' && this.mouseupNode.type === 'cp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKCPANDCP')); this.deselectPath(); } } - /** Establish a connection piont between intvl and other nodes @private */ private intVLMouseDownNode(): void { - if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'cp') { + if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'cp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDCP')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'vdu') { + } else if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'vdu') { this.vduIntvlConnection(this.mouseupNode.id, this.mousedownNode.id); - } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'intvl') { + } else if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'intvl') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDVNFVL')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'intvl' && this.mouseupNode.nodeTypeRef === 'intcp') { + } else if (this.mousedownNode.type === 'intvl' && this.mouseupNode.type === 'intcp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKVNFVLANDONTCP')); this.deselectPath(); } } - /** Establish a connection point between intcp and other nodes @private */ private intCPMouseDownNode(): void { - if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'vdu') { + if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'vdu') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVDU')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'cp') { + } else if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'cp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDCP')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'intvl') { + } else if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'intvl') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDVNFVL')); this.deselectPath(); - } else if (this.mousedownNode.nodeTypeRef === 'intcp' && this.mouseupNode.nodeTypeRef === 'intcp') { + } else if (this.mousedownNode.type === 'intcp' && this.mouseupNode.type === 'intcp') { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.CANNOTLINKINTCPANDINTCP')); this.deselectPath(); } } - /** Establish a connection between VDU & CP vice versa @private */ private vduCPConnection(nodeA: string, nodeB: string): void { - this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => { - if (vduDetails.id === nodeA) { - if (vduDetails.interface === undefined) { vduDetails.interface = []; } - vduDetails.interface.push({ - 'external-connection-point-ref': nodeB, 'mgmt-interface': true, - name: 'eth_' + this.sharedService.randomString(), - 'virtual-interface': { type: 'VIRTIO' }, - type: 'EXTERNAL' - }); - if (vduDetails['internal-connection-point'] === undefined) { - vduDetails['internal-connection-point'] = []; - } - if (vduDetails['monitoring-param'] === undefined) { - vduDetails['monitoring-param'] = []; - } - if (vduDetails['vm-flavor'] === undefined) { - vduDetails['vm-flavor'] = {}; + const vduExternalID: string = nodeA + '-eth_' + this.sharedService.randomString(); + if (this.vnfdPackageDetails.vdu !== undefined) { + this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + const vduID: string = vdu.id; + if (vdu.id === nodeA) { + if (this.vnfdPackageDetails['ext-cpd'] !== undefined) { + this.vnfdPackageDetails['ext-cpd'].forEach((extcpd: EXTCPD, index: number): void => { + if (extcpd.id === nodeB) { + if (vdu['int-cpd'] === undefined) { + vdu['int-cpd'] = []; + } + if (extcpd['int-cpd'] === undefined) { + vdu['int-cpd'].push({ + id: vduExternalID, + 'virtual-network-interface-requirement': [ + { + name: vduExternalID, + position: 1, + 'virtual-interface': { type: 'PARAVIRT' } + } + ] + }); + this.vnfdPackageDetails['ext-cpd'][index] = { + id: extcpd.id, + 'int-cpd': { + cpd: vduExternalID, + 'vdu-id': vduID + } + }; + } + } + }); + } } - } - }); + }); + } this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); this.deselectPath(); } - /** Establish a connection between vdu & intvl and vice versa @private */ private vduIntvlConnection(nodeA: string, nodeB: string): void { - const setIntCP: string = 'intcp_' + this.sharedService.randomString(); - this.vnfdPackageDetails['internal-vld'].forEach((vldInternal: InternalVLD) => { - if (vldInternal.id === nodeB) { - if (vldInternal['internal-connection-point'] === undefined) { vldInternal['internal-connection-point'] = []; } - vldInternal['internal-connection-point'].push({ 'id-ref': setIntCP }); - } - }); - this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => { - if (vduDetails.id === nodeA) { - if (vduDetails.interface === undefined) { - vduDetails.interface = []; - } - vduDetails.interface.push({ - 'internal-connection-point-ref': setIntCP, name: 'int_' + setIntCP, type: 'INTERNAL', 'virtual-interface': { type: 'VIRTIO' } - }); - if (vduDetails['internal-connection-point'] === undefined) { - vduDetails['internal-connection-point'] = []; + const vduInternalID: string = nodeA + '-eth_' + this.sharedService.randomString(); + if (this.vnfdPackageDetails.vdu !== undefined) { + this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + if (vdu.id === nodeA) { + if (vdu['int-cpd'] === undefined) { + vdu['int-cpd'] = []; + } + vdu['int-cpd'].push({ + id: vduInternalID, + 'int-virtual-link-desc': nodeB, + 'virtual-network-interface-requirement': [ + { + name: vduInternalID, + position: 1, + 'virtual-interface': { type: 'PARAVIRT' } + } + ] + }); } - vduDetails['internal-connection-point'].push({ - id: setIntCP, name: setIntCP, 'short-name': setIntCP, type: 'VPORT' - }); - } - }); + }); + } this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); this.deselectPath(); } - /** Events handles when mousemove it will capture the selected node data @private */ private mousemove(): void { if (!this.mousedownNode) { return; } @@ -851,16 +877,20 @@ export class VNFComposerComponent { this.mousedownNode = null; this.mouseupNode = null; } + /** drag event @private */ + // tslint:disable-next-line: no-any + private onDragDrop(): any { + return d3.drag().filter(this.dragFilter) + .on('start', this.dragstarted) + .on('drag', this.dragged) + .on('end', this.dragended); + } /** Key press event @private */ private keyDown(): void { const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr(); if (this.lastKeyDown !== -1) { return; } this.lastKeyDown = d3.event.keyCode; if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) { - this.gNetwork.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)); - this.gVirutualDeploymentUnit.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)); - this.gConnectionPoint.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)); - this.gIntConnectionPoint.call(d3.drag().on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)); this.svg.classed('ctrl', true); } } @@ -882,106 +912,117 @@ export class VNFComposerComponent { } /** Events handles when Shift Click to perform create cp @private */ // tslint:disable-next-line: no-any - private singleClick(nodeSelected: any, d: VNFDNODE): void { + private singleClick(nodeSelected: any, d: COMPOSERNODES): void { this.selectedNode(nodeSelected, d); } /** Get confirmation Before Deleting the Node in Topology @private */ - private getDeleteNodeConfirmation(d: VNFDNODE): void { + private getDeleteNodeConfirmation(d: COMPOSERNODES): void { const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Delete'; modalRef.componentInstance.topologyname = d.name; - if (d.nodeTypeRef === 'vdu') { + if (d.type === 'vdu') { modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.VDU'; - } else if (d.nodeTypeRef === 'intvl') { + } else if (d.type === 'intvl') { modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.INTVL'; - } else if (d.nodeTypeRef === 'cp') { + } else if (d.type === 'cp') { modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.CONNECTIONPOINT'; - } else if (d.nodeTypeRef === 'intcp') { + } else if (d.type === 'intcp') { modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.INTCP'; } - modalRef.result.then((result: MODALCLOSERESPONSEDATA) => { + modalRef.result.then((result: MODALCLOSERESPONSEDATA): void => { if (result) { this.deleteNode(d); } }).catch(); } /** Delete nodes @private */ - private deleteNode(d: VNFDNODE): void { - const deletedNode: VNFDNODE = d; - this.nodes.forEach((node: VNFDNODE) => { + private deleteNode(d: COMPOSERNODES): void { + // tslint:disable-next-line: max-func-body-length + this.nodes.forEach((node: VNFD): void => { if (node.id === d.id) { - if (deletedNode.nodeTypeRef === 'cp') { - if (this.vnfdPackageDetails.vdu !== undefined) { - this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => { - if (vduDetails.interface !== undefined) { - const interfacePos: number = vduDetails.interface.map((e: VNFDInterface) => { return e['external-connection-point-ref']; }) - .indexOf(d.id); - if (interfacePos >= 0) { - vduDetails.interface.splice(interfacePos, 1); + if (d.type === 'cp') { + if (this.vnfdPackageDetails['ext-cpd'] !== undefined) { + let getRelatedVDUCPD: string; let getRelatedVDUID: string; + const posExtCPD: number = this.vnfdPackageDetails['ext-cpd'].findIndex((e: EXTCPD): boolean => { + if (e.id === d.name) { + if (e['int-cpd'] !== undefined) { + getRelatedVDUCPD = e['int-cpd'].cpd; getRelatedVDUID = e['int-cpd']['vdu-id']; } + return true; + } else { + return false; } }); - } - const cpPos: number = this.vnfdPackageDetails['connection-point'].map((e: CONNECTIONPOINT) => { return e.name; }) - .indexOf(d.id); - if (cpPos >= 0) { - this.vnfdPackageDetails['connection-point'].splice(cpPos, 1); - } - } else if (deletedNode.nodeTypeRef === 'intcp') { - this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU) => { - // Delete Interface - const interfacePos: number = vduDetails.interface.map((e: VNFDInterface) => { return e['internal-connection-point-ref']; }) - .indexOf(d.id); - if (interfacePos >= 0) { - vduDetails.interface.splice(interfacePos, 1); + if (posExtCPD !== -1) { + this.vnfdPackageDetails['ext-cpd'].splice(posExtCPD, 1); } - // Delete Internal CP - const interCPPos: number = vduDetails['internal-connection-point'] - .map((e: VDUInternalConnectionPoint) => { return e.id; }) - .indexOf(d.id); - if (interCPPos >= 0) { - vduDetails['internal-connection-point'].splice(interCPPos, 1); + if (getRelatedVDUCPD !== undefined && getRelatedVDUID !== undefined) { + this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + if (vdu.id === getRelatedVDUID) { + const posINTCPD: number = vdu['int-cpd'].findIndex((intCPD: VDUINTCPD): boolean => { + return intCPD.id === getRelatedVDUCPD; + }); + if (posINTCPD !== -1) { + vdu['int-cpd'].splice(posINTCPD, 1); + } + } + }); } - }); - if (this.vnfdPackageDetails['internal-vld'] !== undefined && this.vnfdPackageDetails['internal-vld'].length > 0) { - this.vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => { - const interfacePos: number = internalVLD['internal-connection-point'] - .map((e: VLDInternalConnectionPoint) => { return e['id-ref']; }).indexOf(d.id); - if (interfacePos >= 0) { - internalVLD['internal-connection-point'].splice(interfacePos, 1); - } - }); } - } else if (deletedNode.nodeTypeRef === 'intvl') { - const intvlPos: number = this.vnfdPackageDetails['internal-vld'] - .map((e: InternalVLD) => { return e.name; }).indexOf(d.id); - if (intvlPos >= 0) { - this.vnfdPackageDetails['internal-vld'].splice(intvlPos, 1); + } else if (d.type === 'intcp') { + this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + const posINTCPD: number = vdu['int-cpd'].findIndex((intCPD: VDUINTCPD): boolean => { + return intCPD.id === d.id; + }); + if (posINTCPD !== -1) { + vdu['int-cpd'].splice(posINTCPD, 1); + } + }); + } else if (d.type === 'intvl') { + const posINTVLD: number = this.vnfdPackageDetails['int-virtual-link-desc'].findIndex((intVLD: IVLD): boolean => { + return intVLD.id === d.id; + }); + if (posINTVLD !== -1) { + this.vnfdPackageDetails['int-virtual-link-desc'].splice(posINTVLD, 1); } - } else if (deletedNode.nodeTypeRef === 'vdu') { - const internalCPList: string[] = []; - if (deletedNode.interface !== undefined && deletedNode.interface.length > 0) { - deletedNode.interface.forEach((interfaceNode: InternalVLD) => { - if (interfaceNode['internal-connection-point-ref'] !== undefined) { - internalCPList.push(interfaceNode['internal-connection-point-ref']); + if (this.vnfdPackageDetails.vdu !== undefined) { + this.vnfdPackageDetails.vdu.forEach((vduDetails: VDU): void => { + if (vduDetails['int-cpd'] !== undefined) { + const newVDUintCPDArray: VDUINTCPD[] = vduDetails['int-cpd'].filter((item: VDUINTCPD): boolean => { + return item['int-virtual-link-desc'] !== undefined ? item['int-virtual-link-desc'] !== d.id ? true : false : true; + }); + vduDetails['int-cpd'] = newVDUintCPDArray; } }); } - internalCPList.forEach((list: string) => { - if (this.vnfdPackageDetails['internal-vld'] !== undefined && this.vnfdPackageDetails['internal-vld'].length > 0) { - this.vnfdPackageDetails['internal-vld'].forEach((internalVLD: InternalVLD) => { - const interfacePos: number = internalVLD['internal-connection-point'] - .map((e: VLDInternalConnectionPoint) => { return e['id-ref']; }).indexOf(list); - if (interfacePos >= 0) { - internalVLD['internal-connection-point'].splice(interfacePos, 1); - } - }); + } else if (d.type === 'vdu') { + const getRelatedExtCPD: string[] = []; + const posVDU: number = this.vnfdPackageDetails.vdu.findIndex((vduDetails: VDU): boolean => { + if (vduDetails.id === d.id) { + if (vduDetails['int-cpd'] !== undefined) { + vduDetails['int-cpd'].forEach((intCPDDetails: VDUINTCPD): void => { + if (intCPDDetails['int-virtual-link-desc'] === undefined) { + getRelatedExtCPD.push(intCPDDetails.id); + } + }); + } + return true; + } else { + return false; } }); - const vduPos: number = this.vnfdPackageDetails.vdu.map((e: VDU) => { return e.id; }).indexOf(d.id); - if (vduPos >= 0) { - this.vnfdPackageDetails.vdu.splice(vduPos, 1); + if (posVDU !== -1) { + this.vnfdPackageDetails.vdu.splice(posVDU, 1); } + getRelatedExtCPD.forEach((CPDID: string, index: number): void => { + this.vnfdPackageDetails['ext-cpd'].forEach((extCPD: EXTCPD): void => { + if (extCPD['int-cpd'] !== undefined) { + if (extCPD['int-cpd'].cpd === CPDID) { + delete extCPD['int-cpd']; + } + } + }); + }); } else { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.INVALIDSELECTION')); } @@ -995,38 +1036,48 @@ export class VNFComposerComponent { } /** Selected nodes @private */ // tslint:disable-next-line: no-any - private selectedNode(nodeSeleced: any, d: VNFDNODE): void { + private selectedNode(nodeSeleced: any, d: COMPOSERNODES): void { const alreadyIsActive: boolean = nodeSeleced.select('#' + d.id).classed(this.activeNode); this.deselectAllNodes(); nodeSeleced.select('#' + d.id).classed(this.activeNode, !alreadyIsActive); - if (d.nodeTypeRef === 'vdu' && !alreadyIsActive) { - this.vnfdPackageDetails.vdu.forEach((res: VDU) => { - if (res.name === d.id) { + if (d.type === 'vdu' && !alreadyIsActive) { + this.vnfdPackageDetails.vdu.forEach((res: VDU): void => { + if (res.id === d.id) { this.showRightSideInfo = 'vduInfo'; this.vduInfo = res; + this.oldVDUID = res.id; } }); - } else if (d.nodeTypeRef === 'intvl' && !alreadyIsActive) { - this.vnfdPackageDetails['internal-vld'].forEach((res: InternalVLD) => { - if (res.name === d.id) { - this.showRightSideInfo = 'intvlInfo'; - this.intvlInfo = res; - this.intvlInfo.shortName = res['short-name']; - this.intvlInfo.ipProfileRef = res['ip-profile-ref']; + } else if (d.type === 'cp' && !alreadyIsActive) { + this.vnfdPackageDetails['ext-cpd'].forEach((cp: EXTCPD): void => { + const getCPDID: string = cp['int-cpd'] !== undefined ? cp['int-cpd'].cpd : cp.id; + if (getCPDID === d.id) { + this.showRightSideInfo = 'cpInfo'; + this.cpInfo = cp; + this.oldCPID = cp.id; } }); - } else if (d.nodeTypeRef === 'cp' && !alreadyIsActive) { - this.vnfdPackageDetails['connection-point'].forEach((res: CONNECTIONPOINT) => { - if (res.name === d.id) { - this.showRightSideInfo = 'cpInfo'; - this.cpInfo = res; + } else if (d.type === 'intvl' && !alreadyIsActive) { + this.vnfdPackageDetails['int-virtual-link-desc'].forEach((ivld: IVLD): void => { + if (ivld.id === d.id) { + this.showRightSideInfo = 'intvlInfo'; + this.intvlInfo = ivld; + this.oldintVLID = ivld.id; } }); - } - else if (d.nodeTypeRef === 'intcp' && !alreadyIsActive) { - this.intcpInfo = d; - this.showRightSideInfo = 'intcpInfo'; - this.intcpInfo.shortName = d['short-name']; + } else if (d.type === 'intcp' && !alreadyIsActive) { + this.vnfdPackageDetails.vdu.forEach((vdu: VDU): void => { + vdu['int-cpd'].forEach((intcpd: VDUINTCPD): void => { + if (intcpd.id === d.id) { + if (intcpd['int-virtual-link-desc'] !== undefined) { + intcpd['virtual-network-interface-requirement'].forEach((vnir: VNIR): void => { + this.intcpInfo = vnir; + this.showRightSideInfo = 'intcpInfo'; + }); + } + } + }); + }); } else { this.showRightSideInfo = 'vnfdInfo'; } @@ -1038,6 +1089,10 @@ export class VNFComposerComponent { this.connectionPoint.select('image').classed(this.activeNode, false); this.intConnectionPoint.select('image').classed(this.activeNode, false); } + /** Events handles when to drag using filter for the keys @private */ + private dragFilter(): boolean { + return d3.event.ctrlKey && !d3.event.button; + } /** Events handles when dragstarted @private */ private dragstarted(d: COMPOSERNODES): void { d.fx = d.x; diff --git a/src/app/packages/vnf-packages/VNFPackagesComponent.ts b/src/app/packages/vnf-packages/VNFPackagesComponent.ts index 5e23034..8169782 100644 --- a/src/app/packages/vnf-packages/VNFPackagesComponent.ts +++ b/src/app/packages/vnf-packages/VNFPackagesComponent.ts @@ -31,7 +31,7 @@ import { LocalDataSource } from 'ng2-smart-table'; import { RestService } from 'RestService'; import { Subscription } from 'rxjs'; import { SharedService } from 'SharedService'; -import { VNFData, VNFDDetails } from 'VNFDModel'; +import { VNFD, VNFData } from 'VNFDModel'; import { VNFPackagesActionComponent } from 'VNFPackagesAction'; /** @@ -121,14 +121,16 @@ export class VNFPackagesComponent implements OnInit { Accept: 'application/json', 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' }); - this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); }); + this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); }); } /** smart table Header Colums @public */ public generateColumns(): void { this.columnLists = { productName: { title: this.translateService.instant('PRODUCTNAME'), width: '15%', sortDirection: 'asc' }, - identifier: { title: this.translateService.instant('IDENTIFIER'), width: '20%' }, + identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' }, + version: { title: this.translateService.instant('VERSION'), width: '10%' }, + provider: { title: this.translateService.instant('PROVIDER'), width: '10%' }, type: { title: this.translateService.instant('TYPE'), filter: { @@ -142,10 +144,9 @@ export class VNFPackagesComponent implements OnInit { ] } }, - width: '15%' + width: '10%' }, description: { title: this.translateService.instant('DESCRIPTION'), width: '25%' }, - version: { title: this.translateService.instant('VERSION'), width: '10%' }, Actions: { name: 'Action', width: '15%', filter: false, sort: false, type: 'custom', title: this.translateService.instant('ACTIONS'), @@ -215,23 +216,24 @@ export class VNFPackagesComponent implements OnInit { /** Post the droped files and reload the page @public */ public saveFileData(urlHeader: APIURLHEADER, fileData: {}): void { this.fileInput.nativeElement.value = null; - this.restService.postResource(urlHeader, fileData).subscribe((result: {}) => { + this.restService.postResource(urlHeader, fileData).subscribe((result: {}): void => { this.notifierService.notify('success', this.translateService.instant('PAGE.VNFPACKAGE.CREATEDSUCCESSFULLY')); this.generateData(); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'post'); this.isLoadingResults = false; }); } /** Generate nsData object from loop and return for the datasource @public */ - public generatevnfdData(vnfdpackagedata: VNFDDetails): VNFData { + public generatevnfdData(vnfdpackagedata: VNFD): VNFData { return { productName: vnfdpackagedata['product-name'], identifier: vnfdpackagedata._id, type: vnfdpackagedata._admin.type, description: vnfdpackagedata.description, - version: vnfdpackagedata.version + version: vnfdpackagedata.version, + provider: vnfdpackagedata.provider !== undefined ? vnfdpackagedata.provider : '-' }; } /** Handle compose new ns package method @public */ @@ -249,9 +251,9 @@ export class VNFPackagesComponent implements OnInit { /** Fetching the data from server to Load in the smarttable @protected */ protected generateData(): void { this.isLoadingResults = true; - this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFDDetails[]) => { + this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFD[]): void => { this.vnfData = []; - vnfdPackageData.forEach((vnfdpackagedata: VNFDDetails) => { + vnfdPackageData.forEach((vnfdpackagedata: VNFD): void => { const vnfDataObj: VNFData = this.generatevnfdData(vnfdpackagedata); this.vnfData.push(vnfDataObj); }); @@ -260,12 +262,12 @@ export class VNFPackagesComponent implements OnInit { } else { this.checkDataClass = 'dataTables_empty'; } - this.dataSource.load(this.vnfData).then((data: boolean) => { + this.dataSource.load(this.vnfData).then((data: boolean): void => { this.isLoadingResults = false; - }).catch(() => { + }).catch((): void => { this.isLoadingResults = false; }); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.restService.handleError(error, 'get'); this.isLoadingResults = false; }); diff --git a/src/app/utilities/clone-package/ClonePackageComponent.ts b/src/app/utilities/clone-package/ClonePackageComponent.ts index 94e0920..125a726 100644 --- a/src/app/utilities/clone-package/ClonePackageComponent.ts +++ b/src/app/utilities/clone-package/ClonePackageComponent.ts @@ -26,9 +26,10 @@ import { NotifierService } from 'angular-notifier'; import { APIURLHEADER, ERRORDATA, GETAPIURLHEADER, MODALCLOSERESPONSEDATA, URLPARAMS } from 'CommonModel'; import { environment } from 'environment'; import * as jsyaml from 'js-yaml'; -import { NSDDetails } from 'NSDModel'; +import { NSDATACREATION, NSDDetails } from 'NSDModel'; import { RestService } from 'RestService'; import { SharedService } from 'SharedService'; +import { VNFDATA } from 'VNFDModel'; /** * Creating component @@ -99,9 +100,9 @@ export class ClonePackageComponent implements OnInit { apiUrl = environment.VNFPACKAGES_URL + '/' + this.params.id + '/vnfd'; this.isLoadingResults = true; this.restService.getResource(apiUrl, httpOptions) - .subscribe((nsData: NSDDetails[]) => { + .subscribe((nsData: NSDDetails[]): void => { this.modifyContent(nsData); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.isLoadingResults = false; error.error = typeof error.error === 'string' ? jsyaml.load(error.error) : error.error; this.restService.handleError(error, 'get'); @@ -125,30 +126,28 @@ export class ClonePackageComponent implements OnInit { * Get and modify package information based on type */ private modifyContent(packageInfo: NSDDetails[]): void { - const packageContent: string = jsyaml.load(packageInfo.toString()); if (this.params.page === 'nsd') { - this.packageName = 'clone_' + packageContent['nsd:nsd-catalog'].nsd[0].name; + const nsPackageContent: NSDATACREATION = jsyaml.load(packageInfo.toString()); + this.packageName = 'clone_' + nsPackageContent.nsd.nsd[0].name; this.endPoint = environment.NSDESCRIPTORSCONTENT_URL; - packageContent['nsd:nsd-catalog'].nsd.forEach((nsd: NSDDetails) => { + nsPackageContent.nsd.nsd.forEach((nsd: NSDDetails): void => { nsd.id = 'clone_' + nsd.id; nsd.name = 'clone_' + nsd.name; - nsd['short-name'] = 'clone_' + nsd['short-name']; }); + this.clonePackage(nsPackageContent); } else { - this.packageName = 'clone_' + packageContent['vnfd:vnfd-catalog'].vnfd[0].name; + const vnfPackageContent: VNFDATA = jsyaml.load(packageInfo.toString()); + this.packageName = 'clone_' + vnfPackageContent.vnfd['product-name']; this.endPoint = environment.VNFPACKAGESCONTENT_URL; - packageContent['vnfd:vnfd-catalog'].vnfd.forEach((vnfd: NSDDetails) => { - vnfd.id = 'clone_' + vnfd.id; - vnfd.name = 'clone_' + vnfd.name; - vnfd['short-name'] = 'clone_' + vnfd['short-name']; - }); + vnfPackageContent.vnfd.id = 'clone_' + vnfPackageContent.vnfd.id; + vnfPackageContent.vnfd['product-name'] = 'clone_' + vnfPackageContent.vnfd['product-name']; + this.clonePackage(vnfPackageContent); } - this.clonePackage(packageContent); } /** * Create clone package and upload as TAR.GZ file */ - private clonePackage(packageContent: string): void { + private clonePackage(packageContent: NSDATACREATION | VNFDATA): void { const descriptorInfo: string = jsyaml.dump(packageContent); const apiHeader: HttpHeaders = new HttpHeaders({ 'Content-Type': 'application/gzip', @@ -164,11 +163,12 @@ export class ClonePackageComponent implements OnInit { url: this.endPoint, httpOptions: { headers: apiHeader } }; - this.restService.postResource(apiURLHeader, content).subscribe((result: { id: string }) => { + // tslint:disable-next-line: completed-docs + this.restService.postResource(apiURLHeader, content).subscribe((result: { id: string }): void => { this.activeModal.close(modalData); this.isLoadingResults = false; this.notifierService.notify('success', this.translateService.instant('CLONESUCCESSFULLY')); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.isLoadingResults = false; this.restService.handleError(error, 'post'); }); diff --git a/src/app/utilities/compose-packages/ComposePackages.ts b/src/app/utilities/compose-packages/ComposePackages.ts index 9567b43..be70655 100644 --- a/src/app/utilities/compose-packages/ComposePackages.ts +++ b/src/app/utilities/compose-packages/ComposePackages.ts @@ -113,6 +113,9 @@ export class ComposePackages implements OnInit { this.sharedService = this.injector.get(SharedService); } + /** convenience getter for easy access to form fields */ + get f(): FormGroup['controls'] { return this.packagesForm.controls; } + /** * Lifecyle Hooks the trigger before component is instantiate */ @@ -132,9 +135,6 @@ export class ComposePackages implements OnInit { }); } - /** convenience getter for easy access to form fields */ - get f(): FormGroup['controls'] { return this.packagesForm.controls; } - /** Create packages @public */ public createPackages(): void { this.submitted = true; @@ -166,11 +166,12 @@ export class ComposePackages implements OnInit { url: this.endPoint, httpOptions: { headers: this.headers } }; - this.restService.postResource(apiURLHeader, packageContent).subscribe((result: { id: string }) => { + // tslint:disable-next-line: completed-docs + this.restService.postResource(apiURLHeader, packageContent).subscribe((result: { id: string }): void => { this.isLoadingResults = false; this.activeModal.close(); this.composeNSPackages(result.id); - }, (error: ERRORDATA) => { + }, (error: ERRORDATA): void => { this.isLoadingResults = false; this.restService.handleError(error, 'post'); }); @@ -187,48 +188,54 @@ export class ComposePackages implements OnInit { this.notifierService.notify('success', this.packagesForm.value.name + ' ' + this.translateService.instant('PAGE.VNFPACKAGE.CREATEDSUCCESSFULLY')); } - this.router.navigate([packageUrl, id]).catch(() => { + this.router.navigate([packageUrl, id]).catch((): void => { // Catch Navigation Error }); } /** Deafult template for NS and VNF Packages @private */ private packageYaml(descriptorType: string): string { let packageYaml: {} = {}; + const composerName: string = 'NGUI Composer'; + const composerDefaultVersion: string = '1.0'; if (descriptorType === 'ns-package') { packageYaml = { - 'nsd:nsd-catalog': { + nsd: { nsd: [ { - 'short-name': this.packagesForm.value.name, - vendor: 'OSM Composer', - description: this.packagesForm.value.name + ' descriptor', - vld: [], - 'constituent-vnfd': [], - version: '1.0', id: this.packagesForm.value.name, - name: this.packagesForm.value.name + name: this.packagesForm.value.name, + version: composerDefaultVersion, + description: this.packagesForm.value.name + ' descriptor', + designer: composerName, + df: [ + { + id: 'default-df', + 'vnf-profile': [] + } + ] } ] } }; } else { packageYaml = { - 'vnfd:vnfd-catalog': { - vnfd: [ + vnfd: { + id: this.packagesForm.value.name, + 'product-name': this.packagesForm.value.name, + version: composerDefaultVersion, + description: this.packagesForm.value.name + ' descriptor', + provider: composerName, + df: [ { - 'short-name': this.packagesForm.value.name, - vdu: [], - description: '', - 'mgmt-interface': { - cp: '' - }, - id: this.packagesForm.value.name, - version: '1.0', - 'internal-vld': [], - 'connection-point': [], - name: this.packagesForm.value.name + id: 'default-df', + 'instantiation-level': [], + 'vdu-profile': [] } - ] + ], + 'ext-cpd': [], + vdu: [], + 'sw-image-desc': [], + 'virtual-storage-desc': [] } }; } diff --git a/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html b/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html index 03f5564..92a2726 100644 --- a/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html +++ b/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html @@ -29,8 +29,8 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i

    -
    @@ -51,7 +51,7 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
    - {{'DELETECONFIRMPOPUPMESSAGE' | translate}} {{ topologyname }} ? + {{'DELETECONFIRMPOPUPMESSAGE' | translate}} {{ topologyname }} ?

    • {{'PAGE.TOPOLOGY.HELPINFO.CREATEEDGE' | translate}}: diff --git a/src/app/utilities/delete/DeleteComponent.ts b/src/app/utilities/delete/DeleteComponent.ts index 014b66a..b403e9b 100644 --- a/src/app/utilities/delete/DeleteComponent.ts +++ b/src/app/utilities/delete/DeleteComponent.ts @@ -115,8 +115,6 @@ export class DeleteComponent { this.title = ''; if (data.name !== undefined) { this.title = data.name; - } else if (data.shortName !== undefined) { - this.title = data.shortName; } else if (data.projectName !== undefined) { this.title = data.projectName; this.id = this.title; @@ -124,6 +122,8 @@ export class DeleteComponent { this.title = data.userName; } else if (data.username !== undefined) { this.title = data.username; + } else if (data.productName !== undefined) { + this.title = data.productName; } } /** Generate Delete url from data @public */ diff --git a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts index 6e7fbfb..18f3e5a 100644 --- a/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts +++ b/src/app/utilities/ns-packages-action/NsPackagesActionComponent.ts @@ -109,7 +109,7 @@ export class NsPackagesActionComponent { 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' }); this.nsdID = this.value.identifier; - this.nsdName = this.value.shortName; + this.nsdName = this.value.name; } /** Instantiate NS using modalservice @public */ diff --git a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts index f9d1955..cd0d2dc 100644 --- a/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts +++ b/src/app/utilities/vnf-packages-action/VNFPackagesActionComponent.ts @@ -108,7 +108,7 @@ export class VNFPackagesActionComponent { 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' }); this.vnfID = this.value.identifier; - this.vnfName = this.value.shortName; + this.vnfName = this.value.productName; } /** Delete VNF packages @public */ diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index b806737..6fdbfaa 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -40,11 +40,11 @@ "PACKAGES": "Pakete", "MODIFIED": "Geändert", "NODATAMSG": "Keine Daten in der Tabelle verfügbar", - "SHORTNAME": "Kurzer Name", "PRODUCTNAME":"Produktname", "IDENTIFIER": "Kennung", "DESCRIPTION": "Beschreibung", - "VENDOR": "Verkäuferin", + "DESIGNER": "Designer", + "PROVIDER": "Anbieter", "VERSION": "Ausführung", "ACTIONS": "Aktionen", "NAME": "Name", @@ -150,6 +150,7 @@ "NODATE": "Keine Datumsinformationen gefunden", "TYPEINFO": "Um einen neuen TYPW hinzuzufügen, geben Sie oben die Eingabe ein", "UPLOADCONFIGLABEL": "Bitte laden Sie eine Datei im .yaml- oder .yml-Format hoch", + "NEWVERSIONTAG": "Hier ist die neue Version {{appVersion}} von OSM!", "PAGE": { "DASHBOARD": { "DASHBOARD": "Instrumententafel", @@ -330,12 +331,7 @@ "DELETEVNFD": "VNF erfolgreich gelöscht", "DELETENS": "Der Verbindungspunkt wurde erfolgreich gelöscht", "DELETELINK": "Der Link wurde erfolgreich gelöscht", - "MGMTNETWORK": "Mgmt Network", - "VIMNETWORKNAME": "Vim Network Name", - "MEMBER-VNF-INDEX": "member-vnf-index", - "VNFD-ID-REF": "vnfd-id-ref", - "VLD-ID": "vld-id", - "VNFD-CP-REF": "vnfd-Verbindungspunkt-ref" + "MGMTNETWORK": "Mgmt Network" }, "EDITPACKAGES": { "UPDATEDSUCCESSFULLY": "Erfolgreich geupdated" diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index faef909..f06d326 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -40,11 +40,11 @@ "PACKAGES": "Packages", "MODIFIED": "Modified", "NODATAMSG": "No data available in table", - "SHORTNAME": "Short Name", "PRODUCTNAME":"Product Name", "IDENTIFIER": "Identifier", "DESCRIPTION": "Description", - "VENDOR": "Vendor", + "DESIGNER": "Designer", + "PROVIDER": "Provider", "VERSION": "Version", "ACTIONS": "Actions", "NAME": "Name", @@ -150,6 +150,7 @@ "NODATE": "No date information found", "TYPEINFO": "To add a new TYPE, Please enter input above", "UPLOADCONFIGLABEL": "Please upload file with .yaml or .yml format", + "NEWVERSIONTAG": "Here is the new version {{appVersion}} of OSM!", "PAGE": { "DASHBOARD": { "DASHBOARD": "Dashboard", @@ -330,12 +331,7 @@ "DELETEVNFD": "Successfully Deleted the VNF", "DELETENS": "Successfully Deleted the Connection point", "DELETELINK": "Successfully Deleted the Link", - "MGMTNETWORK": "Mgmt Network", - "VIMNETWORKNAME": "Vim Network Name", - "MEMBER-VNF-INDEX": "member-vnf-index", - "VNFD-ID-REF": "vnfd-id-ref", - "VLD-ID": "vld-id", - "VNFD-CP-REF": "vnfd-connection-point-ref" + "MGMTNETWORK": "Mgmt Network" }, "EDITPACKAGES": { "UPDATEDSUCCESSFULLY": "Descriptor Updated Successfully" diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json index 335ed7d..9c5f4cd 100644 --- a/src/assets/i18n/es.json +++ b/src/assets/i18n/es.json @@ -40,11 +40,11 @@ "PACKAGES": "Paquetes", "MODIFIED": "Modificado", "NODATAMSG": "No hay datos disponibles en la tabla", - "SHORTNAME": "Nombre corto", "PRODUCTNAME":"Nombre del producto", "IDENTIFIER": "Identificador", "DESCRIPTION": "Descripción", - "VENDOR": "Vendedor", + "DESIGNER": "Diseñador", + "PROVIDER": "Proveedor", "VERSION": "Versión", "ACTIONS": "Comportamiento", "NAME": "Nombre", @@ -150,6 +150,7 @@ "NODATE": "No se encontró información de fecha", "TYPEINFO": "Para agregar un nuevo TIPO, ingrese la entrada de arriba", "UPLOADCONFIGLABEL": "Cargue el archivo con formato .yaml o .yml", + "NEWVERSIONTAG": "¡Aquí está la nueva versión {{appVersion}} de OSM!", "PAGE": { "DASHBOARD": { "DASHBOARD": "Tablero", @@ -330,12 +331,7 @@ "DELETEVNFD": "VNFD eliminado correctamente", "DELETENS": "Se eliminó correctamente el punto de conexión", "DELETELINK": "Se eliminó el enlace correctamente", - "MGMTNETWORK": "Mgmt Network", - "VIMNETWORKNAME": "Vim Network Name", - "MEMBER-VNF-INDEX": "member-vnf-index", - "VNFD-ID-REF": "vnfd-id-ref", - "VLD-ID": "vld-id", - "VNFD-CP-REF": "vnfd-punto de conexión-ref" + "MGMTNETWORK": "Mgmt Network" }, "EDITPACKAGES": { "UPDATEDSUCCESSFULLY": "Descriptor actualizado correctamente" diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json index ffd94a5..9274cb0 100644 --- a/src/assets/i18n/pt.json +++ b/src/assets/i18n/pt.json @@ -40,11 +40,11 @@ "MODIFIED": "Modificada", "PACKAGES": "Pacotes", "NODATAMSG": "Sem dados disponíveis na tabela", - "SHORTNAME": "Nome curto", "PRODUCTNAME":"Nome do Produto", "IDENTIFIER": "Identificador", "DESCRIPTION": "Descrição", - "VENDOR": "Fornecedor", + "DESIGNER": "Designer", + "PROVIDER": "Fornecedor", "VERSION": "Versão", "ACTIONS": "Ações", "NAME": "Nome", @@ -150,6 +150,7 @@ "NODATE": "Nenhuma informação de data encontrada", "TYPEINFO": "Para adicionar um novo TIPO, insira a entrada acima", "UPLOADCONFIGLABEL": "Faça o upload do arquivo no formato .yaml ou .yml", + "NEWVERSIONTAG": "Aqui está a nova versão {{appVersion}} do OSM!", "PAGE": { "DASHBOARD": { "DASHBOARD": "painel de controle", @@ -330,12 +331,7 @@ "DELETEVNFD": "O VNF foi excluído com sucesso", "DELETENS": "Excluído com êxito o ponto de conexão", "DELETELINK": "O link foi excluído com sucesso", - "MGMTNETWORK": "Mgmt Network", - "VIMNETWORKNAME": "Vim Network Name", - "MEMBER-VNF-INDEX": "member-vnf-index", - "VNFD-ID-REF": "vnfd-id-ref", - "VLD-ID": "vld-id", - "VNFD-CP-REF": "vnfd-ponto de conexão-ref" + "MGMTNETWORK": "Mgmt Network" }, "EDITPACKAGES": { "UPDATEDSUCCESSFULLY": "Atualizado com sucesso" diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 3f976be..11895f7 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -172,6 +172,9 @@ body { .close { opacity: 1 !important; } + .closeVersion { + text-shadow: none; + } .roles-section { .card { .bg-secondary { diff --git a/src/models/CommonModel.ts b/src/models/CommonModel.ts index fb9707a..d157115 100644 --- a/src/models/CommonModel.ts +++ b/src/models/CommonModel.ts @@ -20,6 +20,7 @@ import { HttpHeaders } from '@angular/common/http'; /** * @file Model for Commonly used information. */ +// tslint:disable: completed-docs /** * handle count @enum */ @@ -112,12 +113,12 @@ export interface URLPARAMS { export interface DELETEPARAMS { identifier: string; name?: string; - shortName: string; projectName?: string; userName?: string; username?: string; page?: string; id?: string; + productName?: string; } /** Interface for the Delete Details */ @@ -221,6 +222,15 @@ export interface TYPESECTION { value: string; title: string; } +/** Interface for PRIMITIVETYPES */ +export interface PRIMITIVETYPES { + title: string; + value: string; +} +/** Interface for the PRIMITIVEDATA */ +export interface PRIMITIVEDATA { + parameter: {}[]; +} /** Interface for VIM type Openstack's Config */ export const TYPEOPENSTACK: {} = { sdn_controller: '', diff --git a/src/models/NSDModel.ts b/src/models/NSDModel.ts index 354ccde..131af47 100644 --- a/src/models/NSDModel.ts +++ b/src/models/NSDModel.ts @@ -18,21 +18,17 @@ /** * @file Model for NSD related information. */ - +// tslint:disable: completed-docs import { VNFDAdminDetails } from './VNFDModel'; /** Interface for NSData */ export interface NSData { - shortName?: string; - identifier: string; - description: string; - vendor?: string; + id?: string; + identifier?: string; + description?: string; version: string; - page?: string; name?: string; - projectName?: string; - userName?: string; - username?: string; + designer?: string; } /** Interface for the nscompose descriptors content */ @@ -43,14 +39,16 @@ export interface NSDDetails { id: string; logo: string; name: string; - 'short-name': string; - vendor: string; version: string; vld: VLD[]; _admin: VNFDAdminDetails; _id: string; _links?: string; 'constituent-vnfr-ref': string[]; + 'virtual-link-desc': VLD[]; + df: DF[]; + 'vnfd-id': string[]; + designer?: string; } /** Interface for the connection-point */ @@ -68,27 +66,16 @@ export interface CONSTITUENTVNFD { /** Interface for the vld */ export interface VLD { id: string; - 'mgmt-network': boolean; - name: string; - 'short-name'?: string; - 'type': string; - 'vnfd-connection-point-ref'?: VNFDCONNECTIONPOINTREF[]; - 'vim-network-name': string; + 'mgmt-network'?: boolean; } -/** Interface for VNFDCONNECTIONPOINTREF */ -export interface VNFDCONNECTIONPOINTREF { - 'member-vnf-index-ref': number; - 'vnfd-connection-point-ref': string; - 'vnfd-id-ref': string; -} /** Interface Nodes Creation */ export interface COMPOSERNODES { id: string; reflexive: Boolean; 'type': string; name?: string; - nodeIndex?: number; + nodeIndex?: string; selectorId?: string; x?: number; y?: number; @@ -110,20 +97,8 @@ export interface TickPath { y: number; id: string; 'type'?: string; -} - -/** Interface for the NSD */ -interface NSD { - 'constituent-vnfd': CONSTITUENTVNFD[]; - description: string; - id: string; - name: string; - 'short-name': string; - vendor: string; - version: string; - vld: VLD[]; - _admin: VNFDAdminDetails; - _id: string; + name?: string; + nodeIndex?: string; } /** Interface for the GRAPHDETAILS */ export interface GRAPHDETAILS { @@ -181,3 +156,36 @@ export interface KDUPRIMITIVELEVEL { 'juju-bundle': string; 'kdu-configuration': {}; } + +/** Interface for the DF */ +export interface DF { + id: string; + 'vnf-profile': VNFPROFILE[]; +} + +/** Interface for the DF */ +export interface VNFPROFILE { + id: string; + 'virtual-link-connectivity': VLC[]; + 'vnfd-id': string; +} + +/** Interface for the VLC */ +export interface VLC { + 'constituent-cpd-id': CCI[]; + 'virtual-link-profile-id': string; +} + +/** Interface for the CCI */ +export interface CCI { + 'constituent-base-element-id': string; + 'constituent-cpd-id': string; +} +/** Interface for NSDATACREATION */ +export interface NSDATACREATION { + nsd: NSDETAILDATA; +} +/** Interface for NSDETAILDATA */ +export interface NSDETAILDATA { + nsd: NSDDetails[]; +} diff --git a/src/models/NSInstanceModel.ts b/src/models/NSInstanceModel.ts index 72cd42b..6bafcdd 100644 --- a/src/models/NSInstanceModel.ts +++ b/src/models/NSInstanceModel.ts @@ -18,8 +18,8 @@ /** * @file Model for NS Instance related information. */ - -import { CONSTITUENTVNFD, VLD, VNFDCONNECTIONPOINTREF } from 'NSDModel'; +// tslint:disable: completed-docs +import { CONSTITUENTVNFD, DF, VLD } from 'NSDModel'; import { VNFDAdminDetails } from 'VNFDModel'; /** Interface for NSInstanceDetails */ @@ -36,7 +36,6 @@ export interface NSInstanceDetails { nsd: NSD; name: string; 'name-ref': string; - 'short-name': string; id: string; 'nsd-name-ref': string; description: string; @@ -100,17 +99,17 @@ interface VNFD { /** Interface for NSD */ export interface NSD { description: string; - vld: NSDVLD[]; _admin: VNFDAdminDetails; name: string; version: string; _id: string; - 'short-name': string; id: string; 'constituent-vnfd': CONSTITUENTVNFD[]; vendor: string; vdur: string[]; 'connection-point': CONNECTIONPOINT[]; + 'virtual-link-desc': NSDVLD[]; + df: DF[]; } /** Interface for _AdminDetails */ @@ -146,8 +145,7 @@ export interface NSDVLD { 'vim-network-name': string; id: string; 'type': string; - 'vnfd-connection-point-ref': VNFDCONNECTIONPOINTREF[]; - 'short-name': string; + df: DF[]; } /** Interface for InstantiateParam */ @@ -179,7 +177,7 @@ export interface NSDInstanceData { ConfigStatus: string; DetailedStatus: string; state?: string; - memberIndex?: object; + memberIndex?: DF[]; nsConfig?: object; } @@ -199,7 +197,7 @@ export interface NSINSTANCENODES { nodeTypeRef?: string; name?: string; 'type'?: string; - vnfdCP?: VNFDCONNECTIONPOINTREF[]; + vnfdCP?: DF[]; vimNetworkName?: string; shortName?: string; cp?: CONNECTIONPOINT[]; @@ -214,6 +212,8 @@ export interface NSINSTANCENODES { vnfdRef?: string; vndfCPRef?: string; selectorId?: string; + reflexive?: Boolean; + nodeIndex?: number; } /** Interface for the connection-point */ diff --git a/src/models/VNFDModel.ts b/src/models/VNFDModel.ts index 364d37e..4f76f7c 100644 --- a/src/models/VNFDModel.ts +++ b/src/models/VNFDModel.ts @@ -18,7 +18,7 @@ /** * @file Model for VNFD related information. */ - +// tslint:disable: completed-docs /** Interface for Project */ export interface ProjectModel { project_id: string; @@ -47,146 +47,158 @@ interface AdminDetails { created: string; } -/** Interface for VNFD NODE Details */ -export interface VNFDNODE { - nodeTypeRef?: string; - 'connection-point'?: CONNECTIONPOINT[]; +/** Interface for VNFD Details */ +export interface VNFD { description?: string; + df?: DF[]; + 'ext-cpd'?: EXTCPD[]; id: string; - 'internal-vld'?: InternalVLD[]; - version?: string; - name?: string; - 'mgmt-interface'?: MGMT; - _id?: string; + 'int-virtual-link-desc'?: IVLD[]; + 'mgmt-cp'?: string; + onboardingState?: string; + operationalState?: string; + 'product-name'?: string; + provider?: string; + 'sw-image-desc'?: SWIMAGEDESCRIPTION[]; + usageState?: string; vdu?: VDU[]; + version?: string; + 'virtual-compute-desc'?: string; + 'virtual-storage-desc'?: string[]; _admin?: VNFDAdminDetails; - 'short-name'?: string; - shortName?: string; - vendor?: string; - 'type'?: string; - 'cloud-init-file'?: string; - count?: number; - vduID?: string; - 'interface'?: VNFDInterface[]; - 'vm-flavor'?: VMFlavor; - intVLID?: string; - 'internal-connection-point'?: VLDInternalConnectionPoint[]; - 'monitoring-param'?: MonitoringParam[]; - 'ip-profile-ref'?: string; - 'id-ref'?: string; - 'ip-address'?: string; - reflexive?: boolean; - image?: string; + _id?: string; + _links?: string; + 'vnf-configuration'?: VNFCONFIG[]; + kdu?: []; } - -/** Interface for VNFDDetails */ -export interface VNFDDetails { - 'connection-point': CONNECTIONPOINT[]; - description: string; +/** Interface for DF */ +export interface VNFCONFIG { id: string; - 'internal-vld': InternalVLD[]; - version: string; + 'config-primitive'?: CONFIGPRIMITIVE[]; + 'initial-config-primitive'?: INITIALCONFIGPRIMITIVE[]; +} +/** Interface for DF */ +export interface DF { + id: string; + 'instantiation-level'?: INSTANTIATIONLEVEL[]; + 'vdu-profile'?: VDUPROFILE[]; + 'vnf-configuration-id'?: string; +} +/** Interface for INSTANTIATIONLEVEL */ +export interface INSTANTIATIONLEVEL { + id: string; + 'vdu-level': VDULEVEL[]; +} +/** Interface for VDULEVEL */ +export interface VDULEVEL { + 'number-of-instances': number; + 'vdu-id': string; +} +/** Interface for VDULEVEL */ +export interface VDUPROFILE { + id: string; + name?: string; + 'min-number-of-instances'?: number; + 'max-number-of-instances'?: number; + 'vdu-configuration-id'?: string; + 'vdu-configuration'?: VDUCONFIG; +} +/** Interface for VDUCONFIG */ +export interface VDUCONFIG { + id: string; + 'config-primitive': CONFIGPRIMITIVE[]; + 'initial-config-primitive': INITIALCONFIGPRIMITIVE[]; +} +/** Interface for CONFIGPRIMITIVE */ +export interface CONFIGPRIMITIVE { name: string; - 'mgmt-interface': MGMT; - _id: string; - vdu: VDU[]; - _admin: VNFDAdminDetails; - 'short-name': string; - vendor: string; - 'product-name'?: string; } - -/** Interface for MGMT */ -interface MGMT { - cp: string; +/** Interface for INITIALCONFIGPRIMITIVE */ +export interface INITIALCONFIGPRIMITIVE { + seq: string; + name: string; +} +/** Interface for the ext-cpd */ +export interface EXTCPD { + id?: string; + 'int-cpd'?: INTCPD; +} +/** Interface for the int-cpd */ +export interface INTCPD { + cpd?: string; + 'vdu-id'?: string; +} +/** Interface for IVLD */ +export interface IVLD { + id?: string; + description?: string; +} +/** Interface for SWIMAGEDESCRIPTION */ +export interface SWIMAGEDESCRIPTION { + id: string; + name: string; + version: string; } - /** Interface for VDU */ export interface VDU { - nodeTypeRef?: string; 'cloud-init-file'?: string; - count?: number; description?: string; id?: string; - image?: string; - 'interface'?: VNFDInterface[]; - 'internal-connection-point'?: VDUInternalConnectionPoint[]; + 'int-cpd'?: VDUINTCPD[]; + 'monitoring-parameter'?: MonitoringParam[]; name?: string; - 'vm-flavor'?: VMFlavor; - vduInterface?: string; - 'monitoring-param'?: MonitoringParam[]; + 'sw-image-desc'?: string; + 'virtual-compute-desc'?: string; + 'virtual-storage-desc'?: string[]; } - -/** Interface for VMFlavor */ -interface VMFlavor { - 'storage-gb'?: string; - 'memory-mb'?: string; - 'vcpu-count'?: string; +/** Interface for the vdu int-cpd */ +export interface VDUINTCPD { + id: string; + 'int-virtual-link-desc'?: string; + 'virtual-network-interface-requirement': VNIR[]; } - -/** Interface for VNFDInterface */ -export interface VNFDInterface { - 'external-connection-point-ref'?: string; - 'internal-connection-point-ref'?: string; - 'mgmt-interface'?: boolean; - name?: string; - 'type'?: string; - position?: boolean; - 'virtual-interface'?: VirtualInterface; +/** Interface for the vdu int-cpd => VNIR */ +export interface VNIR { + name: string; + position: number; + 'virtual-interface': VIRTUALINTERFACE; } - -/** Interface for VDU Internal Connection Point */ -export interface VDUInternalConnectionPoint { +/** Interface for the VIRTUALINTERFACE */ +export interface VIRTUALINTERFACE { + 'type': string; +} +/** Interface for monitoring params */ +export interface MonitoringParam { id: string; name?: string; - 'short-name'?: string; - 'type'?: string; + 'performance-metric'?: string; + 'collection-period'?: number; } - -/** Interface for VirutalInterface */ -interface VirtualInterface { - 'type': string; +/** Interface for VNFDATA */ +export interface VNFDATA { + vnfd?: VNFD; } -/** Interface for the connection-point */ -export interface CONNECTIONPOINT { - nodeTypeRef?: string; - 'connection-point-id'?: string; - name?: string; +/** Interface for VDU InternalCPD */ +export interface InternalCPD { id: string; - 'type'?: string; + 'int-virtual-link-desc'?: string; + 'virtual-network-interface-requirement'?: VIRTUALNETWORKINTERFACEREQUIREMENT; } -/** Interface for Internal VLD */ -export interface InternalVLD { - nodeTypeRef?: string; - id?: string; - 'internal-connection-point'?: VLDInternalConnectionPoint[]; - 'ip-profile-ref'?: string; - name?: string; - 'short-name'?: string; - 'type'?: string; - 'shortName'?: string; - 'ipProfileRef'?: string; -} - -/** Interface for VLD Internal Connection Point */ -export interface VLDInternalConnectionPoint { - nodeTypeRef?: string; - 'ip-address'?: string; - 'id-ref'?: string; - 'shortName'?: string; +/** Interface for VIRTUALNETWORKINTERFACEREQUIREMENT */ +export interface VIRTUALNETWORKINTERFACEREQUIREMENT { + name: string; + position?: number; + 'virtual-interface'?: VirtualInterface; } -/** Interface for monitoring params */ -export interface MonitoringParam { - id: string; - 'nfvi-metric'?: string; - 'interface-name-ref'?: string; +/** Interface for VirutalInterface */ +interface VirtualInterface { + 'type': string; } /** Interface for _AdminDetails */ -// tslint:disable-next-line:class-name export interface VNFDAdminDetails { created: number; modified: string; @@ -212,15 +224,14 @@ interface Storage { /** Interface for VNFData */ export interface VNFData { - name?: string; + identifier?: string; id?: string; - shortName?: string; - identifier: string; + name?: string; description: string; - vendor?: string; version: string; 'type'?: string; productName?: string; + provider?: string; } /** Interface for the Tick */ @@ -242,10 +253,11 @@ export interface TickPath { /** Interface Nodes Creation */ export interface COMPOSERNODES { id: string; - reflexive?: boolean; - 'type'?: string; + reflexive: Boolean; + 'type': string; name?: string; - nodeTypeRef?: string; + nodeIndex?: number; + selectorId?: string; x?: number; y?: number; fx?: number; diff --git a/src/services/AuthenticationService.ts b/src/services/AuthenticationService.ts index 728d4ac..0621763 100644 --- a/src/services/AuthenticationService.ts +++ b/src/services/AuthenticationService.ts @@ -164,10 +164,12 @@ export class AuthenticationService { this.loggedIn.next(false); const langCode: string = localStorage.getItem('languageCode'); const redirecturl: string = isNullOrUndefined(localStorage.getItem('returnUrl')) ? '/' : localStorage.getItem('returnUrl'); + const osmVersion: string = isNullOrUndefined(localStorage.getItem('osmVersion')) ? '' : localStorage.getItem('osmVersion'); localStorage.clear(); localStorage.setItem('languageCode', langCode); localStorage.setItem('returnUrl', redirecturl); localStorage.setItem('token_state', null); + localStorage.setItem('osmVersion', osmVersion); this.idle.stop(); this.router.navigate(['login']).catch(); } diff --git a/src/services/SharedService.ts b/src/services/SharedService.ts index 48fbb17..26e5e07 100644 --- a/src/services/SharedService.ts +++ b/src/services/SharedService.ts @@ -129,14 +129,14 @@ export class SharedService { } /** Download Files function @public */ - public downloadFiles(shortName: string, binaryData: Blob[], filetype: string): void { + public downloadFiles(name: string, binaryData: Blob[], filetype: string): void { const downloadLink: HTMLAnchorElement = document.createElement('a'); downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: filetype })); - if (shortName !== undefined) { + if (name !== undefined) { if (window.navigator.msSaveOrOpenBlob) { - window.navigator.msSaveBlob(new Blob(binaryData, { type: filetype }), 'OSM_Export_' + shortName + '.tar.gz'); + window.navigator.msSaveBlob(new Blob(binaryData, { type: filetype }), 'OSM_Export_' + name + '.tar.gz'); } else { - downloadLink.setAttribute('download', 'OSM_Export_' + shortName + '.tar.gz'); + downloadLink.setAttribute('download', 'OSM_Export_' + name + '.tar.gz'); document.body.appendChild(downloadLink); downloadLink.click(); } -- 2.17.1