Initial Commit - NG UI
[osm/NG-UI.git] / src / app / packages / ns-packages / ns-composer / NSComposerComponent.ts
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
new file mode 100644 (file)
index 0000000..082496e
--- /dev/null
@@ -0,0 +1,1089 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @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';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { NotifierService } from 'angular-notifier';
+import { APIURLHEADER, CONSTANTNUMBER, ERRORDATA, MODALCLOSERESPONSEDATA, MODALCLOSERESPONSEWITHCP } from 'CommonModel';
+import { ConfirmationTopologyComponent } from 'ConfirmationTopology';
+import * as d3 from 'd3';
+import { DataService } from 'DataService';
+import { environment } from 'environment';
+import * as HttpStatus from 'http-status-codes';
+import * as jsyaml from 'js-yaml';
+import { COMPOSERNODES, CONSTITUENTVNFD, GRAPHDETAILS, NSDDetails, Tick, TickPath, VLD, VNFDCONNECTIONPOINTREF } from 'NSDModel';
+import { RestService } from 'RestService';
+import { SharedService } from 'SharedService';
+import { isNullOrUndefined } from 'util';
+import { VNFData, VNFDDetails } from 'VNFDModel';
+
+/**
+ * Creating component
+ * @Component takes NSComposerComponent.html as template url
+ */
+@Component({
+  selector: 'app-ns-composer',
+  templateUrl: './NSComposerComponent.html',
+  styleUrls: ['./NSComposerComponent.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+/** Exporting a class @exports NSComposerComponent */
+export class NSComposerComponent {
+  /** To inject services @public */
+  public injector: Injector;
+  /** View child contains graphContainer ref @public  */
+  @ViewChild('graphContainer', { static: true }) public graphContainer: ElementRef;
+  /** 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: '' };
+  /** Contains VL Details @public */
+  public vlDetails: VLD = {
+    name: '',
+    'mgmt-network': true,
+    'vim-network-name': '',
+    type: '',
+    id: ''
+  };
+  /** Contains the information of the type of modification @public  */
+  public putType: string;
+  /** Conatins mousedown action @public */
+  public mousedownNode: COMPOSERNODES = null;
+  /** Conatins mouseup action @public */
+  public mouseupNode: COMPOSERNODES = null;
+  /** Conatins mousedownLink action @public */
+  public mousedownLink: COMPOSERNODES = null;
+  /** Conatins current Selection node action @public */
+  public currentSelectedNode: COMPOSERNODES = null;
+  /** Conatins current Selection node action @public */
+  public currentSelectedLink: COMPOSERNODES = null;
+  /** Need to show the NSD Details @public */
+  public isShowNSDDetails: boolean = true;
+  /** Contains the node information of VL @public */
+  public vlNodes: {}[] = [];
+  /** Need to show the VL Details @public */
+  public isShowVLDetails: boolean = false;
+  /** Contains the node information of VNF @public */
+  public vnfNodes: {}[] = [];
+  /** contains the VNF Details @public */
+  public vnfData: CONSTITUENTVNFD;
+  /** 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;
+  /** 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[] = [];
+  /** Add the activeclass for the selected @public */
+  public activeClass: string = 'active';
+  /** Add the fixed class for the freeze @public */
+  public fixedClass: string = 'fixed';
+  /** Check the loading results @public */
+  public isLoadingResults: boolean = true;
+  /** Give the message for the loading @public */
+  public message: string = 'PLEASEWAIT';
+  /** Get VNF selected node @public */
+  public getVNFSelectedData: VNFDDetails[];
+  /** Assign the forcesimulation active @public */
+  public forceSimulationActive: boolean = false;
+  /** Assign pinned class for the button when freezed @public */
+  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;
+  /** Contains the Drag line */
+  // tslint:disable-next-line: no-any
+  private dragLine: any;
+  /** Contains VL node @private */
+  // tslint:disable-next-line:no-any
+  private vlNode: any;
+  /** Contains VNFD node @private */
+  // tslint:disable-next-line:no-any
+  private vnfdnode: any;
+  /** Contains CP node @private */
+  // tslint:disable-next-line:no-any
+  private cpnode: any;
+  /** Rendered nodes represent VL @private */
+  // tslint:disable-next-line:no-any
+  private gvlNode: any;
+  /** Rendered nodes represent VL @private */
+  // tslint:disable-next-line:no-any
+  private gvnfdNode: any;
+  /** Rendered nodes represent VL @private */
+  // tslint:disable-next-line:no-any
+  private gcpNode: any;
+  /** Contains forced node animations @private */
+  // tslint:disable-next-line:no-any
+  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;
+  /** Contains the node information @private */
+  private nodes: COMPOSERNODES[] = [];
+  /** Contains the link information of nodes @private */
+  private links: {}[] = [];
+  /** Contains the NS information @private */
+  private nsData: NSDDetails;
+  /** Instance of the rest service @private */
+  private restService: RestService;
+  /** Service holds the router information @private */
+  private router: Router;
+  /** Holds teh instance of AuthService class of type AuthService @private */
+  private activatedRoute: ActivatedRoute;
+  /** Notifier service to popup notification @private */
+  private notifierService: NotifierService;
+  /** Controls the header form @private */
+  private headers: HttpHeaders;
+  /** Contains tranlsate instance @private */
+  private translateService: TranslateService;
+  /** Contains lastkeypressed instance @private */
+  private lastKeyDown: number = -1;
+  /** Instance of the modal service @private */
+  private modalService: NgbModal;
+  /** Setting the Value of connection point refrence of the CP @private */
+  private setVnfdConnectionPointRef: string;
+  /** Setting the Value of VL name for confirmation @private */
+  private vlName: string;
+  /** Setting the Value of VNFD name for confirmation @private */
+  private setVnfdName: string;
+  /** Contains all methods related to shared @private */
+  private sharedService: SharedService;
+  /** Contains selected node VLD objects @private */
+  private selectedVLDResult: VLD;
+
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.restService = this.injector.get(RestService);
+    this.dataService = this.injector.get(DataService);
+    this.router = this.injector.get(Router);
+    this.activatedRoute = this.injector.get(ActivatedRoute);
+    this.notifierService = this.injector.get(NotifierService);
+    this.translateService = this.injector.get(TranslateService);
+    this.modalService = this.injector.get(NgbModal);
+    this.sharedService = this.injector.get(SharedService);
+  }
+  /** Lifecyle Hooks the trigger before component is instantiate @public */
+  public ngOnInit(): void {
+    // tslint:disable-next-line:no-backbone-get-set-outside-model
+    this.identifier = this.activatedRoute.snapshot.paramMap.get('id');
+    this.generateData();
+    this.headers = new HttpHeaders({
+      'Content-Type': 'application/zip',
+      Accept: 'application/json',
+      'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
+    });
+  }
+  /** Events handles at drag on D3 region @public */
+  // tslint:disable-next-line:no-any
+  public drag(ev: any): void {
+    if (ev.target.id === 'vl') {
+      ev.dataTransfer.setData('text', ev.target.id);
+    } else {
+      ev.dataTransfer.setData('text', ev.target.attributes['data-id'].value);
+    }
+  }
+  /** On clicking redirect to NS edit page @public */
+  public onEdit(): void {
+    this.router.navigate(['/packages/ns/edit/', this.identifier]).catch(() => {
+      // 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') {
+      this.svg.selectAll('*').remove();
+      this.vldropComposer();
+    } else {
+      this.svg.selectAll('*').remove();
+      this.vnfd = ev.dataTransfer.getData('text');
+      this.vnfdropComposer();
+    }
+  }
+  /** 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
+        }]
+      });
+    }
+    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
+      });
+    } else {
+      Object.assign(this.nsData, {
+        'constituent-vnfd': [{
+          'vnfd-id-ref': this.vnfd,
+          'member-vnf-index': ++this.memberVnfIndexValue
+        }]
+      });
+    }
+    this.putType = 'vnfdadd';
+    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
+  }
+  /** Events handles allow drop on D3 region @public */
+  public allowDrop(ev: DragEvent): void {
+    ev.preventDefault();
+  }
+  /** Save NSD Information @public */
+  public saveNSD(): void {
+    if (this.vnfdPackageDetails.shortName !== undefined) {
+      this.nsData['short-name'] = this.vnfdPackageDetails.shortName;
+    }
+    if (this.vnfdPackageDetails.vendor !== undefined) {
+      this.nsData.vendor = this.vnfdPackageDetails.vendor;
+    }
+    if (this.vnfdPackageDetails.description !== undefined) {
+      this.nsData.description = this.vnfdPackageDetails.description;
+    }
+    if (this.vnfdPackageDetails.version !== undefined) {
+      this.nsData.version = this.vnfdPackageDetails.version;
+    }
+    if (this.vnfdPackageDetails.id !== undefined) {
+      this.nsData.id = this.vnfdPackageDetails.id;
+    }
+    if (this.vnfdPackageDetails.name !== undefined) {
+      this.nsData.name = this.vnfdPackageDetails.name;
+    }
+    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) => {
+      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;
+      }
+    });
+    this.putType = 'vlUpdate';
+    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
+  }
+  /** Add the new Data @public */
+  public addData(apiURL: string, identifier: string, data: NSDDetails, putType: string): void {
+    this.isLoadingResults = true;
+    let successMessage: string = '';
+    if (putType === 'nsdadd') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.ADDNSD';
+    } else if (putType === 'vnfdadd') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.ADDVNFD';
+    } else if (putType === 'cpAdded') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.ADDNS';
+    } else if (putType === 'nsdUpdate') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.UPDATEDSUCCESSFULLY';
+    } else if (putType === 'vlUpdate') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.UPDATEDSUCCESSFULLY';
+    } else if (putType === 'nsddelete') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETENSD';
+    } else if (putType === 'vnfddelete') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETEVNFD';
+    } else if (putType === 'nsdelete') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETENS';
+    } else if (putType === 'linkdelete') {
+      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETELINK';
+    }
+    /** Below hide for conflicts with light weight UI */
+    const apiURLHeader: APIURLHEADER = {
+      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});
+    this.sharedService.targzFile({ packageType: 'nsd', id: this.identifier, descriptor: descriptorInfo })
+      .then((content: ArrayBuffer): void => {
+        this.restService.putResource(apiURLHeader, content).subscribe((res: {}) => {
+          this.generateData();
+          this.notifierService.notify('success', this.translateService.instant(successMessage));
+          this.isLoadingResults = false;
+        }, (error: ERRORDATA) => {
+          this.generateData();
+          this.restService.handleError(error, 'put');
+          this.isLoadingResults = false;
+        });
+      }).catch((): void => {
+        this.notifierService.notify('error', this.translateService.instant('ERROR'));
+        this.isLoadingResults = false;
+      });
+  }
+  /** Show Info @public */
+  public showInfo(): void {
+    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) => {
+      if (result) {
+        // empty
+      }
+    }).catch();
+  }
+  /** Event to freeze the animation @public */
+  public onFreeze(): void {
+    this.classApplied = !this.classApplied;
+    const alreadyFixedIsActive: boolean = d3.select('svg#graphContainer').classed(this.fixedClass);
+    d3.select('svg#graphContainer').classed(this.fixedClass, !alreadyFixedIsActive);
+    if (alreadyFixedIsActive) {
+      this.force.stop();
+    }
+    this.forceSimulationActive = alreadyFixedIsActive;
+    this.nodes.forEach((d: COMPOSERNODES) => {
+      d.fx = (alreadyFixedIsActive) ? null : d.x;
+      d.fy = (alreadyFixedIsActive) ? null : d.y;
+    });
+    if (alreadyFixedIsActive) {
+      this.force.restart();
+    }
+  }
+  /** Events handles when dragended @public */
+  public toggleSidebar(): void {
+    this.sideBarOpened = !this.sideBarOpened;
+    this.deselectAllNodes();
+    this.showRightSideInfo(true, false, false, false);
+  }
+  /** Prepare information for node creation of VNFD @private */
+  private generateData(): void {
+    this.generateVNFData();
+    this.generateDataNSDTopology();
+    this.sideBarOpened = false;
+  }
+  /** Prepare the information of the VNFD @private */
+  private generateVNFData(): void {
+    this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFDDetails[]) => {
+      this.vnfList = vnfdPackageData;
+    }, (error: ERRORDATA) => {
+      this.restService.handleError(error, 'get');
+    });
+  }
+  /** Prepare information for node creation of NSD Topology @private */
+  private generateDataNSDTopology(): void {
+    this.nodes = [];
+    this.links = [];
+    this.iConnectionPointRef = 0;
+    this.jConnectionPointRef = 0;
+    this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL + '/' + this.identifier).subscribe((nsData: NSDDetails) => {
+      delete nsData._admin;
+      delete nsData._id;
+      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) {
+        /** Details of the VL */
+        this.nsDataVLD(nsData);
+      }
+      if (nsData['constituent-vnfd'] !== undefined) {
+        /** Details of the VNFD */
+        this.nsDataConstituentVNFD(nsData);
+      }
+      if (nsData.vld !== undefined) {
+        this.nsDataVLDLinkCreation(nsData);
+      }
+      this.separateAndCreatenode();
+    }, (error: ERRORDATA) => {
+      if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
+        this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
+      } else {
+        this.restService.handleError(error, 'get');
+      }
+      this.isLoadingResults = false;
+      this.isShowNSDDetails = false;
+    });
+  }
+  /** nsData-vld undefined Call this function @private */
+  private nsDataVLD(nsData: NSDDetails): void {
+    nsData.vld.forEach((res: VLD) => {
+      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 */
+  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-vld undefined Call this function @private */
+  private nsDataVLDLinkCreation(nsData: NSDDetails): void {
+    nsData.vld.forEach((res: VLD) => {
+      this.nsdCopy = res.id;
+      if (res['vnfd-connection-point-ref'] !== undefined) {
+        this.nsDataVNFDConnectionPointRefrence(res);
+      }
+    });
+  }
+  /** nsData-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]
+        });
+    });
+  }
+  /** 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);
+    this.createnode(this.nodes);
+    this.isLoadingResults = false;
+  }
+  /** Get the default Configuration of containers @private */
+  private getGraphContainerAttr(): GRAPHDETAILS {
+    return {
+      width: 700,
+      height: 400,
+      nodeHeight: 50,
+      nodeWidth: 35,
+      textX: -35,
+      textY: 30,
+      radius: 5,
+      distance: 50,
+      strength: -500,
+      forcex: 2,
+      forcey: 2,
+      sourcePaddingYes: 17,
+      sourcePaddingNo: 12,
+      targetPaddingYes: 4,
+      targetPaddingNo: 3,
+      alphaTarget: 0.3,
+      imageX: -25,
+      imageY: -25,
+      shiftKeyCode: 17
+    };
+  }
+  /** Separate the nodes along with its tyep @private */
+  private seprateNodes(node: COMPOSERNODES[]): void {
+    this.vlNodes = []; this.vnfNodes = []; this.cpNodes = [];
+    node.forEach((nodeList: COMPOSERNODES) => {
+      if (nodeList.type === 'vld') {
+        this.vlNodes.push(nodeList);
+      } else if (nodeList.type === 'vnfd') {
+        this.vnfNodes.push(nodeList);
+      } else if (nodeList.type === 'ns') {
+        this.cpNodes.push(nodeList);
+      }
+    });
+  }
+  /** Node is created and render at D3 region @private */
+  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(); });
+    this.svg = d3.select('#graphContainer')
+      .attr('oncontextmenu', 'return false;')
+      .attr('width', graphContainerAttr.width)
+      .attr('height', graphContainerAttr.height)
+      .on('mousemove', () => { 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('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(); });
+    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');
+    this.vnfdnode = this.svg.append('svg:g').selectAll('vnfdnode');
+    this.cpnode = this.svg.append('svg:g').selectAll('cpnode');
+    // app starts here
+    this.restart(node);
+  }
+  /** update force layout (called automatically each iteration) @private */
+  private tick(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    // draw directed edges with proper padding from node centers
+    this.path.attr('class', 'link').attr('d', (d: Tick) => {
+      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;
+      const sourcePadding: number = d.left ? graphContainerAttr.sourcePaddingYes : graphContainerAttr.sourcePaddingNo;
+      const targetPadding: number = d.right ? graphContainerAttr.targetPaddingYes : graphContainerAttr.targetPaddingNo;
+      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.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})`);
+  }
+  /** 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.resetAndCreateNodes();
+    this.force.nodes(node).force('link').links(this.links);
+    this.force.alphaTarget(graphContainerAttr.alphaTarget).restart();
+  }
+  /** Rest and create nodes @private */
+  private resetAndCreateNodes(): void {
+    this.path.exit().remove();
+    this.vlNode.exit().remove();
+    this.vnfdnode.exit().remove();
+    this.cpnode.exit().remove();
+    this.getPathNodes();
+    this.getVLNodes();
+    this.getVNFDNodes();
+    this.getCPNodes();
+    this.path.merge(this.path);
+    this.vlNode = this.gvlNode.merge(this.vlNode);
+    this.vnfdnode = this.gvnfdNode.merge(this.vnfdnode);
+    this.cpnode = this.gcpNode.merge(this.cpnode);
+  }
+  /** setting the Path @private */
+  private getPathNodes(): void {
+    this.path = this.path.enter().append('svg:path');
+  }
+  /** Setting all the VL nodes @private */
+  private getVLNodes(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.gvlNode = this.vlNode.enter().append('svg:g');
+    this.gvlNode.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
+    this.gvlNode.append('svg:image')
+      .style('opacity', 1)
+      .attr('x', graphContainerAttr.imageX)
+      .attr('y', graphContainerAttr.imageY)
+      .attr('id', (d: COMPOSERNODES) => { 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(); });
+    this.gvlNode.append('svg:text')
+      .attr('class', 'node_text')
+      .attr('y', graphContainerAttr.textY)
+      .text((d: COMPOSERNODES) => d.id);
+  }
+  /** Setting all the VNFD nodes @private */
+  private getVNFDNodes(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.gvnfdNode = this.vnfdnode.enter().append('svg:g');
+    this.gvnfdNode.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
+    this.gvnfdNode.append('svg:image')
+      .style('opacity', 1)
+      .attr('x', graphContainerAttr.imageX)
+      .attr('y', graphContainerAttr.imageY)
+      .attr('id', (d: COMPOSERNODES) => { 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(); });
+    this.gvnfdNode.append('svg:text')
+      .attr('class', 'node_text')
+      .attr('y', graphContainerAttr.textY)
+      .text((d: COMPOSERNODES) => d.id);
+  }
+  /** Setting all the CP nodes @private */
+  private getCPNodes(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.gcpNode = this.cpnode.enter().append('svg:g');
+    this.gcpNode.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
+    this.gcpNode.append('svg:image')
+      .style('opacity', 1)
+      .attr('x', graphContainerAttr.imageX)
+      .attr('y', graphContainerAttr.imageY)
+      .attr('id', (d: COMPOSERNODES) => { 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(); });
+    this.gcpNode.append('svg:text')
+      .attr('class', 'node_text')
+      .attr('y', graphContainerAttr.textY)
+      .text((d: COMPOSERNODES) => d.id);
+  }
+  /** Events handles when mousemove it will capture the selected node data @private */
+  private mousemove(): void {
+    if (!this.mousedownNode) { return; }
+    this.dragLine.attr('d',
+      `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 {
+    let findVNFName: string = '';
+    let findVLDID: string = '';
+    if (mouseData.type === 'vld') {
+      findVNFName = this.mouseupNode.name;
+      findVLDID = this.mousedownNode.id;
+    } else {
+      findVNFName = this.mousedownNode.name;
+      findVLDID = this.mouseupNode.id;
+    }
+    getNsData.vld.forEach((result: VLD) => {
+      if (result.id === findVLDID) {
+        this.vlName = result.name;
+        this.getVNFSelectedData = this.vnfList.filter((vnfList: VNFDDetails) => vnfList.id === findVNFName);
+        this.setVnfdConnectionPointRef = this.getVNFSelectedData[0]['mgmt-interface'].cp;
+        this.setVnfdName = this.getVNFSelectedData[0].name;
+        this.selectedVLDResult = result;
+      }
+    });
+    if (this.vlName !== undefined && this.setVnfdName !== undefined && this.setVnfdConnectionPointRef !== undefined) {
+      const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
+      modalRef.componentInstance.topologyType = 'Add';
+      modalRef.componentInstance.cpDetails = this.getVNFSelectedData[0]['connection-point'];
+      this.translateService.get('PAGE.TOPOLOGY.ADDINGCP', {
+        vlname: '<b>' + this.vlName + '</b>',
+        vnfdname: '<b>' + this.setVnfdName + '</b>',
+        cpname: '<b>' + this.setVnfdConnectionPointRef + '</b>'
+      }).subscribe((res: string) => {
+        modalRef.componentInstance.topologyname = res;
+      });
+      modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.CONNECTIONPOINT');
+      modalRef.result.then((result: MODALCLOSERESPONSEWITHCP) => {
+        if (result) {
+          this.nsData = getNsData;
+          this.generateCPForVNF(this.selectedVLDResult, result.connection_point, getVLDIndex);
+          this.addData(environment.NSDESCRIPTORS_URL, this.identifier, getNsData, addType);
+        } else {
+          this.deselectPath();
+        }
+      }).catch();
+    } else {
+      this.deselectPath();
+      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
+      });
+    } 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
+        }]
+      });
+    }
+  }
+
+  /** Events handles when mousedown click it will capture the selected node data @private */
+  private mouseDown(d: COMPOSERNODES): void {
+    event.preventDefault();
+    if (d3.event.ctrlKey) { return; }
+    if (d3.event.shiftKey) {
+      if (d.type === 'vnfd') {
+        this.selectedNode.push(d);
+      }
+      this.mousedownNode = d;
+      this.currentSelectedNode = (this.mousedownNode === this.currentSelectedNode) ? null : this.mousedownNode;
+      this.currentSelectedLink = null;
+      this.dragLine.style('marker-end', 'url(#end-arrow)').classed('hidden', false)
+        .attr('d', `M${this.mousedownNode.x},${this.mousedownNode.y}L${this.mousedownNode.x},${this.mousedownNode.y}`);
+    }
+  }
+  /** Event handles when mouseup event occures @private */
+  private mouseUp(d: COMPOSERNODES): void {
+    if (!this.mousedownNode) { return; }
+    this.dragLine.classed('hidden', true).style('marker-end', '');
+    this.mouseupNode = d;
+    if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'vnfd') {
+      const getOldVLDIndex: string[] = this.mouseupNode.id.split(':');
+      const setOldVLDindex: number = +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];
+      this.putType = 'cpAdded';
+      this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex);
+    } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'ns') {
+      this.deselectPath();
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVNFCP'));
+    } else if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'ns') {
+      this.deselectPath();
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVNFCP'));
+    } else if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'vld') {
+      this.deselectPath();
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVL'));
+    } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'vnfd') {
+      this.deselectPath();
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVNF'));
+    } else if (this.mousedownNode.type === 'ns' && this.mouseupNode.type === 'ns') {
+      this.deselectPath();
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKCP'));
+    } else {
+      this.deselectPath();
+      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVLVNF'));
+    }
+    this.resetMouseVars();
+    // select new link
+    this.currentSelectedLink = d;
+    this.currentSelectedNode = null;
+  }
+  /** Mosue Drag Line false if it is not satisfied @private */
+  private deselectPath(): void {
+    this.dragLine.classed('hidden', true).style('marker-end', '').attr('d', 'M0,0L0,0');
+  }
+  /** reset Mouse varaibles @private */
+  private resetMouseVars(): void {
+    this.mousedownNode = null;
+    this.mouseupNode = null;
+    this.mousedownLink = null;
+  }
+  /** De-select all the selected nodes @private */
+  private deselectAllNodes(): void {
+    this.vlNode.select('image').classed(this.activeClass, false);
+    this.vnfdnode.select('image').classed(this.activeClass, false);
+    this.cpnode.select('image').classed(this.activeClass, false);
+  }
+  /** Show the right-side information @private */
+  private showRightSideInfo(nsdDetails: boolean, vldDetails: boolean, vnfDeails: boolean, cpDetails: boolean): void {
+    this.isShowNSDDetails = nsdDetails;
+    this.isShowVLDetails = vldDetails;
+    this.isShowVNFDetails = vnfDeails;
+    this.isShowCPDetails = cpDetails;
+  }
+  /** Events handles when Shift Click to perform create cp @private */
+  // tslint:disable-next-line: no-any
+  private singleClick(nodeSelected: any, d: COMPOSERNODES): void {
+    this.selectNodeExclusive(nodeSelected, d);
+  }
+  /** Selected nodes @private */
+  // tslint:disable-next-line: no-any
+  private selectNodeExclusive(nodeSeleced: any, d: COMPOSERNODES): void {
+    const alreadyIsActive: boolean = nodeSeleced.select('#' + d.selectorId).classed(this.activeClass);
+    this.deselectAllNodes();
+    nodeSeleced.select('#' + d.selectorId).classed(this.activeClass, !alreadyIsActive);
+    if (d.type === 'vld' && !alreadyIsActive) {
+      this.nsData.vld.forEach((result: VLD) => {
+        if (result.id === d.id) {
+          this.showRightSideInfo(false, true, false, false);
+          this.vlDetails = 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;
+        }
+      });
+    } 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);
+            }
+          });
+        }
+      });
+    } else {
+      this.showRightSideInfo(true, false, false, false);
+    }
+  }
+  /** Get confirmation Before Deleting the Link in Topology @private */
+  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.topologytitle = 'PAGE.TOPOLOGY.LINK';
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.doubleClickLink(d);
+      }
+    }).catch();
+  }
+  /** 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') {
+      getID = d.source.id;
+    }
+    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'];
+            }
+          });
+        }
+      }
+    });
+    this.putType = 'linkdelete';
+    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
+  }
+  /** Get confirmation Before Deleting the Node in Topology @private */
+  private getDeleteConfirmation(d: COMPOSERNODES): void {
+    const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
+    modalRef.componentInstance.topologyType = 'Delete';
+    modalRef.componentInstance.topologyname = d.name;
+    if (d.type === 'vld') {
+      modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.VIRTUALLINK';
+    } else if (d.type === 'vnfd') {
+      modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.VNF';
+    } else if (d.type === 'ns') {
+      modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.CONNECTIONPOINT';
+    }
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.doubleClick(d);
+      }
+    }).catch();
+  }
+  /** Events handles when Double Click to Delete @private */
+  private doubleClick(d: COMPOSERNODES): void {
+    const deletedNode: COMPOSERNODES = d;
+    this.nodes.forEach((res: COMPOSERNODES) => {
+      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);
+          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.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);
+                  }
+                });
+              }
+            });
+          }
+          this.putType = 'nsdelete';
+        }
+        this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
+      }
+    });
+  }
+  /** 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);
+    }
+  }
+  /** Key realse event @private */
+  private keyUp(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.lastKeyDown = -1;
+    if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) {
+      this.gvlNode.on('.drag', null);
+      this.gvnfdNode.on('.drag', null);
+      this.gcpNode.on('.drag', null);
+      this.svg.classed('ctrl', false);
+    }
+  }
+  /** Events handles when dragstarted @private */
+  private dragstarted(d: COMPOSERNODES): void {
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+  /** Events handles when dragged @private */
+  private dragged(d: COMPOSERNODES): void {
+    d.fx = d.x = d3.event.x;
+    d.fy = d.y = d3.event.y;
+  }
+  /** Events handles when dragended @private */
+  private dragended(d: COMPOSERNODES): void {
+    if (this.forceSimulationActive) {
+      d.fx = null;
+      d.fy = null;
+    } else {
+      d.fx = d.x;
+      d.fy = d.y;
+      this.forceSimulationActive = false;
+    }
+  }
+  /** Events handles when node double click   @private */
+  private onNodedblClickToggleSidebar(): void {
+    this.sideBarOpened = false;
+  }
+  /** Events handles when node single click   @private */
+  private onNodeClickToggleSidebar(): void {
+    this.sideBarOpened = true;
+  }
+}