Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3
Issue-ID: USECASEUI-154
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

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();
+  }
+
+}