/*
Copyright (C) 2019 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 { Component, EventEmitter, OnInit, Output } from '@angular/core';
import * as d3 from 'd3';
import * as $ from 'jquery';
import { networkHttpservice } from '../../core/services/networkHttpservice.service';
@Component({
selector: 'app-ccvpn-network',
templateUrl: './ccvpn-network.component.html',
styleUrls: ['./ccvpn-network.component.css']
})
export class CcvpnNetworkComponent implements OnInit {
constructor(private myhttp: networkHttpservice) {
}
ngOnInit() {
let 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);
});
}
addLinkDisabled = true;
nonetwork = false;
isVisible = false;
outCloudShow = false;
inputshow = false;
delBoxisVisible = false;
isSpinning = true;
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 = $('#tpContainer').width();
winHeight = $('#tpContainer').height();
charge = -300;
imgmap = {
'1': 'assets/images/cloud-county1.png',
'2': 'assets/images/tp.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;
}
}
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.isSpinning = true;
this.myhttp.getNetworkD3Data()
.subscribe((data) => {
this.isSpinning = false;
if (data.length == 0) {
this.addLinkDisabled = false;
this.nonetwork = true;
return;
}
this.nonetwork = false;
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 (let 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);
}
for (let i = 0; i < data.length; i++) {
let tp_length = data[i]['tps'].length;
for (let 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);
}
if (this.dataCloudLink.length > 0) {
this.getcloudLine(this.dataCloudLink);
}
}, (err) => {
console.log(err);
});
}
//D3Cloud rendering
render(nodes, imgmap, dataCloud, charge, dataD3) {
let thiss = this;
let _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;
}
let svg = d3.select(_this.container).append('svg')
.attr('width', width)
.attr('height', height)
.attr('id', 'content-svg')
.style('pointer-events', 'all')
.style('position', 'absolute')
.style('top', '1%')
.style('right', '2%'),
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) {
let 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) {
let 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) {
let 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) {
let x = null;
let 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) {
let size = 14;
switch (d.type) {
case '1':
size = 14;
break;
case '2':
size = 12;
break;
default:
break;
}
return size;
})
.style('fill', function (d) {
let 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) {
let _this = d3.select(this);
if (d.name) {
_this.attr('data-text', d.name);
}
});
let force = d3.layout.force()
.size([1000, this.winHeight])
.linkDistance(5)
// .theta(0.6)
.charge(charge)
.nodes(nodes)
.links(nodes)
.start();
force.on('tick', function () {
if (force.alpha() <= 0.04) {
_g_nodes.style('display', function (d) {
let 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;
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) {
let 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();
}
function dragging(d) {
d.x = d3.event.x;
d.y = d3.event.y;
}
function dragend(d) {
d3.select(this).classed('dragging', false);
}
}
//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;
let ox = origin[0];
let oy = origin[1];
let angle = 30 * n / n;
let i = 0;
let points = [];
let 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) {
let _this = this,
width;
let networkId = dataCloud[0]['networkId'];
if (_this.tpoption.width > 800) {
width = _this.tpoption.width;
} else {
width = 800;
}
let svg = d3.select('#content-svg');
svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)');
let 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'];
let dataD3 = this.d3Data;
let arr = [
textval[0],
textval[1]
];
for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
for (let pp = 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to
if (dataD3[p]['name'] == arr[pp]) {
textval[8] = dataD3[p]['source']['name'];//network1
}
}
}
textval[9] = dataCloudLink[0]['link-name'];
let lines_json = {};
let _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() == textval[8]) {
//Get the x, y coordinates of the second level
let 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;
}
}
let x1 = lines_json['x1'];
let y1 = lines_json['y1'];
let x2 = lines_json['x2'];
let y2 = lines_json['y2'];
let color = '#14bb58';
if (textval[5] == 'up') {
color = '#14bb58';
} else {
color = 'red';
}
let line = '';
let 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());
this.getCloudUrl(textval[6]);
this.getExtAAIIdVersion(textval[6]);
}
//Query external cloud host url address
getCloudUrl(aaiId) {
this.myhttp.queryCloudUrl(aaiId)
.subscribe((data) => {
this.delcloudUrl = data['service-url'];
$('.cloudline').attr({
'data-url': data['service-url']
});
}, (err) => {
console.log(err);
});
}
//Query external cloud ext-aai-id resource-version
getExtAAIIdVersion(aaiId) {
this.myhttp.queryExtAAIIdVersion(aaiId)
.subscribe((data) => {
this.delVersion = data["resource-version"];
$('.cloudline').attr({
'data-version': data["resource-version"],
});
}, (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);
}
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
let _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)
}
}
//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/v14/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/v14/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');
});
}
//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];
this.hideForm();
this.chose(textval);
}, (err) => {
console.log(err);
});
}
//Connection between two TP coordinates
chose(textval) {
let 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
let 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();
let 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.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 = '';
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(time) {
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 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, status, link_name, time), 0);
}, (err) => {
console.log(err);
});
}
//Add external cloud
outCloud(imgmap) {
let _this = this,
width;
if (_this.tpoption.width > 800) {
width = _this.tpoption.width;
} else {
width = 800;
}
let svg = d3.select('#content-svg');
svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)');
let 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, status, link_name, time) {
let lines_json = {};
let _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
let 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;
}
}
let x1 = lines_json['x1'];
let y1 = lines_json['y1'];
let x2 = lines_json['x2'];
let y2 = lines_json['y2'];
let color = '#14bb58';
if (status == 'up') {
color = '#14bb58';
} else {
color = 'red';
}
let line = '';
let 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-node1': selectedNode1,
'data-node2': cloudNode,
'data-network': networkVal1,
'data-cloudnetwork': cloudNetWork,
'data-url': cloudUrl,
'data-aaiid': time,
'data-link': link_name
});
svg.html(svg.html());
this.getExtAAIIdVersion(time);
}
//Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
createCloudNetwork(time) {
let _thiss = this;
let params = {
'-xmlns': 'http://org.onap.aai.inventory/v14',
'in-maint': 'false',
"network-id": this.cloudNetwork,
"provider-id": "",
"client-id": "",
"te-topo-id": "",
"relationship-list": {
"relationship": [{
"related-to": "ext-aai-network",
'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time
}]
}
};
//Do some asynchronous operations
_thiss.myhttp.createNetwrok(params)
.subscribe((data) => {
if (data["status"] == "SUCCESS") {
_thiss.createPnfs(time)
}
}, (err) => {
console.log(err);
});
}
createPnfs(time) {
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
"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/v14/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/v14/network/network-resources/network-resource/" + this.cloudNetwork
}
]
}
};
//Do some asynchronous operations
_thiss.myhttp.createPnf(params)
.subscribe((data) => {
if (data["status"] == "SUCCESS") {
_thiss.createCloudTp(time)
}
}, (err) => {
console.log(err);
});
}
createCloudTp(time) {
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
"interface-name": this.cloudTp,
"speed-value": "1000000",
"in-maint": "true",
"network-ref": "",
"transparent": "true",
"operational-status": "up"
};
let cloudNodeName = this.cloudNode;
//Do some asynchronous operations
_thiss.myhttp.createTp(params, cloudNodeName)
.subscribe((data) => {
if (data["status"] == "SUCCESS") {
_thiss.createCloudLinks(time)
}
}, (err) => {
console.log(err);
});
}
createCloudLinks(time) {
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
"link-name": this.linkName,
"in-maint": "false",
"link-type": "cross-link",
"speed-value": "",
"operational-status": "up",
"relationship-list": {
"relationship": [
{
"related-to": "p-interface",
"relationship-label": "tosca.relationships.network.LinksTo",
"related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1,
"relationship-data": [
{
"relationship-key": "pnf.pnf-name",
"relationship-value": this.selectedNode1
},
{
"relationship-key": "p-interface.interface-name",
"relationship-value": this.selecteTpName1
}
],
"related-to-property": [{
"property-key": "p-interface.prov-status"
}]
},
{
"related-to": "p-interface",
"relationship-label": "tosca.relationships.network.LinksTo",
"related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp,
"relationship-data": [
{
"relationship-key": "pnf.pnf-name",
"relationship-value": this.cloudNode
},
{
"relationship-key": "p-interface.interface-name",
"relationship-value": this.cloudTp
}
],
"related-to-property": [{
"property-key": "p-interface.prov-status"
}]
},
{
"related-to": "ext-aai-network",
"relationship-label": "org.onap.relationships.inventory.BelongsTo",
"related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
"relationship-data": [
{
"relationship-key": "ext-aai-network.aai-id",
"relationship-value": time
}
]
}
]
}
};
//Do some asynchronous operations
_thiss.myhttp.createCloudLink(params)
.subscribe((data) => {
// resolve(data['status']);
if (data["status"] == "SUCCESS") {
_thiss.queryOutCloudLink(time);
}
}, (err) => {
console.log(err);
});
}
createCloudUrls(time) {
let _thiss = this;
let params = {
'-xmlns': 'http://org.onap.aai.inventory/v14',
'aai-id': 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'
}
};
_thiss.myhttp.createCloudUrl(params)
.subscribe((data) => {
if (data['status'] == 'SUCCESS') {
_thiss.createCloudNetwork(time);
}
}, (err) => {
console.log(err);
});
}
//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();
}
}
}
//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.deleteCloudLink(params)
.subscribe((data) => {
if (data['status'] == 'SUCCESS') {
this.delLine(deltp1, deltp2);
$('.cloudline').remove();
$('#out').remove();
}
}, (err) => {
console.log(err);
console.log('Deleting a connection interface call failed');
});
}
}