}
ngOnInit() {
- var thisNg = this;
+ let thisNg = this;
thisNg.getD3Data();
}
}
- for (var i = 0; i < data.length; i++) {
+ for (let i = 0; i < data.length; i++) {
let name1 = {}, name2 = {};
let nodess = [];
name1['name'] = name2['network'] = data[i]['networkId'];
this.networkOption.push(name2);
}
console.log(this.networkOption);
- for (var i = 0; i < data.length; i++) {
+ for (let i = 0; i < data.length; i++) {
let tp_length = data[i]['tps'].length;
- for (var h = 0; h < tp_length; h++) {
+ for (let h = 0; h < tp_length; h++) {
let name2 = {};
let interface_name = data[i]['tps'][h]['interface-name'];
name2['name'] = interface_name;
//D3Cloud rendering
render(nodes, imgmap, dataCloud, charge, dataD3) {
- var thiss = this;
- var _this = this.tpoption,
+ let thiss = this;
+ let _this = this.tpoption,
width = null,
height = _this.height;
- console.log(height);
if (_this.width > 800) {
width = _this.width;
} else {
} else {
charge = -100;
}
- console.log(charge);
- var svg = d3.select(_this.container).append('svg')
+ let svg = d3.select(_this.container).append('svg')
.attr('width', width)
.attr('height', height)
.attr('id', 'content-svg')
.enter()
.append('g')
.style('display', function (d) {
- var display = 'block';
+ let display = 'block';
switch (d.type) {
case '1':
display = 'none';
_g_nodes.append('image')
.attr('width', function (d) {
- var width = 40;
+ let width = 40;
switch (d.type) {
case '1':
width = 4.4 * width;
return width;
})
.attr('height', function (d) {
- var height = 20;
+ let height = 20;
switch (d.type) {
case '1':
height = 3.5 * height;
return d.name;
})
.style('transform', function (d) {
- var x = null;
- var y = null;
+ let x = null;
+ let y = null;
switch (d.type) {
case '1':
x = 7;
return 'translate(' + x + '%,' + y + '%)';
})
.style('font-size', function (d) {
- var size = 14;
+ let size = 14;
switch (d.type) {
case '1':
size = 14;
return size;
})
.style('fill', function (d) {
- var color = '#666';
+ let color = '#666';
switch (d.type) {
case '1':
color = '#666';
//Add custom attributes online
_g_lines.each(function (d, i) {
- var _this = d3.select(this);
+ let _this = d3.select(this);
if (d.name) {
_this.attr('data-text', d.name);
}
});
- var force = d3.layout.force()
+ let force = d3.layout.force()
.size([1000, this.winHeight])
.linkDistance(5)
// .theta(0.6)
.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';
+ let display = 'block';
switch (d.type) {
case '1':
display = 'block';
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_nodes.select('text').attr('dy', function (d) {
- var image = this.previousSibling,
+ let image = this.previousSibling,
height = parseFloat(image.attributes[1]['value']),
fontSize = 12;
return height + 1.5 * fontSize;
//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;
+ 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({
//Rendering an external cloud
getoutCloud(dataCloud, imgmap) {
- var _this = this,
+ let _this = this,
width;
let networkId = dataCloud[0]['networkId'];
if (_this.tpoption.width > 800) {
} else {
width = 800;
}
- var svg = d3.select('#content-svg');
+ let 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');
+ 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)')
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;
let arr = [
textval[0],
}
textval[9] = dataCloudLink[0]['link-name'];
let lines_json = {};
- var _this = this,
+ let _this = this,
width;
if (_this.tpoption.width > 800) {
width = _this.tpoption.width;
} else {
width = 800;
}
- console.log("shuchu01dataCloudLink" + dataCloudLink[0]);
- console.log("shuchutextval" + textval);
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');
+ 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;
}
}
- var x1 = lines_json['x1'];
- var y1 = lines_json['y1'];
- var x2 = lines_json['x2'];
- var y2 = lines_json['y2'];
- var color = '#14bb58';
+ 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';
}
- var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
- var svg = d3.select('#graph');
+ let line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+ let svg = d3.select('#graph');
$('.cloudline').remove();
$('#graph').prepend(line);
$('.cloudline').attr({
//Submit form, connect
submitForm(): void {
//When the page ONAP is not selected, the local cloud TP connection
- var _thiss = this;
+ 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.');
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) => {
//Connection between two TP coordinates
chose(textval) {
- var lines_json = {};
+ let lines_json = {};
lines_json['tp1'] = textval[0];
lines_json['tp2'] = textval[1];
lines_json['version'] = textval[2];
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');
+ 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();
- var translates = $('.node').eq(i).css('transform');
+ 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]);
}
}
- console.log(lines_json);
this.addLine(lines_json);
}
//Add external cloud
outCloud(imgmap) {
- var _this = this,
+ let _this = this,
width;
if (_this.tpoption.width > 800) {
width = _this.tpoption.width;
} else {
width = 800;
}
- var svg = d3.select('#content-svg');
+ let 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');
+ 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)')
//Add external cloud connection
cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time) {
let lines_json = {};
- var _this = this,
+ let _this = this,
width;
if (_this.tpoption.width > 800) {
width = _this.tpoption.width;
} else {
width = 800;
}
- console.log("shuchuNetworkVal1:" + networkVal1);
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');
- console.log("shuchuTranslates:" + translates);
+ 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;
}
}
- var x1 = lines_json['x1'];
- var y1 = lines_json['y1'];
- var x2 = lines_json['x2'];
- var y2 = lines_json['y2'];
- var color = '#14bb58';
+ 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';
}
- var line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
- var svg = d3.select('#graph');
+ let line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+ let svg = d3.select('#graph');
$('.cloudline').remove();
$('#graph').prepend(line);
$('.cloudline').attr({
//Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
createCloudNetwork(time) {
let _thiss = this;
- console.log("shuchuCloudNetwork:" + time);
let params = {
'-xmlns': 'http://org.onap.aai.inventory/v14',
'in-maint': 'false',
}
createPnfs(time) {
- console.log("shuchupnf:" + time);
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
}
]
}
- }
+ };
- // var pro = new Promise(function (resolve, reject) {
//Do some asynchronous operations
_thiss.myhttp.createPnf(params)
.subscribe((data) => {
}, (err) => {
console.log(err);
});
- // });
- // return pro;
}
createCloudTp(time) {
- console.log("shuchuTp:" + time);
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
};
let cloudNodeName = this.cloudNode;
-
- // var pro = new Promise(function (resolve, reject) {
//Do some asynchronous operations
_thiss.myhttp.createTp(params, cloudNodeName)
.subscribe((data) => {
_thiss.createCloudLinks(time)
}
}, (err) => {
- // reject(err);
console.log(err);
- // });
});
- // return pro;
}
createCloudLinks(time) {
let _thiss = this;
- console.log('shuchuCloudLinks:' + time);
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
"link-name": this.linkName,
}
};
- // var pro = new Promise(function (resolve, reject) {
//Do some asynchronous operations
_thiss.myhttp.createCloudLink(params)
.subscribe((data) => {
_thiss.queryOutCloudLink(time);
}
}, (err) => {
- // reject(err);
console.log(err);
});
- // });
- // return pro;
}
createCloudUrls(time) {
let _thiss = this;
- console.log(this.cloudNetwork);
- console.log('shuchuUrls:' + time);
let params = {
'-xmlns': 'http://org.onap.aai.inventory/v14',
'aai-id': time,
'system-type': 'ONAP'
}
};
- console.log(time);
- console.log(params['aai-id']);
- // 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
};
this.myhttp.deleteCloudLink(params)
.subscribe((data) => {
- console.log(data);
if (data['status'] == 'SUCCESS') {
- console.log('delete');
this.delLine(deltp1, deltp2);
$('.cloudline').remove();
$('#out').remove();
Code Review / usecase-ui.git / commitdiff