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/packages/ns-packages/NSPackagesComponent.ts b/src/app/packages/ns-packages/NSPackagesComponent.ts
index 5dc36e7..7302ea4 100644
--- a/src/app/packages/ns-packages/NSPackagesComponent.ts
+++ b/src/app/packages/ns-packages/NSPackagesComponent.ts
@@ -127,11 +127,12 @@
public generateColumns(): void {
this.columnLists = {
name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
- identifier: { title: this.translateService.instant('IDENTIFIER'), width: '30%' },
+ identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
+ version: { title: this.translateService.instant('VERSION'), width: '10%' },
+ designer: { title: this.translateService.instant('DESIGNER'), width: '15%' },
description: { title: this.translateService.instant('DESCRIPTION'), width: '25%' },
- version: { title: this.translateService.instant('VERSION'), width: '15%' },
Actions: {
- name: 'Actions', width: '15%', filter: false, sort: false, type: 'custom',
+ name: 'Actions', width: '20%', filter: false, sort: false, type: 'custom',
title: this.translateService.instant('ACTIONS'),
valuePrepareFunction: (cell: NSData, row: NSData): NSData => row, renderComponent: NsPackagesActionComponent
}
@@ -214,7 +215,8 @@
name: nsdpackagedata.name,
identifier: nsdpackagedata._id,
description: nsdpackagedata.description,
- version: nsdpackagedata.version
+ version: nsdpackagedata.version,
+ designer: nsdpackagedata.designer !== undefined ? nsdpackagedata.designer : '-'
};
}
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
index 4e78c16..c4ec96d 100644
--- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
+++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
@@ -33,45 +33,38 @@
<div class="col-12 p-0">
<form autocomplete="off">
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
- [(ngModel)]="vnfdPackageDetails.shortName">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'VENDOR' | translate }}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'VENDOR' | translate }}" name="vendor"
- [(ngModel)]="vnfdPackageDetails.vendor">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
- <div class="col-sm-8 p-0">
- <textarea type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
- name="description" [(ngModel)]="vnfdPackageDetails.description"></textarea>
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
- [(ngModel)]="vnfdPackageDetails.version">
- </div>
- </div>
- <div class="form-group row">
<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
- [(ngModel)]="vnfdPackageDetails.id">
+ [(ngModel)]="nsPackageDetails.id">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="vnfdPackageDetails.name">
+ [(ngModel)]="nsPackageDetails.name">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+ name="description" [(ngModel)]="nsPackageDetails.description"></textarea>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
+ [(ngModel)]="nsPackageDetails.version">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-4 col-form-label">{{ 'DESIGNER' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'DESIGNER' | translate }}" name="designer"
+ [(ngModel)]="nsPackageDetails.designer">
</div>
</div>
<button type="button" class="btn btn-primary" (click)="saveNSD()" placement="top"
@@ -87,43 +80,23 @@
<div class="col-12 p-0">
<form autocomplete="off">
<div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{ 'NAME' | translate }}</label>
+ <label class="col-sm-4 p-0 col-form-label">{{ 'ID' | translate }}</label>
<div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="vlDetails.name">
+ <input type="text" readonly class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+ [(ngModel)]="virtualLinkDesc.id">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 p-0 col-form-label">{{'PAGE.NSPACKAGE.NSCOMPOSE.MGMTNETWORK' | translate}}</label>
<div class="col-sm-8 p-0">
- <select class="form-control custom-select" name="mgmt-network" [(ngModel)]="vlDetails['mgmt-network']">
+ <select class="form-control custom-select" name="mgmt-network" [(ngModel)]="virtualLinkDesc['mgmt-network']">
<option [value]="true">True</option>
<option [value]="false">False</option>
</select>
</div>
</div>
- <div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{'PAGE.NSPACKAGE.NSCOMPOSE.VIMNETWORKNAME' | translate}}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="Vim network name" name="vim-network-name"
- [(ngModel)]="vlDetails['vim-network-name']">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{'TYPE' | translate}}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="Type" name="type" [(ngModel)]="vlDetails.type">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{ 'ID' | translate }}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
- [(ngModel)]="vlDetails.id">
- </div>
- </div>
<button type="button" class="btn btn-primary" placement="top" ngbTooltip="Save"
- (click)="saveVL(vlDetails.id)">
+ (click)="saveVL(virtualLinkDesc.id)">
<i class="fas fa-save"></i> {{'SAVE' | translate}}
</button>
</form>
@@ -136,12 +109,12 @@
<table class="table table-bordered text-dark custom-table">
<tbody>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.MEMBER-VNF-INDEX' | translate}}</td>
- <td>{{ vnfData['member-vnf-index'] }}</td>
+ <th scope="row">id</th>
+ <td>{{ vnfData.id }}</td>
</tr>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}</td>
- <td>{{ vnfData['vnfd-id-ref'] }}</td>
+ <th scope="row">vnfd-id</th>
+ <td>{{ vnfData['vnfd-id'] }}</td>
</tr>
</tbody>
</table>
@@ -154,20 +127,24 @@
<table class="table table-bordered text-dark custom-table">
<tbody>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VLD-ID' | translate}}</td>
- <td>{{ vlDetails['name'] }}</td>
+ <th scope="row">id</th>
+ <td>{{ vnfData.id }}</td>
</tr>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-CP-REF' | translate}}</td>
- <td>{{ cpData['vnfd-connection-point-ref'] }}</td>
+ <th scope="row">vnfd-id</th>
+ <td>{{ vnfData['vnfd-id'] }}</td>
</tr>
<tr>
- <td>{{'MEMBERINDEX' | translate}}</td>
- <td>{{ cpData['member-vnf-index-ref'] }}</td>
+ <th scope="row">constituent-base-element-id</th>
+ <td>{{ cpData['constituent-base-element-id'] }}</td>
</tr>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}</td>
- <td>{{ cpData['vnfd-id-ref'] }}</td>
+ <th scope="row">constituent-cpd-id</th>
+ <td>{{ cpData['constituent-cpd-id'] }}</td>
+ </tr>
+ <tr>
+ <th scope="row">virtual-link-profile-id</th>
+ <td>{{ virtualLinkProfileID }}</td>
</tr>
</tbody>
</table>
@@ -211,9 +188,9 @@
<ul class="list-group list-group-flush dragable scroll-box">
<li id="list['id']" class="list-group-item" draggable="true" (dragstart)="drag($event)"
[attr.data-id]="list['id']" *ngFor="let list of vnfList" placement="top"
- container="body" ngbTooltip="{{ list['short-name'] }}">
+ container="body" ngbTooltip="{{ list['product-name'] }}">
<img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
- <span class="span-overflow-text font-weight-bold">{{ list['short-name'] }}</span>
+ <span class="span-overflow-text font-weight-bold">{{ list['product-name'] }}</span>
<span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
</li>
</ul>
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 { 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 @@
/** 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 @@
/** 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 @@
/** 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 @@
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 @@
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 @@
}
/** 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.nsPackageDetails.id !== undefined) {
+ this.nsData.id = this.nsPackageDetails.id;
}
- if (this.vnfdPackageDetails.vendor !== undefined) {
- this.nsData.vendor = this.vnfdPackageDetails.vendor;
+ if (this.nsPackageDetails.name !== undefined) {
+ this.nsData.name = this.nsPackageDetails.name;
}
- if (this.vnfdPackageDetails.description !== undefined) {
- this.nsData.description = this.vnfdPackageDetails.description;
+ if (this.nsPackageDetails.description !== undefined) {
+ this.nsData.description = this.nsPackageDetails.description;
}
- if (this.vnfdPackageDetails.version !== undefined) {
- this.nsData.version = this.vnfdPackageDetails.version;
+ if (this.nsPackageDetails.version !== undefined) {
+ this.nsData.version = this.nsPackageDetails.version;
}
- if (this.vnfdPackageDetails.id !== undefined) {
- this.nsData.id = this.vnfdPackageDetails.id;
- }
- 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 @@
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 @@
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 @@
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 @@
}
/** 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 @@
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,79 +467,89 @@
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 */
+ /** 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 Link node creation 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.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);
+ }
+ });
}
});
}
- /** 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]
- });
+ /** 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]
+ });
+ });
});
}
- /** 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;
- }
/** Separate and create node @private */
private separateAndCreatenode(): void {
this.seprateNodes(this.nodes);
@@ -581,7 +583,7 @@
/** 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 @@
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 @@
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 @@
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 @@
.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 @@
.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 @@
.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 @@
`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;
}
- 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 (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'];
+ }
+ });
+ }
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: '<b>' + this.vlName + '</b>',
vnfdname: '<b>' + this.setVnfdName + '</b>',
cpname: '<b>' + this.setVnfdConnectionPointRef + '</b>'
- }).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 @@
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 @@
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 @@
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 @@
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 @@
/** 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 @@
} 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 @@
/** 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 @@
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 @@
<div class="sidebar-header">
<span class="topology_title" *ngIf="showRightSideInfo === 'vnfdInfo'">{{'PAGE.TOPOLOGY.VNFD' | translate}}</span>
<span class="topology_title" *ngIf="showRightSideInfo === 'vduInfo'">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
- <span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
- <span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
- <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' | translate}}</span>
+ <span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' |
+ translate}}</span>
+ <span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' |
+ translate}}</span>
+ <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' |
+ translate}}</span>
<button (click)="toggleSidebar()" class="close" type="button">
<i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
</button>
@@ -34,41 +37,42 @@
<div class="col-12 p-0">
<form>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
- [(ngModel)]="vnfdInfo.shortName">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"
- [(ngModel)]="vnfdInfo.description">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
- [(ngModel)]="vnfdInfo.version">
- </div>
- </div>
- <div class="form-group row">
<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
- <div class="col-sm-8">
+ <div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
[(ngModel)]="vnfdInfo.id">
</div>
</div>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="vnfdInfo.name">
+ <label class="col-sm-4 col-form-label">{{ 'PRODUCTNAME' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'PRODUCTNAME' | translate }}"
+ name="product-name" [(ngModel)]="vnfdInfo['product-name']">
</div>
</div>
- <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVNFD()" placement="top" ngbTooltip="Save">
+ <div class="form-group row">
+ <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+ name="description" [(ngModel)]="vnfdInfo.description"></textarea>
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
+ [(ngModel)]="vnfdInfo.version">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label class="col-sm-4 col-form-label">{{ 'PROVIDER' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'PROVIDER' | translate }}" name="provider"
+ [(ngModel)]="vnfdInfo.provider">
+ </div>
+ </div>
+ <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVNFD()" placement="top"
+ ngbTooltip="Save">
<i class="fas fa-save"></i> {{'SAVE' | translate}}
</button>
</form>
@@ -80,89 +84,35 @@
<div class="col-12 p-0">
<form>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'COUNT' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'COUNT' | translate }}" name="count"
- [(ngModel)]="vduInfo.count">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"
- [(ngModel)]="vduInfo.description">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="image"
- [(ngModel)]="vduInfo.image">
- </div>
- </div>
- <div class="form-group row">
<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
- <div class="col-sm-8">
+ <div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
[(ngModel)]="vduInfo.id">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
- <div class="col-sm-8">
+ <div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
[(ngModel)]="vduInfo.name">
</div>
</div>
- <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)" placement="top"
- ngbTooltip="Save">
- <i class="fas fa-save"></i> {{'SAVE' | translate}}
- </button>
- </form>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'intvlInfo'">
- <div class="row">
- <div class="col-12 p-0">
- <form>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
- [(ngModel)]="intvlInfo.shortName">
+ <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+ name="description" [(ngModel)]="vduInfo.description"></textarea>
</div>
</div>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="intvlInfo.name">
+ <label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="sw-image-desc"
+ [(ngModel)]="vduInfo['sw-image-desc']">
</div>
</div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"
- [(ngModel)]="intvlInfo.type">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'IPPROFILEREF' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'IP Profile Ref' | translate }}"
- name="ipProfileRef" [(ngModel)]="intvlInfo.ipProfileRef">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
- [(ngModel)]="intvlInfo.id">
- </div>
- </div>
- <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)" placement="top"
- ngbTooltip="Save">
+ <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)"
+ placement="top" ngbTooltip="Save">
<i class="fas fa-save"></i> {{'SAVE' | translate}}
</button>
</form>
@@ -174,21 +124,33 @@
<div class="col-12 p-0">
<form>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"
- [(ngModel)]="cpInfo.type">
+ <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+ [(ngModel)]="cpInfo.id">
</div>
</div>
+ <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.id)"
+ placement="top" ngbTooltip="Save">
+ <i class="fas fa-save"></i> {{'SAVE' | translate}}
+ </button>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'intvlInfo'">
+ <div class="row">
+ <div class="col-12 p-0">
+ <form>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="cpInfo.name">
+ <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+ [(ngModel)]="intvlInfo.id">
</div>
</div>
- <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.name)" placement="top"
- ngbTooltip="Save">
+ <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)"
+ placement="top" ngbTooltip="Save">
<i class="fas fa-save"></i> {{'SAVE' | translate}}
</button>
</form>
@@ -200,27 +162,9 @@
<div class="col-12 p-0">
<form>
<div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" name="shortName" [(ngModel)]="intcpInfo.shortName" disabled>
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" name="type" [(ngModel)]="intcpInfo.type" disabled>
- </div>
- </div>
- <div class="form-group row">
<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" name="id" [(ngModel)]="intcpInfo.id" disabled>
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
- <div class="col-sm-8">
- <input type="text" class="form-control" name="name" [(ngModel)]="intcpInfo.name" disabled>
+ <div class="col-sm-8 p-0">
+ <input type="text" class="form-control" name="id" [(ngModel)]="intcpInfo.name" disabled>
</div>
</div>
</form>
@@ -247,17 +191,17 @@
</legend>
<ul class="list-group list-group-flush dragable">
<li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vdu">
- <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false" />
<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
<span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
</li>
<li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="cp">
- <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false" />
<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.CP' | translate}}</span>
<span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
</li>
<li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="intvl">
- <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false" />
<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>
<span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
</li>
@@ -271,7 +215,8 @@
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pl-0">
<div class="btn-group list" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
- [class.pinned]="classApplied" placement="top" container="body" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
+ [class.pinned]="classApplied" placement="top" container="body"
+ ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
<i class="fas fa-thumbtack"></i>
</button>
<button type="button" class="btn btn-primary topology-btn" (click)="onEdit()" placement="top"
@@ -286,16 +231,16 @@
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right pr-0 badgegroup">
<span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
- <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false" />
<br>{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
<span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
- <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false" />
<br>{{'PAGE.TOPOLOGY.CP' | translate}}</span>
<span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
- <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false" />
<br>{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>
<span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
- <img src="assets/images/INTCP.svg" class="vnf-svg" draggable="false"/>
+ <img src="assets/images/INTCP.svg" class="vnf-svg" draggable="false" />
<br>{{'PAGE.TOPOLOGY.INTCP' | translate}}</span>
</div>
</div>
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 { 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 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 @@
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 @@
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 @@
// 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 @@
// 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 @@
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 @@
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 @@
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 @@
/** 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 @@
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 @@
}
}
/** 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 @@
}
/** 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 @@
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 @@
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 @@
};
}
/** 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 @@
/** 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 @@
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 @@
.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 @@
.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 @@
.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 @@
.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 @@
});
}
/** 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 @@
}
}
/** 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 @@
}
/** 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'] = [];
+ 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
+ }
+ };
+ }
+ }
+ });
+ }
}
- if (vduDetails['monitoring-param'] === undefined) {
- vduDetails['monitoring-param'] = [];
- }
- if (vduDetails['vm-flavor'] === undefined) {
- vduDetails['vm-flavor'] = {};
- }
- }
- });
+ });
+ }
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 = [];
+ 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.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'] = [];
- }
- 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 @@
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 @@
}
/** 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 (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 (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']);
- }
- });
- }
- 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);
+ 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);
+ }
}
});
}
- });
- const vduPos: number = this.vnfdPackageDetails.vdu.map((e: VDU) => { return e.id; }).indexOf(d.id);
- if (vduPos >= 0) {
- this.vnfdPackageDetails.vdu.splice(vduPos, 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);
+ }
+ 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;
+ }
+ });
+ }
+ } 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;
+ }
+ });
+ 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 @@
}
/** 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.nodeTypeRef === 'cp' && !alreadyIsActive) {
- this.vnfdPackageDetails['connection-point'].forEach((res: CONNECTIONPOINT) => {
- if (res.name === d.id) {
+ } 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 = res;
+ this.cpInfo = cp;
+ this.oldCPID = cp.id;
}
});
- }
- else if (d.nodeTypeRef === 'intcp' && !alreadyIsActive) {
- this.intcpInfo = d;
- this.showRightSideInfo = 'intcpInfo';
- this.intcpInfo.shortName = d['short-name'];
+ } 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.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 @@
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 { 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 @@
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 @@
]
}
},
- 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 @@
/** 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 @@
/** 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 @@
} 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;
});