diff options
Diffstat (limited to 'usecaseui-portal/src/app')
10 files changed, 560 insertions, 341 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index 54b92d03..ceaaaf35 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.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. @@ -45,16 +45,14 @@ hr { display: inline-block; width: 35px; height: 35px; - background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + background:#ffffff!important; border-radius:4px; - color: #fff; - border: none!important; - border-color:rgba(0,0,0,0)!important; + color: #D7D7D7; + /*border: 1px solid #ffffff;*/ } .top-title h3.title { height: 35px; width: 80%; - /*font: 700 20px/20px "Arial";*/ font-size:16px; font-family:ArialMT; color:#3C4F8C; @@ -76,7 +74,7 @@ hr { border: none!important; border-color:rgba(0,0,0,0)!important; } -.model .submit:hover,.model .back:hover,.model .site>button:hover,.model .sitegroup>button:hover{ +.model .submit:hover{ background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; border: none; } @@ -118,18 +116,18 @@ hr { .model .sitemodel { position: absolute; z-index: 1001; - left: 100px; + left: 50px; top: 60px; background-color: #fff; /*box-shadow: 0px 0px 20px #000;*/ - width:650px; + width:1300px; /*width:1300px;px*/ max-height: 90%; border-radius:2px; overflow-y: auto; } .model .sitemodel h3,.sitegroupmodal>h3{ - width: 92%; + width: 96%; height: 40px; line-height: 35px; font-size: 18px; @@ -152,7 +150,8 @@ hr { display: inline-block; height: 35px; line-height: 35px; - width: 49.5%; + width: 24.5%; + margin-bottom: 20px; } .model .sitemodel .inputs ul li span { display: inline-block; @@ -165,9 +164,9 @@ hr { float: left; } .model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { - width: 156px; + width: 186px; float: right; - margin-right: 30px; + margin-right: 25px; } .model .sitemodel .action { text-align: center; @@ -185,11 +184,11 @@ hr { font-size: 16px; margin: 0 15px; } -.model .sitemodel .action button:nth-child(2),.sitemodel h3 button{ +.model .sitemodel .action button:nth-child(2){ background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); color: #fff; } -.model .sitemodel .action button:nth-child(2):hover,.sitemodel h3 button:hover{ +.model .sitemodel .action button:nth-child(2):hover{ background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; } @@ -199,13 +198,18 @@ hr { } /* site table */ -.model .site>button,.model .sitegroup>button,.sitemodel h3>button{ - width:36px; - height:36px; - color: #fff; - background:linear-gradient(270deg,rgba(63,156,255,1) 0%,rgba(98,193,246,1) 100%); +.model .site>button,.model .sitegroup>button,.sitemodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; border-radius:4px; - border: none!important; + border:1px solid #D7D7D7; +} +.model .site>button:hover,.model .sitegroup>button:hover,.sitemodel h3 button:hover,.model .back:hover{ + background:#ffffff; + color: #3F9CFF; + border:1px solid #3F9CFF; } .sitemodel h3>button{ float: right; @@ -229,13 +233,14 @@ hr { position: absolute; z-index: 1001; width: 360px!important; - height: 376px!important; + height: 450px!important; left:35%; top:40%; margin-top: -188px; margin-left: -180px; background: #ffffff; } + .sitegroupmodal .list-div{ width: 100%; height: 32px !important; @@ -286,6 +291,9 @@ hr { width: 100%; padding: 10px; /*height: 30vh;*/ + color: #06A7E2; + font-size: 16px; + font-weight: 500; border-left: 10px solid #f3f3f3; margin-bottom: 30px; box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index 1b54b7bc..05a29a79 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.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. @@ -16,21 +16,17 @@ <!--<h3 class="title"> Services List </h3>--> <!--<hr>--> <div class="model creation-model"> - <!-- 创建数据 --> - <div class="top-title"> - <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3> - <div class="fl" style="width: 20%"> - <button class="submit" nz-button (click)="submit()"><span>Create</span></button> - <button class="back" nz-button (click)="goback()"> - <span> - <i nz-icon type="rollback" theme="outline" > - <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="rollback" aria-hidden="true" style="transform: scaleX(1.7) scaleY(-1.1) translate(-2px)"><path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 0 0 0 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path></svg> - </i> - </span> - </button> - </div> - </div> - <!-- 图 --> + + <div class="top-title"> + <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3> + <div class="fl" style="width: 20%"> + <button class="submit" nz-button (click)="submit()"><span>Create</span></button> + <button class="back" nz-button (click)="goback()"> + <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i> + </button> + </div> + </div> + <!-- chart --> <div class="chart"> Create Service {{createParams.commonParams.templateType}} @@ -58,7 +54,7 @@ </div> </div> <div class="creation"> - <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle> + <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle> <nz-tab nzTitle="SOTN VPN Info"> <div class="sotnvpn clearfix"> <!--<h3>SOTN VPN Info</h3>--> @@ -113,7 +109,8 @@ <nz-tab nzTitle="Site List"> <div class="site"> <!--<h3>Site List</h3>--> - <button nz-button (click)="addSite()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button> + <button nz-button (click)="addSite()"><i class="anticon anticon-plus" + style="transform: scale(1.2)"></i></button> <nz-table #siteTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small"> @@ -138,8 +135,10 @@ <td>{{item.baseData.address}}</td> <td>{{item.baseData.vlan}}</td> <td> - <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> - <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span> + <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> + + <span class="action" (click)="deleteSite(i+1)"><i + class="anticon anticon-delete"></i></span> </td> </tr> <!-- </ng-template> --> @@ -150,7 +149,8 @@ <nz-tab nzTitle="Site_Group List" *ngIf="createParams.commonParams.templateType == 'CCVPN'"> <div class="sitegroup" > <!--<h3>Site_Group List</h3>--> - <button nz-button (click)="addSiteGroup()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button> + <button nz-button (click)="addSiteGroup()"><i class="anticon anticon-plus" + style="transform: scale(1.2)"></i></button> <nz-table #siteGroupTable [nzData]="siteGroupTableData" [nzLoading]="loading" [nzShowPagination]="false" @@ -187,60 +187,64 @@ </nz-tab> </nz-tabset> </div> - <!-- site模态框 --> + <!-- site model--> <div class="sitemodel" *ngIf="siteModelShow"> <h3>Site_Enterprise Service</h3> <div class="inputs"> <ul> - <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li> - <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li> + <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name" style=" margin-right: 60px;"></li> <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span> - <nz-select [(ngModel)]="siteBaseData.type" nzAllowClear - nzPlaceHolder="Choose"> + <nz-select [(ngModel)]="siteBaseData.type" nzAllowClear + nzPlaceHolder="Choose" + style=" margin-right: 60px;"> <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option> <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option> </nz-select> </li> - <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span> - <nz-select [(ngModel)]="siteBaseData.role" nzAllowClear - nzPlaceHolder="Choose"> - <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option> - <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option> - </nz-select> - </li> <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li> - <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li> - <li><span>Address:</span> - <nz-select [(ngModel)]="siteBaseData.address" nzAllowClear - nzPlaceHolder="Choose"> + <li><span style="margin-left: 50px">Address:</span> + <nz-select [(ngModel)]="siteBaseData.address" nzAllowClear + nzPlaceHolder="Choose" + style="margin-right: 0"> <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}" nzLabel="{{item}}"></nz-option> </nz-select> <!--<input nz-input [(ngModel)]="siteBaseData.address">--> </li> + <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan" style=" margin-right: 60px;"></li> + <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span> + <nz-select [(ngModel)]="siteBaseData.role" nzAllowClear + nzPlaceHolder="Choose" + style=" margin-right: 60px;"> + <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option> + <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option> + </nz-select> + </li> + <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li> </ul> </div> <div *ngIf="createParams.commonParams.templateType == 'CCVPN'"> <h3>CPE</h3> <div class="inputs"> <ul> - <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li> - <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li> - <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li> + <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name" style=" margin-right: 60px;"></li> + <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type" style=" margin-right: 60px;"></li> + <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li> + <li><span style="margin-left: 50px">Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version" style="margin-right: 0"></li> + <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn" style=" margin-right: 60px;"></li> <li><span>Class:</span> - <nz-select [(ngModel)]="siteCpeData.device_class" nzAllowClear - nzPlaceHolder="Choose"> + <nz-select [(ngModel)]="siteCpeData.device_class" nzAllowClear + nzPlaceHolder="Choose" + style=" margin-right: 60px;"> <nz-option nzValue="VNF" nzLabel="VNF"></nz-option> <nz-option nzValue="PNF" nzLabel="PNF"></nz-option> </nz-select> </li> - <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li> <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li> - <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li> </ul> </div> <h3>WAN Port - <button nz-button ><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button> + <button nz-button><i class="anticon anticon-plus" style="transform: scale(1.2)"></i></button> </h3> <div> <nz-table #siteModalTable [nzData]="siteWanData" @@ -249,71 +253,111 @@ nzSize="small"> <thead> <tr> - <th > NO.</th> - <th> Name</th> - <th > Description</th> - <th > PortType</th> - <th > PortNumber</th> - <th > IPAddress</th> - <!--<th > Provider IP Address</th>--> - <!--<th > Transport Nerwork</th>--> - <!--<th > Input Bandwidth</th>--> - <!--<th > Output Bandwidth</th>--> - <th > Action</th> + <th width="4%"> NO.</th> + <th width="6%"> Name</th> + <th width="9%"> Description</th> + <th width="7%"> PortType</th> + <th width="10%"> PortNumber</th> + <th width="8%"> IPAddress</th> + <th width="14%"> Provider IP Address</th> + <th width="13%"> Transport Nerwork</th> + <th width="12%"> Input Bandwidth</th> + <th width="13%"> Output Bandwidth</th> + <th width="7%"> Action</th> </tr> </thead> <tbody> <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> --> - <tr *ngFor="let item of siteModalTable.data; let i = index; "> + <tr *ngFor="let item of siteModalTable.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> - <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_name}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_name" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_description}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_description" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_portType}}</span> + <nz-select style="width: 100px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear + nzPlaceHolder="Choose" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <nz-option nzValue="GE" nzLabel="GE"></nz-option> + <nz-option nzValue="FE" nzLabel="FE"></nz-option> + <nz-option nzValue="XGE" nzLabel="XGE"></nz-option> + <nz-option nzValue="LTE" nzLabel="LTE"></nz-option> + <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option> + <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option> + </nz-select> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_portNumber}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_ipAddress}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_providerIpAddress}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_transportNetworkName}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_inputBandwidth}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_outputBandwidth}}</span> + <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + </td> + <td> + <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit" style="margin: 0 5px"></i></span> + <span class="action" (click)="deleteModel(i+1)"><i class="anticon anticon-delete"></i></span> </td> </tr> <!-- </ng-template> --> </tbody> </nz-table> </div> - <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit" - (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()"> - <ul class="wanPortModalList"> - <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li> - <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> --> - <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description"> - </li> - <li><span>Port Type:</span> - <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear - nzPlaceHolder="Choose"> - <nz-option nzValue="GE" nzLabel="GE"></nz-option> - <nz-option nzValue="FE" nzLabel="FE"></nz-option> - <nz-option nzValue="XGE" nzLabel="XGE"></nz-option> - <nz-option nzValue="LTE" nzLabel="LTE"></nz-option> - <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option> - <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option> - </nz-select> - </li> - <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber"> - </li> - <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li> - <li><span>Provider IP Address:</span> <input nz-input - [(ngModel)]="siteWanParams.sitewanport_providerIpAddress"> - </li> - <li><span>Transport Nerwork:</span> <input nz-input - [(ngModel)]="siteWanParams.sitewanport_transportNetworkName"> - </li> - <li><span>Input Bandwidth:</span> <input nz-input - [(ngModel)]="siteWanParams.sitewanport_inputBandwidth"> - </li> - <li><span>Output Bandwidth:</span> <input nz-input - [(ngModel)]="siteWanParams.sitewanport_outputBandwidth"> - </li> - </ul> - </nz-modal> + <!--<nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit"--> + <!--(nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">--> + <!--<ul class="wanPortModalList">--> + <!--<li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>--> + <!--<!– <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> –>--> + <!--<li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description">--> + <!--</li>--> + <!--<li><span>Port Type:</span>--> + <!--<nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear--> + <!--nzPlaceHolder="Choose">--> + <!--<nz-option nzValue="GE" nzLabel="GE"></nz-option>--> + <!--<nz-option nzValue="FE" nzLabel="FE"></nz-option>--> + <!--<nz-option nzValue="XGE" nzLabel="XGE"></nz-option>--> + <!--<nz-option nzValue="LTE" nzLabel="LTE"></nz-option>--> + <!--<nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>--> + <!--<nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>--> + <!--</nz-select>--> + <!--</li>--> + <!--<li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber">--> + <!--</li>--> + <!--<li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>--> + <!--<li><span>Provider IP Address:</span> <input nz-input--> + <!--[(ngModel)]="siteWanParams.sitewanport_providerIpAddress">--> + <!--</li>--> + <!--<li><span>Transport Nerwork:</span> <input nz-input--> + <!--[(ngModel)]="siteWanParams.sitewanport_transportNetworkName">--> + <!--</li>--> + <!--<li><span>Input Bandwidth:</span> <input nz-input--> + <!--[(ngModel)]="siteWanParams.sitewanport_inputBandwidth">--> + <!--</li>--> + <!--<li><span>Output Bandwidth:</span> <input nz-input--> + <!--[(ngModel)]="siteWanParams.sitewanport_outputBandwidth">--> + <!--</li>--> + <!--</ul>--> + <!--</nz-modal>--> </div> <div class="action"> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index ace7ac42..3a478e0e 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -1,3 +1,18 @@ +/* + 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'; @@ -16,7 +31,7 @@ export class CcvpnCreationComponent implements OnInit { } @Input() createParams; - @Input() namesTranslate; //输入项参数名字转换 + @Input() namesTranslate; //Input parameter name conversion @Output() closeCreate = new EventEmitter(); //tabBarStyle @@ -28,10 +43,10 @@ export class CcvpnCreationComponent implements OnInit { "border-radius": "4px 4px 0px 0px" }; templateParameters = {}; - getTemParameters(){ //获取模板参数 + getTemParameters(){ //Get template parameters let chosedtemplates = Object.values(this.createParams.templates); // console.log(this.createParams); - console.log(chosedtemplates); //模板id数组 + console.log(chosedtemplates); //Template id array if(this.createParams.commonParams.templateType == 'SOTN'){ this.tabBarStyle["width"]="351px"; } @@ -41,11 +56,11 @@ export class CcvpnCreationComponent implements OnInit { .subscribe((data)=>{ if(index === 0){ this.templateParameters["sotnvpn"] = data; - this.sotnNames = data.inputs.map((item)=>{return item.name}); //云的真实名字 + this.sotnNames = data.inputs.map((item)=>{return item.name}); //The real name of the cloud }else if(index === 1){ this.templateParameters["site"] = data; let wanportnames = {}; - this.siteNames = data.inputs.map((item)=>{return item.name}); //site中所有真实名字,没有分组，放在一起了 + this.siteNames = data.inputs.map((item)=>{return item.name}); //All the real names in the site, no grouping, put together this.siteNames.forEach((item)=>{ if(item.includes("_device_")){ this.siteCpeNames.push(item); @@ -58,7 +73,7 @@ export class CcvpnCreationComponent implements OnInit { }) this.siteWanNames = Object.values(wanportnames); this.siteWanNames.forEach((item)=>{ - this.siteWanData.push(this.siteWanParams); //根据wanport组添加表格中 + this.siteWanData.push(this.siteWanParams); //Add a table according to the wanport group }) // console.log(this.sotnNames) // console.log(this.siteNames) @@ -68,7 +83,7 @@ export class CcvpnCreationComponent implements OnInit { // console.log(this.siteWanData) }else if(index === 2){ this.templateParameters["sdwan"] = data; - this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn真实名字 + this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn Real name // console.log(this.siteGroupNames); } @@ -78,7 +93,7 @@ export class CcvpnCreationComponent implements OnInit { }) } - // SOTN VPN Info 输入参数 + // SOTN VPN Info Input parameters sotnInfo = { name:null,description:null, startTime:null,endTime:null, @@ -88,7 +103,7 @@ export class CcvpnCreationComponent implements OnInit { CBS:null,EBS:null, colorAware:false,couplingFlag:false } - sotnNames = [] //真实名字 + sotnNames = [] //Real name startTimeChange(event){ console.log(event) @@ -102,10 +117,10 @@ export class CcvpnCreationComponent implements OnInit { siteTableData = [ ] - siteModeAddress = [];//site地址，筛选框数据,本地配置文件 - siteNames = [];//site中所有真实名字，未分组，模拟真实请求情况； + siteModeAddress = [];//site Address, filter box data, local configuration file + siteNames = [];//All real names in the site, not grouped, simulating real request conditions； - siteBaseData = { //模态框数据，输入参数，绑定数据 + siteBaseData = { //Modal box data, input parameters, binding data name:null, description:null, type:null, @@ -113,17 +128,17 @@ export class CcvpnCreationComponent implements OnInit { postcode:null, address:null, vlan:null, - sotnVpnName:null, //SOTN VPN Info中name - controlPoint:null, //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白 - groupRole:null, //site group的role - groupName:null, //site group的name - emails:null,// 不显示传空 + sotnVpnName:null, //SOTN VPN Info name + controlPoint:null, //When the Role of the site in the site group is set to spoke, pass the site name to the site name of the hub. Otherwise, pass the blank. + groupRole:null, //site group role + groupName:null, //site group name + emails:null,// Do not show air latitude:null,// longitude:null,// clientSignal:null// }; - siteBaseNames = [] //真实名字 - // cpe 编辑 + siteBaseNames = [] //Real name + // cpe edit siteCpeData = { device_name:null, device_version:null, @@ -133,10 +148,10 @@ export class CcvpnCreationComponent implements OnInit { device_vendor:null, device_type:null }; - siteCpeNames = [] //真实名字 - // Wan Port 编辑 - siteWanData = []; //wan port 表格绑定数据 - siteWanParams = { //每一行数据详细参数，模态框 + siteCpeNames = [] //Real name + // Wan Port edit + siteWanData = []; //wan port Table binding data + siteWanParams = { //Detailed parameters of each line of data, modal box sitewanport_name:null, sitewanport_deviceName:null, sitewanport_description:null, @@ -148,31 +163,40 @@ export class CcvpnCreationComponent implements OnInit { sitewanport_inputBandwidth:null, sitewanport_outputBandwidth:null }; - siteWanNames = [] //真实名字 - wanPortModal = false; //模态框显示隐藏 - wanPortEditNum = 0;//编辑哪行 - editWanPort(num){ - this.wanPortModal = true; - this.wanPortEditNum = num; - this.siteWanParams = Object.assign({},this.siteWanData[num-1]); - } - wanPortModal_Ok(){ - let inputsData = Object.assign({},this.siteWanParams); //新建对象，断开原引用，因为后面要清空模态框 - inputsData.sitewanport_deviceName = this.siteCpeData.device_name; - this.siteWanData[this.wanPortEditNum-1] = inputsData; - this.siteWanData = [...this.siteWanData]; //表格刷新 - Object.keys(this.siteWanParams).forEach((item)=>{ //清空模态框 - this.siteWanParams[item] = null; - }) - this.wanPortModal = false; - console.log(this.siteWanData) - } + siteWanNames = [] //Real name + wanPortModal = false; //Modal box display hidden + wanPortEditNum = 0;//Which line to edit + editWanPort(num) { + // if(){ + console.log(this) + console.log(num) + if (!this.wanPortModal) { + console.log(11111) + console.log(this.wanPortModal) + this.wanPortModal = true; + this.wanPortEditNum = num; + this.siteWanParams = Object.assign({}, this.siteWanData[num - 1]); + } else { + console.log(22222) + let inputsData = Object.assign({}, this.siteWanParams); //Create a new object, disconnect the original reference, because you want to empty the modal box later + inputsData.sitewanport_deviceName = this.siteCpeData.device_name; + this.siteWanData[this.wanPortEditNum - 1] = inputsData; + this.siteWanData = [...this.siteWanData]; //Table refresh + Object.keys(this.siteWanParams).forEach((item) => { //Clear modal box + this.siteWanParams[item] = null; + }) + this.wanPortModal = false; + console.log(this.siteWanData) + } + // } + + } wanPortModal_Cancel(){ this.wanPortModal = false; } - // 获取site地址，手动文件 + // Get the site address, manual file getSiteAddressList(){ this.myhttp.getSiteAddress() .subscribe((data)=>{ @@ -187,11 +211,11 @@ export class CcvpnCreationComponent implements OnInit { this.siteModelShow = true; this.isEdit = 0; } - // addsite模态框按钮 - isEdit = 0; //编辑序号，No值，0表示增加 + // addsite Modal box button + isEdit = 0; //Edit serial number, No value, 0 means increase addsite_OK(){ this.siteBaseData.sotnVpnName = this.sotnInfo.name; - // let inputsData = Object.assign({},this.siteBaseData,this.siteCpeData,this.siteWanData); //新建对象，断开原引用，因为后面要清空模态框 + // let inputsData = Object.assign({},this.siteBaseData,this.siteCpeData,this.siteWanData); //Create a new object, disconnect the original reference, because you want to empty the modal box later let inputs = {}; inputs["baseData"] = Object.assign({},this.siteBaseData); inputs["cpeData"] = Object.assign({},this.siteCpeData); @@ -200,23 +224,23 @@ export class CcvpnCreationComponent implements OnInit { }) console.log(inputs); if(this.isEdit){ - // 编辑状态不增加 + // Edit status does not increase this.siteTableData[this.isEdit-1] = inputs; - this.siteTableData = [...this.siteTableData]; //表格刷新 - this.siteGroupTableData.forEach((item)=>{ //site修改名字后，更新组中sites值 + this.siteTableData = [...this.siteTableData]; //Table refresh + this.siteGroupTableData.forEach((item)=>{ //After the site changes the name, update the sites value in the group. if(item.sites.split(";").filter((d)=>{return d!=""}).includes(this.lastSiteName)){ item.sites = item.sites.replace(this.lastSiteName,this.siteBaseData.name); } }) }else{ - // this.siteTableData.push(inputs);//使用 push 或者 splice 修改 nzData 失效 当加上[nzFrontPagination]="false" 时，生效 + // this.siteTableData.push(inputs);//use push or splice modify nzData Invalid When added [nzFrontPagination]="false" ，Effective this.siteTableData = [...this.siteTableData,inputs]; } - Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框 + Object.keys(this.siteBaseData).forEach((item)=>{ //Clear modal box this.siteBaseData[item] = null; }) - Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框 + Object.keys(this.siteCpeData).forEach((item)=>{ //Clear modal box this.siteCpeData[item] = null; }) this.siteWanData.forEach((item)=>{ @@ -230,10 +254,10 @@ export class CcvpnCreationComponent implements OnInit { this.siteModelShow = false; } addsite_cancel(){ - Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框 + Object.keys(this.siteBaseData).forEach((item)=>{ //Clear modal box this.siteBaseData[item] = null; }) - Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框 + Object.keys(this.siteCpeData).forEach((item)=>{ //Clear modal box this.siteCpeData[item] = null; }) this.siteWanData.forEach((item)=>{ @@ -244,8 +268,8 @@ export class CcvpnCreationComponent implements OnInit { this.lastSiteName = null; this.siteModelShow = false; } - lastSiteName = null; //当site修改之后，若修改了名字，则需要更新group中sites的名字 - editSite(num){ //编辑修改选中site信息 + lastSiteName = null; //After the site is modified, if the name is changed, the name of the sites in the group needs to be updated. + editSite(num){ //Edit and modify the selected site information this.siteModelShow = true; this.isEdit=num; this.siteBaseData = Object.assign({},this.siteTableData[num-1].baseData); @@ -254,7 +278,7 @@ export class CcvpnCreationComponent implements OnInit { this.lastSiteName = this.siteBaseData.name; } deleteSite(num){ - let deleteSiteName = this.siteTableData[num-1].baseData.name; //删除的site中name + let deleteSiteName = this.siteTableData[num-1].baseData.name; //Deleted site name let groupSites = []; this.siteGroupTableData.forEach((item)=>{ groupSites.push(...item.sites.split(";").filter((d)=>{return d!=""})) }); if(groupSites.includes(deleteSiteName)){ @@ -262,15 +286,15 @@ export class CcvpnCreationComponent implements OnInit { return false; } this.siteTableData = this.siteTableData.filter((d,i) => i !== num-1); - // this.siteTableData.splice(num-1,1); //模板中加上[nzFrontPagination]="false" 时，生效 + // this.siteTableData.splice(num-1,1); //Add in template [nzFrontPagination]="false" ，Effective this.drawImage(this.siteTableData); // let groupIndex = this.siteGroupTableData.findIndex((item)=>{return item.sites.split(";").includes(deleteSiteName)}); // console.log(groupIndex) - // this.deleteGroupSite(groupIndex + 1); //删除时首行编号为1 + // this.deleteGroupSite(groupIndex + 1); //The first line number is 1 when deleting } - // site节点图形描绘 + // site Node graphic depiction lines=[]; siteImage=[]; drawImage(sitelist){ @@ -319,9 +343,9 @@ export class CcvpnCreationComponent implements OnInit { } siteGroupModelShow = false; siteGroupModalTableData = [];// ==> siteTableData? - siteGroupNames=[]; //sdwanvpn真实名字 + siteGroupNames=[]; //sdwanvpn Real name - // 勾选框 + // Check box allChecked = false; indeterminate = false; groupModal_checkAll(value){ @@ -342,7 +366,7 @@ export class CcvpnCreationComponent implements OnInit { addSiteGroup(){ this.isGroupEdit = 0; this.siteGroupModelShow = true; - let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选 + let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//Whether a site has been selected in the loop group, if it exists, the new group is not optional. // console.log(checkedSite); this.siteTableData.forEach((item,index)=>{ if(checkedSite.includes(item.baseData.name)){ @@ -352,22 +376,22 @@ export class CcvpnCreationComponent implements OnInit { } }) } - // addsiteGroup模态框按钮 - addsitegroup_OK(){ //将模态框中的值赋给表中对应项--->将选中的site中的groupRole、groupName、controlPoint更新---> - //拷贝数据判断是增加或编辑，更新表中数据---> 清除模态框中数据,便于下次添加，关闭模态框 + // addsiteGroup Modal box button + addsitegroup_OK(){ //Assign the value in the modal box to the corresponding item in the table ---> update the groupRole, groupName, and controlPoint in the selected site ---> + //Copy data judgment is to add or edit, update the data in the table ---> Clear the data in the modal box, easy to add next time, close the modal box console.log(this.siteGroupModalTableData); - this.siteGroupModelData.sites=""; //置空组成员名字，写成""方便+= ,若为null +=时会转成 "null" + this.siteGroupModelData.sites=""; //Empty group member name，"" Convenience += ,if it's null += Will turn into "null" this.siteGroupModelData.role=""; // let site_controlPoint = this.siteGroupModalTableData.map((item)=>{ if(item.checked&&item.role=="hub"){ return item.siteName}}).filter((item)=>{return item!=undefined}); // console.log(site_controlPoint); - this.siteGroupModalTableData.forEach((item,index)=>{ //模态框中site顺序和 表中site顺序一致 + this.siteGroupModalTableData.forEach((item,index)=>{ //The order of the sites in the modal box is the same as the order of the sites in the table. if(item.checked){ this.siteGroupModelData.sites += item.siteName+";"; this.siteGroupModelData.role += item.role+";"; this.siteTableData[index].baseData.groupRole = item.role; //site group的role this.siteTableData[index].baseData.groupName = this.siteGroupModelData.name; //site group的name if(item.role == "spoke"){ - this.siteTableData[index].baseData.controlPoint = site_controlPoint.join(); //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白 + this.siteTableData[index].baseData.controlPoint = site_controlPoint.join(); //When site group site Role it's spoke，Pass the site group inside the Role set to the hub's site name; otherwise pass the blank } } }) @@ -375,11 +399,11 @@ export class CcvpnCreationComponent implements OnInit { let inputsData = {}; Object.assign(inputsData,this.siteGroupModelData); if(this.isGroupEdit){ - // 编辑状态不增加 + // Edit status does not increase this.siteGroupTableData[this.isGroupEdit-1] = inputsData; - this.siteGroupTableData = [...this.siteGroupTableData]; //表格刷新 + this.siteGroupTableData = [...this.siteGroupTableData]; //Table refresh }else{ - // this.siteTableData.push(inputsData);//使用 push 或者 splice 修改 nzData 失效 + // this.siteTableData.push(inputsData);//use push or splice modify nzData Invalid this.siteGroupTableData = [...this.siteGroupTableData,inputsData]; } @@ -393,18 +417,18 @@ export class CcvpnCreationComponent implements OnInit { this.siteGroupModalTableData = []; this.siteGroupModelShow = false; } - isGroupEdit = 0; //编辑序号，No值，0表示增加 - editGroupSite(num){ //将当前编辑的行数据填入模态框--->获取当前编辑项sites名--->判断更新模态框中site项状态 + isGroupEdit = 0; //Edit serial number, No value, 0 means increase + editGroupSite(num){ //Fill the currently edited row data into the modal box--->Get the current edit item sites name--->Determine the status of the site item in the updated modal box this.siteGroupModelShow = true; this.isGroupEdit=num; this.siteGroupModelData = Object.assign({},this.siteGroupTableData[num-1]); console.log(this.siteGroupModelData) - let editSites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //获取组中的site名 + let editSites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //Get the site name in the group // console.log(editSites); - let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选 + let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//Whether a site has been selected in the loop group，If present, the new group is not optional // console.log(checkedSite); this.siteTableData.forEach((item,index)=>{ - if(editSites.includes(item.baseData.name)){//先将编辑组中的site 中这三个值还原，否则减少某个site时 不会更新不选中的 + if(editSites.includes(item.baseData.name)){//First restore these three values in the site in the edit group, otherwise it will not be updated when the site is reduced. item.baseData.groupRole = null; //site group的role item.baseData.groupName = null; //site group的name item.baseData.controlPoint = null; @@ -419,12 +443,12 @@ export class CcvpnCreationComponent implements OnInit { } deleteGroupSite(num){ - let deleteSiteGroupsites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //删除的site中name + let deleteSiteGroupsites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //delete site name this.siteGroupTableData = this.siteGroupTableData.filter((d,i) => i !== num-1); this.siteTableData.forEach((item,index)=>{ if(deleteSiteGroupsites.includes(item.baseData.name)){ - item.baseData.groupRole = null; //site group的role - item.baseData.groupName = null; //site group的name + item.baseData.groupRole = null; //site group role + item.baseData.groupName = null; //site group name item.baseData.controlPoint = null; } }) @@ -432,12 +456,12 @@ export class CcvpnCreationComponent implements OnInit { - // 提交创建数据 + // Submit creation data submit(){ let globalCustomerId = this.createParams.commonParams.customer.id; let globalServiceType = this.createParams.commonParams.serviceType.name; let sotnInputs = {}; - // 由于请求模板不一样，所以外层需要循环请求回来的真实名字，内层循环本地参数，将当前值赋给真实名字 + // Since the request template is different, the outer layer needs to loop back the real name of the request, the inner loop loops the local parameter, and assigns the current value to the real name. this.sotnNames.forEach((name)=>{ for(let key in this.sotnInfo){ let nameParts = this.namesTranslate.sotnNameTranslate[key].split("_"); diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html index 0ada7dd1..4a2f2f69 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.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,111 +13,184 @@ 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="creation fl"> - <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix"> - <h3>Base</h3> - <ul> - <li><span>Name*</span> <input nz-input [(ngModel)]="service.name"></li> - <li><span>Description*</span> <input nz-input [(ngModel)]="service.description"></li> - </ul> - <br> - <h3>Template Parameters</h3> - <h4>template Inputs</h4> - <ul> - <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> - <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> - <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value"> - - <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5> - <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span> - <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > - <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> - </nz-select> --> - </li> - </ul> - <h4>nestedTemplate Inputs</h4> - <div *ngFor="let template of templateParameters.nestedTemplates;"> - <h4 style="font:400 14px 'Arial';color:#aaa;">templateName: {{template.name}}</h4> - <ul> - <li *ngFor="let input of template.inputs; let i = index;"> - <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" > {{input.name}}: </span> - <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input [(ngModel)]="input.value"> - - <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5> - <span *ngIf="input.type === 'vf_location'"> vf_location: </span> - <nz-select *ngIf="input.type === 'vf_location'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear > - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - <!-- <nz-select *ngIf="input.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear > - <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> - </nz-select> --> - </li> - </ul> - </div> - +<!--<h3 class="title"> Services List </h3>--> +<div class="model creation-model"> + + <div class="top-title"> + <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3> + <div class="fl" style="width: 20%"> + <button class="submit" nz-button (click)="submit()"><span>Create</span></button> + <button class="back" nz-button (click)="goback()"> + <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i> + </button> + </div> + </div> + <div class="creation fl"> + <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix"> + <!--2019.02.21 add--> + <div class="vnf-box"> + <h3>Base</h3> + <ul class="clearfix"> + <li><span>Name:</span> <input nz-input [(ngModel)]="service.name"></li> + <li><span>Description:</span> <input nz-input [(ngModel)]="service.description"></li> + <li><span>COS:</span> <input nz-input [(ngModel)]="service.COS"></li> + <li><span>EBS:</span> <input nz-input [(ngModel)]="service.EBS"></li> + <li> + <span style="vertical-align: top;margin-top: 3px;">checkbox</span> + <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)"> + <div nz-row> + <div nz-col style="margin-bottom: 10px"><label nz-checkbox nzValue="A" + [nzDisabled]="true">Mauris rutrum quam p + </label></div> + <div nz-col><label nz-checkbox nzValue="B" [ngModel]="true">fince in felis nec e + </label></div> + </div> + </nz-checkbox-wrapper> + </li> + </ul> + </div> + <div class="vnf-box"> + <h3>VNF1</h3> + <ul class="clearfix"> + <li><span>Name:</span> <input nz-input></li> + <li><span>Description:</span> <input nz-input></li> + <li> + <span style="vertical-align: top;margin-top: 3px;">radio button</span> + <nz-radio-group [(ngModel)]="radioValue1" nzName="radiogroup"> + <label nz-radio [ngStyle]="{'margin-bottom':'10px'}" nzValue="Selected" [ngModel]="true">Selected</label> + <br> + <label nz-radio [ngStyle]="style" nzValue="Disaled">Disaled</label> + </nz-radio-group> + </li> + <li> + <span>pull down:</span> + <nz-select nzAllowClear [(ngModel)]="selectedValue"> + <nz-option nzValue="Heresanoption" nzLabel="Heresanoption"></nz-option> + <nz-option nzValue="Anotheroption" nzLabel="Anotheroption"></nz-option> + <nz-option nzValue="Thirdoption" nzLabel="Thirdoption"></nz-option> + <nz-option nzValue="Noneoftheabove" nzLabel="Noneoftheabove"></nz-option> + </nz-select> + </li> + </ul> + </div> + <div class="vnf-box"> + <h3>VNF2</h3> + <ul class="clearfix"> + <li><span>Name:</span> <input nz-input></li> + <li><span>Description:</span> <input nz-input></li> + <li> + <span style="vertical-align: top;margin-top: 3px;" nzName="radiogroup2">radio button</span> + <nz-radio-group [(ngModel)]="radioValue2"> + <label nz-radio [ngStyle]="{'margin-bottom':'10px'}" nzValue="Selected2" [ngModel]="true">Selected2</label> + <br> + <label nz-radio [ngStyle]="style" nzValue="Disaled2">Disaled2</label> + </nz-radio-group> + </li> + </ul> + </div> + <div class="vnf-box"> + <h3>template Inputs</h3> + <ul> + <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> + <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> + <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input + [(ngModel)]="parameter.value"> + + <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: + {{parameter.name}}</h5> + <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span> + <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" + [(ngModel)]="parameter.value" nzAllowClear> + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > + <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> + </nz-select> --> + </li> + </ul> + <h4>nestedTemplate Inputs</h4> + <div *ngFor="let template of templateParameters.nestedTemplates;"> + <h4 style="font:400 14px 'Arial';color:#aaa;">templateName: {{template.name}}</h4> + <ul> + <li *ngFor="let input of template.inputs; let i = index;"> + <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'"> {{input.name}}: </span> + <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input + [(ngModel)]="input.value"> + + <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5> + <span *ngIf="input.type === 'vf_location'"> vf_location: </span> + <nz-select *ngIf="input.type === 'vf_location'" style="width: 165px;" + [(ngModel)]="input.value" + nzAllowClear> + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" + [nzLabel]="vim.name"></nz-option> + </nz-select> + <!-- <nz-select *ngIf="input.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear > + <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> + </nz-select> --> + </li> + </ul> + </div> + </div> + </div> + + <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix"> + <div class="vnf-box"> + <h3>Base</h3> + <ul class="clearfix"> + <li><span>Name:</span> <input nz-input [(ngModel)]="ns_service.nsName"></li> + <li><span>Description:</span> <input nz-input [(ngModel)]="ns_service.description"></li> + </ul> + </div> + <div class="vnf-box"> + <h3>Template Parameters</h3> + <h4>template Inputs</h4> + <ul> + <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;"> + <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> + <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input + [(ngModel)]="parameter.value"> + + <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: + {{parameter.name}}</h5> + <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span> + <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" + [(ngModel)]="parameter.value" nzAllowClear> + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > + <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> + </nz-select> --> + </li> + </ul> + + <h4>vnfs Inputs</h4> + + <ul> + <li *ngFor="let vnf of nsTemplateParameters.vnfs;"> + <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5> + <span> vf_location: </span> + <nz-select style="width: 165px;" [(ngModel)]="vnf.value" nzAllowClear> + <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> + </nz-select> + </li> + </ul> + </div> + </div> </div> - <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix"> - <h3>Base</h3> - <ul> - <li><span>Name*</span> <input nz-input [(ngModel)]="ns_service.nsName"></li> - <li><span>Description*</span> <input nz-input [(ngModel)]="ns_service.description"></li> - </ul> - <h3>Template Parameters</h3> - <h4>template Inputs</h4> - <ul> - <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;"> - <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> - <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value"> - - <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5> - <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span> - <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear > - <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option> - </nz-select> --> - </li> - </ul> + <!-- chart --> + <div class="chart fr"> + <div id="createChart"> + <svg width="100%" height="100%"> - <h4>vnfs Inputs</h4> + <image xlink:href="./assets/images/cloud-site.png" + x="25%" y="30%" width="50%"/> - <ul> - <li *ngFor="let vnf of nsTemplateParameters.vnfs;"> - <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5> - <span> vf_location: </span> - <nz-select style="width: 165px;" [(ngModel)]="vnf.value" nzAllowClear > - <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option> - </nz-select> - </li> - </ul> + </svg> + </div> </div> - <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button> - </div> - - <!-- 图 --> - <div class="chart fr"> - Create Service - <div id="createChart"> - <svg width="100%" height="100%"> - - <image xlink:href="./assets/images/cloud-site.png" - x="25%" y="30%" width="50%"/> - - </svg> - - </div> - </div> </div> diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less index b8c41877..ea7c5bac 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less @@ -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,56 +25,118 @@ hr { margin-bottom: 10px; } .model { - background-color: #fff; - height: 90%; + background-color: #F7F8FC; + height: 100%; overflow-y: auto; + position: relative; + .top-title{ /*2019.01.22 add*/ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; + } + .submit{ + position: absolute; + width:84px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; + } + .submit:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + border: none; + } .back { position: absolute; top: 10px; right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:#ffffff!important; + border-radius:4px; + color: #D7D7D7; + } + .back:hover{ + background:#ffffff; + color: #3F9CFF; + border:1px solid #3F9CFF; + } + .top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + /*top:10px;*/ + } .creation{ position: relative; - width: 60%; + width: 58%; height: 100%; overflow-y: auto; border-radius: 5px; padding: 20px; + background: #fff; + margin-left: 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); .baseparms { h3 { - color: #3fa8eb; - font: 700 16px "Arial"; + color: #06A7E2; + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + 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; } h4 { font: 700 16px "Arial"; + margin-left: 25px; + } + ul{ + margin-left: 30px; } ul li { // display: inline-block; - margin: 3px 0; + margin: 10px 0; + width: 40%; + float: left; + text-align: left; span { display: inline-block; - width: 40%; + width: 25%; font: 700 14px "Arial"; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; - text-align: right; + text-align: left; } - input { - width: 165px; + input,nz-select{ + width: 170px; } } } - .submit { - position: absolute; - top: 10px; - right: 20px; - } } .chart { - width: 40%; + width: 35%; padding: 10px; - height: 100%; - border-left: 10px solid #f3f3f3; + height: 95%; + box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5); + margin-right: 40px; } } diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts index 8fc9fb60..261aa3f9 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.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. @@ -57,7 +57,7 @@ export class E2eCreationComponent implements OnInit { inputs2:[], vnfs:[] } - getTemParameters(){ //获取模板参数 + getTemParameters(){ //Get template parameters let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; this.myhttp.getTemplateParameters(type,this.createParams.template) .subscribe((data)=>{ @@ -104,6 +104,8 @@ export class E2eCreationComponent implements OnInit { service = { name: "", description: "", + COS:"", + EBS:"", serviceInvariantUuid: "", serviceUuid: "", // uuid ?? globalSubscriberId: "", // "customer.id", diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css index 15793838..0a7f92eb 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.css +++ b/usecaseui-portal/src/app/services/services-list/services-list.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. diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index ff977190..48cd38a0 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.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. @@ -97,7 +97,7 @@ </div> </li> </ul> - <div class="list" [ngClass]="{'listdisplay':listDisplay == true}"> + <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}"> <nz-table *ngIf="1" #nzTable [nzData]="tableData" nzShowSizeChanger @@ -159,7 +159,7 @@ <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td> <td>{{item.serviceDomain}}</td> <td> - <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span> + <span [ngClass]="{'healing':data.statusClass=='1004'}">{{data.tips}}</span> <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress> </td> <td> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 0e59ca2e..55419785 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -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. @@ -66,7 +66,7 @@ hr { } } } - // //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body. .create { position: absolute; right: 3%; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 2dfbc942..163aa9cd 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.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. @@ -151,6 +151,7 @@ export class ServicesListComponent implements OnInit { let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}}; this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; this.createshow = true; + this.listDisplay = true; }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4}; this.createshow2 = true; @@ -173,7 +174,7 @@ export class ServicesListComponent implements OnInit { getTableData(){ - // 查询参数: customer serviceType 当前页码，每页条数 + // Query parameter: customer serviceType Current page number, number of pages per page let paramsObj = { customerId:this.customerSelected.id, serviceType:this.serviceTypeSelected.name, @@ -463,7 +464,7 @@ export class ServicesListComponent implements OnInit { closeCreate(obj){ if(!obj){ this.createshow = false; //close - this.listDisplay = false; + this.listDisplay = false; //close return false; } this.createshow = false; @@ -588,11 +589,11 @@ export class ServicesListComponent implements OnInit { e2eCloseCreate(obj){ if(!obj){ this.createshow2 = false; // - this.listDisplay = false; + this.listDisplay = false; // return false; } this.createshow2 = false; // - this.listDisplay = false; + this.listDisplay = false; // console.log(obj); let newData; // let createParams = "?customerId="+this.customerSelected.id + @@ -644,11 +645,11 @@ export class ServicesListComponent implements OnInit { nsCloseCreate(obj){ if(!obj){ this.createshow2 = false; // - this.listDisplay = false; + this.listDisplay = false; // return false; } this.createshow2 = false; // - this.listDisplay = false; + this.listDisplay = false; // console.log(obj); let newData; // // step1 @@ -757,15 +758,16 @@ export class ServicesListComponent implements OnInit { } let updata = (prodata)=>{ service.rate = prodata.progress; + service.tips = "Scaling" + '\xa0\xa0\xa0' +service["rate"]+"%"; if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Scaling" + service["status"]; + service.tips = "Scaling"+ '\xa0\xa0\xa0' + service["status"]; } } this.queryProgress(obj,updata).then(()=>{ service.rate = 100; service.status = "Successful"; - service.tips = "Scaling" + service["status"]; + service.tips = "Scaling"+ '\xa0\xa0\xa0' + service["status"]; }) }) } @@ -788,9 +790,11 @@ export class ServicesListComponent implements OnInit { let operationType = "1004"; let updata = (prodata)=>{ service.rate = prodata.progress; + service.tips = "Healing" + '\xa0\xa0\xa0' +service.rate+"%"; + console.log(service.rate) if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Healing" + service["status"]; + service.tips = "Healing" + '\xa0\xa0\xa0' + service["status"]; } } this.queryNsProgress(jobid,null,updata,operationType).then((data1)=>{ @@ -830,9 +834,10 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); service["rate"]=average; + service.tips = "Deleting" + '\xa0\xa0\xa0' +service["rate"]+"%"; if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Deleting" + service["status"]; + service.tips = "Deleting" + '\xa0\xa0\xa0' + service["status"]; } } querypros.push(this.queryProgress(obj,updata)); @@ -877,6 +882,7 @@ export class ServicesListComponent implements OnInit { } let updata = (prodata)=>{ service.rate = prodata.progress; + service.tips = "Deleting" + '\xa0\xa0\xa0' +service.rate+"%"; if(service["rate"] > 100){ service["status"]=prodata.status; service.tips = "Deleting" + service["status"]; @@ -893,7 +899,7 @@ export class ServicesListComponent implements OnInit { if(data.status == "FAILED"){ console.log("delete ns service failed :" + JSON.stringify(data)); service.status = "failed"; - service.tips = "Deleting" + service["status"]; + service.tips = "Deleting" +'\xa0\xa0\xa0' + service["status"]; return false; } let hasUndone = this.tableData.some((item)=>{ |