Bug 1383 Error when consulting NS instance's topology
* SOL006 Descriptor topology changes
Change-Id: I79afb00dfb54ce2c9dc02c0c4b7bbe435b07a915
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
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 @@
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 @@
/** 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 @@
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 @@
} 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 @@
/** 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 @@
</div>
</div>
<div class="form-group row" *ngIf="primitiveType === 'VNF_Primitive' || primitiveType === 'VDU_Primitive' || primitiveType === 'KDU_Primitive'">
- <label class="col-sm-4 col-form-label">VNF {{'MEMBERINDEX' | translate}}*</label>
+ <label class="col-sm-4 col-form-label">VNF Profile ID *</label>
<div class="col-sm-3">
- <ng-select (change)="indexChange($event, primitiveType)" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="params.memberIndex" bindLabel="member-vnf-index" bindValue="member-vnf-index" formControlName="vnf_member_index" id="vnf_member_index"
- [ngClass]="{ 'is-invalid': submitted && f.vnf_member_index.errors }"></ng-select>
+ <ng-select (change)="indexChange($event, primitiveType)" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="params.memberIndex[0]['vnf-profile']" bindLabel="id" bindValue="id" formControlName="member_vnf_index" id="member_vnf_index"
+ [ngClass]="{ 'is-invalid': submitted && f.member_vnf_index.errors }"></ng-select>
</div>
</div>
<div class="form-group row" *ngIf="primitiveType === 'VDU_Primitive'">
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 { 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 @@
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 @@
];
}
+ /** 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 @@
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 @@
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 @@
};
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 @@
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 @@
}
}
/** 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 @@
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 @@
}
}
/** 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 @@
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 @@
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 @@
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 @@
}
}
this.isLoadingResults = false;
- }, (error: ERRORDATA) => {
+ }, (error: ERRORDATA): void => {
this.isLoadingResults = false;
this.restService.handleError(error, 'get');
});
@@ -362,10 +374,10 @@
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 @@
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
@@ -62,10 +62,6 @@
<table class="table table-bordered text-dark custom-table">
<tbody>
<tr>
- <td>short-name</td>
- <td>{{(virtualLink.shortName)?virtualLink.shortName:'-'}}</td>
- </tr>
- <tr>
<td>Name</td>
<td>{{(virtualLink.name)?virtualLink.name:'-'}}</td>
</tr>
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 * 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 @@
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 @@
}
/** 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 @@
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 @@
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 @@
}
});
}
-
/** 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 @@
});
});
}
-
/** 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 @@
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 @@
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 @@
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 @@
.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 @@
.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 @@
.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 @@
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 @@
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'],