From 59295b692390ae3b1a0b2a9b4aee41c7d3215db3 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Wed, 31 Oct 2018 14:41:54 +0800 Subject: Fix instance detail for CCVPN Change-Id: I33749a6fea3dfb3fb1f649adc7ad99a9967825ae Issue-ID: USECASEUI-171 Signed-off-by: guochuyicmri --- .../app/ccvpn-detail/ccvpn-detail.component.css | 18 + .../app/ccvpn-detail/ccvpn-detail.component.html | 447 +++----- .../ccvpn-detail/ccvpn-detail.component.spec.ts | 15 + .../src/app/ccvpn-detail/ccvpn-detail.component.ts | 1158 ++++++++++++++------ 4 files changed, 996 insertions(+), 642 deletions(-) (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css index 710bd104..02c3d4c6 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -135,4 +135,22 @@ hr { background-color: #aaa; border-radius: 5px; box-shadow: 0px 0px 20px #000; +} +#togo{ + width: 600px; + height:400px; + border:1px solid #ccc; + user-select: none; +} +#togo text{ + font-size:10px; + fill:#1A2C3F; + text-anchor: middle; +} + +#togo .link{ + stroke:#FFC000; +} +#togo .node-title{ + font-size: 14px; } \ No newline at end of file diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html index 33d56eb9..cd3e2067 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -16,321 +16,178 @@

Services List

- +
-

{{detailParams.sotnvpnSer['service-instance-name']}} Instance Detail

-
-

SOTN VPN Info

+

{{detailParams['service-instance-name']}} Instance Detail

+
+

SOTN VPN Info

+
    +
  • Name: {{sotnVpnInfo.name}}
    • +
  • Description: {{sotnVpnInfo.description}}
    • +
  • Start Time: {{sotnVpnInfo.startTime}}
    • +
  • End Time: {{sotnVpnInfo.endTime}}
    • +
  • COS: {{sotnVpnInfo.COS}}
    • +
  • Reroute Enable: {{sotnVpnInfo.reroute}}
    • +
  • Service Level Specification: {{sotnVpnInfo.SLS}}
    • +
  • DualLink: {{sotnVpnInfo.dualLink}}
    • +
  • CIR: {{sotnVpnInfo.CIR}}
    • +
  • EIR: {{sotnVpnInfo.EIR}}
    • +
  • CBS: {{sotnVpnInfo.CBS}}
    • +
  • EBS: {{sotnVpnInfo.EBS}}
    • +
  • Color Aware: {{sotnVpnInfo.colorAware}}
    • +
  • Coupling Flag: {{sotnVpnInfo.couplingFlag}}
    • +
+
+ +
+

Site List

+ + + + NO. + Name + Description + Post Code + Address + VLAN + Action + + + + + + {{i+1}} + {{item.baseNames.name}} + {{item.baseNames.description}} + {{item.baseNames.postcode}} + {{item.baseNames.address}} + {{item.baseNames.vlan}} + Detail + + + + +
+

Site_Enterprise Service X

    -
  • Name: {{sotnVpnInfo.name}}
    • -
  • Description: {{sotnVpnInfo.description}}
    • -
  • Start Time: {{sotnVpnInfo.startTime}}
    • -
  • End Time: {{sotnVpnInfo.endTime}}
    • -
  • COS: {{sotnVpnInfo.COS}}
    • -
  • Reroute Enable: {{sotnVpnInfo.reroute}}
    • -
  • Service Level Specification: {{sotnVpnInfo.SLS}}
    • -
  • DualLink: {{sotnVpnInfo.dualLink}}
    • -
  • CIR: {{sotnVpnInfo.CIR}}
    • -
  • EIR: {{sotnVpnInfo.EIR}}
    • -
  • CBS: {{sotnVpnInfo.CBS}}
    • -
  • EBS: {{sotnVpnInfo.EBS}}
    • -
  • Color Aware: {{sotnVpnInfo.colorAware}}
    • -
  • Coupling Flag: {{sotnVpnInfo.couplingFlag}}
    • +
  • Name: {{ siteDetailData.baseNames.name}}
    • +
  • Description: {{ siteDetailData.baseNames.description }}
    • +
  • Type: {{ siteDetailData.baseNames.type }}
    • +
  • Role: {{ siteDetailData.baseNames.role }}
    • +
  • PostCode: {{ siteDetailData.baseNames.postcode }}
    • +
  • VLAN: {{ siteDetailData.baseNames.vlan }}
    • +
  • Address: {{ siteDetailData.baseNames.address }}
    • +
  • ClientSignal: {{ siteDetailData.baseNames.clientSignal }}
    • +
  • ControlPoint: {{ siteDetailData.baseNames.controlPoint }}
    • +
  • Emails: {{ siteDetailData.baseNames.emails }}
    • +
  • GroupName: {{ siteDetailData.baseNames.groupName }}
    • +
  • GroupRole: {{ siteDetailData.baseNames.groupRole }}
    • +
  • Latitude: {{ siteDetailData.baseNames.latitude }}
    • +
  • Longitude: {{ siteDetailData.baseNames.longitude }}
    • +
  • SotnVpnName: {{ siteDetailData.baseNames.sotnVpnName }}
-
- -
-

Site List

- - +
+

CPE

+
    +
  • Name: {{siteDetailData.cpeNames.device_name}}
    • +
  • Version: {{ siteDetailData.cpeNames.device_version }}
    • +
  • ESN: {{ siteDetailData.cpeNames.device_esn }}
    • +
  • Class: {{ siteDetailData.cpeNames.device_class }}
    • +
  • System IP: {{ siteDetailData.cpeNames.device_systemIp }}
    • +
  • Vendor: {{ siteDetailData.cpeNames.device_vendor }}
    • +
  • Type: {{ siteDetailData.cpeNames.device_type }}
    • +
+

WAN Port

+ + NO. Name Description - Post Code - Address - VLAN + PortType + PortNumber + IPAddress Action - - - - - {{i+1}} - {{item.baseNames.name}} - {{item.baseNames.description}} - {{item.baseNames.postcode}} - {{item.baseNames.address}} - {{item.baseNames.vlan}} - Detail - - - - -
-

Site_Enterprise Service X

-
    -
  • Name: {{ siteDetailData.baseNames.name}}
    • -
  • Description: {{ siteDetailData.baseNames.description }}
    • -
  • Type: {{ siteDetailData.baseNames.type }}
    • -
  • Role: {{ siteDetailData.baseNames.role }}
    • -
  • PostCode: {{ siteDetailData.baseNames.postcode }}
    • -
  • VLAN: {{ siteDetailData.baseNames.vlan }}
    • -
  • Address: {{ siteDetailData.baseNames.address }}
    • -
  • ClientSignal: {{ siteDetailData.baseNames.clientSignal }}
    • -
  • ControlPoint: {{ siteDetailData.baseNames.controlPoint }}
    • -
  • Emails: {{ siteDetailData.baseNames.emails }}
    • -
  • GroupName: {{ siteDetailData.baseNames.groupName }}
    • -
  • GroupRole: {{ siteDetailData.baseNames.groupRole }}
    • -
  • Latitude: {{ siteDetailData.baseNames.latitude }}
    • -
  • Longitude: {{ siteDetailData.baseNames.longitude }}
    • -
  • SotnVpnName: {{ siteDetailData.baseNames.sotnVpnName }}
    • -
-
-

CPE

-
    -
  • Name: {{siteDetailData.cpeNames.device_name}}
    • -
  • Version: {{ siteDetailData.cpeNames.device_version }}
    • -
  • ESN: {{ siteDetailData.cpeNames.device_esn }}
    • -
  • Class: {{ siteDetailData.cpeNames.device_class }}
    • -
  • System IP: {{ siteDetailData.cpeNames.device_systemIp }}
    • -
  • Vendor: {{ siteDetailData.cpeNames.device_vendor }}
    • -
  • Type: {{ siteDetailData.cpeNames.device_type }}
    • -
-

WAN Port

- - - - NO. - Name - Description - PortType - PortNumber - IPAddress - Action - - - - - - {{i+1}} - {{item.sitewanport_name}} - {{item.sitewanport_description}} - {{item.sitewanport_portType}} - {{item.sitewanport_portNumber}} - {{item.sitewanport_ipAddress}} - Detail - - - - - - - WAN Port Detail - + + + + + {{i+1}} + {{item.sitewanport_name}} + {{item.sitewanport_description}} + {{item.sitewanport_portType}} + {{item.sitewanport_portNumber}} + {{item.sitewanport_ipAddress}} + Detail + + + + + + + WAN Port Detail + - -

Name {{wanPortDetail.sitewanport_name}}

-

Description: {{wanPortDetail.sitewanport_description}}

-

Port Type: {{wanPortDetail.sitewanport_portType}}

-

Port Number: {{wanPortDetail.sitewanport_portNumber}}

-

Ip Address: {{wanPortDetail.sitewanport_ipAddress}}

-

Provider IP Address: {{wanPortDetail.sitewanport_providerIpAddress}}

-

Transport Nerwork: {{wanPortDetail.sitewanport_transportNetworkName}}

-

Input Bandwidth: {{wanPortDetail.sitewanport_inputBandwidth}}

-

Output Bandwidth: {{wanPortDetail.sitewanport_outputBandwidth}}

- + +

Name {{wanPortDetail.sitewanport_name}}

+

Description: {{wanPortDetail.sitewanport_description}}

+

Port Type: {{wanPortDetail.sitewanport_portType}}

+

Port Number: {{wanPortDetail.sitewanport_portNumber}}

+

Ip Address: {{wanPortDetail.sitewanport_ipAddress}}

+

Provider IP Address: {{wanPortDetail.sitewanport_providerIpAddress}}

+

Transport Nerwork: {{wanPortDetail.sitewanport_transportNetworkName}}

+

Input Bandwidth: {{wanPortDetail.sitewanport_inputBandwidth}}

+

Output Bandwidth: {{wanPortDetail.sitewanport_outputBandwidth}}

+ - - - - -
+ + +
-
-
-

Site_Group List

- - - - NO. - Group Name - Topology - - - - - - {{i+1}} - {{item.name}} - {{item.topology}} - - - -
+
+ +
+

Site_Group List

+ + + + NO. + Group Name + Topology + + + + + + {{i+1}} + {{item.name}} + {{item.topology}} + + + + +
- +
-
- - - - - - - - - - - - - {{vpns[0].domain}} - - - - - - {{vpns[1].domain}} - - - - - - - {{vpns[0].sitetpname}} - - - - - - {{vpns[0].othertpname}} - - - - - - - {{vpns[1].othertpname}} - - - - - - {{vpns[1].sitetpname}} - - - - - - - SP Partent Network - - - - - - - {{localSite[0]["service-instance-name"]}} - - - - - - {{localSite[1]["service-instance-name"]}} - - - - - - - {{outerSite[1]["service-instance-name"]}} - - - - - - {{outerSite[0]["service-instance-name"]}} - - - -
+ +
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts index dc5d34d9..b8afc9c3 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts @@ -1,3 +1,18 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { CcvpnDetailComponent } from './ccvpn-detail.component'; diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts index c9d60ef8..6f30253d 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -3,366 +3,830 @@ 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'] + 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; - } - } + constructor(private myhttp:MyhttpService) { } + + ngOnInit() { + // this.getDetails(); + this.dataInit(); + this.drawImages(); } - 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; - } + @Input() detailParams; + @Input() namesTranslate; + @Output() closeDetail = new EventEmitter(); + + sotnVpnInfo:any; + siteList=[]; + siteGroupList=[]; + dataInit(){ + console.log(this.detailParams); + + this.sotnVpnInfo = JSON.parse(this.detailParams['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; + } + } } - if(hasfind){ continue }; - let wanportStartName = key.split("_")[0]; - // 先分组，后面再变换名字 - let theItem = oneSite["wanportNames"].find((item,index)=>{ - if(item){ - return Object.keys(item)[0].startsWith(wanportStartName) - } + + this.siteList = this.detailParams.siteSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; }) - 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.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.vpns = this.detailParams.sotnvpnSer.vpns; - res("sotn-domain"); - // console.log(vpn); - }) - - }) - }) + this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; }) - }) - } - - 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); + 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; + } + } + } + }) + } + + + 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; + } + + + + + + localSite = []; + outerSite = []; + + 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] && this.localSite[0]["service-instance-name"].startsWith("Dc")){ + this.localSite.reverse(); + } + + if(this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")){ + this.outerSite.reverse(); + } + console.log(this.localSite); + console.log(this.outerSite); + + 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)=>{ + let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"}); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"]; + site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"]; + res("sites-domain"); + }) + }) + }) + } + + + vpns = [{ + name:"", + domain: "", + tp1: "", + tp2: "", + tps:[], + site: [], + type: "domain", + start:false, + end:false + }]; + cloudDomain={ + cloud: "Partent Network", + site: [], + type: "cloud" + }; + d3Data={ + dates:[], + linkss:[] + }; + svg=d3.select("#togo"); + scale=1; + width=600; + height=600; + container; + nodes; + lineGroup; + + getSotnAresource(){ + return new Promise((res,rej)=>{ + let connectivityId = this.detailParams["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)=>{ + + 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.vpns = vpns.map((item)=>{return { + name:item, + domain: "", + tp1: "", + tp2: "", + tps:[], + site: [], + type: "domain", + start:false, + end:false + }}); + this.detailParams.vpns.forEach((vpn,index)=>{ + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2)=>{ + + 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"]}); + + vpn.tps = tpnames; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((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"]; + console.log(this.localSite) + for(let i=0;i-1){ + this.detailParams.vpns[a].site=[]; + let index=tps.indexOf(this.localSite[i]["tpsitename"]); + let tp1=tps.slice(index,1)[0]; + let tp2=tps.find((name)=>{return name != tp1}); + this.detailParams.vpns[a].tp1=tp1; + this.detailParams.vpns[a].tp2=tp2; + this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]); + this.detailParams.vpns[a].start=true; + let first=this.detailParams.vpns.splice(a,1)[0]; + console.log(first) + this.detailParams.vpns.unshift(first); + console.log(this.detailParams.vpns) + }else { + this.detailParams.vpns[a].tp1=tps[0]; + this.detailParams.vpns[a].tp2=tps[1]; + } + + } else if(i==1){ + if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){ + let thisDomain=this.detailParams.vpns[a].domain; + if(thisDomain==this.detailParams.vpns[0].domain){ + console.log(this.detailParams.vpns[0]); + console.log(this.localSite[i]["service-instance-name"]); + this.detailParams.vpns[0].site.push(this.localSite[i]["service-instance-name"]) + console.log(this.detailParams.vpns[0]) + }else { + this.detailParams.vpns[a].site=[]; + let index=tps.indexOf(this.localSite[i]["tpsitename"]); + let tp2=tps.slice(index,1)[0]; + let tp1=tps.find((name)=>{return name != tp2}); + this.detailParams.vpns[a].tp1=tp1; + this.detailParams.vpns[a].tp2=tp2; + console.log("有多个domain,2个site"); + this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]); + this.detailParams.vpns[a].start=false; + this.detailParams.vpns[a].end=true; + let last=this.detailParams.vpns.splice(a,1)[0]; + console.log(last); + this.detailParams.vpns.push(last); + } + + } + } + + } + } + for(let b=0;b{ + console.log(data); + return this.getSotnAresource(); + }).then((data)=>{ + console.log(data); + this.detailParams.vpns.forEach((item)=>{ + if(item.type == "domain" && item.site.length == 0){ + this.d3Data.dates.push( + { + name: item.domain, + type: 'domain' + },{ + name: item.tp1, + type: 'tp' + + },{ + name: item.tp2, + type: 'tp' + }); + this.d3Data.linkss.push({ + source: item.domain, + target: item.domain + },{ + source: item.domain, + target: item.tp1 + },{ + source: item.domain, + target: item.tp2 + }) + }; + if (item.type == "domain" && item.site.length == 1) { + this.d3Data.dates.push({ + name: item.domain, + type: 'domain' + }, { + name: item.tp1, + type: 'tp' + }, { + name: item.tp2, + type: 'tp' + }); + this.d3Data.linkss.push({ + source: item.domain, + target: item.domain + }, { + source: item.domain, + target: item.tp1 + }, { + source: item.domain, + target: item.tp2 + }); + if (item.start == true && item.end == false) { + this.d3Data.dates.push( + { + name: item.site[0], + type: 'site' + }); + this.d3Data.linkss.push({ + source: item.tp1, + target: item.site[0] + }) + } + if (item.start == false && item.end == true) { + this.d3Data.dates.push( + { + name: item.site[0], + type: 'site' + }); + this.d3Data.linkss.push({ + source: item.tp2, + target: item.site[0] + }) + } + + }else if (item.type == "domain" && item.site.length == 2) { + this.d3Data.dates.push({ + name: item.domain, + type: 'domain' + }, { + name: item.tp1, + type: 'tp' + }, { + name: item.tp2, + type: 'tp' + }, + { + name: item.site[0], + type: 'site' + }, + { + name: item.site[1], + type: 'site' + }); + this.d3Data.linkss.push({ + source: item.domain, + target: item.domain + }, { + source: item.domain, + target: item.tp1 + }, { + source: item.domain, + target: item.tp2 + }, { + source: item.tp1, + target: item.site[0] + }, { + source: item.tp2, + target: item.site[1] + }); + }else if (item.type == "cloud" && item.site.length == 1) { + this.d3Data.dates.push({ + name: item.cloud, + type: 'cloud' + }, + { + name: item.site[0], + type: 'site' + }); + this.d3Data.linkss.push({ + source: item.cloud, + target: item.cloud + }, { + source: item.cloud, + target: item.site[0] + }) + } + else if (item.type == "cloud" && item.site.length == 2) { + this.d3Data.dates.push({ + name: item.cloud, + type: 'cloud', + source: item.cloud, + target: item.cloud + }, + { + name: item.site[0], + type: 'site', + source: item.cloud, + target: item.site[0] + }, + { + name: item.site[1], + type: 'site', + source: item.cloud, + target: item.site[1] + }); + this.d3Data.linkss.push({ + source: item.cloud, + target: item.cloud + }, { + source: item.cloud, + target: item.site[0] + }, { + source: item.cloud, + target: item.site[1] + }) + } + + + }); + + var siteNum = 0; + + for (var b = 0; b < this.d3Data.dates.length; b++) { + if (this.d3Data.dates[b].type == "site") { + siteNum++; + } + } + + if (this.detailParams.vpns.length == 2) { + var source = this.detailParams.vpns.find((item) => {return item["type"] == "domain"}).site[1]; + var target = this.detailParams.vpns.find((item) => {return item["type"] == "cloud"}).site[0]; + this.d3Data.linkss.push({ + source: source, + target: target + }) + } else if (this.detailParams.vpns.length > 2) { + if (siteNum == 2) { + for (var c = 0; c < this.detailParams.vpns.length - 1; c++) { + if (c + 1 == this.detailParams.vpns.length - 1) { + var sourcess = this.detailParams.vpns[c].tp2, + targetss = this.detailParams.vpns.find((item)=> {return item["type"] == "cloud";}).cloud; + this.d3Data.linkss.push({ + source: sourcess, + target: targetss + }); + break; + } + var sources = this.detailParams.vpns[c].tp2, + targets = this.detailParams.vpns[c + 1].tp1; + this.d3Data.linkss.push({ + source: sources, + target: targets + }) + } + } else if (siteNum == 4) { + for (var c = 0; c < this.detailParams.vpns.length - 1; c++) { + if (c + 1 == this.detailParams.vpns.length - 1) { + break; + } + var sources = this.detailParams.vpns[c].tp2, + targets = this.detailParams.vpns[c + 1].tp1; + this.d3Data.linkss.push({ + source: sources, + target: targets + }) + } + } + } + setTimeout(this.render(),0) + }); + } + + + + clickShow = false; + hoverShow = false; + toggleClick(){ + this.clickShow = !this.clickShow; + } + hoverShowcould(){ + this.hoverShow = true; + } + hoverHidecould(){ + this.hoverShow = false; + } + + + + goback(){ + this.closeDetail.emit(); + } + + + render() { + console.log("dadada"); + console.log(this.d3Data); + console.log(this.detailParams.vpns); + this.scale = 1; + + this.svg .attr('width', this.width) + .attr('height', this.height); + this.container = this.svg.append('g') + .attr('transform', 'scale(' + this.scale + ')'); + + this.initPosition(); + this.initLink(); + this.initNode(); + } + + + initPosition() { + let origin = [this.width / 6, this.height / 7]; + var data=this.d3Data.dates; + let points = this.getVertices(origin, Math.min(this.width, this.height) * 0.3,data.length,this.detailParams.vpns); + + this.d3Data.dates.forEach((item,i)=>{ + item.x = points[i].x; + item.y = points[i].y; + }) + } + + + getVertices(origin, r, n,data) { + if (typeof n !== 'number') return; + var ox = origin[0]; + var oy = origin[1]; + var i = 0; + var points = []; + var tempAngle =180, + reduce=50, + add=100; + for(let a=0;a2)){ + tempAngle =180*i; + }else{ + tempAngle =400*i; + } + points.push({ + x: ox +tempAngle, + y: oy + },{ + x: ox +tempAngle-1.5*reduce, + y: oy+2*add + } + ,{ + x: ox +tempAngle+1.5*reduce, + y: oy+2*add + }); + i++; + } + + } + } + + return points; + } + + + initLink() { + this.drawLinkLine(); + } + + + initNode() { + var self = this; + + this.nodes = this.container.selectAll(".node") + .data(this.d3Data.dates) + .enter() + .append("g") + .attr("transform", function (d) { + return "translate(" + d.x + "," + d.y + ")"; + }) + .attr('class', 'node') + .style("cursor","pointer") + .call(d3.behavior.drag() + .on("drag", function (d) { + self.onDrag(this, d) + }) + ); + + + this.drawNodeSymbol(); + + this.drawNodeTitle(); + } + + + + drawNodeSymbol() { + var imgmap = { + 'domain': '../../assets/images/domain.png', + 'tp': '../../assets/images/tp.png', + 'site': '../../assets/images/site.png', + 'cloud': '../../assets/images/out-domain.png' + }; + + + this.nodes.append('image') + .attr('width', function (d) { + let width = "15%"; + switch (d.type) { + case 'domain': + width ="15%"; + break; + case 'tp': + width ="4%"; + break; + case 'site': + width ="10%"; + break; + case 'cloud': + width ="15%"; + break; + default: + break; + } + return width; + }) + .attr('height', function (d) { + let height = "15%"; + switch (d.type) { + case 'domain': + height ="15%"; + break; + case 'tp': + height ="4%"; + break; + case 'site': + height ="10%"; + break; + case 'cloud': + height ="15%"; + break; + default: + break; + } + return height; + }) + .attr('xlink:href', function (d) { + return imgmap[d.type]; + }) + .attr('x',function () { + return -this.getBBox().width/2 + }) + .attr('y',function () { + return -this.getBBox().height/2 + }); + } + + + + drawNodeTitle() { + + this.nodes.append("text") + .attr('class','node-title') + .text(function (d) { + return d.name; + }) + .attr("dx",function (d) { + var x=0; + if(d.type=="tp"){ + x=20; + }else { + x=0; + } + return x; + }) + .attr("dy",function (d) { + var y=0; + if(d.type=="tp"){ + y=25; + }else { + y=0; + } + return y; + }); + } + + + drawLinkLine() { + let data = this.d3Data.dates; + if (this.lineGroup) { + this.lineGroup.selectAll('.link') + .attr('d', link => genLinkPath(link)) + } else { + this.lineGroup = this.container.append('g'); + this.lineGroup.selectAll('.link') + .data(this.d3Data.linkss) + .enter() + .append('path') + .attr('class', 'link') + .attr('d',function (link) { + return genLinkPath(link) + }) + } - // 当外部site有两个的时候 - if(this.outerSite.length==2){ - let line = { - "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 - } - this.detailLines.push(line); + function genLinkPath(d) { + let sx = data.find(function(item){ + return item["name"]==d.source; + }).x; + let sy = data.find(function(item){ + return item["name"]==d.source; + }).y; + let tx =data.find(function(item){ + return item["name"]==d.target; + }).x; + let ty =data.find(function(item){ + return item["name"]==d.target; + }).y; + return 'M' + sx + ',' + sy + ' L' + tx + ',' + ty; } - } - }) - // 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 + + + + update(d) { + this.drawLinkLine(); } - ]; - 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(); - } + + + onDrag(ele, d) { + d.x = d3.event.x; + d.y = d3.event.y; + d3.select(ele) + .attr('transform', "translate(" + d3.event.x + "," + d3.event.y + ")"); + this.update(d); + } + } -- cgit 1.2.3-korg