Fix instance detail for CCVPN

Change-Id: I62ec8f28eac7b952cb30bd706beff9021aa4209e
Issue-ID: USECASEUI-171
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

2 files changed, 1271 insertions, 1254 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
index 1f4ac7a5..9eba63dd 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -19,1221 +19,1223 @@ import * as $ from 'jquery';
 import {networkHttpservice} from '../networkHttpservice.service';
 
 @Component({
-  selector: 'app-ccvpn-network',
-  templateUrl: './ccvpn-network.component.html',
-  styleUrls: ['./ccvpn-network.component.css']
+    selector: 'app-ccvpn-network',
+    templateUrl: './ccvpn-network.component.html',
+    styleUrls: ['./ccvpn-network.component.css']
 })
 export class CcvpnNetworkComponent implements OnInit {
 
-  constructor(private myhttp: networkHttpservice) {
-  }
-
-  ngOnInit() {
-    var thisNg = this;
-    thisNg.getD3Data();
-
-
-    //Local cloud TP port connection, click on the right to expand the details
-    $('#tpContainer').on('click', '.line-port', function () {
-      thisNg.isVisible = false;
-      thisNg.delBoxisVisible = true;
-      thisNg.delcloud = false;
-
-      thisNg.delTp1 = $(this).attr('data-tp1');
-      thisNg.delTp2 = $(this).attr('data-tp2');
-      thisNg.delNode1 = $(this).attr('data-node1');
-      thisNg.delNode2 = $(this).attr('data-node2');
-      thisNg.delVersion = $(this).attr('data-version');
-      thisNg.delLinkname = $(this).attr('data-link');
-      thisNg.delcloudUrl = null;
-      thisNg.delLinkIndex = $(this);
-
-      let dataD3 = thisNg.d3Data;
-      for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
-        if (dataD3[p]['name'] == thisNg.delTp1) {
-          thisNg.network.push(dataD3[p]['source']['name']);
-        }
-        if (dataD3[p]['name'] == thisNg.delTp2) {
-          thisNg.network.push(dataD3[p]['source']['name']);
-        }
-      }
-      thisNg.delNetwork1 = thisNg.network[0];
-      thisNg.delNetwork2 = thisNg.network[1];
-    });
-
-    //External cloud connection, click on the right to expand the details
-    $('#tpContainer').on('click', '.cloudline', function () {
-      thisNg.isVisible = false;
-      thisNg.delBoxisVisible = true;
-      thisNg.delcloud = true;
-
-      thisNg.delTp1 = $(this).attr('data-tp1');
-      thisNg.delTp2 = $(this).attr('data-tp2');
-      thisNg.delNode1 = $(this).attr('data-node1');
-      thisNg.delNode2 = $(this).attr('data-node2');
-      thisNg.delVersion = $(this).attr('data-version');
-      thisNg.delNetwork1 = $(this).attr('data-network');
-      thisNg.delNetwork2 = $(this).attr('data-cloudnetwork');
-      thisNg.delcloudUrl = $(this).attr('data-url');
-      thisNg.delLinkname = $(this).attr('data-link');
-      thisNg.aaiId = $(this).attr('data-aaiid');
-      thisNg.getCloudUrl(thisNg.aaiId, thisNg);
-    });
-  }
-
-  addLinkDisabled = true;
-  isVisible = false;
-  outCloudShow = false;
-  inputshow = false;
-  delBoxisVisible = false;
-
-  d3Data = [];//D3Render the required data
-  logicalLinks = [];//logicalLinks Existing connection data returned by the interface
-  linkName = null;//Linked name link-name
-  networkOption = [];//Form network drop-down box filled data
-  nodeOption1 = {};//Node drop-down box filled data
-  tpOption1 = [];//Node drop-down box filled data
-  tpOption2 = [];//Node drop-down box filled data
-  networkVal1 = null;//network1 Drop-down box default data
-  networkVal2 = null;//network2 Drop-down box default data
-  selectedNode1 = null;//node1 Drop-down box default data
-  selectedNode2 = null;//node2 Drop-down box default data
-  selecteTpName1 = null;//TP1 Drop-down box default data
-  selecteTpName2 = null;//TP2 Drop-down box default data
-  cloudUrl = null;//External cloud URL address
-  cloudNetwork = null;//External cloud network name
-  cloudNode = null;//External cloud Node name
-  cloudTp = null;//External cloud Tp name
-
-  dataCloud = [];//External cloud information
-  dataCloudLink = [];
-  aaiId = '';
-
-
-  //When the connection is deleted, the data displayed in the right frame
-  delLinkname = null;
-  delNetwork1 = null;
-  delNode1 = null;
-  delTp1 = null;
-  delcloudUrl = null;
-  delNetwork2 = null;
-  delNode2 = null;
-  delTp2 = null;
-  delVersion = null;
-  delLinkIndex = null;
-  network = [];
-  delcloud = false;
-
-  winWidth = $('.content').width();
-  winHeight = $('.content').height();
-  charge = -300;
-
-  imgmap = {
-    '1': './assets/images/cloud-county1.png',
-    '2': './assets/images/cloud-city1.png',
-    '3': './assets/images/cloud-out.png',
-  };
-  tpoption = {
-    container: '#tpContainer',
-    data: '',
-    width: 1000,
-    height: this.winHeight
-  };
-
-  showForm(): void {
-    if (this.addLinkDisabled == false) {
-      this.isVisible = true;
-      this.delBoxisVisible = false;
+    constructor(private myhttp: networkHttpservice) {
     }
-  }
-
-  hideForm(): void {
-    this.isVisible = false;
-    this.delBoxisVisible = false;
-    this.linkName = null;
-    this.networkVal1 = null;//Initialize the default data of the network1 drop-down box
-    this.networkVal2 = null;//Initialize the network2 drop-down box default data
-    this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box
-    this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box
-    this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box
-    this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box
-    this.cloudUrl = null;//External cloud URL address
-    this.cloudNetwork = null;//External cloud network name
-    this.cloudNode = null;//External cloud Node name
-    this.cloudTp = null;//External cloud Tp name
-  }
-
-  //Get cloud image data
-  getD3Data() {
-    this.myhttp.getNetworkD3Data()
-      .subscribe((data) => {
-        if (data.length == 0) {
-          this.addLinkDisabled = false;
-          return;
-        }
-        for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out.
-          if (data[ii]['aaiId'] != null) {
-            this.dataCloud = data.splice(ii, 1);
-          }
-        }
 
-        for (var i = 0; i < data.length; i++) {
-          let name1 = {}, name2 = {};
-          let nodess = [];
-          name1['name'] = name2['network'] = data[i]['networkId'];
-          name1['type'] = '1';
-          name1['source'] = i;
-          this.d3Data.push(name1);
-          for (let c = 0; c < data[i]["pnfs"].length; c++) {
-            nodess.push(data[i]['pnfs'][c]['pnfName']);
-            this.nodeOption1[name2['network']] = nodess;
-          }
-          this.networkOption.push(name2);
-        }
-        console.log(this.networkOption);
-        for (var i = 0; i < data.length; i++) {
-          let tp_length = data[i]['tps'].length;
-          for (var h = 0; h < tp_length; h++) {
-            let name2 = {};
-            let interface_name = data[i]['tps'][h]['interface-name'];
-            name2['name'] = interface_name;
-            name2['type'] = '2';
-            name2['source'] = i;
-            this.d3Data.push(name2);
-          }
+    ngOnInit() {
+        var thisNg = this;
+        thisNg.getD3Data();
+
+
+        //Local cloud TP port connection, click on the right to expand the details
+        $('#tpContainer').on('click', '.line-port', function () {
+            thisNg.isVisible = false;
+            thisNg.delBoxisVisible = true;
+            thisNg.delcloud = false;
+
+            thisNg.delTp1 = $(this).attr('data-tp1');
+            thisNg.delTp2 = $(this).attr('data-tp2');
+            thisNg.delNode1 = $(this).attr('data-node1');
+            thisNg.delNode2 = $(this).attr('data-node2');
+            thisNg.delVersion = $(this).attr('data-version');
+            thisNg.delLinkname = $(this).attr('data-link');
+            thisNg.delcloudUrl = null;
+            thisNg.delLinkIndex = $(this);
+
+            let dataD3 = thisNg.d3Data;
+            for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
+                if (dataD3[p]['name'] == thisNg.delTp1) {
+                    thisNg.network.push(dataD3[p]['source']['name']);
+                }
+                if (dataD3[p]['name'] == thisNg.delTp2) {
+                    thisNg.network.push(dataD3[p]['source']['name']);
+                }
+            }
+            thisNg.delNetwork1 = thisNg.network[0];
+            thisNg.delNetwork2 = thisNg.network[1];
+        });
+
+        //External cloud connection, click on the right to expand the details
+        $('#tpContainer').on('click', '.cloudline', function () {
+            thisNg.isVisible = false;
+            thisNg.delBoxisVisible = true;
+            thisNg.delcloud = true;
+
+            thisNg.delTp1 = $(this).attr('data-tp1');
+            thisNg.delTp2 = $(this).attr('data-tp2');
+            thisNg.delNode1 = $(this).attr('data-node1');
+            thisNg.delNode2 = $(this).attr('data-node2');
+            thisNg.delVersion = $(this).attr('data-version');
+            thisNg.delNetwork1 = $(this).attr('data-network');
+            thisNg.delNetwork2 = $(this).attr('data-cloudnetwork');
+            thisNg.delcloudUrl = $(this).attr('data-url');
+            thisNg.delLinkname = $(this).attr('data-link');
+            thisNg.aaiId = $(this).attr('data-aaiid');
+            thisNg.getCloudUrl(thisNg.aaiId, thisNg);
+        });
+    }
+
+    addLinkDisabled = true;
+    isVisible = false;
+    outCloudShow = false;
+    inputshow = false;
+    delBoxisVisible = false;
+
+    d3Data = [];//D3Render the required data
+    logicalLinks = [];//logicalLinks Existing connection data returned by the interface
+    linkName = null;//Linked name link-name
+    networkOption = [];//Form network drop-down box filled data
+    nodeOption1 = {};//Node drop-down box filled data
+    tpOption1 = [];//Node drop-down box filled data
+    tpOption2 = [];//Node drop-down box filled data
+    networkVal1 = null;//network1 Drop-down box default data
+    networkVal2 = null;//network2 Drop-down box default data
+    selectedNode1 = null;//node1 Drop-down box default data
+    selectedNode2 = null;//node2 Drop-down box default data
+    selecteTpName1 = null;//TP1 Drop-down box default data
+    selecteTpName2 = null;//TP2 Drop-down box default data
+    cloudUrl = null;//External cloud URL address
+    cloudNetwork = null;//External cloud network name
+    cloudNode = null;//External cloud Node name
+    cloudTp = null;//External cloud Tp name
+
+    dataCloud = [];//External cloud information
+    dataCloudLink = [];
+    aaiId = '';
+
+
+    //When the connection is deleted, the data displayed in the right frame
+    delLinkname = null;
+    delNetwork1 = null;
+    delNode1 = null;
+    delTp1 = null;
+    delcloudUrl = null;
+    delNetwork2 = null;
+    delNode2 = null;
+    delTp2 = null;
+    delVersion = null;
+    delLinkIndex = null;
+    network = [];
+    delcloud = false;
+
+    winWidth = $('.content').width();
+    winHeight = 600;
+    charge = -300;
+
+    imgmap = {
+        '1': './assets/images/cloud-county1.png',
+        '2': './assets/images/cloud-city1.png',
+        '3': './assets/images/cloud-out.png',
+    };
+    tpoption = {
+        container: '#tpContainer',
+        data: '',
+        width: 1000,
+        height: this.winHeight
+    };
+
+    showForm(): void {
+        if (this.addLinkDisabled == false) {
+            this.isVisible = true;
+            this.delBoxisVisible = false;
         }
-        for (let b = 0; b < this.d3Data.length; b++) {
-          this.d3Data[b]['target'] = b;
+    }
+
+    hideForm(): void {
+        this.isVisible = false;
+        this.delBoxisVisible = false;
+        this.linkName = null;
+        this.networkVal1 = null;//Initialize the default data of the network1 drop-down box
+        this.networkVal2 = null;//Initialize the network2 drop-down box default data
+        this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box
+        this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box
+        this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box
+        this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box
+        this.cloudUrl = null;//External cloud URL address
+        this.cloudNetwork = null;//External cloud network name
+        this.cloudNode = null;//External cloud Node name
+        this.cloudTp = null;//External cloud Tp name
+    }
+
+    //Get cloud image data
+    getD3Data() {
+        this.myhttp.getNetworkD3Data()
+            .subscribe((data) => {
+                if (data.length == 0) {
+                    this.addLinkDisabled = false;
+                    return;
+                }
+                for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out.
+                    if (data[ii]['aaiId'] != null) {
+                        this.dataCloud = data.splice(ii, 1);
+                    }
+                }
+
+                for (var i = 0; i < data.length; i++) {
+                    let name1 = {}, name2 = {};
+                    let nodess = [];
+                    name1['name'] = name2['network'] = data[i]['networkId'];
+                    name1['type'] = '1';
+                    name1['source'] = i;
+                    this.d3Data.push(name1);
+                    for (let c = 0; c < data[i]["pnfs"].length; c++) {
+                        nodess.push(data[i]['pnfs'][c]['pnfName']);
+                        this.nodeOption1[name2['network']] = nodess;
+                    }
+                    this.networkOption.push(name2);
+                }
+                console.log(this.networkOption);
+                for (var i = 0; i < data.length; i++) {
+                    let tp_length = data[i]['tps'].length;
+                    for (var h = 0; h < tp_length; h++) {
+                        let name2 = {};
+                        let interface_name = data[i]['tps'][h]['interface-name'];
+                        name2['name'] = interface_name;
+                        name2['type'] = '2';
+                        name2['source'] = i;
+                        this.d3Data.push(name2);
+                    }
+                }
+                for (let b = 0; b < this.d3Data.length; b++) {
+                    this.d3Data[b]['target'] = b;
+                }
+                this.initPosition(this.d3Data);
+                setTimeout(this.render(this.d3Data, this.imgmap, this.dataCloud, this.charge, data), 0);
+            }, (err) => {
+                console.log(err);
+            });
+
+    }
+
+    //Get the initial connection status of the cloud image getlogicalLinksData
+    getLinksData() {
+        this.myhttp.getLogicalLinksData()
+            .subscribe((data) => {
+                if (data["status"]=="FAILED") {
+                    return;
+                }
+                for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out.
+                    if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) {
+                        this.dataCloudLink = data['logical-link'].splice(i, 1);
+                    }
+                }
+
+                for (let i = 0; i < data["logical-link"].length; i++) {
+                    let textval = [];
+                    textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+                    textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+                    textval[2] = data['logical-link'][i]['resource-version'];//version
+                    textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+                    textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+                    textval[5] = data['logical-link'][i]['operational-status'];
+                    textval[6] = data['logical-link'][i]['link-name'];
+                    this.logicalLinks.push(textval);
+                    this.chose(textval);
+                }
+                console.log(this.logicalLinks);
+                if (this.dataCloudLink.length > 0) {
+                    this.getcloudLine(this.dataCloudLink);
+                }
+            }, (err) => {
+                console.log(err);
+            });
+    }
+
+    //D3Cloud rendering
+    render(nodes, imgmap, dataCloud, charge, dataD3) {
+        var thiss = this;
+        var _this = this.tpoption,
+            width = null,
+            height = _this.height;
+        console.log("查询svg高度");
+        console.log(height);
+        if (_this.width > 800) {
+            width = _this.width;
+        } else {
+            width = 800;
         }
-        this.initPosition(this.d3Data);
-        setTimeout(this.render(this.d3Data, this.imgmap, this.dataCloud, this.charge, data), 0);
-      }, (err) => {
-        console.log(err);
-      });
-
-  }
-
-  //Get the initial connection status of the cloud image getlogicalLinksData
-  getLinksData() {
-    this.myhttp.getLogicalLinksData()
-      .subscribe((data) => {
-        if (data["status"]=="FAILED") {
-          return;
+        if (dataD3.length <= 4) {
+            charge = -300;
+        } else if (dataD3.length > 4 && dataD3.length <= 6) {
+            charge = -160;
+        } else if (dataD3.length > 6 && dataD3.length <= 10) {
+            charge = -110;
+        } else {
+            charge = -100;
         }
-        for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out.
-          if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) {
-            this.dataCloudLink = data['logical-link'].splice(i, 1);
-          }
+        console.log(charge);
+        var svg = d3.select(_this.container).append('svg')
+                .attr('width', width)
+                .attr('height', height)
+                .attr('id', 'content-svg')
+                .style('pointer-events', 'all'),
+            graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
+
+            _g_nodes = graph.selectAll('g.node')
+                .data(nodes)
+                .enter()
+                .append('g')
+                .style('display', function (d) {
+                    var display = 'block';
+                    switch (d.type) {
+                        case '1':
+                            display = 'none';
+                            break;
+                        case '2':
+                            display = 'none';
+                            break;
+                        default:
+                            break;
+                    }
+                    return display;
+                })
+                .style('cursor', 'pointer')
+                .attr('class', 'node'),
+
+            _g_lines = graph.selectAll('line.line')
+                .data(nodes)
+                .enter()
+                .append('g')
+                .style('display', 'none')
+                .attr('class', 'line');
+
+
+        _g_lines.append('line')
+            .style('stroke', '#93c62d'
+            )
+            .style('stroke-width', 2);
+
+        _g_nodes.append('image')
+            .attr('width', function (d) {
+                var width = 40;
+                switch (d.type) {
+                    case '1':
+                        width = 4.4 * width;
+                        break;
+                    case '2':
+                        width = 0.12 * width;
+                        break;
+                    default:
+                        break;
+                }
+                return width;
+            })
+            .attr('height', function (d) {
+                var height = 20;
+                switch (d.type) {
+                    case '1':
+                        height = 3.5 * height;
+                        break;
+                    case '2':
+                        height = 0.2 * height;
+                        break;
+                    default:
+                        break;
+                }
+                return height;
+            })
+            .attr('xlink:href', function (d) {
+                return imgmap[d.type];
+            });
+
+        _g_nodes.append('text')
+            .text(function (d) {
+                return d.name;
+            })
+            .style('transform', function (d) {
+                var x = null;
+                var y = null;
+                switch (d.type) {
+                    case '1':
+                        x = 7;
+                        y = -7;
+                        break;
+                    case '2':
+                        x = 1;
+                        y = -2;
+                        break;
+                    default:
+                        break;
+                }
+                return 'translate(' + x + '%,' + y + '%)';
+            })
+            .style('font-size', function (d) {
+                var size = 14;
+                switch (d.type) {
+                    case '1':
+                        size = 14;
+                        break;
+                    case '2':
+                        size = 12;
+                        break;
+                    default:
+                        break;
+                }
+                return size;
+            })
+            .style('fill', function (d) {
+                var color = '#666';
+                switch (d.type) {
+                    case '1':
+                        color = '#666';
+                        break;
+                    case '2':
+                        color = '#666';
+                        break;
+                    default:
+                        break;
+                }
+                return color;
+            })
+            .style('font-weight', '500');
+
+
+        //Add custom attributes online
+        _g_lines.each(function (d, i) {
+            var _this = d3.select(this);
+            if (d.name) {
+                _this.attr('data-text', d.name);
+            }
+        });
+
+        var force = d3.layout.force()
+            .size([1000, this.winHeight])
+            .linkDistance(5)
+            // .theta(0.6)
+            .charge(charge)
+            .nodes(nodes)
+            .links(nodes)
+            .start();
+
+        //Add drag and drop behavior
+        // _g_nodes.call(this.getDragBehavior(force));
+
+        force.on('tick', function () {
+            if (force.alpha() <= 0.04) {
+
+                _g_nodes.style('display', function (d) {
+                    var display = 'block';
+                    switch (d.type) {
+                        case '1':
+                            display = 'block';
+                            break;
+                        case '2':
+                            display = 'none';
+                            break;
+                        default:
+                            break;
+                    }
+                    return display;
+                });
+
+                nodes.forEach(function (d, i) {
+                    d.x = d.x - 25 < 0 ? 25 : d.x;
+                    d.x = d.x + 25 > width ? width - 25 : d.x;
+                    d.y = d.y - 15 < 0 ? 15 : d.y;
+                    d.y = d.y + 15 > height ? height - 15 : d.y;
+                });
+
+                _g_nodes.attr('transform', function (d) {
+
+                    let image = d3.select(this).select('image')[0][0],
+                        halfWidth = parseFloat(image.attributes[0]['value']) / 2,
+                        halfHeight = parseFloat(image.attributes[1]['value']) / 2;
+                    let xx = d.x - halfWidth,
+                        yy = d.y - halfHeight;
+                    // if (xx < 0) {
+                    //   xx = -xx;
+                    // }
+                    // if (yy < 0) {
+                    //   yy = -yy;
+                    // }
+                    return 'translate(' + xx + ',' + yy + ')';
+                });
+
+                _g_lines.select('line')
+                    .attr('x1', function (d) {
+                        return d.source.x;
+                    })
+                    .attr('y1', function (d) {
+                        return d.source.y;
+                    })
+                    .attr('x2', function (d) {
+                        return d.target.x;
+                    })
+                    .attr('y2', function (d) {
+                        return d.target.y;
+                    });
+
+                _g_nodes.select('text').attr('dy', function (d) {
+                    var image = this.previousSibling,
+                        height = parseFloat(image.attributes[1]['value']),
+                        fontSize = 12;
+                    return height + 1.5 * fontSize;
+                });
+            }
+        });
+
+        force.on('end', function () {
+            force.stop();
+            if (dataCloud.length > 0) {
+                thiss.getoutCloud(dataCloud, imgmap);
+            }
+            thiss.getLinksData();
+            thiss.addLinkDisabled = false;
+        });
+
+    };
+
+    //Topology drag and drop effect
+    getDragBehavior(force) {
+
+        return d3.behavior.drag()
+            .origin(function (d) {
+                return d;
+            })
+            .on('dragstart', dragstart)
+            .on('drag', dragging)
+            .on('dragend', dragend);
+
+        function dragstart(d) {
+            d3.event.sourceEvent.stopPropagation();
+            d3.select(this).classed('dragging', true);
+            force.start();
         }
 
-        for (let i = 0; i < data["logical-link"].length; i++) {
-          let textval = [];
-          textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
-          textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
-          textval[2] = data['logical-link'][i]['resource-version'];//version
-          textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
-          textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
-          textval[5] = data['logical-link'][i]['operational-status'];
-          textval[6] = data['logical-link'][i]['link-name'];
-          this.logicalLinks.push(textval);
-          this.chose(textval);
+        function dragging(d) {
+            d.x = d3.event.x;
+            d.y = d3.event.y;
         }
-        console.log(this.logicalLinks);
-        if (this.dataCloudLink.length > 0) {
-          this.getcloudLine(this.dataCloudLink);
+
+        function dragend(d) {
+            d3.select(this).classed('dragging', false);
         }
-      }, (err) => {
-        console.log(err);
-      });
-  }
-
-  //D3Cloud rendering
-  render(nodes, imgmap, dataCloud, charge, dataD3) {
-    var thiss = this;
-    var _this = this.tpoption,
-      width = null,
-      height = _this.height;
-    if (_this.width > 800) {
-      width = _this.width;
-    } else {
-      width = 800;
+
     }
-    if (dataD3.length <= 4) {
-      charge = -300;
-    } else if (dataD3.length > 4 && dataD3.length <= 6) {
-      charge = -160;
-    } else if (dataD3.length > 6 && dataD3.length <= 10) {
-      charge = -110;
-    } else {
-      charge = -100;
+
+    //Initialize node location
+    initPosition(datas) {
+        let origin = [this.tpoption.width / 2, this.tpoption.height / 2];
+        let points = this.getVertices(origin, Math.min(this.tpoption.width / 2, this.tpoption.height / 2), datas.length);
+        datas.forEach((item, i) => {
+            item.x = points[i].x;
+            item.y = points[i].y;
+        });
     }
-    console.log(charge);
-    var svg = d3.select(_this.container).append('svg')
-        .attr('width', width)
-        .attr('height', height)
-        .attr('id', 'content-svg')
-        .style('pointer-events', 'all'),
-      graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
-
-      _g_nodes = graph.selectAll('g.node')
-        .data(nodes)
-        .enter()
-        .append('g')
-        .style('display', function (d) {
-          var display = 'block';
-          switch (d.type) {
-            case '1':
-              display = 'none';
-              break;
-            case '2':
-              display = 'none';
-              break;
-            default:
-              break;
-          }
-          return display;
-        })
-        .style('cursor', 'pointer')
-        .attr('class', 'node'),
-
-      _g_lines = graph.selectAll('line.line')
-        .data(nodes)
-        .enter()
-        .append('g')
-        .style('display', 'none')
-        .attr('class', 'line');
-
-
-    _g_lines.append('line')
-      .style('stroke', '#93c62d'
-      )
-      .style('stroke-width', 2);
-
-    _g_nodes.append('image')
-      .attr('width', function (d) {
-        var width = 40;
-        switch (d.type) {
-          case '1':
-            width = 4.4 * width;
-            break;
-          case '2':
-            width = 0.12 * width;
-            break;
-          default:
-            break;
+
+    //Get anchor points based on polygons
+    getVertices(origin, r, n) {
+        if (typeof n !== 'number') return;
+        var ox = origin[0];
+        var oy = origin[1];
+        var angle = 30 * n / n;
+        var i = 0;
+        var points = [];
+        var tempAngle = 0;
+        while (i < n) {
+            tempAngle = (i * angle * Math.PI) / 180;
+            points.push({
+                x: ox - r * Math.sin(tempAngle),
+                y: oy - r * Math.cos(tempAngle),
+            });
+            i++;
+        }
+        return points;
+    }
+
+    //Rendering an external cloud
+    getoutCloud(dataCloud, imgmap) {
+        var _this = this,
+            width;
+        let networkId = dataCloud[0]['networkId'];
+        if (_this.tpoption.width > 800) {
+            width = _this.tpoption.width;
+        } else {
+            width = 800;
         }
-        return width;
-      })
-      .attr('height', function (d) {
-        var height = 20;
-        switch (d.type) {
-          case '1':
-            height = 3.5 * height;
-            break;
-          case '2':
-            height = 0.2 * height;
-            break;
-          default:
-            break;
+        var svg = d3.select('#content-svg');
+        svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+        var out = d3.select('#out');
+        out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+        out.append('text').text(networkId)
+            .style('transform', 'translate(0，0)')
+            .style('font-size', '16')
+            .style('font-weight', '400')
+            .attr('dx', '40')
+            .attr('dy', '70')
+            .style('fill', '#666');
+    }
+
+    //External cloud connection
+    getcloudLine(dataCloudLink) {
+        let textval = [];
+        textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+        textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+        textval[2] = dataCloudLink[0]['resource-version'];//version
+        textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+        textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+        textval[5] = dataCloudLink[0]['operational-status'];//status
+        textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
+        textval[7] = this.dataCloud[0]['networkId'];
+        console.log(this.dataCloud);
+        let dataD3 = this.d3Data;
+        for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
+            if (dataD3[p]['name'] == textval[0]) {
+                textval[8] = dataD3[p]['source']['name'];//network1
+            }
         }
-        return height;
-      })
-      .attr('xlink:href', function (d) {
-        return imgmap[d.type];
-      });
-
-    _g_nodes.append('text')
-      .text(function (d) {
-        return d.name;
-      })
-      .style('transform', function (d) {
-        var x = null;
-        var y = null;
-        switch (d.type) {
-          case '1':
-            x = 7;
-            y = -7;
-            break;
-          case '2':
-            x = 1;
-            y = -2;
-            break;
-          default:
-            break;
+        textval[9] = dataCloudLink[0]['link-name'];
+        let lines_json = {};
+        var _this = this,
+            width;
+        if (_this.tpoption.width > 800) {
+            width = _this.tpoption.width;
+        } else {
+            width = 800;
         }
-        return 'translate(' + x + '%,' + y + '%)';
-      })
-      .style('font-size', function (d) {
-        var size = 14;
-        switch (d.type) {
-          case '1':
-            size = 14;
-            break;
-          case '2':
-            size = 12;
-            break;
-          default:
-            break;
+        for (let i = 0; i < $(".node").length; i++) {
+            if ($('.node').eq(i).find('text').html() == textval[8]) {
+                //Get the x, y coordinates of the second level
+                var translates = $('.node').eq(i).css('transform');
+                lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+                lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+                lines_json['x2'] = width - 100;
+                lines_json['y2'] = 100;
+            }
         }
-        return size;
-      })
-      .style('fill', function (d) {
-        var color = '#666';
-        switch (d.type) {
-          case '1':
-            color = '#666';
-            break;
-          case '2':
-            color = '#666';
-            break;
-          default:
-            break;
+        var x1 = lines_json['x1'];
+        var y1 = lines_json['y1'];
+        var x2 = lines_json['x2'];
+        var y2 = lines_json['y2'];
+        var color = '#14bb58';
+        if (textval[5] == 'up') {
+            color = '#14bb58';
+        } else {
+            color = 'red';
         }
-        return color;
-      })
-      .style('font-weight', '500');
-
-
-    //Add custom attributes online
-    _g_lines.each(function (d, i) {
-      var _this = d3.select(this);
-      if (d.name) {
-        _this.attr('data-text', d.name);
-      }
-    });
-
-    var force = d3.layout.force()
-      .size([1000, this.winHeight])
-      .linkDistance(5)
-      // .theta(0.6)
-      .charge(charge)
-      .nodes(nodes)
-      .links(nodes)
-      .start();
-
-    //Add drag and drop behavior
-    // _g_nodes.call(this.getDragBehavior(force));
-
-    force.on('tick', function () {
-      if (force.alpha() <= 0.04) {
-
-        _g_nodes.style('display', function (d) {
-          var display = 'block';
-          switch (d.type) {
-            case '1':
-              display = 'block';
-              break;
-            case '2':
-              display = 'none';
-              break;
-            default:
-              break;
-          }
-          return display;
+        var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+        var svg = d3.select('#graph');
+        $('.cloudline').remove();
+        $('#graph').prepend(line);
+        $('.cloudline').attr({
+            x1: x1 + 100,
+            y1: y1 + 10,
+            x2: x2,
+            y2: y2,
+            'data-tp1': textval[0],
+            'data-tp2': textval[1],
+            'data-version': textval[2],
+            'data-node1': textval[3],
+            'data-node2': textval[4],
+            'data-network': textval[8],
+            'data-cloudnetwork': textval[7],
+            'data-url': '',
+            'data-aaiid': textval[6],
+            'data-link': textval[9],
         });
+        svg.html(svg.html());
+    }
 
-        nodes.forEach(function (d, i) {
-          d.x = d.x - 25 < 0 ? 25 : d.x;
-          d.x = d.x + 25 > width ? width - 25 : d.x;
-          d.y = d.y - 15 < 0 ? 15 : d.y;
-          d.y = d.y + 15 > height ? height - 15 : d.y;
-        });
 
-        _g_nodes.attr('transform', function (d) {
-
-          let image = d3.select(this).select('image')[0][0],
-            halfWidth = parseFloat(image.attributes[0]['value']) / 2,
-            halfHeight = parseFloat(image.attributes[1]['value']) / 2;
-          let xx = d.x - halfWidth,
-            yy = d.y - halfHeight;
-          // if (xx < 0) {
-          //   xx = -xx;
-          // }
-          // if (yy < 0) {
-          //   yy = -yy;
-          // }
-          return 'translate(' + xx + ',' + yy + ')';
-        });
+    //Query external cloud host url address
+    getCloudUrl(aaiId, thisNg) {
+        this.myhttp.queryCloudUrl(aaiId)
+            .subscribe((data) => {
+                thisNg.delcloudUrl = data['service-url'];
+            }, (err) => {
+                console.log(err);
+            });
+    }
 
-        _g_lines.select('line')
-          .attr('x1', function (d) {
-            return d.source.x;
-          })
-          .attr('y1', function (d) {
-            return d.source.y;
-          })
-          .attr('x2', function (d) {
-            return d.target.x;
-          })
-          .attr('y2', function (d) {
-            return d.target.y;
-          });
-
-        _g_nodes.select('text').attr('dy', function (d) {
-          var image = this.previousSibling,
-            height = parseFloat(image.attributes[1]['value']),
-            fontSize = 12;
-          return height + 1.5 * fontSize;
-        });
-      }
-    });
-
-    force.on('end', function () {
-      force.stop();
-      if (dataCloud.length > 0) {
-        thiss.getoutCloud(dataCloud, imgmap);
-      }
-      thiss.getLinksData();
-      thiss.addLinkDisabled = false;
-    });
-
-  };
-
-  //Topology drag and drop effect
-  getDragBehavior(force) {
-
-    return d3.behavior.drag()
-      .origin(function (d) {
-        return d;
-      })
-      .on('dragstart', dragstart)
-      .on('drag', dragging)
-      .on('dragend', dragend);
-
-    function dragstart(d) {
-      d3.event.sourceEvent.stopPropagation();
-      d3.select(this).classed('dragging', true);
-      force.start();
+
+    //The right form drop-down box data is filled with three levels of linkage
+    //Left Port
+    network1Change(value: string): void {
+        this.selectedNode1 = this.nodeOption1[value][0];
+        this.getPInterfaces1();
     }
 
-    function dragging(d) {
-      d.x = d3.event.x;
-      d.y = d3.event.y;
+    node1Change(): void {
+        this.getPInterfaces1();
     }
 
-    function dragend(d) {
-      d3.select(this).classed('dragging', false);
+    //Get the TP data under the specified node
+    getPInterfaces1() {
+        let params = {
+            pnfName: this.selectedNode1,
+        };
+        this.myhttp.getPInterfacesData1(params)
+            .subscribe((data) => {
+                this.tpOption1 = [];
+                for (let i = 0; i < data.length; i++) {
+                    let tpName = data[i]['interface-name'];
+                    this.tpOption1.push(tpName);
+                }
+                this.selecteTpName1 = this.tpOption1[0];
+            }, (err) => {
+                console.log(err);
+            });
     }
 
-  }
-
-  //Initialize node location
-  initPosition(datas) {
-    let origin = [this.tpoption.width / 2, this.tpoption.height / 2];
-    let points = this.getVertices(origin, Math.min(this.tpoption.width / 2, this.tpoption.height / 2), datas.length);
-    datas.forEach((item, i) => {
-      item.x = points[i].x;
-      item.y = points[i].y;
-    });
-  }
-
-  //Get anchor points based on polygons
-  getVertices(origin, r, n) {
-    if (typeof n !== 'number') return;
-    var ox = origin[0];
-    var oy = origin[1];
-    var angle = 30 * n / n;
-    var i = 0;
-    var points = [];
-    var tempAngle = 0;
-    while (i < n) {
-      tempAngle = (i * angle * Math.PI) / 180;
-      points.push({
-        x: ox - r * Math.sin(tempAngle),
-        y: oy - r * Math.cos(tempAngle),
-      });
-      i++;
+    //Right Port
+    network2Change(value: string): void {
+        this.selectedNode2 = this.nodeOption1[value][0];
+        this.getPInterfaces2();
     }
-    return points;
-  }
-
-  //Rendering an external cloud
-  getoutCloud(dataCloud, imgmap) {
-    var _this = this,
-      width;
-    let networkId = dataCloud[0]['networkId'];
-    if (_this.tpoption.width > 800) {
-      width = _this.tpoption.width;
-    } else {
-      width = 800;
+
+    node2Change(): void {
+        this.getPInterfaces2();
     }
-    var svg = d3.select('#content-svg');
-    svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
-    var out = d3.select('#out');
-    out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
-    out.append('text').text(networkId)
-      .style('transform', 'translate(0，0)')
-      .style('font-size', '16')
-      .style('font-weight', '400')
-      .attr('dx', '40')
-      .attr('dy', '70')
-      .style('fill', '#666');
-  }
-
-  //External cloud connection
-  getcloudLine(dataCloudLink) {
-    let textval = [];
-    textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
-    textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
-    textval[2] = dataCloudLink[0]['resource-version'];//version
-    textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
-    textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
-    textval[5] = dataCloudLink[0]['operational-status'];//status
-    textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
-    textval[7] = this.dataCloud[0]['networkId'];
-    console.log(this.dataCloud);
-    let dataD3 = this.d3Data;
-    for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
-      if (dataD3[p]['name'] == textval[0]) {
-        textval[8] = dataD3[p]['source']['name'];//network1
-      }
+
+    //Get the TP data under the specified node
+    getPInterfaces2() {
+        let params = {
+            pnfName: this.selectedNode2,
+        };
+        this.myhttp.getPInterfacesData2(params)
+            .subscribe((data) => {
+                this.tpOption2 = [];
+                for (let i = 0; i < data.length; i++) {
+                    let tpName = data[i]['interface-name'];
+                    this.tpOption2.push(tpName);
+                }
+                this.selecteTpName2 = this.tpOption2[0];
+            }, (err) => {
+                console.log(err);
+            });
     }
-    textval[9] = dataCloudLink[0]['link-name'];
-    let lines_json = {};
-    var _this = this,
-      width;
-    if (_this.tpoption.width > 800) {
-      width = _this.tpoption.width;
-    } else {
-      width = 800;
+
+    //Submit form, connect
+    submitForm(): void {
+        //When the page ONAP is not selected, the local cloud TP connection
+        var _thiss = this;
+        if (this.inputshow == false) {
+            if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) {
+                alert('The service port cannot be empty. Please select the port information.');
+                return;
+            } else if (this.networkVal1 == this.networkVal2) {
+                alert('The TP port under the same cloud service cannot be connected!');
+                return;
+            }
+            let tp_links = [],
+                tp1 = this.selecteTpName1,
+                tp2 = this.selecteTpName2;
+            for (let i = 0; i < $(".line-port").length; i++) {
+                let data_text1 = $('.line-port').eq(i).attr('data-tp1');
+                let data_text2 = $('.line-port').eq(i).attr('data-tp2');
+                tp_links.push(data_text1);
+                tp_links.push(data_text2);
+            }
+            if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) {
+                alert('This port number connection already exists!');
+                return;
+            }
+            this.createTpLinks();
+
+        } else {
+            //When the page ONAP is selected, the external cloud is created, and the connection is made.
+            if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) {
+                alert('The service port cannot be empty. Please fill in the complete port information.');
+                return;
+            }
+            let tp_links = [],
+                tp1 = this.selecteTpName1;
+            for (let i = 0; i < $(".line-port").length; i++) {
+                let data_text1 = $('.line-port').eq(i).attr('data-tp1');
+                tp_links.push(data_text1);
+            }
+            if (tp_links.indexOf(tp1) != -1) {
+                alert('This port number connection already exists!');
+                return;
+            }
+
+            let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated
+            this.createCloudUrls(time)
+        }
     }
-    for (let i = 0; i < $(".node").length; i++) {
-      if ($('.node').eq(i).find('text').html() == textval[8]) {
-        //Get the x, y coordinates of the second level
-        var translates = $('.node').eq(i).css('transform');
-        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
-        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
-        lines_json['x2'] = width - 100;
-        lines_json['y2'] = 100;
-      }
+
+    //Create tp connection call interface createLink
+    createTpLinks() {
+        let params = {
+            'link-name': this.linkName,
+            'link-type': 'cross-link',
+            'operational-status': 'up',
+            'relationship-list': {
+                'relationship': [
+                    {
+                        'related-to': 'p-interface',
+                        'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1,
+                        'relationship-data': [
+                            {
+                                'relationship-key': 'pnf.pnf-id',
+                                'relationship-value': this.selectedNode1
+                            },
+                            {
+                                'relationship-key': 'p-interface.p-interface-id',
+                                'relationship-value': this.selecteTpName1,
+                            }
+                        ]
+                    },
+                    {
+                        'related-to': 'p-interface',
+                        'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2,
+                        'relationship-data': [
+                            {
+                                'relationship-key': 'pnf.pnf-id',
+                                'relationship-value': this.selectedNode2
+                            },
+                            {
+                                'relationship-key': 'p-interface.p-interface-id',
+                                'relationship-value': this.selecteTpName2
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+        this.myhttp.createLink(params)
+            .subscribe((data) => {
+                if (data['status'] == 'SUCCESS') {
+                    this.queryAddLink();
+                }
+            }, (err) => {
+                console.log(err);
+                console.log('Create connection interface call failed');
+            });
     }
-    var x1 = lines_json['x1'];
-    var y1 = lines_json['y1'];
-    var x2 = lines_json['x2'];
-    var y2 = lines_json['y2'];
-    var color = '#14bb58';
-    if (textval[5] == 'up') {
-      color = '#14bb58';
-    } else {
-      color = 'red';
+
+    //Query the newly added connection immediately after creating the tp cable
+    queryAddLink() {
+        let linkName = this.linkName,
+            selecteTpName1 = this.selecteTpName1,
+            selecteTpName2 = this.selecteTpName2,
+            selectedNode1 = this.selectedNode1,
+            selectedNode2 = this.selectedNode2;
+        let params = {
+            'link-name': linkName,
+        };
+        this.myhttp.querySpecificLinkInfo(params)
+            .subscribe((data) => {
+                let version = data['resource-version'],
+                    operational_status = data['operational-status'],
+                    linkname = data['link-name'];
+                let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status, linkname];
+                console.log(textval);
+                this.hideForm();
+                this.chose(textval);
+            }, (err) => {
+                console.log(err);
+            });
     }
-    var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
-    var svg = d3.select('#graph');
-    $('.cloudline').remove();
-    $('#graph').prepend(line);
-    $('.cloudline').attr({
-      x1: x1 + 100,
-      y1: y1 + 10,
-      x2: x2,
-      y2: y2,
-      'data-tp1': textval[0],
-      'data-tp2': textval[1],
-      'data-version': textval[2],
-      'data-node1': textval[3],
-      'data-node2': textval[4],
-      'data-network': textval[8],
-      'data-cloudnetwork': textval[7],
-      'data-url': '',
-      'data-aaiid': textval[6],
-      'data-link': textval[9],
-    });
-    svg.html(svg.html());
-  }
-
-
-  //Query external cloud host url address
-  getCloudUrl(aaiId, thisNg) {
-    this.myhttp.queryCloudUrl(aaiId)
-      .subscribe((data) => {
-        thisNg.delcloudUrl = data['service-url'];
-      }, (err) => {
-        console.log(err);
-      });
-  }
-
-
-  //The right form drop-down box data is filled with three levels of linkage
-  //Left Port
-  network1Change(value: string): void {
-    this.selectedNode1 = this.nodeOption1[value][0];
-    this.getPInterfaces1();
-  }
-
-  node1Change(): void {
-    this.getPInterfaces1();
-  }
-
-  //Get the TP data under the specified node
-  getPInterfaces1() {
-    let params = {
-      pnfName: this.selectedNode1,
-    };
-    this.myhttp.getPInterfacesData1(params)
-      .subscribe((data) => {
-        this.tpOption1 = [];
-        for (let i = 0; i < data.length; i++) {
-          let tpName = data[i]['interface-name'];
-          this.tpOption1.push(tpName);
-        }
-        this.selecteTpName1 = this.tpOption1[0];
-      }, (err) => {
-        console.log(err);
-      });
-  }
-
-  //Right Port
-  network2Change(value: string): void {
-    this.selectedNode2 = this.nodeOption1[value][0];
-    this.getPInterfaces2();
-  }
-
-  node2Change(): void {
-    this.getPInterfaces2();
-  }
-
-  //Get the TP data under the specified node
-  getPInterfaces2() {
-    let params = {
-      pnfName: this.selectedNode2,
-    };
-    this.myhttp.getPInterfacesData2(params)
-      .subscribe((data) => {
-        this.tpOption2 = [];
-        for (let i = 0; i < data.length; i++) {
-          let tpName = data[i]['interface-name'];
-          this.tpOption2.push(tpName);
+
+    //Connection between two TP coordinates
+    chose(textval) {
+        var lines_json = {};
+        lines_json['tp1'] = textval[0];
+        lines_json['tp2'] = textval[1];
+        lines_json['version'] = textval[2];
+        lines_json['node1'] = textval[3];
+        lines_json['node2'] = textval[4];
+        lines_json['status'] = textval[5];
+        lines_json['linkname'] = textval[6];
+        for (let i = 0; i < $(".node").length; i++) {
+            if ($('.node').eq(i).find('text').html() == textval[0]) {
+                $('.node').eq(i).show();
+                //Get the x, y coordinates of the second level
+                var translates = $('.node').eq(i).css('transform');
+                lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+                lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+            }
+            if ($('.node').eq(i).find('text').html() == textval[1]) {
+                $('.node').eq(i).show();
+                var translates = $('.node').eq(i).css('transform');
+                lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]);
+                lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
+            }
         }
-        this.selecteTpName2 = this.tpOption2[0];
-      }, (err) => {
-        console.log(err);
-      });
-  }
-
-  //Submit form, connect
-  submitForm(): void {
-    //When the page ONAP is not selected, the local cloud TP connection
-    var _thiss = this;
-    if (this.inputshow == false) {
-      if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) {
-        alert('The service port cannot be empty. Please select the port information.');
-        return;
-      } else if (this.networkVal1 == this.networkVal2) {
-        alert('The TP port under the same cloud service cannot be connected!');
-        return;
-      }
-      let tp_links = [],
-        tp1 = this.selecteTpName1,
-        tp2 = this.selecteTpName2;
-      for (let i = 0; i < $(".line-port").length; i++) {
-        let data_text1 = $('.line-port').eq(i).attr('data-tp1');
-        let data_text2 = $('.line-port').eq(i).attr('data-tp2');
-        tp_links.push(data_text1);
-        tp_links.push(data_text2);
-      }
-      if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) {
-        alert('This port number connection already exists!');
-        return;
-      }
-      this.createTpLinks();
-
-    } else {
-      //When the page ONAP is selected, the external cloud is created, and the connection is made.
-      if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) {
-        alert('The service port cannot be empty. Please fill in the complete port information.');
-        return;
-      }
-      let tp_links = [],
-        tp1 = this.selecteTpName1;
-      for (let i = 0; i < $(".line-port").length; i++) {
-        let data_text1 = $('.line-port').eq(i).attr('data-tp1');
-        tp_links.push(data_text1);
-      }
-      if (tp_links.indexOf(tp1) != -1) {
-        alert('This port number connection already exists!');
-        return;
-      }
-
-      let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated
-      this.createCloudUrls(time)
+        console.log(lines_json);
+        this.addLine(lines_json);
     }
-  }
-
-  //Create tp connection call interface createLink
-  createTpLinks() {
-    let params = {
-      'link-name': this.linkName,
-      'link-type': 'cross-link',
-      'operational-status': 'up',
-      'relationship-list': {
-        'relationship': [
-          {
-            'related-to': 'p-interface',
-            'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1,
-            'relationship-data': [
-              {
-                'relationship-key': 'pnf.pnf-id',
-                'relationship-value': this.selectedNode1
-              },
-              {
-                'relationship-key': 'p-interface.p-interface-id',
-                'relationship-value': this.selecteTpName1,
-              }
-            ]
-          },
-          {
-            'related-to': 'p-interface',
-            'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2,
-            'relationship-data': [
-              {
-                'relationship-key': 'pnf.pnf-id',
-                'relationship-value': this.selectedNode2
-              },
-              {
-                'relationship-key': 'p-interface.p-interface-id',
-                'relationship-value': this.selecteTpName2
-              }
-            ]
-          }
-        ]
-      }
-    };
-    this.myhttp.createLink(params)
-      .subscribe((data) => {
-        if (data['status'] == 'SUCCESS') {
-          this.queryAddLink();
+
+    //Connection between two TPs
+    addLine(lines) {
+        let tp1 = lines.tp1;
+        let tp2 = lines.tp2;
+        let version = lines.version;
+        let node1 = lines.node1;
+        let node2 = lines.node2;
+        let status = lines.status;
+        let linkname = lines.linkname;
+        let x1 = lines.x1;
+        let y1 = lines.y1;
+        let x2 = lines.x2;
+        let y2 = lines.y2;
+        let color = '#14bb58';
+        if (status == 'up') {
+            color = '#14bb58';
+        } else {
+            color = 'red';
         }
-      }, (err) => {
-        console.log(err);
-        console.log('Create connection interface call failed');
-      });
-  }
-
-  //Query the newly added connection immediately after creating the tp cable
-  queryAddLink() {
-    let linkName = this.linkName,
-      selecteTpName1 = this.selecteTpName1,
-      selecteTpName2 = this.selecteTpName2,
-      selectedNode1 = this.selectedNode1,
-      selectedNode2 = this.selectedNode2;
-    let params = {
-      'link-name': linkName,
-    };
-    this.myhttp.querySpecificLinkInfo(params)
-      .subscribe((data) => {
-        let version = data['resource-version'],
-          operational_status = data['operational-status'],
-          linkname = data['link-name'];
-        let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status, linkname];
-        console.log(textval);
-        this.hideForm();
-        this.chose(textval);
-      }, (err) => {
-        console.log(err);
-      });
-  }
-
-  //Connection between two TP coordinates
-  chose(textval) {
-    var lines_json = {};
-    lines_json['tp1'] = textval[0];
-    lines_json['tp2'] = textval[1];
-    lines_json['version'] = textval[2];
-    lines_json['node1'] = textval[3];
-    lines_json['node2'] = textval[4];
-    lines_json['status'] = textval[5];
-    lines_json['linkname'] = textval[6];
-    for (let i = 0; i < $(".node").length; i++) {
-      if ($('.node').eq(i).find('text').html() == textval[0]) {
-        $('.node').eq(i).show();
-        //Get the x, y coordinates of the second level
-        var translates = $('.node').eq(i).css('transform');
-        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
-        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
-      }
-      if ($('.node').eq(i).find('text').html() == textval[1]) {
-        $('.node').eq(i).show();
-        var translates = $('.node').eq(i).css('transform');
-        lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]);
-        lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
-      }
-    }
-    console.log(lines_json);
-    this.addLine(lines_json);
-  }
-
-  //Connection between two TPs
-  addLine(lines) {
-    let tp1 = lines.tp1;
-    let tp2 = lines.tp2;
-    let version = lines.version;
-    let node1 = lines.node1;
-    let node2 = lines.node2;
-    let status = lines.status;
-    let linkname = lines.linkname;
-    let x1 = lines.x1;
-    let y1 = lines.y1;
-    let x2 = lines.x2;
-    let y2 = lines.y2;
-    let color = '#14bb58';
-    if (status == 'up') {
-      color = '#14bb58';
-    } else {
-      color = 'red';
-    }
-    let line = '<line class=\'line line-port line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
-    let svg = d3.select('#graph');
-    $('#graph').prepend(line);
-    $('.line').first().attr({
-      x1: x1,
-      y1: y1,
-      x2: x2,
-      y2: y2,
-      'data-tp1': tp1,
-      'data-tp2': tp2,
-      'data-version': version,
-      'data-node1': node1,
-      'data-node2': node2,
-      'data-link': linkname
-    });
-    svg.html(svg.html());
-  }
-
-  //After creating an external cloud connection, query the connection immediately
-  queryOutCloudLink() {
-    let networkVal1 = this.networkVal1,
-      selectedNode1 = this.selectedNode1,
-      selecteTpName1 = this.selecteTpName1,
-      cloudUrl = this.cloudUrl,
-      cloudNetWork = this.cloudNetwork,
-      cloudNode = this.cloudNode,
-      cloudTp = this.cloudTp,
-      linkname = this.linkName;
-    let params = {
-      'link-name': linkname,
-    };
-    this.myhttp.querySpecificLinkInfo(params)
-      .subscribe((data) => {
-        let version = data['resource-version'];
-        let status = data['operational-status'];
-        let link_name = data['link-name'];
-        this.outCloudShow = true;
-        this.hideForm();
-        this.outCloud(this.imgmap);
-        setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name), 0);
-      }, (err) => {
-        console.log(err);
-      });
-  }
-
-  //Add external cloud
-  outCloud(imgmap) {
-    var _this = this,
-      width;
-    if (_this.tpoption.width > 800) {
-      width = _this.tpoption.width;
-    } else {
-      width = 800;
-    }
-    var svg = d3.select('#content-svg');
-    svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
-    var out = d3.select('#out');
-    out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
-    out.append('text').text('Partner Network')
-      .style('transform', 'translate(0，0)')
-      .style('font-size', '16')
-      .style('font-weight', 'bold')
-      .attr('dx', '40')
-      .attr('dy', '70')
-      .style('fill', '#fff');
-  }
-
-  //Add external cloud connection
-  cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name) {
-    let lines_json = {};
-    var _this = this,
-      width;
-    if (_this.tpoption.width > 800) {
-      width = _this.tpoption.width;
-    } else {
-      width = 800;
+        let line = '<line class=\'line line-port line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+        let svg = d3.select('#graph');
+        $('#graph').prepend(line);
+        $('.line').first().attr({
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2,
+            'data-tp1': tp1,
+            'data-tp2': tp2,
+            'data-version': version,
+            'data-node1': node1,
+            'data-node2': node2,
+            'data-link': linkname
+        });
+        svg.html(svg.html());
     }
-    for (let i = 0; i < $(".node").length; i++) {
-      if ($('.node').eq(i).find('text').html() == networkVal1) {
-        //Get the x, y coordinates of the second level
-        var translates = $('.node').eq(i).css('transform');
-        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
-        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
-        lines_json['x2'] = width - 100;
-        lines_json['y2'] = 100;
-      }
+
+    //After creating an external cloud connection, query the connection immediately
+    queryOutCloudLink() {
+        let networkVal1 = this.networkVal1,
+            selectedNode1 = this.selectedNode1,
+            selecteTpName1 = this.selecteTpName1,
+            cloudUrl = this.cloudUrl,
+            cloudNetWork = this.cloudNetwork,
+            cloudNode = this.cloudNode,
+            cloudTp = this.cloudTp,
+            linkname = this.linkName;
+        let params = {
+            'link-name': linkname,
+        };
+        this.myhttp.querySpecificLinkInfo(params)
+            .subscribe((data) => {
+                let version = data['resource-version'];
+                let status = data['operational-status'];
+                let link_name = data['link-name'];
+                this.outCloudShow = true;
+                this.hideForm();
+                this.outCloud(this.imgmap);
+                setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name), 0);
+            }, (err) => {
+                console.log(err);
+            });
     }
-    var x1 = lines_json['x1'];
-    var y1 = lines_json['y1'];
-    var x2 = lines_json['x2'];
-    var y2 = lines_json['y2'];
-    var color = '#14bb58';
-    if (status == 'up') {
-      color = '#14bb58';
-    } else {
-      color = 'red';
+
+    //Add external cloud
+    outCloud(imgmap) {
+        var _this = this,
+            width;
+        if (_this.tpoption.width > 800) {
+            width = _this.tpoption.width;
+        } else {
+            width = 800;
+        }
+        var svg = d3.select('#content-svg');
+        svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+        var out = d3.select('#out');
+        out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+        out.append('text').text('Partner Network')
+            .style('transform', 'translate(0，0)')
+            .style('font-size', '16')
+            .style('font-weight', 'bold')
+            .attr('dx', '40')
+            .attr('dy', '70')
+            .style('fill', '#fff');
     }
-    var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
-    var svg = d3.select('#graph');
-    $('.cloudline').remove();
-    $('#graph').prepend(line);
-    $('.cloudline').attr({
-      x1: x1 + 100,
-      y1: y1 + 10,
-      x2: x2,
-      y2: y2,
-      'data-tp1': selecteTpName1,
-      'data-tp2': cloudTp,
-      'data-version': version,
-      'data-node1': selectedNode1,
-      'data-node2': cloudNode,
-      'data-network': networkVal1,
-      'data-cloudnetwork': cloudNetWork,
-      'data-url': cloudUrl,
-      'data-link': link_name
-    });
-    svg.html(svg.html());
-  }
-
-  //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
-  createCloudNetwork(time) {
-    let _thiss = this;
-
-      let params= {
-        "network-resource": {
-          "network-id":this.cloudNetwork,
-          "provider-id": "",
-          "client-id": "",
-          "te-topo-id": "",
-          "relationship-list": {
-            "relationship": {
-              "related-to": "ext-aai-network",
-              "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+time
+
+    //Add external cloud connection
+    cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name) {
+        let lines_json = {};
+        var _this = this,
+            width;
+        if (_this.tpoption.width > 800) {
+            width = _this.tpoption.width;
+        } else {
+            width = 800;
+        }
+        for (let i = 0; i < $(".node").length; i++) {
+            if ($('.node').eq(i).find('text').html() == networkVal1) {
+                //Get the x, y coordinates of the second level
+                var translates = $('.node').eq(i).css('transform');
+                lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+                lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+                lines_json['x2'] = width - 100;
+                lines_json['y2'] = 100;
             }
-          }
         }
-      }
-      
-      //Do some asynchronous operations
-      _thiss.myhttp.createNetwrok(params)
-        .subscribe((data) => {
-          if(data["status"]=="SUCCESS"){
-            _thiss.createPnfs(time)
-          }
-        }, (err) => {
-          console.log(err);
+        var x1 = lines_json['x1'];
+        var y1 = lines_json['y1'];
+        var x2 = lines_json['x2'];
+        var y2 = lines_json['y2'];
+        var color = '#14bb58';
+        if (status == 'up') {
+            color = '#14bb58';
+        } else {
+            color = 'red';
+        }
+        var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+        var svg = d3.select('#graph');
+        $('.cloudline').remove();
+        $('#graph').prepend(line);
+        $('.cloudline').attr({
+            x1: x1 + 100,
+            y1: y1 + 10,
+            x2: x2,
+            y2: y2,
+            'data-tp1': selecteTpName1,
+            'data-tp2': cloudTp,
+            'data-version': version,
+            'data-node1': selectedNode1,
+            'data-node2': cloudNode,
+            'data-network': networkVal1,
+            'data-cloudnetwork': cloudNetWork,
+            'data-url': cloudUrl,
+            'data-link': link_name
         });
+        svg.html(svg.html());
+    }
 
-  }
-
-  createPnfs(time) {
-    let _thiss = this;
-    let params= {
-      "pnf": {
-        "pnf-name": this.cloudNode,
-        "pnf-id": this.cloudNode,
-        "in-maint": "true",
-        "relationship-list": {
-          "relationship": [
-            {
-              "related-to": "ext-aai-network",
-              "relationship-label": "org.onap.relationships.inventory.BelongsTo",
-              "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+ time,
-              "relationship-data": {
-                "relationship-key": "ext-aai-network.aai-id",
-                "relationship-value":time
-              }
-            },
-            {
-              "related-to": "network-resource",
-              "relationship-label": "tosca.relationships.network.LinksTo",
-              "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork
+    //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
+    createCloudNetwork(time) {
+        let _thiss = this;
+
+        let params= {
+            "network-resource": {
+                "network-id":this.cloudNetwork,
+                "provider-id": "",
+                "client-id": "",
+                "te-topo-id": "",
+                "relationship-list": {
+                    "relationship": {
+                        "related-to": "ext-aai-network",
+                        "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+time
+                    }
+                }
             }
-          ]
         }
-      }
-    }
-    
-    // var pro = new Promise(function (resolve, reject) {
-      //Do some asynchronous operations
-      _thiss.myhttp.createPnf(params)
-        .subscribe((data) => {
-          if(data["status"]=="SUCCESS"){
-            _thiss.createCloudTp(time)
-          }
-        }, (err) => {
-          console.log(err);
-        });
-    // });
-    // return pro;
-  }
-
-  createCloudTp(time) {
-    let _thiss = this;
-    let params= {
-      "p-interface": {
-        "interface-name": this.cloudTp,
-        "speed-value": "1000000",
-        "in-maint": "true",
-        "network-ref": "",
-        "transparent": "true",
-        "operational-status": "up"
-      }
+
+        //Do some asynchronous operations
+        _thiss.myhttp.createNetwrok(params)
+            .subscribe((data) => {
+                if(data["status"]=="SUCCESS"){
+                    _thiss.createPnfs(time)
+                }
+            }, (err) => {
+                console.log(err);
+            });
+
     }
-    
-    let cloudNodeName = this.cloudNode;
-
-    // var pro = new Promise(function (resolve, reject) {
-      //Do some asynchronous operations
-      _thiss.myhttp.createTp(params, cloudNodeName)
-        .subscribe((data) => {
-          if(data["status"]=="SUCCESS"){
-            _thiss.createCloudLinks(time)
-          }
-        }, (err) => {
-          // reject(err);
-          console.log(err);
-        // });
-    });
-    // return pro;
-  }
-
-  createCloudLinks(time) {
-    let _thiss = this;
-    let params={
-      "logical-link": {
-        "link-name": this.linkName,
-        "link-type": "cross-link",
-        "operational-status": "up",
-        "relationship-list": {
-          "relationship": [
-            {
-              "related-to": "p-interface",
-              "related-link": "/aai/v13/network/pnfs/pnf/"+ this.selectedNode1 +"/p-interfaces/p-interface/" + this.selecteTpName1,
-            },
-            {
-              "related-to": "p-interface",
-              "related-link": "/aai/v13/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/"+ this.cloudTp,
-            },
-            {
-              "related-to": "ext-aai-network",
-              "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+ time,
+
+    createPnfs(time) {
+        let _thiss = this;
+        let params= {
+            "pnf": {
+                "pnf-name": this.cloudNode,
+                "pnf-id": this.cloudNode,
+                "in-maint": "true",
+                "relationship-list": {
+                    "relationship": [
+                        {
+                            "related-to": "ext-aai-network",
+                            "relationship-label": "org.onap.relationships.inventory.BelongsTo",
+                            "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+ time,
+                            "relationship-data": {
+                                "relationship-key": "ext-aai-network.aai-id",
+                                "relationship-value":time
+                            }
+                        },
+                        {
+                            "related-to": "network-resource",
+                            "relationship-label": "tosca.relationships.network.LinksTo",
+                            "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork
+                        }
+                    ]
+                }
             }
-          ]
         }
-      }
+
+        // var pro = new Promise(function (resolve, reject) {
+        //Do some asynchronous operations
+        _thiss.myhttp.createPnf(params)
+            .subscribe((data) => {
+                if(data["status"]=="SUCCESS"){
+                    _thiss.createCloudTp(time)
+                }
+            }, (err) => {
+                console.log(err);
+            });
+        // });
+        // return pro;
     }
-    
-    // var pro = new Promise(function (resolve, reject) {
-      //Do some asynchronous operations
-      _thiss.myhttp.createCloudLink(params)
-        .subscribe((data) => {
-          // resolve(data['status']);
-          if(data["status"]=="SUCCESS"){
-            _thiss.queryOutCloudLink();
-          }
-        }, (err) => {
-          // reject(err);
-          console.log(err);
-        });
-    // });
-    // return pro;
-  }
-
-  createCloudUrls(time) {
-    let _thiss = this;
-    let params={
-      "ext-aai-network": {
-        "aai-id":this.cloudNetwork + time,
-        "esr-system-info": {
-          "esr-system-info-id": "example-esr-system-info-id-val-0",
-          "service-url": this.cloudUrl,
-          "user-name": "demo",
-          "password": "demo123456!",
-          "system-type": "ONAP"
-        }
-      }
+
+    createCloudTp(time) {
+        let _thiss = this;
+        let params= {
+            "p-interface": {
+                "interface-name": this.cloudTp,
+                "speed-value": "1000000",
+                "in-maint": "true",
+                "network-ref": "",
+                "transparent": "true",
+                "operational-status": "up"
+            }
+        };
+
+        let cloudNodeName = this.cloudNode;
+
+        // var pro = new Promise(function (resolve, reject) {
+        //Do some asynchronous operations
+        _thiss.myhttp.createTp(params, cloudNodeName)
+            .subscribe((data) => {
+                if(data["status"]=="SUCCESS"){
+                    _thiss.createCloudLinks(time)
+                }
+            }, (err) => {
+                // reject(err);
+                console.log(err);
+                // });
+            });
+        // return pro;
     }
-    
-    // var pro = new Promise(function (resolve, reject) {
-      //Do some asynchronous operations
-      _thiss.myhttp.createCloudUrl(params)
-        .subscribe((data) => {
-          if(data["status"]=="SUCCESS"){
-            console.log(true);
-            _thiss.createCloudNetwork(time);
-          }
-          // resolve(data['status']);
-        }, (err) => {
-          // reject(err);
-          console.log(err);
-        });
-    // });
-    // return pro;
-  }
-
-  //Local cloud TP port Delete connection Call interface deleteLink
-  delLink(): void {
-    let deltp1 = this.delTp1,
-      deltp2 = this.delTp2,
-      version = this.delVersion,
-      dellinkname = this.delLinkname,
-      delLinkIndex = this.delLinkIndex;
-    let params = {
-      'logical-link': dellinkname,
-      'resource-version': version,
-    };
-    this.myhttp.deleteLink(params)
-      .subscribe((data) => {
-        if (data['status'] == 'SUCCESS') {
-          this.delLine(deltp1, deltp2);
-          delLinkIndex.remove();
+
+    createCloudLinks(time) {
+        let _thiss = this;
+        let params={
+            "logical-link": {
+                "link-name": this.linkName,
+                "link-type": "cross-link",
+                "operational-status": "up",
+                "relationship-list": {
+                    "relationship": [
+                        {
+                            "related-to": "p-interface",
+                            "related-link": "/aai/v13/network/pnfs/pnf/"+ this.selectedNode1 +"/p-interfaces/p-interface/" + this.selecteTpName1,
+                        },
+                        {
+                            "related-to": "p-interface",
+                            "related-link": "/aai/v13/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/"+ this.cloudTp,
+                        },
+                        {
+                            "related-to": "ext-aai-network",
+                            "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+ time,
+                        }
+                    ]
+                }
+            }
         }
-      }, (err) => {
-        console.log(err);
-        console.log('Deleting a connection interface call failed');
-      });
-  }
-
-  delLine(val1, val2) {
-    this.delBoxisVisible = false;
-    for (let i = 0; i < $(".node").length; i++) {
-      if ($('.node').eq(i).find('text').html() == val1) {
-        $('.node').eq(i).hide();
-      }
-      if ($('.node').eq(i).find('text').html() == val2) {
-        $('.node').eq(i).hide();
-      }
+
+        // var pro = new Promise(function (resolve, reject) {
+        //Do some asynchronous operations
+        _thiss.myhttp.createCloudLink(params)
+            .subscribe((data) => {
+                // resolve(data['status']);
+                if(data["status"]=="SUCCESS"){
+                    _thiss.queryOutCloudLink();
+                }
+            }, (err) => {
+                // reject(err);
+                console.log(err);
+            });
+        // });
+        // return pro;
     }
-  }
-
-
-  //External cloud Delete connection Call interface deleteCloudLink
-  delCloudLink(): void {
-    let deltp1 = this.delTp1,
-      deltp2 = this.delTp2,
-      version = this.delVersion,
-      aaiId=this.aaiId;
-    let params = {
-      "aaiId": aaiId,
-      "version": version,
-    };
-    this.myhttp.deleteLink(params)
-      .subscribe((data) => {
-        console.log(data);
-        if (data['status'] == 'SUCCESS') {
-          console.log('delete');
-          this.delLine(deltp1, deltp2);
-          $('.cloudline').remove();
+
+    createCloudUrls(time) {
+        let _thiss = this;
+        let params={
+            "ext-aai-network": {
+                "aai-id":this.cloudNetwork + time,
+                "esr-system-info": {
+                    "esr-system-info-id": "example-esr-system-info-id-val-0",
+                    "service-url": this.cloudUrl,
+                    "user-name": "demo",
+                    "password": "demo123456!",
+                    "system-type": "ONAP"
+                }
+            }
+        };
+
+        // var pro = new Promise(function (resolve, reject) {
+        //Do some asynchronous operations
+        _thiss.myhttp.createCloudUrl(params)
+            .subscribe((data) => {
+                if(data["status"]=="SUCCESS"){
+                    console.log(true);
+                    _thiss.createCloudNetwork(time);
+                }
+                // resolve(data['status']);
+            }, (err) => {
+                // reject(err);
+                console.log(err);
+            });
+        // });
+        // return pro;
+    }
+
+    //Local cloud TP port Delete connection Call interface deleteLink
+    delLink(): void {
+        let deltp1 = this.delTp1,
+            deltp2 = this.delTp2,
+            version = this.delVersion,
+            dellinkname = this.delLinkname,
+            delLinkIndex = this.delLinkIndex;
+        let params = {
+            'logical-link': dellinkname,
+            'resource-version': version,
+        };
+        this.myhttp.deleteLink(params)
+            .subscribe((data) => {
+                if (data['status'] == 'SUCCESS') {
+                    this.delLine(deltp1, deltp2);
+                    delLinkIndex.remove();
+                }
+            }, (err) => {
+                console.log(err);
+                console.log('Deleting a connection interface call failed');
+            });
+    }
+
+    delLine(val1, val2) {
+        this.delBoxisVisible = false;
+        for (let i = 0; i < $(".node").length; i++) {
+            if ($('.node').eq(i).find('text').html() == val1) {
+                $('.node').eq(i).hide();
+            }
+            if ($('.node').eq(i).find('text').html() == val2) {
+                $('.node').eq(i).hide();
+            }
         }
-      }, (err) => {
-        console.log(err);
-        console.log('Deleting a connection interface call failed');
-      });
-  }
+    }
+
+
+    //External cloud Delete connection Call interface deleteCloudLink
+    delCloudLink(): void {
+        let deltp1 = this.delTp1,
+            deltp2 = this.delTp2,
+            version = this.delVersion,
+            aaiId=this.aaiId;
+        let params = {
+            "aaiId": aaiId,
+            "version": version,
+        };
+        this.myhttp.deleteLink(params)
+            .subscribe((data) => {
+                console.log(data);
+                if (data['status'] == 'SUCCESS') {
+                    console.log('delete');
+                    this.delLine(deltp1, deltp2);
+                    $('.cloudline').remove();
+                }
+            }, (err) => {
+                console.log(err);
+                console.log('Deleting a connection interface call failed');
+            });
+    }
 
 }
diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/networkHttpservice.service.ts
index 63b70ea8..0c86040a 100644
--- a/usecaseui-portal/src/app/networkHttpservice.service.ts
+++ b/usecaseui-portal/src/app/networkHttpservice.service.ts
@@ -1,3 +1,18 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    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.
+*/
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 
@@ -5,98 +20,98 @@ import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/comm
 @Injectable()
 export class networkHttpservice {
 
-  constructor(private http:HttpClient) { }
+    constructor(private http:HttpClient) { }
 
-  // baseUrl = "./assets/json/";//Local environment
-  // url={
-  //   "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
-  //   "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
-  //   "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
-  //   "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
-  //   "createLink":this.baseUrl + "status.json",
-  //   "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
-  //   "queryCloudUrl":this.baseUrl + "url.json",
-  //   "createNetwrok":this.baseUrl + "status.json",
-  //   "createPnf":this.baseUrl + "status.json",
-  //   "createTp":this.baseUrl + "status.json",
-  //   "createCloudLink":this.baseUrl + "status.json",
-  //   "createCloudUrl":this.baseUrl + "status.json",
-  //   "deleteLink":this.baseUrl + "status.json",
-  // };
-  // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//Online environment
-  // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//Online environment
-  baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//Online environment
-  url={
-    "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
-    "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
-    "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
-    "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
-    "createLink":this.baseUrl + "createLink/",
-    "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
-    "queryCloudUrl":this.baseUrl + "getHostUrl/",
-    "createNetwrok":this.baseUrl + "createTopoNetwork/",
-    "createPnf":this.baseUrl + "createPnf/",
-    "createTp":this.baseUrl + "pnf/",
-    "createCloudLink":this.baseUrl + "createLink/",
-    "createCloudUrl":this.baseUrl + "createHostUrl/",
-    "deleteLink":this.baseUrl + "deleteLink/",
-    "deleteCloud":this.baseUrl+"deleteExtNetWork"
-  };
-  //d3data
-  getNetworkD3Data(){
-    return this.http.get<any>(this.url["getNetworkD3Data"]);
-  }
-  //Initialize the connection logical-links
-  getLogicalLinksData(){
-    return this.http.get<any>(this.url["getLogicalLinksData"]);
-  }
-  //Query the tp data corresponding to the specified node
-  getPInterfacesData1(paramsObj){
-    return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
-  }
-  getPInterfacesData2(paramsObj){
-    return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
-  }
-  //Create a connection interface
-  createLink(paramsObj){
-    return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
-  }
-  //Query the specified single cable interface
-  querySpecificLinkInfo(paramsObj){
-    return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
-  }
-  //Query external cloud host this.url address interface
-  queryCloudUrl(aaiId){
-    return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
-  }
-  //Create an external cloud newwork interface
-  createNetwrok(paramsObj){
-    return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-resource"][0]["network-id"],paramsObj);
-  }
-  //Create an external cloud pnf interface
-  createPnf(paramsObj){
-    return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
-  }
-  //Create an external cloud Tp interface
-  createTp(paramsObj,cloudNodeName){
-    let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
-    return this.http.put<any>(this.url["createTp"]+str,paramsObj);
-  }
-  //Create an external cloud link interface
-  createCloudLink(paramsObj){
-    return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
-  }
-  //Create an external cloud host url interface
-  createCloudUrl(paramsObj){
-    return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
-  }
-  //Delete connection
-  deleteLink(paramsObj){
-    let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
-    return this.http.delete<any>((this.url["deleteLink"]+str));
-  }
-  deleteCloudLink(paramsObj){
-    let str="?extNetworkId="+paramsObj["aaiId"]+"&resourceVersion="+paramsObj["version"];
-    return this.http.delete<any>((this.url["deleteCloud"]+str));
-  }
+    // baseUrl = "./assets/json/";//Local environment
+    // url={
+    //   "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
+    //   "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
+    //   "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
+    //   "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
+    //   "createLink":this.baseUrl + "status.json",
+    //   "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
+    //   "queryCloudUrl":this.baseUrl + "url.json",
+    //   "createNetwrok":this.baseUrl + "status.json",
+    //   "createPnf":this.baseUrl + "status.json",
+    //   "createTp":this.baseUrl + "status.json",
+    //   "createCloudLink":this.baseUrl + "status.json",
+    //   "createCloudUrl":this.baseUrl + "status.json",
+    //   "deleteLink":this.baseUrl + "status.json",
+    // };
+    // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//Online environment
+    // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//Online environment
+    baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//Online environment
+    url={
+        "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
+        "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
+        "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
+        "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
+        "createLink":this.baseUrl + "createLink/",
+        "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
+        "queryCloudUrl":this.baseUrl + "getHostUrl/",
+        "createNetwrok":this.baseUrl + "createTopoNetwork/",
+        "createPnf":this.baseUrl + "createPnf/",
+        "createTp":this.baseUrl + "pnf/",
+        "createCloudLink":this.baseUrl + "createLink/",
+        "createCloudUrl":this.baseUrl + "createHostUrl/",
+        "deleteLink":this.baseUrl + "deleteLink/",
+        "deleteCloud":this.baseUrl+"deleteExtNetWork"
+    };
+    //d3data
+    getNetworkD3Data(){
+        return this.http.get<any>(this.url["getNetworkD3Data"]);
+    }
+    //Initialize the connection logical-links
+    getLogicalLinksData(){
+        return this.http.get<any>(this.url["getLogicalLinksData"]);
+    }
+    //Query the tp data corresponding to the specified node
+    getPInterfacesData1(paramsObj){
+        return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
+    }
+    getPInterfacesData2(paramsObj){
+        return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
+    }
+    //Create a connection interface
+    createLink(paramsObj){
+        return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
+    }
+    //Query the specified single cable interface
+    querySpecificLinkInfo(paramsObj){
+        return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
+    }
+    //Query external cloud host this.url address interface
+    queryCloudUrl(aaiId){
+        return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
+    }
+    //Create an external cloud newwork interface
+    createNetwrok(paramsObj){
+        return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-resource"]["network-id"],paramsObj);
+    }
+    //Create an external cloud pnf interface
+    createPnf(paramsObj){
+        return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf"]["pnf-name"],paramsObj);
+    }
+    //Create an external cloud Tp interface
+    createTp(paramsObj,cloudNodeName){
+        let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["p-interface"]["interface-name"]+"/createTerminationPoint";
+        return this.http.put<any>(this.url["createTp"]+str,paramsObj);
+    }
+    //Create an external cloud link interface
+    createCloudLink(paramsObj){
+        return this.http.put<any>(this.url["createCloudLink"]+paramsObj["logical-link"]["link-name"],paramsObj);
+    }
+    //Create an external cloud host url interface
+    createCloudUrl(paramsObj){
+        return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["ext-aai-network"]["aai-id"],paramsObj);
+    }
+    //Delete connection
+    deleteLink(paramsObj){
+        let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
+        return this.http.delete<any>((this.url["deleteLink"]+str));
+    }
+    deleteCloudLink(paramsObj){
+        let str="?extNetworkId="+paramsObj["aaiId"]+"&resourceVersion="+paramsObj["version"];
+        return this.http.delete<any>((this.url["deleteCloud"]+str));
+    }
 }