diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts')
| -rw-r--r-- | usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts | 2324 |
1 files changed, 1163 insertions, 1161 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'); + }); + } } |