From de9d2e95b43991fccee342ebed03b006f6fed844 Mon Sep 17 00:00:00 2001 From: zhangab Date: Tue, 23 Oct 2018 11:32:03 +0800 Subject: Build AngularJs component for usecase-ui Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab --- .../src/app/ccvpn-detail/ccvpn-detail.component.ts | 368 +++++++++++++++++++++ 1 file changed, 368 insertions(+) create mode 100644 usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts (limited to 'usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts') diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts new file mode 100644 index 00000000..c9d60ef8 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -0,0 +1,368 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-ccvpn-detail', + templateUrl: './ccvpn-detail.component.html', + styleUrls: ['./ccvpn-detail.component.css'] +}) +export class CcvpnDetailComponent implements OnInit { + + constructor(private myhttp:MyhttpService) { } + + ngOnInit() { + // this.getDetails(); + this.dataInit(); + this.drawImages(); + } + + @Input() detailParams; + @Input() namesTranslate; + @Output() closeDetail = new EventEmitter(); + + sotnVpnInfo:any; + siteList=[]; + siteGroupList=[]; + dataInit(){ + // 循环真实参数，对比名字转换配置文件，将真实参数名字改成通用名字 + this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs; + for(let key in this.sotnVpnInfo){ + for(let key2 in this.namesTranslate.sotnNameTranslate){ + let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_"); + if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){ + this.sotnVpnInfo[key2] = this.sotnVpnInfo[key]; + break; + } + } + } + + this.siteList = this.detailParams.siteSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; + }) + this.siteList.forEach((oneSite,idex)=>{ + oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[]; + for(let key in oneSite){ + let hasfind = false; + if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue }; + for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){ + if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){ + oneSite["baseNames"][key2] = oneSite[key]; + hasfind = true; + break; + } + } + if(hasfind){ continue }; + for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){ + if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){ + oneSite["cpeNames"][key3] = oneSite[key]; + hasfind = true; + break; + } + } + if(hasfind){ continue }; + let wanportStartName = key.split("_")[0]; + // 先分组，后面再变换名字 + let theItem = oneSite["wanportNames"].find((item,index)=>{ + if(item){ + return Object.keys(item)[0].startsWith(wanportStartName) + } + }) + theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]}) + } + let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames); + oneSite["wanportNames"].forEach((item)=>{ + for(let key in item){ + let newName = wanportTs.find((name)=>{ + return key.endsWith(name); + }) + newName?item[newName]=item[key]:null; + } + }) + + }) + + this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; + }) + this.siteGroupList.forEach((oneSiteGroup)=>{ + for(let key in oneSiteGroup){ + for(let key2 in this.namesTranslate.siteGroupNameTranslate){ + let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_"); + if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){ + oneSiteGroup[key2] = oneSiteGroup[key]; + break; + } + } + } + }) + console.log(this.siteList) + this.drawImage(this.siteList); + } + + // site详情 + siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]}; + siteDetail = false; + showSiteDetail(item){ + this.siteDetail = true; + this.siteDetailData = item; + } + + wanPortModal = false; + wanPortDetail = {}; + showWanportDetail(item){ + this.wanPortModal = true; + this.wanPortDetail = item; + } + handleCancel(){ + this.wanPortModal = false; + } + + // sitegroup详情 + + // site节点图形描绘 + // site分类，根据site查tp pnf --> allotted-resource + localSite = [];//本地site + outerSite = [];//外部site + + getSiteAResource(){ + return new Promise((res,rej)=>{ + this.detailParams.siteSer.forEach((site)=>{ + site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site); + }) + + if(this.localSite[0]["service-instance-name"].startsWith("Dc")){ + this.localSite.reverse(); + } + + if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){ + this.outerSite.reverse(); + } + + // 本地site获取tp pnf + this.localSite.forEach((site)=>{ + let obj = { + customerId: this.detailParams.customer.id, + serviceType: this.detailParams.serviceType, + serviceId: site["service-instance-id"] + } + this.myhttp.getAllottedResource(obj) + .subscribe((data)=>{ + // console.log(data); + let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"}); + // console.log(resource); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"]; + // console.log(tps_pnfs); + // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"]; + site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"]; + // // 通过pnfname获取domain（network-resource）; + // this.myhttp.getPnfDetail(site.pnfname) + // .subscribe((data2)=>{ + // // console.log(data2); + // let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"]; + // site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"]; + // res("sites-domain"); + // }) + res("sites-domain"); + }) + }) + }) + } + //通过sotn 查vpn-id --> tp pnf --> allotted-resource + relation = {sotn:{ + name:"sotn1", + vpns:[ + { + name:"vpn1", + domain:"domain1", + site:"site1", + tps:[ + {name:"tp1",lineto:"site1"}, + {name:"tp2",lineto:"domain1"} + ] + }, + { + name:"vpn2", + domain:"domain2", + site:"site2", + tps:[ + {name:"tp3",lineto:"site2"}, + {name:"tp4",lineto:"domain2"} + ] + } + ] + }}; + + vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}]; + getSotnAresource(){ + return new Promise((res,rej)=>{ + let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"] + .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"] + .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"]; + this.myhttp.getSotnConnectivity(connectivityId) + .subscribe((data)=>{ + // console.log(data); //默认一个connectivityId只能查到一个connectivity + let vpns = data.connectivity[0]["relationship-list"]["relationship"] + .filter((item)=>{ return item["related-to"]=="vpn-binding"}) + .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]}); + console.log(vpns); + this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}}); + this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{ + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2)=>{ + // console.log(data2); //默认一个vpnid只能查到一个vpnbinding + let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"] + .filter((item)=>{ return item["related-to"]=="p-interface"}) + .map((item2)=>{return item2["relationship-data"]}); + let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]}); + let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]}); + // console.log(pnfname) + // console.log(tpnames) + vpn.tps = tpnames; + // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项，即同domain + // console.log(thissite); + // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename}); + // 通过pnfname获取domain（network-resource）; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((data2)=>{ + // console.log(data2); + let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"]; + vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"]; + if(this.localSite[index]){ + vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename; + console.log(tpnames) + console.log(vpn.sitetpname) + vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname}); + }else{ + vpn.sitetpname = this.localSite[0].tpsitename; + vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname}); + } + + this.vpns = this.detailParams.sotnvpnSer.vpns; + res("sotn-domain"); + // console.log(vpn); + }) + + }) + }) + }) + }) + } + + drawImages(){ + + this.getSiteAResource().then((data)=>{ + console.log(data); + return this.getSotnAresource() + }).then((data)=>{ + console.log(data); + console.log(this.localSite); + this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true; + this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3; + // 当只有一个vpn的时候 + if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){ + let line = { + "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2 当本地云只有一朵的时候，tp2与本地site2相连 + } + this.detailLines.length = this.detailLines.length-6; + this.detailLines.push(line); + // 当本地site有两个的时候 + if(this.localSite.length==2){ + let line = { + "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3 + } + this.detailLines.push(line); + } + // 当外部site有两个的时候 + if(this.outerSite.length==2){ + let line = { + "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 + } + this.detailLines.push(line); + } + } + }) + // let allnodes = [this.getSiteAResource(),this.getSotnAresource()]; + // Promise.all(allnodes).then((data)=>{ + // console.log(data) + // console.log(this.localSite); + + + // }) + } + + detailSites=false; + detailLines=[ //详情拓扑图连线的坐标 + { + "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1 + }, + { + "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1 + } + , + { + "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2 + }, + + { + "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4 + }, + + { + "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2 + }, + { + "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3 + }, + { + "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3 + }, + + { + "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4 + }, + { + "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 + }, + { + "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3 + } + ]; + lines=[]; + siteImage=[]; + drawImage(sitelist){ + let cx = 200; + let cy = 200; + let r = 150; + let startAngle = -210 * (Math.PI/180); + let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1; + + this.lines = sitelist.map((item,index)=>{ + let x = cx + Math.cos(startAngle - step*index)*r; + let y = cy + Math.sin(startAngle - step*index)*r; + return {img:"line",x1:cx,y1:cy,x2:x,y2:y} + }) + this.siteImage = this.lines.map((item)=>{ + return {img:"site",x:item.x2 - 25,y:item.y2 - 25} + }) + console.log(this.siteImage,this.lines) + } + clickShow = false; + hoverShow = false; + toggleClick(){ + this.clickShow = !this.clickShow; + } + hoverShowcould(){ + this.hoverShow = true; + } + hoverHidecould(){ + this.hoverShow = false; + } + + + + goback(){ + this.closeDetail.emit(); + } + +} -- cgit 1.2.3-korg