diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-detail')
4 files changed, 0 insertions, 1717 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 deleted file mode 100644 index 72e59fa5..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ /dev/null @@ -1,365 +0,0 @@ -/* - 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. - 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. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 10px; -} -.model { - background-color: #F7F8FC; - overflow-y: auto; -} -.creation-model{ - position: relative; - height: 100%; -} -.top-title{ - width: 100%; - padding: 20px; - position: relative; - display: inline-block; -} -.model .submit{ - position: absolute; - width: 90px; - height: 35px; - top: 10px; - right: 85px; - color: #fff; - font-size: 18px; - background: #0DA9E2; - border-radius: 4px; - border: none!important; - border-color: rgba(0,0,0,0)!important; -} -.model .back,.model .back:hover{ - position: absolute; - top: 10px; - right: 20px; - display: inline-block; - width: 35px; - height: 35px; - background:url("../../assets/images/Return-icon.png") no-repeat!important; - background-size: 100%!important; - border-radius:4px; - color: #D7D7D7; - cursor: pointer; -} -.model .back:hover{ - background: url("../../assets/images/Return-icon-active.png")!important; - background-size: 100%!important; -} -.top-title h3.title { - height: 35px; - width: 80%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - line-height:35px; - display: inline-block; -} - - -.model .detaildata { - width: 100%; - overflow-y: auto; - border-radius: 5px; - padding: 15px; -} -.model .detaildata h3.title { - height: 20px; - font: 700 20px/20px "Arial"; - color: #666; -} -.model .detaildata h3 { - height: 20px; - font: 700 16px/20px "Arial"; - 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: 40px; - width: 24.5%; - margin-bottom: 40px; - float: left; -} -.model .detaildata .sotnvpn ul li span { - display: inline-block; - font-size: 14px; - font-weight: 500; - color:rgba(60,79,140,0.5); - margin-left: 10px; - vertical-align: middle; - float: left; - width: 110px; -} - -.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 input{ - width: 186px; - float: left; - margin-left: 20px; -} - -/* addsite model */ -.model .sitemodel,.model .sotnnpnmodel{ - position: absolute; - z-index: 1001; - left: 50px; - top: 60px; - background-color: #fff; - width:1500px; - 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; - color: #06A7E2; - 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 .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: #0DA9E2; - color: #fff; -} -.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ - 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,.sotnnpnmodel h3 button:hover{ - background:#ffffff; - color: #0DA9E2; - border:1px solid #0DA9E2; -} -.sitemodel h3>button,.sotnnpnmodel h3>button{ - float: right; - width: 30px; - height: 30px; - margin-right: 15px; -} - -/* site Detail */ - -.model .detaildata .site h3 .closeDetail { - cursor: pointer; - padding: 2px 15px; - color: #3fa8eb; -} - -.model .detaildata .sotnvpn,.model .detaildata .site{ - background: #fff; - padding: 30px 30px 0 30px; -} - -.mask{ - width: 100%; - height: 100%; - position: absolute; - z-index: 1000; - background: rgba(0, 0, 0, 0.65); - top:0; -} - -/* charts */ -.model .chart { - width: 98%; - padding: 10px; - margin: 0 auto; - color: #06A7E2; - font-size: 16px; - font-weight: 500; - margin-bottom: 30px; - background: #EEF9FF; - border-radius: 4px; -} -.model .chart #detailChart { - width: 100%; - height: 254px; - margin-top: 20px; - position: relative; -} -.model .chart #detailChart .cloudcounty { - cursor: pointer; -} - -.model .chart #detailChart .couldDetail { - position: absolute; - left: 50%; - top: 10px; - width: 80%; - transform: translate(-50%,0); - height: 160px; - background-color: #aaa; - border-radius: 5px; - box-shadow: 0px 0px 20px #000; -} -.siteWanTab{ - width: 96%; - margin: 0 auto; - margin-top: 10px; -} -.siteWanTab th{ - padding: 10px 8px; - color: #3C4F8C; - font-size: 16px; -} -.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; -} diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html deleted file mode 100644 index ce556687..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ /dev/null @@ -1,468 +0,0 @@ -<!-- - 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. - 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. ---> - -<div class="model creation-model" style="background: #F7F8FC;"> - <!-- top title --> - <div class="top-title"> - <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3> - <div class="fl" style="width: 20%"> - <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span> {{"i18nTextDefine_Update" | translate}} </span> - </button> - <button class="back" nz-button (click)="goback()"></button> - </div> - </div> - <!-- chart --> - <div class="chart"> - - <div id="detailChart"> - <svg width="100%" height="100%" style="position: relative"> - <!--local domain--> - <g class="clouds" *ngIf="vpns[0].domain!=''"> - <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" *ngIf="vpns[0].sitetpname!=''"> - <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" *ngIf="vpns[0].othertpname!=''"> - <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" *ngIf="localSite.length>0"> - <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 && localSite.length>0" 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 && outerSite.length>0" 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] && outerSite[1]["service-instance-name"]}} - </text> - </g> - <g class="clouds" *ngIf="outerSite.length>0"> - <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] && 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 [nzSelectedIndex]="upDateShow == false?0:1"> - <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="Sdwanvpnresource List"> - <div class="sotnvpn clearfix"> - <div style="clear: both;height: 10px"> - <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3> - <button nz-button *ngIf="upDateShow" (click)="updateSotnvpn()" 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 #sotnVpnTable [nzData]="sotnVpnTableData" - [nzShowPagination]="false" - nzSize="small"> - <thead> - <tr> - <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 sotnVpnTable.data; let i = index; "> - <td>{{i+1}}</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> - <span class="action" (click)="editUpdateSotnVpn(i+1)" *ngIf="sotnvpnnum[i]"><i class="anticon anticon-edit"></i></span> - - <span class="action" (click)="deleteUpdateSotnVpn(i+1)" *ngIf="upDateShow"><i - class="anticon anticon-delete"></i></span> - </td> - </tr> - </tbody> - </nz-table> - </div> - </nz-tab> - <nz-tab nzTitle="Sdwansiteresource List"> - <div class="site"> - <div style="height: 10px"> - <h3 style="float: left;color: #3C4F8C">Site List</h3> - <button nz-button *ngIf="upDateShow" (click)="updateSite()" 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="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.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)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i class="anticon anticon-edit"></i></span> - - <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i class="anticon anticon-delete"></i></span> - </td> - </tr> - - </tbody> - </nz-table> - </div> - </nz-tab> - </nz-tabset> - </div> - <!-- 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> - <table class="siteWanTab"> - <thead> - <tr> - <th width="4%"> NO.</th> - <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of siteSdwanDevice; 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> - <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> - <!-- sotnVpn update model --> - <div class="sotnnpnmodel" *ngIf="sotnVpnAddModelShow"> - <h3> {{"i18nTextDefine_Base" | translate}} </h3> - <div class="inputs"> - <ul> - <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> - <span>{{item.lableShow}}:</span> - <input nz-input [(ngModel)]="sotnInfo[item.lable]"></li> - </ul> - </div> - <div> - <h3>Sdwansitelan List</h3> - <div> - <div style="width: 100%;text-align: right"> - <button nz-button (click)="updateSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus" - style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} - </button> - </div> - <table class="siteWanTab"> - <thead> - <tr> - <th width="4%"> NO.</th> - <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th> - <th width="7%"> Action</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" - [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}"> - <td>{{i+1}}</td> - <td *ngFor="let key of getKeys(item);let a = index;"> - <span *ngIf="!tabInputShowSdwansitelan[i]">{{item[key]}}</span> - <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] "> - </td> - <td> - <span class="action" (click)="editUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i - class="anticon anticon-edit" style="margin: 0 5px;"></i></span> - <span class="action" (click)="deleteUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i - class="anticon anticon-delete"></i></span> - </td> - </tr> - </tbody> - </table> - </div> - </div> - - <div class="action"> - <button nz-button nzType="primary" (click)="updateSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> - <button nz-button nzType="primary" (click)="updateSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button> - </div> - </div> - <!-- site update Model --> - <div class="sitemodel" *ngIf="siteAddModelShow"> - <h3> {{"i18nTextDefine_Base" | translate}} </h3> - <div class="inputs"> - <ul> - <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list"> - <span>{{item.lableShow}}:</span> - <input nz-input [(ngModel)]="siteBaseData[item.lable]"></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> - <input nz-input [(ngModel)]="siteCpeData[item.lable]"> - </li> - </ul> - </div> - <h3>Sdwansitewan List</h3> - <div> - <div style="width: 100%;text-align: right"> - <button nz-button (click)="updateSiteWan()" class="addListBtn"><i class="anticon anticon-plus" - style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} - </button> - </div> - <table class="siteWanTab"> - <thead> - <tr> - <th width="4%"> NO.</th> - <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th> - <th width="7%"> Action</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of siteWanData; let i = index;" - [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}"> - <td>{{i+1}}</td> - <td *ngFor="let key of getKeys(item);let a = index;"> - <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span> - <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] "> - </td> - <td> - <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i - class="anticon anticon-edit" style="margin: 0 5px;"></i></span> - <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i - class="anticon anticon-delete"></i></span> - </td> - </tr> - </tbody> - </table> - </div> - </div> - - <div class="action"> - <button nz-button nzType="primary" (click)="updatesite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> - <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button> - </div> - </div> - <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow" (click)="hiddenModel()"></div> -</div> 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 deleted file mode 100644 index 2d466531..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts +++ /dev/null @@ -1,69 +0,0 @@ -/* - 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 { NgZorroAntdModule } from 'ng-zorro-antd'; -import { HttpClientModule } from '@angular/common/http'; -import { NZ_I18N, en_US } from 'ng-zorro-antd'; -import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; - -import { CcvpnDetailComponent } from './ccvpn-detail.component'; -import { MyhttpService } from '../myhttp.service'; - -describe('CcvpnDetailComponent', () => { - let component: CcvpnDetailComponent; - let fixture: ComponentFixture<CcvpnDetailComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [CcvpnDetailComponent], - imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), - NgZorroAntdModule.forRoot(), HttpClientModule], - providers: [MyhttpService, { provide: NZ_I18N, useValue: en_US }] - }) - .compileComponents(); - })); - - beforeEach(() => { - let detailshow = false; - detailData: Object; - let serviceDetail = (service) => { - service["siteSer"] = []; - service["sdwanSer"] = []; - service["customer"] = this.customerSelected; - service["serviceType"] = this.serviceTypeSelected; - - service.childServiceInstances.forEach((item) => { - if (item.serviceDomain == "SITE") { - service.siteSer.push(item); - } else if (item.serviceDomain == "SDWAN") { - service.sdwanSer.push(item); - } - }) - this.detailshow = true; - this.detailData = service; - component.detailParams = this.detailData - fixture = TestBed.createComponent(CcvpnDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }; - - it('should create', () => { - console.log(component); - expect(component).toBeTruthy(); - }); - }); - -}); diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts deleted file mode 100644 index 04931461..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts +++ /dev/null @@ -1,815 +0,0 @@ -/* - 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. - 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 { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { MyhttpService } from '../myhttp.service'; -import * as d3 from 'd3'; - -@Component({ - selector: 'app-ccvpn-detail', - templateUrl: './ccvpn-detail.component.html', - styleUrls: ['./ccvpn-detail.component.css'] -}) -export class CcvpnDetailComponent implements OnInit { - - constructor(private myhttp: MyhttpService) { } - - ngOnInit() { - this.dataInit(); - this.drawImages(); - } - - @Input() detailParams; - @Input() upDateShow; - @Output() closeDetail = new EventEmitter(); - @Output() closeUpdate = new EventEmitter(); - - 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: [] - } - }; - bodyTemplateParameter = {}; - - // 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 - tabInputShowSdwansitelan = [];//sdwansitelan table input and span - // Site List - siteTableData = []; - siteBaseData = {}; //sitemodel one sdwansiteresource_list - // cpe - siteSdwanDevice = []; //sitemodel SdwanDevice port Table data - siteCpeData = {}; //sitemodel two sdwandevice_list - tabInputShowDevice = [];//Device port input and span - // Wan Port - siteWanData = []; //sitemodel three wan port Table data - siteWanParams = {}; //wan port Table Detailed parameters of each line of data - tabInputShowWanPort = [];//wan port table input and span - sitenum = []; - sotnvpnnum = []; - - getKeys(item) { - return Object.keys(item); - } - //tabBarStyle - dataInit() { - console.log(this.detailParams); - // this.input_parameters = JSON.stringify(this.detailParams['input-parameters']) - if (this.detailParams['input-parameters']) { - this.input_parameters = JSON.parse(this.detailParams['input-parameters']); - } else { - return false; - } - console.log(this.input_parameters); - this.templateParameters.service = { - name: this.input_parameters.service.name, - description: this.input_parameters.service.description, - serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"], - serviceUuid: this.input_parameters.service["serviceUuid"] - }; - let inputs = this.input_parameters.service.parameters.requestInputs; - - Object.keys(inputs).map((items) => { - if (items.search("vpn") != -1) { - this.bodyTemplateParameter[items] = []; - inputs[items].map((item, index) => { - this.sotnVpnTableData.push(item); - this.sotnvpnnum.push(false); - }); - let sdwanvpnresource_list = inputs[items][0]; - Object.keys(sdwanvpnresource_list).forEach((its) => { - let input = {}; - if (its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true) { - Object.keys(sdwanvpnresource_list[its][0]).forEach((i) => { - let input1 = {}; - input1[i] = sdwanvpnresource_list[its][i]; - this.templateParameters["sotnvpn"]["sdwansitelan_list"].push(input1); - }) - let sitelanKey = {}; - sitelanKey[its] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false) { - input[its] = sdwanvpnresource_list[its]; - this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input); - } - }); - } - if (items.search("site") != -1) { - this.bodyTemplateParameter[items] = []; - inputs[items].map((item, index) => { - this.siteTableData.push(item); - this.sitenum.push(false); - }); - let sdwansiteresource_list = inputs[items][0]; - Object.keys(sdwansiteresource_list).forEach((its) => { - let input2 = {}; - if(its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true){ - this.templateParameters["site"]["sdwandevice_list"][0] = sdwansiteresource_list[its][0]; - let sitelanKey = {}; - sitelanKey[its] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true) { - this.templateParameters["site"]["sdwansitewan_list"][0] = sdwansiteresource_list[its][0]; - let sitelanKey = {}; - sitelanKey[its] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false) { - input2[its] = sdwansiteresource_list[its]; - this.templateParameters["site"]["sdwansiteresource_list"].push(input2); - } - }); - - } - }); - - 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 (let 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 (let 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.sotnSdwansitelanData.map((item, index) => { - this.tabInputShowSdwansitelan[index] = true; - }); - } - - //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 (let 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 (let 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.sdwandevice_list.map((item, index) => { - if (this.getKeys(item).indexOf("lable") == -1) { - this.templateParameters.site.sdwandevice_list.splice(index, 1) - } - }); - this.templateParameters.site.sdwansitewan_list.map((item, index) => { - let input = {}; - for (let 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.siteSdwanDevice.push(this.siteCpeData); - this.siteSdwanDevice.map((item, index) => { - this.tabInputShowDevice[index] = true; - }); - this.siteWanData.push(this.siteWanParams); - this.siteWanData.map((item, index) => { - this.tabInputShowWanPort[index] = true; - }); - } - - //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; - } - - // site detail show - siteDetail = false; - isEditSite = 0; - showSiteDetail(num) { - this.siteDetail = true; - this.isEditSite = num; - console.log(this.siteTableData[num - 1]); - Object.keys(this.siteBaseData).forEach((item) => { - this.siteBaseData[item] = this.siteTableData[num - 1][item]; - }); - this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { - return Object.assign({}, {}, item) - }); - this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { - return Object.assign({}, {}, item) - }); - } - detailsite_cancel() { - this.siteDetail = false; - } - deleteUpdateSite(num) { - this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); - this.sitenum.splice(num - 1, 1); - } - - //sotnVpn addModel - sotnVpnAddModelShow = false; - - updateSotnVpn_OK() { - let inputs = { - "sdwansitelan_list": [] - }; - inputs = Object.assign(inputs, this.sotnInfo); - inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSotnVpn) { - - this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; - this.sotnVpnTableData = [...this.sotnVpnTableData]; - } else { - // this.siteTableData.push(inputs); - this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; - this.sotnvpnnum = [...this.sotnvpnnum, true]; - } - Object.keys(this.sotnInfo).forEach((item) => { - this.sotnInfo[item] = null; - }); - this.sotnSdwansitelanData.forEach((item, index) => { - if (index > 0) { - this.sotnSdwansitelanData.splice(index, 1); - this.tabInputShowSdwansitelan.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowSdwansitelan[index] = true; - } - - }); - this.sotnVpnAddModelShow = false; - } - - updateSotnVpn_cancel() { - Object.keys(this.sotnInfo).forEach((item) => { - this.sotnInfo[item] = null; - }); - this.sotnSdwansitelanData.forEach((item, index) => { - if (index > 0) { - this.sotnSdwansitelanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowSdwansitelan[index] = true; - } - - }); - this.sotnVpnAddModelShow = false; - } - - editUpdateSotnVpn(num) { - this.sotnVpnAddModelShow = 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) - }); - this.sotnSdwansitelanData.forEach((item, index) => { - this.tabInputShowSdwansitelan[index] = false; - }); - } - - deleteUpdateSotnVpn(num) { - this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); - this.sotnvpnnum.splice(num - 1, 1); - } - updateSotnSdwansitelan() { - if (this.tabInputShowSdwansitelan.indexOf(true) > -1) { - return false; - } - let addNum = this.sotnSdwansitelanData.length; - let inputsData = Object.assign({}, this.sotnSdwansitelanParams); - Object.keys(inputsData).forEach((item) => { - if (item != "description") { - inputsData[item] = null; - } - }); - this.sotnSdwansitelanData[addNum] = inputsData; - this.tabInputShowSdwansitelan[addNum] = true; - this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; - } - editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.tabInputShowSdwansitelan[num - 1] == false) { - this.tabInputShowSdwansitelan[num - 1] = true; - } else { - this.tabInputShowSdwansitelan[num - 1] = false; - } - } - deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.sotnSdwansitelanData.length <= 1) { - return false; - } else { - - } - this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); - } - - // site addModel - siteAddModelShow = false; - - updateSotnvpn() { - this.sotnVpnAddModelShow = true; - this.isEditSotnVpn = 0; - } - - updateSite() { - this.siteAddModelShow = true; - this.isEditSite = 0; - } - - editUpdateSite(num) { - this.siteAddModelShow = true; - this.isEditSite = num; - Object.keys(this.siteBaseData).forEach((item) => { - this.siteBaseData[item] = this.siteTableData[num - 1][item]; - }); - this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { - return Object.assign({}, item) - }); - this.siteSdwanDevice.forEach((item, index) => { - this.tabInputShowDevice[index] = false; - }); - this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { - return Object.assign({}, item) - }); - this.siteWanData.forEach((item, index) => { - this.tabInputShowWanPort[index] = false; - }); - } - - updatesite_cancel() { - Object.keys(this.siteBaseData).forEach((item) => { - this.siteBaseData[item] = null; - }) - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - - }); - this.siteAddModelShow = false; - } - - updatesite_OK() { - let inputs = { - "sdwandevice_list": [], - "sdwansitewan_list": [] - }; - inputs = Object.assign(inputs, this.siteBaseData); - inputs["sdwandevice_list"]= this.siteSdwanDevice.map((item) => { - return Object.assign({}, item); - }); - inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSite) { - // Edit status does not increase - this.siteTableData[this.isEditSite - 1] = inputs; - this.siteTableData = [...this.siteTableData]; //Table refresh - } else { - // this.siteTableData.push(inputs); - this.siteTableData = [...this.siteTableData, inputs]; - this.sitenum = [...this.sitenum, true]; - } - - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = null; - }); - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - this.tabInputShowDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - this.tabInputShowWanPort.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - - }); - console.log(this.siteTableData); - this.siteAddModelShow = false; - } - - //add.edit，detele siteWanPort - updateSiteWan() { - if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.siteWanData.length; - let inputsData = Object.assign({}, this.siteWanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteWanData[addNum] = inputsData; - this.tabInputShowWanPort[addNum] = true; - this.siteWanData = [...this.siteWanData]; //Table refresh - console.log(this.siteWanData) - } - - editUpdateWanPort(num, item, siteWanData) { - if (this.tabInputShowWanPort[num - 1] == false) { - this.tabInputShowWanPort[num - 1] = true; - } else { - this.tabInputShowWanPort[num - 1] = false; - } - } - - deleteUpdateWanPort(num, item, siteWanData) { - if (this.siteWanData.length <= 1) { - return false; - } - this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); - } - - // 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] && 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(); - } - if (this.localSite.length > 0) { - this.detailLines = [].concat(this.detailLiness); - 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"); - }) - }) - } else { - return false; - } - }) - } - - - 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) => { - 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) => { - 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"]; - 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) - res(this.detailParams.vpns) - }) - console.log(this.detailParams.vpns) - }) - }) - }) - }) - } - - - drawImages() { - - this.getSiteAResource().then((data) => { - return this.getSotnAresource() - }).then((data) => { - 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 - } - this.detailLines.push(line); - } - // 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); - } - } - }) - let allnodes = [this.getSiteAResource(), this.getSotnAresource()]; - Promise.all(allnodes).then((data) => { - console.log(data); - console.log(this.localSite); - - - }) - } - - detailSites = false; - detailLines = []; - detailLiness = [ //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 - } - ]; - - modifyJosnKey(json, oddkey, newkey) { - - let val = json[oddkey]; - delete json[oddkey]; - json[newkey] = val; - } - - // ccvpn update - submitUpdate() { - let globalCustomerId = this.detailParams.customer.id; - let globalServiceType = this.detailParams.serviceType.name; - let servicebody = { - service: { - name: this.templateParameters.service["name"], - description: this.templateParameters.service["description"], - serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], - serviceUuid: this.templateParameters.service["serviceUuid"], - globalSubscriberId: globalCustomerId, //customer.id - serviceType: globalServiceType, //serviceType.value - parameters: { - locationConstraints: [], - resources: [], - requestInputs: { - sdwanvpnresource_list: [], - sdwansiteresource_list: [] - } - } - } - }; - let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - siteresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { - sitewan = Object.keys(items)[0] - } - if (Object.keys(items)[0].search("device") != -1) { - device = Object.keys(items)[0] - } - }); - } - if (item.search("vpn") != -1) { - vpnresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1) { - sitelan = Object.keys(items)[0] - } - }); - } - }); - this.sotnVpnTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitelan) - } - }); - }); - this.siteTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitewan) - } - if (items.search("device") != -1) { - this.modifyJosnKey(item, items, device) - } - }); - }); - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); - } - if (item.search("vpn") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); - } - }); - console.log(servicebody); - this.closeUpdate.emit(servicebody); - } - - goback() { - this.closeDetail.emit(); - } - - hiddenModel() { - this.sotnVpnDetailShow = false; - this.siteDetail = false; - } - -} |