diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html')
| -rw-r--r-- | usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html | 468 |
1 files changed, 0 insertions, 468 deletions
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> |