summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:03 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:05 +0800
commitde9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
parent101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
Build AngularJs component for usecase-ui
Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts')
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts368
1 files changed, 368 insertions, 0 deletions
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();
+ }
+
+}