summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-20 16:58:28 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-20 16:58:33 +0800
commit012ec640d5c40531626d376c44d5284491de064e (patch)
treeabf38f6ca64cd1c8f9697c46b6b4190f64a5aff9
parentfe46070bdf8eaee112f0bb01b822532af17f3fee (diff)
feat:optimize Network Topology page code
Change-Id: I1b567764a98f5f49e15e7a82dc7ddca0101f9f77 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css4
-rw-r--r--usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts153
2 files changed, 53 insertions, 104 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
index 2165364a..5055205d 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
@@ -32,10 +32,6 @@
color: #fff;
cursor: pointer;
}
-/*.line-click{*/
- /*cursor: pointer !important;*/
-/*}*/
-
#tpContainer{
position: relative;
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 bb0dd967..3de992fd 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -29,7 +29,7 @@ export class CcvpnNetworkComponent implements OnInit {
}
ngOnInit() {
- var thisNg = this;
+ let thisNg = this;
thisNg.getD3Data();
@@ -183,7 +183,7 @@ export class CcvpnNetworkComponent implements OnInit {
}
}
- 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'];
@@ -197,9 +197,9 @@ export class CcvpnNetworkComponent implements OnInit {
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;
@@ -255,11 +255,10 @@ export class CcvpnNetworkComponent implements OnInit {
//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 {
@@ -274,8 +273,7 @@ export class CcvpnNetworkComponent implements OnInit {
} 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')
@@ -290,7 +288,7 @@ export class CcvpnNetworkComponent implements OnInit {
.enter()
.append('g')
.style('display', function (d) {
- var display = 'block';
+ let display = 'block';
switch (d.type) {
case '1':
display = 'none';
@@ -321,7 +319,7 @@ export class CcvpnNetworkComponent implements OnInit {
_g_nodes.append('image')
.attr('width', function (d) {
- var width = 40;
+ let width = 40;
switch (d.type) {
case '1':
width = 4.4 * width;
@@ -335,7 +333,7 @@ export class CcvpnNetworkComponent implements OnInit {
return width;
})
.attr('height', function (d) {
- var height = 20;
+ let height = 20;
switch (d.type) {
case '1':
height = 3.5 * height;
@@ -357,8 +355,8 @@ export class CcvpnNetworkComponent implements OnInit {
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;
@@ -374,7 +372,7 @@ export class CcvpnNetworkComponent implements OnInit {
return 'translate(' + x + '%,' + y + '%)';
})
.style('font-size', function (d) {
- var size = 14;
+ let size = 14;
switch (d.type) {
case '1':
size = 14;
@@ -388,7 +386,7 @@ export class CcvpnNetworkComponent implements OnInit {
return size;
})
.style('fill', function (d) {
- var color = '#666';
+ let color = '#666';
switch (d.type) {
case '1':
color = '#666';
@@ -406,13 +404,13 @@ export class CcvpnNetworkComponent implements OnInit {
//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)
@@ -421,14 +419,11 @@ export class CcvpnNetworkComponent implements OnInit {
.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';
@@ -456,12 +451,6 @@ export class CcvpnNetworkComponent implements OnInit {
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 + ')';
});
@@ -480,7 +469,7 @@ export class CcvpnNetworkComponent implements OnInit {
});
_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;
@@ -540,12 +529,12 @@ export class CcvpnNetworkComponent implements OnInit {
//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({
@@ -559,7 +548,7 @@ export class CcvpnNetworkComponent implements OnInit {
//Rendering an external cloud
getoutCloud(dataCloud, imgmap) {
- var _this = this,
+ let _this = this,
width;
let networkId = dataCloud[0]['networkId'];
if (_this.tpoption.width > 800) {
@@ -567,9 +556,9 @@ export class CcvpnNetworkComponent implements OnInit {
} 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)')
@@ -591,7 +580,6 @@ export class CcvpnNetworkComponent implements OnInit {
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],
@@ -606,37 +594,35 @@ export class CcvpnNetworkComponent implements OnInit {
}
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({
@@ -748,7 +734,7 @@ export class CcvpnNetworkComponent implements OnInit {
//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.');
@@ -860,7 +846,6 @@ export class CcvpnNetworkComponent implements OnInit {
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) => {
@@ -870,7 +855,7 @@ export class CcvpnNetworkComponent implements OnInit {
//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];
@@ -882,18 +867,17 @@ export class CcvpnNetworkComponent implements OnInit {
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);
}
@@ -962,16 +946,16 @@ export class CcvpnNetworkComponent implements OnInit {
//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)')
@@ -985,37 +969,35 @@ export class CcvpnNetworkComponent implements OnInit {
//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({
@@ -1040,7 +1022,6 @@ export class CcvpnNetworkComponent implements OnInit {
//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',
@@ -1069,7 +1050,6 @@ export class CcvpnNetworkComponent implements OnInit {
}
createPnfs(time) {
- console.log("shuchupnf:" + time);
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
@@ -1094,9 +1074,8 @@ export class CcvpnNetworkComponent implements OnInit {
}
]
}
- }
+ };
- // var pro = new Promise(function (resolve, reject) {
//Do some asynchronous operations
_thiss.myhttp.createPnf(params)
.subscribe((data) => {
@@ -1106,12 +1085,9 @@ export class CcvpnNetworkComponent implements OnInit {
}, (err) => {
console.log(err);
});
- // });
- // return pro;
}
createCloudTp(time) {
- console.log("shuchuTp:" + time);
let _thiss = this;
let params = {
"-xmlns": "http://org.onap.aai.inventory/v14",
@@ -1124,8 +1100,6 @@ export class CcvpnNetworkComponent implements OnInit {
};
let cloudNodeName = this.cloudNode;
-
- // var pro = new Promise(function (resolve, reject) {
//Do some asynchronous operations
_thiss.myhttp.createTp(params, cloudNodeName)
.subscribe((data) => {
@@ -1133,16 +1107,12 @@ export class CcvpnNetworkComponent implements OnInit {
_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,
@@ -1203,7 +1173,6 @@ export class CcvpnNetworkComponent implements OnInit {
}
};
- // var pro = new Promise(function (resolve, reject) {
//Do some asynchronous operations
_thiss.myhttp.createCloudLink(params)
.subscribe((data) => {
@@ -1212,17 +1181,12 @@ export class CcvpnNetworkComponent implements OnInit {
_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,
@@ -1234,23 +1198,14 @@ export class CcvpnNetworkComponent implements OnInit {
'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
@@ -1301,9 +1256,7 @@ export class CcvpnNetworkComponent implements OnInit {
};
this.myhttp.deleteCloudLink(params)
.subscribe((data) => {
- console.log(data);
if (data['status'] == 'SUCCESS') {
- console.log('delete');
this.delLine(deltp1, deltp2);
$('.cloudline').remove();
$('#out').remove();