X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fpackages%2Fns-packages%2Fvnf-composer%2FVNFComposerComponent.ts;h=9fab0da7eeb6a38f40a325bfca3df9f5d9ed6065;hb=refs%2Fchanges%2F14%2F14414%2F3;hp=081874a581b1addce2c4953e2cff611db541ac55;hpb=063a3f1741d0cb20d5ee80590339fec54ab1acdd;p=osm%2FNG-UI.git diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts index 081874a..9fab0da 100644 --- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts +++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts @@ -32,7 +32,7 @@ import { environment } from 'environment'; import * as HttpStatus from 'http-status-codes'; import * as jsyaml from 'js-yaml'; import { RestService } from 'RestService'; -import { SharedService } from 'SharedService'; +import { SharedService, isNullOrUndefined } from 'SharedService'; import { COMPOSERNODES, EXTCPD, GRAPHDETAILS, INTCPD, IVLD, Tick, TickPath, VDU, VDUINTCPD, VNFD, VNFDATA, VNIR } from 'VNFDModel'; /** @@ -73,30 +73,30 @@ export class VNFComposerComponent { /** Contains sidebar open status @public */ public sideBarOpened: boolean = false; /** Contains SVG attributes @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private svg: any; /** Contains forced node animations @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private force: any; /** Contains the Drag line */ - // tslint:disable-next-line: no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private dragLine: any; /** Contains id of the node @private */ private identifier: string; /** Contains path information of the node */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private path: any; /** Contains node network @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private network: any; /** Contains node network @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private virutualDeploymentUnit: any; /** Contains node connectionPoint @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private connectionPoint: any; /** Contains node intConnectionPoint @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private intConnectionPoint: any; /** Contains the node information @private */ private nodes: COMPOSERNODES[] = []; @@ -117,16 +117,16 @@ export class VNFComposerComponent { /** Contains tranlsate instance @private */ private translateService: TranslateService; /** Rendered nodes represent network @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private gNetwork: any; /** Rendered nodes represent VDU @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private gVirutualDeploymentUnit: any; /** Rendered nodes represent connection point @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private gConnectionPoint: any; /** Rendered nodes represent internal connection point @private */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private gIntConnectionPoint: any; /** Contains all the information about VNF Details @private */ private vnfdPackageDetails: VNFD; @@ -172,11 +172,10 @@ export class VNFComposerComponent { * Lifecyle Hooks the trigger before component is instantiate */ public ngOnInit(): void { - // tslint:disable-next-line:no-backbone-get-set-outside-model this.identifier = this.activatedRoute.snapshot.paramMap.get('id'); this.generateData(); this.headers = new HttpHeaders({ - 'Content-Type': 'application/zip', + 'Content-Type': 'application/gzip', Accept: 'application/json', 'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0' }); @@ -208,7 +207,9 @@ export class VNFComposerComponent { }, (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(); + this.router.navigateByUrl('404', { skipLocationChange: true }).catch((): void => { + // Catch Navigation Error + }); } else { this.restService.handleError(error, 'get'); } @@ -225,7 +226,7 @@ export class VNFComposerComponent { this.vnfdInfo.provider = vnfdPackageDetails.provider; } /** Events handles at drag on D3 region @public */ - // tslint:disable-next-line:no-any + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any public drag(ev: any): void { ev.dataTransfer.setData('text', ev.target.id); } @@ -266,7 +267,7 @@ export class VNFComposerComponent { if (vnfdPackageDetails['ext-cpd'] !== undefined) { vnfdPackageDetails['ext-cpd'].forEach((cp: EXTCPD): void => { this.nodes.push({ - id: cp['int-cpd'] !== undefined ? cp['int-cpd'].cpd : cp.id, + id: cp['int-cpd'].cpd !== undefined ? cp['int-cpd'].cpd : cp.id, name: cp.id, reflexive: false, type: 'cp' @@ -409,10 +410,13 @@ export class VNFComposerComponent { } /** Edit topology @public */ public onEdit(): void { - this.router.navigate(['/packages/vnf/edit/', this.identifier]).catch(); + this.router.navigate(['/packages/vnf/edit/', this.identifier]).catch((): void => { + // Catch Navigation Error + }); } /** Show Info @public */ public showInfo(): void { + // eslint-disable-next-line security/detect-non-literal-fs-filename const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Info'; modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.INFO'); @@ -420,7 +424,9 @@ export class VNFComposerComponent { if (result) { // empty } - }).catch(); + }).catch((): void => { + // Catch Navigation Error + }); } /** Event to freeze the animation @public */ public onFreeze(): void { @@ -562,7 +568,7 @@ export class VNFComposerComponent { .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) .call(this.onDragDrop()) - .attr('id', (d: COMPOSERNODES): string => { return d.id; }) + .attr('id', (d: COMPOSERNODES): string => d.id) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/INTVL.svg') .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) @@ -584,7 +590,7 @@ export class VNFComposerComponent { .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) .call(this.onDragDrop()) - .attr('id', (d: COMPOSERNODES): string => { return d.id; }) + .attr('id', (d: COMPOSERNODES): string => d.id) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/VDU.svg') .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) @@ -606,7 +612,7 @@ export class VNFComposerComponent { .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) .call(this.onDragDrop()) - .attr('id', (d: COMPOSERNODES): string => { return d.id; }) + .attr('id', (d: COMPOSERNODES): string => d.id) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/CP-VNF.svg') .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) @@ -628,7 +634,7 @@ export class VNFComposerComponent { .attr('x', graphContainerAttr.imageX) .attr('y', graphContainerAttr.imageY) .call(this.onDragDrop()) - .attr('id', (d: COMPOSERNODES): string => { return d.id; }) + .attr('id', (d: COMPOSERNODES): string => d.id) .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight) .attr('xlink:href', 'assets/images/INTCP.svg') .on('mousedown', (d: COMPOSERNODES): void => { this.mouseDown(d); }) @@ -643,32 +649,38 @@ export class VNFComposerComponent { /** Drop VDU Composer Data @private */ private vduDropCompose(): void { const randomID: string = this.sharedService.randomString(); - if (this.vnfdPackageDetails.vdu === undefined) { - this.vnfdPackageDetails.vdu = []; + if (this.vnfdPackageDetails['mgmt-cp'] === undefined) { + this.notifierService.notify('error', this.translateService.instant('PAGE.TOPOLOGY.ADDCPBEFOREVDU')); + } else { + if (this.vnfdPackageDetails.vdu === undefined) { + this.vnfdPackageDetails.vdu = []; + } + this.vnfdPackageDetails.vdu.push({ + 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); } - this.vnfdPackageDetails.vdu.push({ - 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(); if (this.vnfdPackageDetails['ext-cpd'] === undefined) { this.vnfdPackageDetails['ext-cpd'] = []; - this.vnfdPackageDetails['mgmt-cp'] = 'cp_' + randomID; } this.vnfdPackageDetails['ext-cpd'].push({ id: 'cp_' + randomID, 'int-cpd': {} }); + if (this.vnfdPackageDetails['mgmt-cp'] === undefined) { + this.vnfdPackageDetails['mgmt-cp'] = 'cp_' + randomID; + } this.addNodes(environment.VNFPACKAGES_URL, this.identifier, this.vnfdPackageDetails); } /** Drop IntVL Composer Data @private */ @@ -710,6 +722,7 @@ export class VNFComposerComponent { } /** Events handles when mousedown click it will capture the selected node data @private */ private mouseDown(d: COMPOSERNODES): void { + // eslint-disable-next-line deprecation/deprecation event.preventDefault(); if (d3.event.ctrlKey) { return; } if (d3.event.shiftKey) { @@ -812,25 +825,24 @@ export class VNFComposerComponent { 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 + vdu['int-cpd'].push({ + id: vduExternalID, + 'virtual-network-interface-requirement': [ + { + name: vduExternalID, + position: 1, + 'virtual-interface': { type: 'PARAVIRT' } } - }; - } + ] + }); + // eslint-disable-next-line security/detect-object-injection + this.vnfdPackageDetails['ext-cpd'][index] = { + id: extcpd.id, + 'int-cpd': { + cpd: vduExternalID, + 'vdu-id': vduID + } + }; } }); } @@ -878,7 +890,7 @@ export class VNFComposerComponent { this.mouseupNode = null; } /** drag event @private */ - // tslint:disable-next-line: no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private onDragDrop(): any { return d3.drag().filter(this.dragFilter) .on('start', this.dragstarted) @@ -911,12 +923,13 @@ export class VNFComposerComponent { this.dragLine.classed('hidden', true).attr('d', 'M0,0L0,0'); } /** Events handles when Shift Click to perform create cp @private */ - // tslint:disable-next-line: no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private singleClick(nodeSelected: any, d: COMPOSERNODES): void { this.selectedNode(nodeSelected, d); } /** Get confirmation Before Deleting the Node in Topology @private */ private getDeleteNodeConfirmation(d: COMPOSERNODES): void { + // eslint-disable-next-line security/detect-non-literal-fs-filename const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' }); modalRef.componentInstance.topologyType = 'Delete'; modalRef.componentInstance.topologyname = d.name; @@ -933,11 +946,12 @@ export class VNFComposerComponent { if (result) { this.deleteNode(d); } - }).catch(); + }).catch((): void => { + // Catch Navigation Error + }); } /** Delete nodes @private */ 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 (d.type === 'cp') { @@ -959,9 +973,7 @@ export class VNFComposerComponent { 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; - }); + const posINTCPD: number = vdu['int-cpd'].findIndex((intCPD: VDUINTCPD): boolean => intCPD.id === getRelatedVDUCPD); if (posINTCPD !== -1) { vdu['int-cpd'].splice(posINTCPD, 1); } @@ -971,26 +983,20 @@ export class VNFComposerComponent { } } 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; - }); + const posINTCPD: number = vdu['int-cpd'].findIndex((intCPD: VDUINTCPD): boolean => 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; - }); + const posINTVLD: number = this.vnfdPackageDetails['int-virtual-link-desc'].findIndex((intVLD: IVLD): boolean => intVLD.id === d.id); if (posINTVLD !== -1) { this.vnfdPackageDetails['int-virtual-link-desc'].splice(posINTVLD, 1); } 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; - }); + const newVDUintCPDArray: VDUINTCPD[] = vduDetails['int-cpd'].filter((item: VDUINTCPD): boolean => item['int-virtual-link-desc'] !== undefined ? item['int-virtual-link-desc'] !== d.id ? true : false : true); vduDetails['int-cpd'] = newVDUintCPDArray; } }); @@ -1018,7 +1024,7 @@ export class VNFComposerComponent { this.vnfdPackageDetails['ext-cpd'].forEach((extCPD: EXTCPD): void => { if (extCPD['int-cpd'] !== undefined) { if (extCPD['int-cpd'].cpd === CPDID) { - delete extCPD['int-cpd']; + extCPD['int-cpd'] = {}; } } }); @@ -1035,7 +1041,7 @@ export class VNFComposerComponent { this.notifierService.notify('warning', this.translateService.instant('PAGE.VNFPACKAGE.VNFCOMPOSE.YOUCANNOTDELETELINK')); } /** Selected nodes @private */ - // tslint:disable-next-line: no-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any private selectedNode(nodeSeleced: any, d: COMPOSERNODES): void { const alreadyIsActive: boolean = nodeSeleced.select('#' + d.id).classed(this.activeNode); this.deselectAllNodes();