diff options
Diffstat (limited to 'usecaseui-portal')
3 files changed, 843 insertions, 942 deletions
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 02c3d4c6..912157de 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -1,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 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. @@ -25,19 +25,44 @@ hr { margin-bottom: 10px; } .model { - background-color: #fff; - height: 90%; + background-color: #F7F8FC; + /*height: 100%;*/ overflow-y: auto; } +.creation-model{ + position: relative; + height: 100%; +} +.top-title{ /*2019.02.22 add*/ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} .model .back { position: absolute; top: 10px; right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:#ffffff!important; + border-radius:4px; + color: #D7D7D7; } +.top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; +} + + .model .detaildata { - position: relative; - width: 60%; - height: 100%; + width: 100%; overflow-y: auto; border-radius: 5px; padding: 15px; @@ -50,76 +75,223 @@ hr { .model .detaildata h3 { height: 20px; font: 700 16px/20px "Arial"; - margin: 5px 0px; + margin: 5px 0; color: #000; } +.model .detaildata .service-title{ + margin:60px 50px; +} +.model .detaildata .service-title .info-inputs{ + width:400px; + height: 42px; + display: inline-block; +} +.model .detaildata .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .detaildata .service-title .lable{ + display: inline-block; + width: 100px; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; +} +.model .detaildata .service-title .service-title-input { + width: 230px; + height: 42px; + border-radius:4px; + margin-right: 30px; + display: inline-block; +} /* SOTN VPN */ .model .detaildata .sotnvpn ul li { display: inline-block; - height: 35px; - width: 49.5%; + height: 40px; + width: 24.5%; + margin-bottom: 40px; + float: left; } .model .detaildata .sotnvpn ul li span { display: inline-block; - width: 110px; - font: 700 14px "Arial"; - color: #3fa8eb; + font-size: 14px; + font-weight: 500; + color:rgba(60,79,140,0.5); + margin-left: 10px; vertical-align: middle; + float: left; + width: 110px; } -/* site Detail */ -.model .detaildata .site .siteDetail { - position: fixed; - z-index: 10; - left: 260px; - top: 50px; + +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50px; + top: 60px; background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 50%; - max-height: 85%; - border-radius: 5px; - overflow-y: auto; + /*box-shadow: 0px 0px 20px #000;*/ + width:1500px; + /*width:1300px;px*/ + height: 81%; + border-radius:2px; + overflow:auto; +} +.model .sotnnpnmodel{ + width: 1000px; + height: 53%; + top:200px; + left: 50%; + margin-left: -500px; +} +.model .sitemodel h3,.model .sotnnpnmodel h3{ + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + /*padding-left: 10px;*/ + color: #06A7E2; + /*color: #ffffff;*/ + /*background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);*/ + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; +} +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { + padding: 10px 20px 0; } -.model .detaildata .site h3 { - margin: 0; +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { + display: inline-block; + height: 35px; + line-height: 35px; + width: 24.5%; + margin-bottom: 20px; +} +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs div{ + width: 186px; + float: left; + margin-left: 20px; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; + cursor: pointer +} +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ + /*background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);*/ + background: #0DA9E2; + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ + /*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/ + background:#09C6E2; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.sitemodel h3 button,.sotnnpnmodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; + border-radius:4px; + border:1px solid #D7D7D7; +} +.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{ + background:#ffffff; + color: #0DA9E2; + border:1px solid #0DA9E2; +} +.sitemodel h3>button,.sotnnpnmodel h3>button{ + float: right; + width: 30px; height: 30px; - font: 700 16px/30px "Arial"; - padding-left: 10px; - background-color: #ddd; + margin-right: 15px; } + +/* site Detail */ + .model .detaildata .site h3 .closeDetail { cursor: pointer; padding: 2px 15px; color: #3fa8eb; } -.model .detaildata .site ul li { - padding-left: 5px; - display: inline-block; - height: 35px; - width: 32%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + +.model .detaildata .sotnvpn,.model .detaildata .site{ + background: #fff; + padding: 30px 30px 0 30px; } -.model .detaildata .site ul li span { - display: inline-block; - width: 95px; - font: 700 14px "Arial"; - color: #3fa8eb; - vertical-align: middle; + +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; } /* 图 */ .model .chart { - width: 40%; + width: 98%; padding: 10px; - height: 100%; - border-left: 10px solid #f3f3f3; + margin: 0 auto; + color: #06A7E2; + font-size: 16px; + font-weight: 500; + margin-bottom: 30px; + background: #EEF9FF; + border-radius: 4px; } .model .chart #detailChart { - position: relative; width: 100%; - height: 80%; + height: 254px; margin-top: 20px; + position: relative; } .model .chart #detailChart .cloudcounty { cursor: pointer; @@ -136,21 +308,26 @@ hr { border-radius: 5px; box-shadow: 0px 0px 20px #000; } -#togo{ - width: 600px; - height:400px; - border:1px solid #ccc; - user-select: none; +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; } -#togo text{ - font-size:10px; - fill:#1A2C3F; - text-anchor: middle; +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; } - -#togo .link{ - stroke:#FFC000; +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; } -#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 0c3ece3c..5e630767 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -1,5 +1,5 @@ <!-- - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 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. @@ -13,171 +13,233 @@ See the License for the specific language governing permissions and limitations under the License. --> -<h3 class="title"> Services List </h3> -<hr> -<div class="model"> - <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button> - <div class="detaildata fl"> - <h3 class="title" style="margin-bottom: 20px">{{detailParams['service-instance-name']}} Instance Detail</h3> - <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab [nzTitle]="'SOTN VPN Info'"> - <div class="sotnvpn clearfix"> - <!--<h3>SOTN VPN Info</h3>--> - <ul> - <li><span>Name:</span> {{sotnVpnInfo.name}}</li> - <li><span>Description:</span> {{sotnVpnInfo.description}} </li> - <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li> - <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li> - <li><span>COS:</span> {{sotnVpnInfo.COS}}</li> - <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li> - <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li> - <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li> - <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li> - <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li> - <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li> - <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li> - <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li> - <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li> - </ul> +<div class="model creation-model" style="background: #F7F8FC;"> + <!-- ???? --> + <div class="top-title"> + <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3> + <div class="fl" style="width: 20%"> + <button class="back" nz-button (click)="goback()"> + <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i> + </button> + </div> + </div> + <!-- ͼ --> + <div class="chart"> + + <div id="detailChart"> + <svg width="100%" height="100%" style="position: relative"> + <!--local domain--> + <g class="clouds"> + <image xlink:href="./assets/images/domain1.png" + id="domain1" + width="14%" + x="17%" y="14%" + ></image> + <text dx="24%" dy="51%" style="font-size: 14px; fill:#ffffff;width: 20px;"> + {{vpns[0].domain}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/domain1.png" + id="domain2" + width="14%" + x="40%" y="40%" + ></image> + <text dx="43%" dy="19%" style="font-size: 14px; fill: #ffffff;width: 20px;"> + {{vpns[1].domain}} + </text> + </g> + <!--domain1 tp--> + <g class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp1" + height="16" width="20" + x="21%" y="37%" + ></image> + <text dx="21%" dy="34%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].sitetpname}} + </text> + </g> + <g class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp2" + height="16" width="20" + x="29%" y="52%" + ></image> + <text dx="29%" dy="49%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].othertpname}} + </text> + </g> + <!--domain2 tp--> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp3" + height="16" width="20" + x="44%" y="52%" + ></image> + <text dx="44%" dy="49%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].othertpname}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp4" + height="16" width="20" + x="51%" y="78%" + ></image> + <text dx="51%" dy="75%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].sitetpname}} + </text> + </g> + <!--clouds--> + <g class="clouds"> + <image xlink:href="./assets/images/cloud-out.png" + id="extent-cloud" + width="14%" + x="70%" y="11%" + ></image> + <text dx="75%" dy="39%" style="font-size: 14px; fill: #666;width: 20px;"> + SP Partent Network + </text> + </g> + <!--local site--> + <g class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site1" + height="59" width="100" + x="6%" y="29%" + ></image> + <text dx="8%" dy="26%" style="font-size: 14px; fill: #666;width: 20px;"> + {{localSite[0] && localSite[0]["service-instance-name"]}} + </text> + </g> + <g *ngIf="!detailSites" class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site2" + height="59" width="100" + x="61%" y="70%" + *ngIf="this.vpns.length == 2" + ></image> + <text dx="62%" dy="66%" style="font-size: 14px; fill: #666;width: 20px;" *ngIf="this.vpns.length == 2"> + {{ localSite[1] && localSite[1]["service-instance-name"]}} + </text> + <image xlink:href="./assets/images/site.png" + id="site2" + height="59" width="100" + x="40%" y="44%" + *ngIf="this.vpns.length == 1" + ></image> + <text dx="41%" dy="40%" style="font-size: 14px; fill: #666;width: 20px;" *ngIf="this.vpns.length == 1"> + {{ localSite[1] && localSite[1]["service-instance-name"]}} + </text> + </g> + <!--cloud site--> + <g *ngIf="!detailSites" class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site3" + height="59" width="100" + x="89%" y="10%" + ></image> + <text dx="90%" dy="7%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[1]["service-instance-name"]}} + </text> + </g> + <g class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site4" + height="59" width="100" + x="89%" y="40%" + ></image> + <text dx="90%" dy="37%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[0]["service-instance-name"]}} + </text> + </g> + <!--tp,site,domain---line --> + <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#2F8BF7; stroke-width:2"></line> + <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line> + </svg> + </div> + </div> + <div class="detaildata"> + <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle> + <nz-tab nzTitle="Service Info"> + <div class="service-title" style="clear: both"> + <span class="lable" style="width: 60px">name:</span> + <div class="service-title-input">{{templateParameters.service["name"]}}</div> + <span class="lable">description:</span> + <div class="service-title-input">{{templateParameters.service["description"]}}</div> </div> </nz-tab> - <nz-tab [nzTitle]="'Site List'"> - <div class="site"> - <!--<h3>Site List</h3>--> - <nz-table #nzTable [nzData]="siteList" + <nz-tab nzTitle="Sdwanvpnresource List"> + <div class="sotnvpn clearfix"> + <div style="clear: both;height: 10px"> + <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3> + </div> + <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" [nzShowPagination]="false" nzSize="small"> <thead> <tr> - <th nzWidth="10%"> NO. </th> - <th nzWidth="15%"> Name </th> - <th nzWidth="20%"> Description </th> - <th nzWidth="15%"> Post Code </th> - <th nzWidth="15%"> Address </th> - <th nzWidth="15%"> VLAN </th> + <th width="30%"> NO.</th> + <th width="30%"> Name</th> + <th width="30%"> topology</th> <th nzWidth="10%"> Action </th> </tr> </thead> <tbody> - - <tr *ngFor="let item of nzTable.data; let i = index; "> + <tr *ngFor="let item of sotnVpnTable.data; let i = index; "> <td>{{i+1}}</td> - <td>{{item.baseNames.name}}</td> - <td>{{item.baseNames.description}}</td> - <td>{{item.baseNames.postcode}}</td> - <td>{{item.baseNames.address}}</td> - <td>{{item.baseNames.vlan}}</td> - <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td> + <td>{{item.sdwanvpn_name}}</td> + <td>{{item.sdwanvpn_topology}}</td> + <td> + <span class="action" (click)="showstonVpnDetail(i+1)"><i class="anticon anticon-bars"></i></span> + </td> </tr> - </tbody> </nz-table> - <div class="siteDetail" *ngIf="siteDetail"> - <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3> - <ul> - <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li> - <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li> - <li *ngIf="detailParams.serviceDomain == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li> - <li *ngIf="detailParams.serviceDomain == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li> - <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li> - <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li> - <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li> - <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li> - <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li> - <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li> - <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li> - <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li> - <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li> - <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li> - <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li> - </ul> - <div *ngIf="detailParams.serviceDomain == 'CCVPN'"> - <h3>CPE</h3> - <ul> - <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li> - <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li> - <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li> - <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li> - <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li> - <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li> - <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li> - </ul> - <h3>WAN Port</h3> - <nz-table #nzTable [nzData]="siteDetailData.wanportNames" - [nzShowPagination]="false" - nzSize="small"> - <thead> - <tr> - <th nzWidth="10%"> NO. </th> - <th nzWidth="15%"> Name </th> - <th nzWidth="20%"> Description </th> - <th nzWidth="15%"> PortType </th> - <th nzWidth="15%"> PortNumber </th> - <th nzWidth="15%"> IPAddress </th> - <th nzWidth="10%"> Action </th> - </tr> - </thead> - <tbody> - - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{i+1}}</td> - <td>{{item.sitewanport_name}}</td> - <td>{{item.sitewanport_description}}</td> - <td>{{item.sitewanport_portType}}</td> - <td>{{item.sitewanport_portNumber}}</td> - <td>{{item.sitewanport_ipAddress}}</td> - <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td> - </tr> - - </tbody> - </nz-table> - <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()"> - <ng-template #modalTitle> - WAN Port Detail - </ng-template> - - <ng-template #modalContent> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p> - <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p> - </ng-template> - - <ng-template #modalFooter> - - </ng-template> - </nz-modal> - </div> - - </div> </div> </nz-tab> - <nz-tab [nzTitle]="'Site_Group List'" *ngIf="detailParams.serviceDomain == 'CCVPN'"> - <div class="sitegroup" > - <h3>Site_Group List</h3> - <nz-table #nzTable [nzData]="siteGroupList" - [nzLoading]="loading" + <nz-tab nzTitle="Sdwansiteresource List"> + <div class="site"> + <div style="height: 10px"> + <h3 style="float: left;color: #3C4F8C">Site List</h3> + <button nz-button (click)="addSite()" class="addListBtn" + style="float: right;margin-right: 10px"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <nz-table #nzTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small"> <thead> <tr> <th nzWidth="10%"> NO. </th> - <th nzWidth="20%"> Group Name </th> - <th nzWidth="20%"> Topology </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="20%"> Description </th> + <th nzWidth="15%"> Post Code </th> + <th nzWidth="15%"> Address </th> + <th nzWidth="15%"> VLAN </th> + <th nzWidth="10%"> Action </th> </tr> </thead> <tbody> <tr *ngFor="let item of nzTable.data; let i = index; "> <td>{{i+1}}</td> - <td>{{item.name}}</td> - <td>{{item.topology}}</td> + <td>{{item.sdwandevice_list[0].name}}</td> + <td>{{item.sdwansite_description}}</td> + <td>{{item.sdwansite_postcode}}</td> + <td>{{item.sdwansite_address}}</td> + <td>{{item.sdwansite_emails}}</td> + <td> + <span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span> + <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span> + </td> </tr> </tbody> @@ -186,14 +248,88 @@ </nz-tab> </nz-tabset> </div> - - <div class="chart fr"> - - <div id="detailChart"> - <svg id="togo"> - - </svg> + <!-- sotnVpn model --> + <div class="sotnnpnmodel" *ngIf="sotnVpnDetailShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> + <span>{{item.lableShow}}:</span> + <span class="input-info">{{sotnInfo[item.lable]}}</span> + </li> + </ul> + </div> + <div> + <h3>Sdwansitelan List</h3> + <div> + <div style="width: 100%;text-align: right"> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" class="tr-border"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="key != 'lable' ">{{item[key]}}</span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <div class="action"> + <button nz-button nzType="primary" (click)="detailSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> </div> </div> + <!-- site model --> + <div class="sitemodel" *ngIf="siteDetail"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list"> + <span>{{item.lableShow}}:</span> + <span class="input-info">{{siteBaseData[item.lable]}}</span> + </li> + </ul> + </div> + <div> + <h3>Sdwandevice</h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.site.sdwandevice_list"> + <span>{{item.lable}}:</span> + <span class="input-info">{{siteCpeData[item.lable]}}</span> + </ul> + </div> + <h3>Sdwansitewan List</h3> + <div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteWanData; let i = index;" class="tr-border"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);"> + <span *ngIf="key != 'lable' ">{{item[key]}}</span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <div class="action"> + <button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + </div> + </div> + <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail" (click)="hiddenModel()"></div> </div> 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 9992ecef..4f535d33 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 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. @@ -36,102 +36,216 @@ export class CcvpnDetailComponent implements OnInit { @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; - } - } + tabBarStyle = { + "height": "58px", + "width": "694px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; + input_parameters: any; + templateParameters = { + service: {}, + sotnvpn: { + // info: {}, + sdwanvpnresource_list: [], + sdwansitelan_list: [] + }, + site: { + // info: {}, + sdwansiteresource_list: [], + sdwandevice_list: [], + sdwansitewan_list: [] } + }; + // SOTN VPN List + sotnVpnTableData = []; + sotnInfo = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data + + // Site List + siteTableData = []; + siteBaseData = {}; //sitemodel one sdwansiteresource_list + // cpe + siteCpeData = {}; //sitemodel two sdwandevice_list + // Wan Port + siteWanData = []; //sitemodel three wan port Table data + siteWanParams = {}; //wan port Table Detailed parameters of each line of data + getKeys(item) { + return Object.keys(item); + } + //tabBarStyle + dataInit() { + console.log(this.detailParams) + this.input_parameters = JSON.stringify(this.detailParams['input-parameters']) + this.input_parameters = JSON.parse(this.input_parameters); + console.log(this.input_parameters); + this.templateParameters.service = { + name: this.input_parameters.service.name, + description: this.input_parameters.service.description + }; + let inputs = this.input_parameters.service.parameters.requestInputs; + //筛选 分离 sotnvpn数据 + inputs["sdwanvpnresource_list"].map((item, index) => { + this.sotnVpnTableData.push(item); + }); - 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 sdwanvpnresource_list = inputs["sdwanvpnresource_list"][0]; + Object.keys(sdwanvpnresource_list).forEach((its) => { + let input = {}; + if(its =="sdwansitelan_list"){ + this.templateParameters["sotnvpn"]["sdwansitelan_list"] = sdwanvpnresource_list[its] + }else if(its !="sdwansitelan_list"){ + input[its] = sdwanvpnresource_list[its]; + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input); + } + }); - let theItem = oneSite["wanportNames"].find((item,index)=>{ - if(item){ - return Object.keys(item)[0].startsWith(wanportStartName) - } + console.log( this.templateParameters.sotnvpn); + console.log(this.sotnVpnTableData); + + //筛选 分离 site数据 + inputs["sdwansiteresource_list"].map((item, index) => { + this.siteTableData.push(item); + }); + + let sdwansiteresource_list = inputs["sdwansiteresource_list"][0]; + Object.keys(sdwansiteresource_list).forEach((its) => { + let input2 = {}; + if(its =="sdwandevice_list"){ + Object.keys(sdwansiteresource_list[its][0]).forEach((i) => { + let input1 = {}; + input1[i] = sdwansiteresource_list[its][i]; + this.templateParameters["site"]["sdwandevice_list"].push(input1); }) - theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]}) + }else if(its =="sdwansitewan_list"){ + this.templateParameters["site"]["sdwansitewan_list"] = sdwansiteresource_list[its] + }else if(its !="sdwandevice_list" && its !="sdwansitewan_list"){ + input2[its] = sdwansiteresource_list[its]; + this.templateParameters["site"]["sdwansiteresource_list"].push(input2); } - 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; + }); + console.log( this.templateParameters.site); + console.log(this.siteTableData); + + this.showTemParametersSotnVpn(); + this.showTemParametersSite(); + + } + + //sotnVpn data, after combining the structure, rendering the template data to the page + showTemParametersSotnVpn(){ + //sotn Data analysis, structure assembly + this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.sotnInfo = Object.assign(this.sotnInfo, input); } - }) + } + }); - }) + this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); + } + } + }); + this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); + } - 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; - } + //Site data, after combining the structure, rendering the template to the page + showTemParametersSite() { + //site Data analysis, structure assembly + this.templateParameters.site.sdwansiteresource_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.siteBaseData = Object.assign(this.siteBaseData, input); } } - }) + }); + + this.templateParameters.site.sdwandevice_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteCpeData = Object.assign(this.siteCpeData, input); + } + } + }); + this.templateParameters.site.sdwansitewan_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); + } + } + }); + this.siteWanData.push(this.siteWanParams); } + //sotnVpn detail show + sotnVpnDetailShow = false; + isEditSotnVpn = 0; + showstonVpnDetail(num){ + this.sotnVpnDetailShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {},item) + }); + } + detailSotnVpn_cancel(){ + this.sotnVpnDetailShow = false; + } - siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]}; + // site detail show siteDetail = false; - showSiteDetail(item){ + isEditSite = 0; + showSiteDetail(num) { this.siteDetail = true; - this.siteDetailData = item; + this.isEditSite = num; + console.log(this.siteTableData[num - 1]); + console.log(this.siteCpeData); + console.log(this.templateParameters.site.sdwandevice_list); + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteCpeData = Object.assign({}, this.siteTableData[num - 1].sdwandevice_list[0]); + console.log(this.siteCpeData); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, {},item) + }); } - - wanPortModal = false; - wanPortDetail = {}; - showWanportDetail(item){ - this.wanPortModal = true; - this.wanPortDetail = item; + detailsite_cancel(){ + this.siteDetail = false; } - handleCancel(){ - this.wanPortModal = false; + deleteSite(num){ + this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + console.log(this.siteTableData) } + addSite(){ + + } @@ -173,691 +287,165 @@ export class CcvpnDetailComponent implements OnInit { } - vpns = [{ - name:"", - domain: "", - tp1: "", - tp2: "", - tps:[], - site: [], - type: "domain", - start:false, - end:false - }]; - cloudDomain={ - cloud: "Partent Network", - site: [], - type: "cloud" - }; - d3Data={ - dates:[], - linkss:[] - }; - svg; - 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 - }}); - console.log(this.detailParams.vpns) - let getDomain = this.detailParams.vpns.map((vpn,index)=>{ - return new Promise((res,rej)=>{ + vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}]; + + + 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) => { + // console.log(data); //By default, a connectivityId can only find a 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.vpns = vpns.map((item) => { + return {name: item} + }); + this.detailParams.vpns.forEach((vpn, index) => { this.myhttp.getVpnBinding(vpn.name) - .subscribe((data2)=>{ - + .subscribe((data2) => { + // console.log(data2); //By default, a vpnid can only find a 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"]}); - + .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]}); //Find the same item on the site pnfname, that is, the same domain + // console.log(thissite); + // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename}); + // Get domain（network-resource） by pnfname; 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<this.localSite.length;i++){ - for(let a=0;a<this.detailParams.vpns.length;a++){ - let tps=this.detailParams.vpns[a].tps; - if(i==0){ - if(tps.indexOf(this.localSite[i]["tpsitename"])>-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); - } - - } - console.log(this.detailParams.vpns) - } - - } + .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.vpns; - console.log(this.vpns); + console.log(this.vpns) res(this.detailParams.vpns) }) console.log(this.detailParams.vpns) }) }) - - }); - Promise.all(getDomain).then((data)=>{ - console.log(this.vpns); - console.log(this.detailParams.vpns); - for(let b=0;b<this.outerSite.length;b++){ - this.cloudDomain.site.push(this.outerSite[b]["service-instance-name"]); - } - this.detailParams.vpns.push(this.cloudDomain); - this.vpns = this.detailParams.vpns; - this.getD3Data(this.detailParams.vpns) - }); - // res(this.detailParams.vpns) - }); - // }) - } - - drawImages(){ - this.getSiteAResource().then((data)=>{ - console.log(data); - this.getSotnAresource(); - }); - } - - getD3Data(data){ - console.log(data); - console.log("start d3data"); - console.log(this.detailParams.vpns); - 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; - var svgs=d3.select("#togo"); - this.svg=svgs; - 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;a<this.detailParams.vpns.length;a++){ - if(this.detailParams.vpns[a].type=="domain"){ - if(this.detailParams.vpns[a].site.length == 0){ - tempAngle =180*i; - points.push({ - x: ox +tempAngle, - y: oy - },{ - x: ox +tempAngle-reduce, - y: oy+add - },{ - x: ox +tempAngle+reduce, - y: oy+add - }); - i++; - }else if((this.detailParams.vpns[a].site.length == 1)){ - tempAngle =180*i; - points.push({ - x: ox +tempAngle, - y: oy - },{ - x: ox +tempAngle-reduce, - y: oy+add - },{ - x: ox +tempAngle+reduce, - y: oy+add - },{ - x: ox +tempAngle-1.5*reduce, - y: oy+2*add - }); - i++; - } else if((this.detailParams.vpns[a].site.length == 2)){ - tempAngle =350*i; - reduce=70; - points.push({ - x: ox +tempAngle, - y: oy - },{ - x: ox +tempAngle-reduce, - y: oy+add - },{ - x: ox +tempAngle+reduce, - y: oy+add - },{ - x: ox +tempAngle-1.5*reduce, - y: oy+2*add - } - ,{ - x: ox +tempAngle+reduce, - y: oy+2*add - }); - i++; - } + drawImages() { - }else if((this.detailParams.vpns[a].type=="cloud")){ - if((this.detailParams.vpns[a].site.length ==1)){ - tempAngle =180*i; - points.push({ - x: ox +tempAngle, - y: oy - },{ - x: ox +tempAngle+1.5*reduce, - y: oy+2*add - }); - i++; - } else if((this.detailParams.vpns[a].site.length == 2)){ - if((this.detailParams.vpns.length>2)){ - tempAngle =180*i; - }else{ - tempAngle =400*i; + this.getSiteAResource().then((data) => { + console.log(data); + return this.getSotnAresource() + }).then((data) => { + console.log(data); + console.log(this.localSite); + this.detailSites = this.detailParams.serviceDomain == "CCVPN" ? false : true; + // When there is only one vpn + if (this.detailParams.serviceDomain == "CCVPN" && this.vpns.length == 1) { + this.detailLines.length = this.detailLines.length - 3; + // this.detailLines.push(line); + // when local site have 2 + if (this.localSite.length == 2) { + let line = { + "x1": "30%", "y1": "55%", "x2": "42%", "y2": "55%"//tp2--tp3 } - 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; + this.detailLines.push(line); } - 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; + // when cloud site have 2 + if (this.outerSite.length == 2) { + let line = { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }; + this.detailLines.push(line); } - 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 - }); - } - - + } + }) + let allnodes = [this.getSiteAResource(),this.getSotnAresource()]; + Promise.all(allnodes).then((data)=>{ + console.log(data) + console.log(this.localSite); - 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') - .style("stroke","#FFC000") - .style("stroke-width",1) - .attr('d',function (link) { - return genLinkPath(link) - }) - + detailSites = false; + detailLines = [ //Details of the topology map connection coordinates + { + "x1": "9%", "y1": "40%", "x2": "21%", "y2": "40%"//site1--tp1 + }, + + { + "x1": "83%", "y1": "51%", "x2": "91%", "y2": "51%"//out-domain--site4 + }, + + { + "x1": "52%", "y1": "81%", "x2": "63%", "y2": "81%"//site2--tp4 + }, + { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }, + { + "x1": "30%", "y1": "55%", "x2": "44%", "y2": "55%"//tp2--tp3 } - 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; - } - } - + ]; - - update(d) { - this.drawLinkLine(); + 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); + hiddenModel(){ + this.sotnVpnDetailShow = false; + this.siteDetail = false; } - } |