thisNg.getD3Data();
- //本地云TP端口断开连线 ，直接点击线可删除连线
- $('#tpContainer').on('click', '.line-local', function () {
+ //本地云TP端口连线，点击右侧展开详情
+ $('#tpContainer').on('click', '.line-port', function () {
thisNg.isVisible = false;
thisNg.delBoxisVisible = true;
thisNg.delcloud = false;
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++) {//判断两个tp端口分别属于哪个Domain network
if (dataD3[p]['name'] == thisNg.delTp1) {
thisNg.delNetwork2 = thisNg.network[1];
});
- //外部云 断开连线 ，直接点击线可删除连线
+ //外部云连线 ，点击右侧展开详情
$('#tpContainer').on('click', '.cloudline', function () {
thisNg.isVisible = false;
thisNg.delBoxisVisible = true;
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.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);
+ thisNg.aaiId = $(this).attr('data-aaiid');
+ thisNg.getCloudUrl(thisNg.aaiId, thisNg);
});
}
d3Data = [];//D3渲染需要的数据
logicalLinks = [];//logicalLinks接口返回的已有的连线数据
- linkName=null;//连线的名字link-name
+ linkName = null;//连线的名字link-name
networkOption = [];//表单network下拉选框填充的数据
nodeOption1 = {};//node下拉选框填充的数据
tpOption1 = [];//node下拉选框填充的数据
cloudNetwork = null;//外部云network名称
cloudNode = null;//外部云Node名称
cloudTp = null;//外部云Tp名称
- dataCloud=[];//外部云的信息
- dataCloudLink=[];
- aaiId="";
- charge=-200;
+
+ dataCloud = [];//外部云的信息
+ dataCloudLink = [];
+ aaiId = '';
+
//删除连线时 右侧框显示的数据
- delLinkname=null;
+ delLinkname = null;
delNetwork1 = null;
delNode1 = null;
delTp1 = null;
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',
+ '1': './assets/images/cloud-county1.png',
+ '2': './assets/images/cloud-city1.png',
+ '3': './assets/images/cloud-out.png',
};
tpoption = {
container: '#tpContainer',
hideForm(): void {
this.isVisible = false;
this.delBoxisVisible = false;
- this.linkName=null;
+ this.linkName = null;
this.networkVal1 = null;//初始化network1下拉框默认数据
this.networkVal2 = null;//初始化network2下拉框默认数据
this.selectedNode1 = null;//初始化node1下拉框默认数据
this.selectedNode2 = null;//初始化node2下拉框默认数据
this.selecteTpName1 = null;//初始化TP1下拉框默认数据
this.selecteTpName2 = null;//初始化TP2下拉框默认数据
- // this.localUrl=null;//本地云URL地址
this.cloudUrl = null;//外部云URL地址
this.cloudNetwork = null;//外部云network名称
this.cloudNode = null;//外部云Node名称
this.cloudTp = null;//外部云Tp名称
}
-
- tpName=null;
- tpNameStyle = {
- 'display':'none',
- 'left':'0',
- 'top':'0'
- };
- showtp($event,item){
- console.log(111111111)
- this.tpName = item;
- this.tpNameStyle.display = 'block';
- }
- movetp($event,item){
- this.tpNameStyle.left = $event.clientX + "px";
- this.tpNameStyle.top = $event.clientY - 35 + "px";
- }
- hidetp($event){
- this.tpNameStyle.display = 'none';
- }
-
//获取云图数据
getD3Data() {
this.myhttp.getNetworkD3Data()
.subscribe((data) => {
- if(data.length==0){
+ if (data.length == 0) {
this.addLinkDisabled = false;
return;
- };
- for(let ii=0;ii<data.length;ii++){
- if(data[ii]["aaiId"]!=""){
- this.dataCloud=data.splice(ii,1)
+ }
+ for (let ii = 0; ii < data.length; ii++) {//判断数据里是否有外部云信息，有就踢出来
+ if (data[ii]['aaiId'] != null) {
+ this.dataCloud = data.splice(ii, 1);
}
}
+
for (var i = 0; i < data.length; i++) {
let name1 = {}, name2 = {};
let nodess = [];
}
this.networkOption.push(name2);
}
- console.log(this.networkOption)
+ 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++) {
this.d3Data[b]['target'] = b;
}
this.initPosition(this.d3Data);
- setTimeout(this.render(this.d3Data, this.imgmap,this.dataCloud,this.charge,data),0)
+ // setTimeout(this.render(this.d3Data, this.imgmap, this.dataCloud, this.charge, data), 0);
}, (err) => {
console.log(err);
});
getLinksData() {
this.myhttp.getLogicalLinksData()
.subscribe((data) => {
- console.log(data["status"])
if (data["status"]=="FAILED") {
return;
}
- for (let i = 0; i < data["logical-link"].length; i++) {
- 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++) {//判断获取的连线里书否存在外部云连线，有就踢出来
+ if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) {
+ this.dataCloudLink = data['logical-link'].splice(i, 1);
+ }
}
- console.log(this.dataCloudLink)
+
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
this.logicalLinks.push(textval);
this.chose(textval);
}
- if(this.dataCloudLink.length>0){
- this.getcloudLine(this.dataCloudLink)
+ console.log(this.logicalLinks);
+ if (this.dataCloudLink.length > 0) {
+ this.getcloudLine(this.dataCloudLink);
}
}, (err) => {
console.log(err);
}
//D3云图渲染
- render(nodes, imgmap,dataCloud,charge,dataD3) {
+ render(nodes, imgmap, dataCloud, charge, dataD3) {
var thiss = this;
var _this = this.tpoption,
width = null,
} else {
width = 800;
}
-
- var str="";
- for(var i=0;i<10;i++){
- str+="<div>这是div"+i+"</div>"
- }
-
- if(dataD3.length<=4){
- charge=-850;
- }else if(dataD3.length>4 && dataD3.length<=6) {
- charge=-700;
- }else if(dataD3.length>6 && dataD3.length<=10) {
- charge=-600;
- }else {
- charge=-150;
+ 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;
}
+ console.log(charge);
var svg = d3.select(_this.container).append('svg')
.attr('width', width)
.attr('height', height)
_this.attr('data-text', d.name);
}
});
+
var force = d3.layout.force()
- .size([1000,this.winHeight])
+ .size([1000, this.winHeight])
.linkDistance(5)
- // .theta(0)
+ // .theta(0.6)
.charge(charge)
.nodes(nodes)
.links(nodes)
.start();
- // let distanceMax2=1;
- // force.distanceMax = function(_) {
- // return arguments.length ? (distanceMax2 = _ * _, force) : Math.sqrt(distanceMax2);
- // };
+
//添加拖拽行为
// _g_nodes.call(this.getDragBehavior(force));
-
- force.on('tick', function (d) {
- 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 ;
- });
- if(force.alpha()<=0.1){
-
+ force.on('tick', function () {
+ if (force.alpha() <= 0.04) {
_g_nodes.style('display', function (d) {
-
-
var display = 'block';
switch (d.type) {
case '1':
return display;
});
- _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;
+ 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) {
- // console.log(d)
- // if(d["type"]==1){
- // d["x"]=400;
- // d["y"]=400;
- // }else {
- // d["x"]=d["x"];
- // d["y"]=d["y"]
- // }
- var image = d3.select(this).select('image')[0][0],
- halfWidth = parseFloat(image.attributes[0]['value']) / 2,
- halfHeight = parseFloat(image.attributes[1]['value']) / 2;
-
-
- return 'translate(' + (d.x - halfWidth) + ',' + (d.y - halfHeight) + ')';
- });
-
- _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;
- });
-
+ _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);
+ if (dataCloud.length > 0) {
+ thiss.getoutCloud(dataCloud, imgmap);
}
thiss.getLinksData();
thiss.addLinkDisabled = false;
//初始化节点位置
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);
+ 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;
}
//渲染外部云
- getoutCloud(dataCloud,imgmap) {
+ getoutCloud(dataCloud, imgmap) {
var _this = this,
width;
- let networkId=dataCloud[0]["networkId"];
+ let networkId = dataCloud[0]['networkId'];
if (_this.tpoption.width > 800) {
width = _this.tpoption.width;
} else {
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"];
+ textval[7] = this.dataCloud[0]['networkId'];
console.log(this.dataCloud);
- let dataD3=this.d3Data;
+ let dataD3 = this.d3Data;
for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
- if (dataD3[p]['name'] == textval[0]) {
- textval[8] =dataD3[p]['source']['name'];//network1
+ if (dataD3[p]['name'] == textval[0]) {
+ textval[8] = dataD3[p]['source']['name'];//network1
}
}
- textval[9] =dataCloudLink[0]["link-name"];
-
+ textval[9] = dataCloudLink[0]['link-name'];
let lines_json = {};
var _this = this,
width;
width = 800;
}
for (let i = 0; i < $(".node").length; i++) {
- if ($('.node').eq(i).find('text').html() == textval[0]) {
+ if ($('.node').eq(i).find('text').html() == textval[8]) {
//获取二级的x,y坐标
- $('.node').eq(i).show();
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]);
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';
+ var color = '#14bb58';
+ if (textval[5] == 'up') {
+ color = '#14bb58';
+ } else {
+ color = 'red';
}
- var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+ var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
var svg = d3.select('#graph');
- $(".cloudline").remove();
+ $('.cloudline').remove();
$('#graph').prepend(line);
$('.cloudline').attr({
x1: x1 + 100,
'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]
+ '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());
}
+
//查询外部云host url地址
- getCloudUrl(aaiId,thisNg){
+ getCloudUrl(aaiId, thisNg) {
this.myhttp.queryCloudUrl(aaiId)
.subscribe((data) => {
- thisNg.delcloudUrl=data["service-url"];
+ thisNg.delcloudUrl = data['service-url'];
}, (err) => {
console.log(err);
});
}
this.selecteTpName1 = this.tpOption1[0];
}, (err) => {
- // console.log(err);
+ console.log(err);
});
}
}
this.selecteTpName2 = this.tpOption2[0];
}, (err) => {
- // console.log(err);
+ console.log(err);
});
}
let tp_links = [],
tp1 = this.selecteTpName1,
tp2 = this.selecteTpName2;
- for (let i = 0; i < $(".line-local").length; i++) {
- let data_text1 = $('.line-local').eq(i).attr('data-tp1');
- let data_text2 = $('.line-local').eq(i).attr('data-tp2');
+ 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);
}
} else {
//当页面ONAP选中，即创建外部云，连线
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('æ\9c\8då\8a¡ç«¯å\8f£ä¿¡æ\81¯ä¸\8dè\83½ä¸ºç©ºï¼\8c请填å\86\99å®\8cæ\95´ç\9a\84端å\8f£ä¿¡æ\81¯');
+ alert('服务端口不能为空，请填写完整的端口信息');
return;
}
let tp_links = [],
tp1 = this.selecteTpName1;
- for (let i = 0; i < $(".line-local").length; i++) {
- let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+ 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('此端口号连线已存在！');
return;
}
- Promise
- .all([this.createCloudNetwork(), this.createPnfs(), this.createCloudTp(), this.createCloudLinks()])
- .then(function (results) {
- console.log(results);
- if (results.indexOf('FAIL') == -1) {
- // _thiss.queryOutCloudLink();
- _thiss.outCloudShow = true;
- _thiss.outCloud(_thiss.imgmap);
- setTimeout(_thiss.cloudLine(_thiss.networkVal1, _thiss.selectedNode1, _thiss.selecteTpName1, _thiss.cloudUrl, _thiss.cloudNetwork, _thiss.cloudNode, _thiss.cloudTp, 121211,"up",_thiss.linkName), 0);
- _thiss.hideForm();
- } else {
- console.log('失败');
- }
- });
+ let time = this.cloudNetwork + new Date().getTime();//为外部云创建aaiid，此标识是唯一的，不可重复
+ this.createCloudUrls(time)
+ // Promise
+ // .all([this.createCloudNetwork(time), this.createPnfs(time), this.createCloudTp(time), this.createCloudLinks(time), this.createCloudUrls(time)])
+ // .then(function (results) {
+ // console.log(results);
+ // if (results.indexOf('FAILED') == -1) {
+ // console.log(true);
+ // _thiss.queryOutCloudLink();
+ // // _thiss.outCloudShow = true;
+ // // _thiss.outCloud(_thiss.imgmap);
+ // // setTimeout(_thiss.cloudLine(_thiss.networkVal1, _thiss.selectedNode1, _thiss.selecteTpName1, _thiss.cloudUrl, _thiss.cloudNetwork, _thiss.cloudNode, _thiss.cloudTp, 121211,"up"), 0);
+ // } else {
+ // console.log(false);
+ // }
+ // });
}
}
createTpLinks() {
let params = {
'link-name': this.linkName,
- 'in-maint': false,
'link-type': 'cross-link',
- 'speed-value': '10000',
'operational-status': 'up',
'relationship-list': {
'relationship': [
{
- 'related-to': this.selecteTpName1,
- '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.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': this.selecteTpName2,
- 'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2
+ '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') {
+ if (data['status'] == 'SUCCESS') {
this.queryAddLink();
}
}, (err) => {
- // console.log(err);
- alert('系统忙，连接失败！');
+ console.log(err);
+ console.log('创建连线接口调用失败');
});
}
//创建tp连接线后马上查询新增的连线
queryAddLink() {
- let linkName=this.linkName,
+ let linkName = this.linkName,
selecteTpName1 = this.selecteTpName1,
selecteTpName2 = this.selecteTpName2,
selectedNode1 = this.selectedNode1,
selectedNode2 = this.selectedNode2;
let params = {
- 'link-name': selecteTpName1 + '_' + selecteTpName2,
+ 'link-name': linkName,
};
this.myhttp.querySpecificLinkInfo(params)
.subscribe((data) => {
let version = data['resource-version'],
- operational_status = data['operational-status'];
- let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status,linkName];
+ 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);
- alert('系统忙，连接失败！');
+ console.log(err);
});
}
lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
}
}
-
+ console.log(lines_json);
this.addLine(lines_json);
}
let status = lines.status;
let linkname = lines.linkname;
let x1 = lines.x1;
- let y1 = lines.y1 + 5;
+ let y1 = lines.y1;
let x2 = lines.x2;
- let y2 = lines.y2 + 5;
+ let y2 = lines.y2;
let color = '#14bb58';
if (status == 'up') {
color = '#14bb58';
} else {
color = 'red';
}
- let line = '<line class=\'line line-local \' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+ 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({
'data-version': version,
'data-node1': node1,
'data-node2': node2,
- "data-link":linkname
+ 'data-link': linkname
});
svg.html(svg.html());
}
cloudNetWork = this.cloudNetwork,
cloudNode = this.cloudNode,
cloudTp = this.cloudTp,
- linkname=this.linkName;
+ linkname = this.linkName;
let params = {
'link-name': linkname,
};
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);
+ // setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name), 0);
}, (err) => {
- // console.log(err);
- alert('系统忙，连接失败！');
+ console.log(err);
});
}
}
//新增 外部云连接
- cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name) {
+ cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name) {
let lines_json = {};
var _this = this,
width;
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 color = '#14bb58';
+ if (status == 'up') {
+ color = '#14bb58';
+ } else {
+ color = 'red';
}
- var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+ var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
var svg = d3.select('#graph');
- $(".cloudline").remove();
+ $('.cloudline').remove();
$('#graph').prepend(line);
$('.cloudline').attr({
x1: x1 + 100,
'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
+ 'data-node1': selectedNode1,
+ 'data-node2': cloudNode,
+ 'data-network': networkVal1,
+ 'data-cloudnetwork': cloudNetWork,
+ 'data-url': cloudUrl,
+ 'data-link': link_name
});
svg.html(svg.html());
}
- //创建外部云，连线时调用以下4个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks
- createCloudNetwork() {
+ //创建外部云，连线时调用以下5个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
+ createCloudNetwork(time) {
let _thiss = this;
- let params = {
- 'selflink': this.cloudUrl,
- 'network-id': this.cloudNetwork,
- 'provider-id': '',
- 'client-id': '',
- 'te-topo-id': ''
- };
- var pro = new Promise(function (resolve, reject) {
+ let params =
+ {
+ "network-resource": [
+ {
+ 'network-id': this.cloudNetwork,
+ 'provider-id': '',
+ 'client-id': '',
+ 'te-topo-id': '',
+ '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
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ]
+ };
//做一些异步操作
_thiss.myhttp.createNetwrok(params)
.subscribe((data) => {
- resolve(data["status"]);
+ if(data["status"]=="SUCCESS"){
+ _thiss.createPnfs(time)
+ }
}, (err) => {
console.log(err);
});
- });
- return pro;
+
}
- createPnfs() {
+ createPnfs(time) {
let _thiss = this;
- let params= {
- "pnf-name": this.cloudNode,
- "pnf-id": "",
- "in-maint": "",
- "admin-status": "up",
- "operational-status": "up",
- "relationship-list": {
- "relationship": {
- "related-to": "network-resource",
- "relationship-label": "tosca.relationships.network.LinksTo",
- "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork,
- "relationship-data": {
- "relationship-key": "network-resource.network-id",
- "relationship-value": this.cloudNetwork
+ let params = {
+ 'pnf-name': this.cloudNode,
+ 'pnf-id': '79.79.79.79',
+ 'in-maint': 'true',
+ 'admin-status': 'up',
+ 'operational-status': 'up',
+ 'relationship-list': {
+ 'relationship': [
+ {
+ 'related-to': 'network-resource',
+ 'relationship-label': 'tosca.relationships.network.LinksTo',
+ 'related-link': '/aai/v13/network/network-resources/network-resource/' + this.cloudNetwork,
+ 'relationship-data': [{
+ 'relationship-key': 'network-resource.network-id',
+ 'relationship-value': this.cloudNetwork
+ }]
+ },
+ {
+ '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
+ }]
}
- }
+ ]
}
};
- var pro = new Promise(function (resolve, reject) {
+ // var pro = new Promise(function (resolve, reject) {
//做一些异步操作
- _thiss.myhttp.createNetwrok(params)
+ _thiss.myhttp.createPnf(params)
.subscribe((data) => {
- resolve(data["status"]);
+ if(data["status"]=="SUCCESS"){
+ _thiss.createCloudTp(time)
+ }
}, (err) => {
console.log(err);
});
- });
- return pro;
+ // });
+ // return pro;
}
- createCloudTp() {
+ createCloudTp(time) {
let _thiss = this;
- let params= {
- "interface-name": this.cloudTp,
- "speed-value": "100000",
- "in-maint": "true",
- "network-ref": "",
- "transparent": "",
- "operational-status": "up",
+ let params = {
+ 'interface-name': this.cloudTp,
+ 'speed-value': '100000',
+ 'in-maint': 'true',
+ 'network-ref': '',
+ 'transparent': '',
+ 'operational-status': 'up',
};
- let cloudNodeName=this.cloudNode;
+ let cloudNodeName = this.cloudNode;
- var pro = new Promise(function (resolve, reject) {
+ // var pro = new Promise(function (resolve, reject) {
//做一些异步操作
- _thiss.myhttp.createTp(params,cloudNodeName)
+ _thiss.myhttp.createTp(params, cloudNodeName)
.subscribe((data) => {
- resolve(data["status"]);
+ if(data["status"]=="SUCCESS"){
+ _thiss.createCloudLinks(time)
+ }
}, (err) => {
- // console.log(err);
- });
+ // reject(err);
+ console.log(err);
+ // });
});
- return pro;
+ // return pro;
}
- createCloudLinks() {
+ createCloudLinks(time) {
let _thiss = this;
- let params={
- "link-name": this.linkName,
- "in-maint": "",
- "link-type": "",
- "speed-value": "",
- "relationship-list": {
- "relationship" : [
+ let params = {
+ 'link-name': this.linkName,
+ 'in-maint': '',
+ 'link-type': '',
+ 'speed-value': '',
+ 'operational-status': 'up',
+ 'relationship-list': {
+ 'relationship': [
{
- "related-to": this.selecteTpName1,
- "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.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": this.cloudTp,
- "related-link": "/aai/v13/network/pnfs/pnf/"+this.cloudNode+"/p-interfaces/p-interface/"+this.cloudTp
+ 'related-to': 'p-interface',
+ 'related-link': '/aai/v13/network/pnfs/pnf/' + this.cloudNode + '/p-interfaces/p-interface/' + this.cloudTp,
+ 'relationship-data': [
+ {
+ 'relationship-key': 'pnf.pnf-id',
+ 'relationship-value': this.cloudNode
+ },
+ {
+ 'relationship-key': 'p-interface.p-interface-id',
+ 'relationship-value': this.cloudTp
+ }
+ ]
+ },
+ {
+ '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
+ }
+ ]
}
]
}
};
- var pro = new Promise(function (resolve, reject) {
+ // var pro = new Promise(function (resolve, reject) {
//做一些异步操作
_thiss.myhttp.createCloudLink(params)
.subscribe((data) => {
- resolve(data["status"]);
+ // resolve(data['status']);
+ if(data["status"]=="SUCCESS"){
+ _thiss.queryOutCloudLink();
+ }
}, (err) => {
- // console.log(err);
+ // reject(err);
+ console.log(err);
});
- });
- return pro;
+ // });
+ // return pro;
+ }
+
+ createCloudUrls(time) {
+ let _thiss = this;
+ let params = {
+ 'aai-id': this.cloudNetwork + time,
+ 'esr-system-info': {
+ 'esr-system-info-id': '',
+ 'service-url': this.cloudUrl,
+ 'user-name': '',
+ 'password': '!',
+ 'system-type': 'ONAP'
+ }
+ };
+ // var pro = new Promise(function (resolve, reject) {
+ //做一些异步操作
+ _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;
}
//本地云TP端口 删除连线 调用接口deleteLink
let deltp1 = this.delTp1,
deltp2 = this.delTp2,
version = this.delVersion,
+ dellinkname = this.delLinkname,
delLinkIndex = this.delLinkIndex;
let params = {
- 'logical-link': this.delLinkname,
+ 'logical-link': dellinkname,
'resource-version': version,
};
this.myhttp.deleteLink(params)
.subscribe((data) => {
- if (data["status"] == 'SUCCESS') {
+ if (data['status'] == 'SUCCESS') {
this.delLine(deltp1, deltp2);
- console.log(delLinkIndex)
delLinkIndex.remove();
}
}, (err) => {
console.log(err);
+ console.log('删除连线接口调用失败');
});
}
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();
$('.node').eq(i).hide();
}
}
- this.delBoxisVisible = false;
}
- //外部云 删除连线 调用接口deleteCloudLine
- delCloudLink() : void {
+
+ //外部云 删除连线 调用接口deleteCloudLink
+ delCloudLink(): void {
let deltp1 = this.delTp1,
deltp2 = this.delTp2,
+ dellinkname = this.delLinkname,
version = this.delVersion;
let params = {
- 'logical-link': this.delLinkname,
+ 'logical-link': dellinkname,
'resource-version': version,
};
this.myhttp.deleteLink(params)
.subscribe((data) => {
- console.log(data)
- if (data["status"] == 'SUCCESS') {
+ console.log(data);
+ console.log(typeof data);
+ if (data['status'] == 'SUCCESS') {
+ console.log('删除成功');
this.delLine(deltp1, deltp2);
$('.cloudline').remove();
}
}, (err) => {
console.log(err);
+ console.log('删除连线接口调用失败');
});
}
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
-interface tablelist {
- total:number,
- list:Object[]
-}
-interface d3list {
- total:number,
- list:Object[]
-}
@Injectable()
export class networkHttpservice {
constructor(private http:HttpClient) { }
- baseUrl = "./assets/json/";
- // list表格数据
- getInstanceTableData(paramsObj){
- let url = this.baseUrl + "instanceTableData.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<tablelist>(url,{params});
- }
+ // baseUrl = "./assets/json/";//本地环境
+ // url={
+ // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
+ // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
+ // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
+ // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
+ // "createLink":this.baseUrl + "status.json",
+ // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
+ // "queryCloudUrl":this.baseUrl + "url.json",
+ // "createNetwrok":this.baseUrl + "status.json",
+ // "createPnf":this.baseUrl + "status.json",
+ // "createTp":this.baseUrl + "status.json",
+ // "createCloudLink":this.baseUrl + "status.json",
+ // "createCloudUrl":this.baseUrl + "status.json",
+ // "deleteLink":this.baseUrl + "status.json",
+ // };
+ // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境
+ // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境
+ baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境
+ url={
+ "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
+ "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
+ "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
+ "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
+ "createLink":this.baseUrl + "createLink/",
+ "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
+ "queryCloudUrl":this.baseUrl + "getHostUrl/",
+ "createNetwrok":this.baseUrl + "createTopoNetwork/",
+ "createPnf":this.baseUrl + "createPnf/",
+ "createTp":this.baseUrl + "pnf/",
+ "createCloudLink":this.baseUrl + "createLink/",
+ "createCloudUrl":this.baseUrl + "createHostUrl/",
+ "deleteLink":this.baseUrl + "deleteLink/",
+ };
//d3数据
getNetworkD3Data(){
- let url = this.baseUrl + "netWorkD3Data.json";
- // let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url);
+ return this.http.get<any>(this.url["getNetworkD3Data"]);
}
//初始化连线 logical-links
getLogicalLinksData(){
- let url = this.baseUrl + "LogicalLinksData.json";
- // let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url);
+ return this.http.get<any>(this.url["getLogicalLinksData"]);
}
//查询指定的node对应的tp数据
getPInterfacesData1(paramsObj){
- let url = this.baseUrl + "p_interfaces1.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
}
getPInterfacesData2(paramsObj){
- let url = this.baseUrl + "p_interfaces2.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
}
//创建连线接口
createLink(paramsObj){
- let url = this.baseUrl+ "status.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
}
//查询指定的单个连接线 接口
querySpecificLinkInfo(paramsObj){
- let url = this.baseUrl+ "specific_link _nfo.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
}
-
//查询 外部云host this.url地址 接口
- queryCloudUrl(paramsObj){
- let url = this.baseUrl+ "url.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ queryCloudUrl(aaiId){
+ return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
}
-
//创建外部云newwork接口
createNetwrok(paramsObj){
- let url = this.baseUrl+ "status.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-resource"][0]["network-id"],paramsObj);
}
//创建外部云pnf接口
createPnf(paramsObj){
- let url = this.baseUrl+ "status.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
}
//创建外部云Tp接口
createTp(paramsObj,cloudNodeName){
- console.log(cloudNodeName)
- let url = this.baseUrl+ "status.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
+ return this.http.put<any>(this.url["createTp"]+str,paramsObj);
}
//创建外部云link接口
createCloudLink(paramsObj){
- let url = this.baseUrl+ "status.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
+ }
+ //创建外部云host url接口
+ createCloudUrl(paramsObj){
+ return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
}
//删除连线
deleteLink(paramsObj){
- let url = this.baseUrl+ "status.json";
- let params = new HttpParams({fromObject:paramsObj});
- return this.http.get<any>(url,{params});
+ let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
+ return this.http.delete<any>((this.url["deleteLink"]+str));
}
}
Code Review / usecase-ui.git / commitdiff