diff options
Diffstat (limited to 'usecaseui-portal/src')
4 files changed, 281 insertions, 293 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts index 39aa3c96..1f4ac7a5 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts @@ -33,7 +33,7 @@ export class CcvpnNetworkComponent implements OnInit { thisNg.getD3Data(); - //本地云TP端口连线，点击右侧展开详情 + //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; @@ -49,7 +49,7 @@ export class CcvpnNetworkComponent implements OnInit { thisNg.delLinkIndex = $(this); let dataD3 = thisNg.d3Data; - for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network + 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']); } @@ -61,7 +61,7 @@ export class CcvpnNetworkComponent implements OnInit { 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; @@ -87,30 +87,30 @@ export class CcvpnNetworkComponent implements OnInit { inputshow = false; delBoxisVisible = false; - d3Data = [];//D3渲染需要的数据 - logicalLinks = [];//logicalLinks接口返回的已有的连线数据 - linkName = null;//连线的名字link-name - networkOption = [];//表单network下拉选框填充的数据 - nodeOption1 = {};//node下拉选框填充的数据 - tpOption1 = [];//node下拉选框填充的数据 - tpOption2 = [];//node下拉选框填充的数据 - networkVal1 = null;//network1下拉框默认数据 - networkVal2 = null;//network2下拉框默认数据 - selectedNode1 = null;//node1下拉框默认数据 - selectedNode2 = null;//node2下拉框默认数据 - selecteTpName1 = null;//TP1下拉框默认数据 - selecteTpName2 = null;//TP2下拉框默认数据 - cloudUrl = null;//外部云URL地址 - cloudNetwork = null;//外部云network名称 - cloudNode = null;//外部云Node名称 - cloudTp = null;//外部云Tp名称 - - dataCloud = [];//外部云的信息 + 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; @@ -151,19 +151,19 @@ export class CcvpnNetworkComponent implements OnInit { this.isVisible = false; this.delBoxisVisible = false; 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.cloudUrl = null;//外部云URL地址 - this.cloudNetwork = null;//外部云network名称 - this.cloudNode = null;//外部云Node名称 - this.cloudTp = null;//外部云Tp名称 + this.networkVal1 = null;//Initialize the default data of the network1 drop-down box + this.networkVal2 = null;//Initialize the network2 drop-down box default data + this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box + this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box + this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box + this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box + this.cloudUrl = null;//External cloud URL address + this.cloudNetwork = null;//External cloud network name + this.cloudNode = null;//External cloud Node name + this.cloudTp = null;//External cloud Tp name } - //获取云图数据 + //Get cloud image data getD3Data() { this.myhttp.getNetworkD3Data() .subscribe((data) => { @@ -171,7 +171,7 @@ export class CcvpnNetworkComponent implements OnInit { this.addLinkDisabled = false; return; } - for (let ii = 0; ii < data.length; ii++) {//判断数据里是否有外部云信息，有就踢出来 + 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); } @@ -206,21 +206,21 @@ export class CcvpnNetworkComponent implements OnInit { 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); }); } - //获取云图初始的连线状态 getlogicalLinksData + //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++) {//判断获取的连线里书否存在外部云连线，有就踢出来 + 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); } @@ -247,7 +247,7 @@ export class CcvpnNetworkComponent implements OnInit { }); } - //D3云图渲染 + //D3Cloud rendering render(nodes, imgmap, dataCloud, charge, dataD3) { var thiss = this; var _this = this.tpoption, @@ -394,7 +394,7 @@ export class CcvpnNetworkComponent implements OnInit { .style('font-weight', '500'); - //线上添加自定义属性 + //Add custom attributes online _g_lines.each(function (d, i) { var _this = d3.select(this); if (d.name) { @@ -411,7 +411,7 @@ export class CcvpnNetworkComponent implements OnInit { .links(nodes) .start(); - //添加拖拽行为 + //Add drag and drop behavior // _g_nodes.call(this.getDragBehavior(force)); force.on('tick', function () { @@ -489,7 +489,7 @@ export class CcvpnNetworkComponent implements OnInit { }; - //拓扑图拖拽效果 + //Topology drag and drop effect getDragBehavior(force) { return d3.behavior.drag() @@ -517,7 +517,7 @@ export class CcvpnNetworkComponent implements OnInit { } - //初始化节点位置 + //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); @@ -527,7 +527,7 @@ export class CcvpnNetworkComponent implements OnInit { }); } - //根据多边形获取定位点 + //Get anchor points based on polygons getVertices(origin, r, n) { if (typeof n !== 'number') return; var ox = origin[0]; @@ -547,7 +547,7 @@ export class CcvpnNetworkComponent implements OnInit { return points; } - //渲染外部云 + //Rendering an external cloud getoutCloud(dataCloud, imgmap) { var _this = this, width; @@ -570,7 +570,7 @@ export class CcvpnNetworkComponent implements OnInit { .style('fill', '#666'); } - //外部云连接 + //External cloud connection getcloudLine(dataCloudLink) { let textval = []; textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 @@ -583,7 +583,7 @@ export class CcvpnNetworkComponent implements OnInit { textval[7] = this.dataCloud[0]['networkId']; console.log(this.dataCloud); let dataD3 = this.d3Data; - for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network + for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to if (dataD3[p]['name'] == textval[0]) { textval[8] = dataD3[p]['source']['name'];//network1 } @@ -599,7 +599,7 @@ export class CcvpnNetworkComponent implements OnInit { } for (let i = 0; i < $(".node").length; i++) { if ($('.node').eq(i).find('text').html() == textval[8]) { - //获取二级的x,y坐标 + //Get the x, y coordinates of the second level var translates = $('.node').eq(i).css('transform'); lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); @@ -641,7 +641,7 @@ export class CcvpnNetworkComponent implements OnInit { } - //查询外部云host url地址 + //Query external cloud host url address getCloudUrl(aaiId, thisNg) { this.myhttp.queryCloudUrl(aaiId) .subscribe((data) => { @@ -652,7 +652,7 @@ export class CcvpnNetworkComponent implements OnInit { } - //右侧表单下拉选框数据填充 三级联动 + //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]; @@ -663,7 +663,7 @@ export class CcvpnNetworkComponent implements OnInit { this.getPInterfaces1(); } - //获取指定node下的TP数据 + //Get the TP data under the specified node getPInterfaces1() { let params = { pnfName: this.selectedNode1, @@ -691,7 +691,7 @@ export class CcvpnNetworkComponent implements OnInit { this.getPInterfaces2(); } - //获取指定node下的TP数据 + //Get the TP data under the specified node getPInterfaces2() { let params = { pnfName: this.selectedNode2, @@ -709,16 +709,16 @@ export class CcvpnNetworkComponent implements OnInit { }); } - //提交表单，连线 + //Submit form, connect submitForm(): void { - //当页面ONAP未选中，即本地云端TP连线 + //When the page ONAP is not selected, the local cloud TP connection var _thiss = this; if (this.inputshow == false) { if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) { - alert('服务端口不能为空，请选择端口信息'); + alert('The service port cannot be empty. Please select the port information.'); return; } else if (this.networkVal1 == this.networkVal2) { - alert('同一云服务下的TP端口不能相连！'); + alert('The TP port under the same cloud service cannot be connected!'); return; } let tp_links = [], @@ -731,15 +731,15 @@ export class CcvpnNetworkComponent implements OnInit { tp_links.push(data_text2); } if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) { - alert('此端口号连线已存在！'); + alert('This port number connection already exists!'); return; } this.createTpLinks(); } else { - //当页面ONAP选中，即创建外部云，连线 + //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('服务端口不能为空，请填写完整的端口信息'); + alert('The service port cannot be empty. Please fill in the complete port information.'); return; } let tp_links = [], @@ -749,30 +749,16 @@ export class CcvpnNetworkComponent implements OnInit { tp_links.push(data_text1); } if (tp_links.indexOf(tp1) != -1) { - alert('此端口号连线已存在！'); + alert('This port number connection already exists!'); return; } - let time = this.cloudNetwork + new Date().getTime();//为外部云创建aaiid，此标识是唯一的，不可重复 + let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated 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); - // } - // }); } } - //创建tp连线 调用接口createLink + //Create tp connection call interface createLink createTpLinks() { let params = { 'link-name': this.linkName, @@ -818,11 +804,11 @@ export class CcvpnNetworkComponent implements OnInit { } }, (err) => { console.log(err); - console.log('创建连线接口调用失败'); + console.log('Create connection interface call failed'); }); } - //创建tp连接线后马上查询新增的连线 + //Query the newly added connection immediately after creating the tp cable queryAddLink() { let linkName = this.linkName, selecteTpName1 = this.selecteTpName1, @@ -846,7 +832,7 @@ export class CcvpnNetworkComponent implements OnInit { }); } - //两个TP之间的连线 坐标获取 + //Connection between two TP coordinates chose(textval) { var lines_json = {}; lines_json['tp1'] = textval[0]; @@ -859,7 +845,7 @@ export class CcvpnNetworkComponent implements OnInit { for (let i = 0; i < $(".node").length; i++) { if ($('.node').eq(i).find('text').html() == textval[0]) { $('.node').eq(i).show(); - //获取二级的x,y坐标 + //Get the x, y coordinates of the second level var translates = $('.node').eq(i).css('transform'); lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); @@ -875,7 +861,7 @@ export class CcvpnNetworkComponent implements OnInit { this.addLine(lines_json); } - //两个TP之间的连线 连线渲染 + //Connection between two TPs addLine(lines) { let tp1 = lines.tp1; let tp2 = lines.tp2; @@ -912,7 +898,7 @@ export class CcvpnNetworkComponent implements OnInit { svg.html(svg.html()); } - //创建外部云连线后，马上查询连线 + //After creating an external cloud connection, query the connection immediately queryOutCloudLink() { let networkVal1 = this.networkVal1, selectedNode1 = this.selectedNode1, @@ -933,13 +919,13 @@ export class CcvpnNetworkComponent implements OnInit { 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); }); } - //新增外部云 + //Add external cloud outCloud(imgmap) { var _this = this, width; @@ -961,7 +947,7 @@ export class CcvpnNetworkComponent implements OnInit { .style('fill', '#fff'); } - //新增 外部云连接 + //Add external cloud connection cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name) { let lines_json = {}; var _this = this, @@ -973,7 +959,7 @@ export class CcvpnNetworkComponent implements OnInit { } for (let i = 0; i < $(".node").length; i++) { if ($('.node').eq(i).find('text').html() == networkVal1) { - //获取二级的x,y坐标 + //Get the x, y coordinates of the second level var translates = $('.node').eq(i).css('transform'); lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); @@ -1013,36 +999,26 @@ export class CcvpnNetworkComponent implements OnInit { svg.html(svg.html()); } - //创建外部云，连线时调用以下5个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls + //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls createCloudNetwork(time) { let _thiss = this; - let params = - { - "network-resource": [ - { - 'network-id': this.cloudNetwork, - 'provider-id': '', - 'client-id': '', - 'te-topo-id': '', - 'relationship-list': { - 'relationship': [ - { - 'related-to': 'ext-aai-network', - "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 - } - ] - } - ] + + let params= { + "network-resource": { + "network-id":this.cloudNetwork, + "provider-id": "", + "client-id": "", + "te-topo-id": "", + "relationship-list": { + "relationship": { + "related-to": "ext-aai-network", + "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+time } } - ] - }; - //做一些异步操作 + } + } + + //Do some asynchronous operations _thiss.myhttp.createNetwrok(params) .subscribe((data) => { if(data["status"]=="SUCCESS"){ @@ -1056,37 +1032,34 @@ export class CcvpnNetworkComponent implements OnInit { createPnfs(time) { let _thiss = this; - 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 - }] - } - ] + let params= { + "pnf": { + "pnf-name": this.cloudNode, + "pnf-id": this.cloudNode, + "in-maint": "true", + "relationship-list": { + "relationship": [ + { + "related-to": "ext-aai-network", + "relationship-label": "org.onap.relationships.inventory.BelongsTo", + "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+ time, + "relationship-data": { + "relationship-key": "ext-aai-network.aai-id", + "relationship-value":time + } + }, + { + "related-to": "network-resource", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork + } + ] + } } - }; + } + // var pro = new Promise(function (resolve, reject) { - //做一些异步操作 + //Do some asynchronous operations _thiss.myhttp.createPnf(params) .subscribe((data) => { if(data["status"]=="SUCCESS"){ @@ -1101,18 +1074,21 @@ export class CcvpnNetworkComponent implements OnInit { 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= { + "p-interface": { + "interface-name": this.cloudTp, + "speed-value": "1000000", + "in-maint": "true", + "network-ref": "", + "transparent": "true", + "operational-status": "up" + } + } + let cloudNodeName = this.cloudNode; // var pro = new Promise(function (resolve, reject) { - //做一些异步操作 + //Do some asynchronous operations _thiss.myhttp.createTp(params, cloudNodeName) .subscribe((data) => { if(data["status"]=="SUCCESS"){ @@ -1128,58 +1104,32 @@ export class CcvpnNetworkComponent implements OnInit { createCloudLinks(time) { let _thiss = this; - let params = { - 'link-name': this.linkName, - 'in-maint': '', - 'link-type': '', - 'speed-value': '', - 'operational-status': 'up', - 'relationship-list': { - 'relationship': [ - { - 'related-to': 'p-interface', - 'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1, - 'relationship-data': [ - { - 'relationship-key': 'pnf.pnf-id', - 'relationship-value': this.selectedNode1 - }, - { - 'relationship-key': 'p-interface.p-interface-id', - 'relationship-value': this.selecteTpName1 - } - ] - }, - { - 'related-to': 'p-interface', - 'related-link': '/aai/v13/network/pnfs/pnf/' + this.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 + let params={ + "logical-link": { + "link-name": this.linkName, + "link-type": "cross-link", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "related-link": "/aai/v13/network/pnfs/pnf/"+ this.selectedNode1 +"/p-interfaces/p-interface/" + this.selecteTpName1, + }, + { + "related-to": "p-interface", + "related-link": "/aai/v13/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/"+ this.cloudTp, + }, + { + "related-to": "ext-aai-network", + "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/"+ time, } - ] - } - ] + ] + } } - }; + } + // var pro = new Promise(function (resolve, reject) { - //做一些异步操作 + //Do some asynchronous operations _thiss.myhttp.createCloudLink(params) .subscribe((data) => { // resolve(data['status']); @@ -1196,18 +1146,21 @@ export class CcvpnNetworkComponent implements OnInit { 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' + let params={ + "ext-aai-network": { + "aai-id":this.cloudNetwork + time, + "esr-system-info": { + "esr-system-info-id": "example-esr-system-info-id-val-0", + "service-url": this.cloudUrl, + "user-name": "demo", + "password": "demo123456!", + "system-type": "ONAP" + } } - }; + } + // var pro = new Promise(function (resolve, reject) { - //做一些异步操作 + //Do some asynchronous operations _thiss.myhttp.createCloudUrl(params) .subscribe((data) => { if(data["status"]=="SUCCESS"){ @@ -1223,7 +1176,7 @@ export class CcvpnNetworkComponent implements OnInit { // return pro; } - //本地云TP端口 删除连线 调用接口deleteLink + //Local cloud TP port Delete connection Call interface deleteLink delLink(): void { let deltp1 = this.delTp1, deltp2 = this.delTp2, @@ -1242,7 +1195,7 @@ export class CcvpnNetworkComponent implements OnInit { } }, (err) => { console.log(err); - console.log('删除连线接口调用失败'); + console.log('Deleting a connection interface call failed'); }); } @@ -1259,28 +1212,27 @@ export class CcvpnNetworkComponent implements OnInit { } - //外部云 删除连线 调用接口deleteCloudLink + //External cloud Delete connection Call interface deleteCloudLink delCloudLink(): void { let deltp1 = this.delTp1, deltp2 = this.delTp2, - dellinkname = this.delLinkname, - version = this.delVersion; + version = this.delVersion, + aaiId=this.aaiId; let params = { - 'logical-link': dellinkname, - 'resource-version': version, + "aaiId": aaiId, + "version": version, }; this.myhttp.deleteLink(params) .subscribe((data) => { console.log(data); - console.log(typeof data); if (data['status'] == 'SUCCESS') { - console.log('删除成功'); + console.log('delete'); this.delLine(deltp1, deltp2); $('.cloudline').remove(); } }, (err) => { console.log(err); - console.log('删除连线接口调用失败'); + console.log('Deleting a connection interface call failed'); }); } diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/networkHttpservice.service.ts index 0f19bffc..63b70ea8 100644 --- a/usecaseui-portal/src/app/networkHttpservice.service.ts +++ b/usecaseui-portal/src/app/networkHttpservice.service.ts @@ -7,7 +7,7 @@ export class networkHttpservice { constructor(private http:HttpClient) { } - // baseUrl = "./assets/json/";//本地环境 + // baseUrl = "./assets/json/";//Local environment // url={ // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json", // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json", @@ -23,9 +23,9 @@ export class networkHttpservice { // "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/";//线上环境 + // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//Online environment + // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//Online environment + baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//Online environment url={ "getNetworkD3Data":this.baseUrl + "getNetWorkResources", "getLogicalLinksData":this.baseUrl + "getLogicalLinks", @@ -40,58 +40,63 @@ export class networkHttpservice { "createCloudLink":this.baseUrl + "createLink/", "createCloudUrl":this.baseUrl + "createHostUrl/", "deleteLink":this.baseUrl + "deleteLink/", + "deleteCloud":this.baseUrl+"deleteExtNetWork" }; - //d3数据 + //d3data getNetworkD3Data(){ return this.http.get<any>(this.url["getNetworkD3Data"]); } - //初始化连线 logical-links + //Initialize the connection logical-links getLogicalLinksData(){ return this.http.get<any>(this.url["getLogicalLinksData"]); } - //查询指定的node对应的tp数据 + //Query the tp data corresponding to the specified node getPInterfacesData1(paramsObj){ return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]); } getPInterfacesData2(paramsObj){ return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]); } - //创建连线接口 + //Create a connection interface createLink(paramsObj){ return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj); } - //查询指定的单个连接线 接口 + //Query the specified single cable interface querySpecificLinkInfo(paramsObj){ return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]); } - //查询 外部云host this.url地址 接口 + //Query external cloud host this.url address interface queryCloudUrl(aaiId){ return this.http.get<any>(this.url["queryCloudUrl"]+aaiId); } - //创建外部云newwork接口 + //Create an external cloud newwork interface createNetwrok(paramsObj){ return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-resource"][0]["network-id"],paramsObj); } - //创建外部云pnf接口 + //Create an external cloud pnf interface createPnf(paramsObj){ return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj); } - //创建外部云Tp接口 + //Create an external cloud Tp interface createTp(paramsObj,cloudNodeName){ let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint"; return this.http.put<any>(this.url["createTp"]+str,paramsObj); } - //创建外部云link接口 + //Create an external cloud link interface createCloudLink(paramsObj){ return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj); } - //创建外部云host url接口 + //Create an external cloud host url interface createCloudUrl(paramsObj){ return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj); } - //删除连线 + //Delete connection deleteLink(paramsObj){ let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"]; return this.http.delete<any>((this.url["deleteLink"]+str)); } + deleteCloudLink(paramsObj){ + let str="?extNetworkId="+paramsObj["aaiId"]+"&resourceVersion="+paramsObj["version"]; + return this.http.delete<any>((this.url["deleteCloud"]+str)); + } } diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index 82d0fc51..46a6c818 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -45,9 +45,9 @@ <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} + {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' @@ -77,17 +77,17 @@ <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> <td *ngIf="item.version">{{ item.version }}</td> <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.uuid" data_id="i">{{status}}</span> <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> --> </td> - <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdOperationalState}}</td> <td>{{item.nsdUsageState}}</td> <td> <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> --> - <i nzType="info" (click)="showConfirm(i, item.id)" class="anticon anticon-delete" *ngIf="item.id" ></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> <!-- (click)="deleteNsService(i,item.id)" --> <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> --> @@ -106,9 +106,9 @@ <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" + <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} + {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' @@ -147,7 +147,7 @@ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> --> - <i nzType="info" (click)="showVnfConfirm(i,item.id)" class="anticon anticon-delete" *ngIf="item.id"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" id="{{ item.id}}" *ngIf="item.id"></i> <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> </td> </tr> @@ -165,9 +165,9 @@ <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" + <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} + {{ pnfuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' @@ -201,8 +201,7 @@ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> --> <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> --> - <i nzType="info" (click)="showPnfConfirm(i,item.id)" class="anticon anticon-delete"></i> - <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> </td> </tr> <!-- </ng-template> --> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index 794df742..3cdbf9cf 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -30,15 +30,18 @@ export class OnboardVnfVmComponent implements OnInit { vnfPkgId =''; pnfdInfoId = ''; tabTitle = "NS"; - uploading = false; + nsuploading = false; + vnfuploading = false; + pnfloading = false; fileListNS: UploadFile[] = []; fileListVNF: UploadFile[] = []; fileListPNF: UploadFile[] = []; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService) { } + // onboard initial value + status = "Onboard Available"; + constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { } //default 默认调用ns数据 ngOnInit() { - console.log("11111111111111") this.getTableData(); } @@ -49,7 +52,7 @@ export class OnboardVnfVmComponent implements OnInit { pageIndex = 1; pageSize = 10; total; - loading = false; + nsloading = false; sortName = null; sortValue = null; tabs = ['NS', 'VNF', 'PNF']; @@ -180,21 +183,25 @@ export class OnboardVnfVmComponent implements OnInit { this.fileListNS.forEach((file: any) => { formData.append('files[]', file); }); + this.nsuploading = true; break case "VNF": this.fileListVNF.forEach((file: any) => { formData.append('files[]', file); }); + this.vnfuploading = true; break case "PNF": this.fileListPNF.forEach((file: any) => { formData.append('files[]', file); }); + this.pnfloading = true; break } - this.uploading = true; + + // this.nsuploading = true; // You can use any AJAX library you like - const req = new HttpRequest('PUT', url, formData, { + const req = new HttpRequest('POST', url, formData, { reportProgress: true, withCredentials: true }); @@ -203,17 +210,30 @@ export class OnboardVnfVmComponent implements OnInit { .pipe(filter(e => e instanceof HttpResponse)) .subscribe( (event: {}) => { - this.uploading = false; + this.changeUploadingSta(tab) console.log('upload successfully') this.msg.success('upload successfully.'); }, err => { - this.uploading = false; + this.changeUploadingSta(tab) console.log('upload failed') this.msg.error('upload failed.'); } ); } +// 控制uploading的状态 +changeUploadingSta(tab) { + switch(tab) { + case "NS": + this.nsuploading = false; + break + case "VNF": + this.vnfuploading = false; + break + case "PNF": + this.pnfloading = false; + } +} //---------------------------------------------------------------------------------------------- @@ -314,19 +334,39 @@ export class OnboardVnfVmComponent implements OnInit { // console.log('dddd',reset) // this.getTableData(); // } - - + /* onboard 上传按钮 */ // ns onboard + + success(): void { + const modal = this.modalService.success({ + nzTitle: 'This is an success message', + nzContent: 'Package Onboard Completed.' + }); + + window.setTimeout(() => modal.destroy(), 2000); + } + + error(): void { + this.modalService.error({ + nzTitle: 'This is an error message', + nzContent: 'Package Onboard Failed!' + }); + } updataNsService(id) { console.log(id); - let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { console.log('onboard ns sdc', data); + if(data["status"] == 200) { + this.success(); + + } else { + this.error(); + } this.getTableData(); }, (err) => { console.log(err); @@ -340,6 +380,7 @@ export class OnboardVnfVmComponent implements OnInit { // vnf onboard updataVnfService(id) { + this.status = "Onboarding"; console.log(id) let requestBody = { "csarId": id @@ -347,7 +388,11 @@ export class OnboardVnfVmComponent implements OnInit { this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { console.log('onboard vnf sdc', data); - this.getTableVnfData(); + if(data["status"] == "200"){ + this.success(); + }else { + this.error(); + } }, (err) => { console.log(err); }) @@ -367,45 +412,32 @@ export class OnboardVnfVmComponent implements OnInit { //-------------------------------------------------------------------------------- /* delete 删除按钮 */ // ns - showConfirm(index, pkgid): void { - console.log(index) - console.log(pkgid) + showConfirm(index,pkgid,tab): void { this.confirmModal = this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', - nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', - nzOnOk: () => new Promise((resolve, reject) => { - this.deleteNsService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + nzContent: 'Do you Want to delete these items?', + nzOkText : 'Yes', + nzCancelText: 'No', + nzOnOk: () => new Promise((resolve, reject) => { + switch (tab) { + case 'NS': + this.deleteNsService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + break + case 'VNF': + this.deleteVnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + break + case 'PNF': + this.deletePnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + break + } }).catch(() => console.log('Oops errors!')) }); } - //vnf - showVnfConfirm(index, pkgid): void { - console.log(index) - console.log(pkgid) - this.confirmModal = this.modal.confirm({ - nzTitle: 'Do you Want to delete these items?', - nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', - nzOnOk: () => new Promise((resolve, reject) => { - this.deleteVnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); - }).catch(() => console.log('Oops errors!')) - }); - } - //vnf - showPnfConfirm(index, pkgid): void { - console.log(index) - console.log(pkgid) - this.confirmModal = this.modal.confirm({ - nzTitle: 'Do you Want to delete these items?', - nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', - nzOnOk: () => new Promise((resolve, reject) => { - this.deletePnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); - }).catch(() => console.log('Oops errors!')) - }); - } + /* delete 删除按钮 */ //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) |