diff options
author | 2018-10-31 14:41:34 +0800 | |
---|---|---|
committer | 2018-10-31 14:42:07 +0800 | |
commit | fa6ed0abe231d153acc5011bd2951b310671b4ac (patch) | |
tree | 03c434653d15e0934056575660c54ae2af5f91e5 /usecaseui-portal/src/app/services/services-list/services-list.component.html | |
parent | 059a897e44b1c44860ae8907d4a8600b649cccf3 (diff) |
create e2eService and nsService
Change-Id: I67da05aeb62b24e13446c439b9ef6b9fc1494920
Issue-ID: USECASEUI-160
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list/services-list.component.html')
-rw-r--r-- | usecaseui-portal/src/app/services/services-list/services-list.component.html | 131 |
1 files changed, 54 insertions, 77 deletions
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 e0866524..c18d294a 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 @@ -39,34 +39,40 @@ <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> - <p>Content one</p> - <p>Content two</p> - <p>Content three</p> - </nz-modal> - <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> - <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()"> <span style="display:inline-block;width:70px;">Service: </span> <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()"> <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option> <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option> + <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option> + <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> </nz-select> <hr> - <span>SOTN VPN: </span> - <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear > - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> + <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'"> + <span>SOTN VPN: </span> + <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> - <span> SITE: </span> - <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear > - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - - <div *ngIf="templateTypeSelected == 'CCVPN'"> - <br> - <span style="display:inline-block;width:70px;">SD-WAN: </span> - <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear > + <br><br> + <span style="display:inline-block;width:70px;"> SITE: </span> + <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + + <div *ngIf="templateTypeSelected == 'CCVPN'"> + <br> + <span style="display:inline-block;width:70px;">SD-WAN: </span> + <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + </div> + + <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'"> + <span style="display:inline-block;width:70px;">TEMPLATE: </span> + <nz-select style="width: 165px;" [(ngModel)]="template4" nzAllowClear > <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> </nz-select> </div> @@ -101,76 +107,40 @@ <tbody> <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> <tr> - <td>{{i+1}}</td> - <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td> - <td>{{data.serviceId}}</td> - <td>{{data.name}}</td> - <td>{{data.type}}</td> + <td>{{pageSize*(pageIndex-1) + i+1}}</td> + <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> + <td>{{data["service-instance-name"] || data.nsName}}</td> + <td>{{data.serviceDomain}}</td> <td> <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', - 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span> - <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress> + 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress> + <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> --> </td> <td> - <i class="anticon anticon-setting" (click)="scaleService()"></i> - <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> - <i class="anticon anticon-delete" (click)="deleteService()"></i> + <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i> + <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> --> + <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i> + <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i> + <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> + <i class="anticon anticon-delete" (click)="deleteService(data)"></i> + <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" + (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span> + <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" + (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> --> </td> </tr> - <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children"> + <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> <td></td> <td></td> - <td>{{item.serviceId}}</td> - <td>{{item.name}}</td> - <td colspan="3">{{item.type}}</td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> + <td>{{data["service-instance-name"] || data.nsName}}</td> + <td colspan="3">{{item.serviceDomain}}</td> </tr> </ng-template> </tbody> </nz-table> - <nz-table *ngIf="1" - #nzTable2 [nzData]="tableData2" - nzShowSizeChanger - [nzFrontPagination]="true" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - nzSize="middle" - [nzScroll]="{ y: '58vh' }"> - <thead nzSingleSort> - <tr> - <th nzWidth="5%">NO.</th> - <th nzWidth="20%"> Instance ID </th> - <th nzWidth="20%">Instance Name</th> - <!-- <th nzWidth="10%">Type</th> --> - <th nzWidth="25%">Description</th> - <th nzWidth="15%">Status</th> - <th nzWidth="10%">Action</th> - </tr> - </thead> - <tbody> - <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> --> - <tr *ngFor="let item of nzTable2.data; let i = index; "> - <td>{{pageSize*(pageIndex-1) + i+1}}</td> - <td>{{item.sotnvpnSer['service-instance-id']}}</td> - <td>{{item.sotnvpnSer['service-instance-name']}}</td> - <!-- <td>{{item.type}}</td> --> - <td>{{item.sotnvpnSer.description}}</td> - <td> - <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span> - <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span> - <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> - </td> - <td> - <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" - (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span> - <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" - (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> - </td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> </div> <div class="detailComponent" *ngIf="detailshow"> @@ -183,3 +153,10 @@ (closeCreate)="closeCreate($event)"> </app-ccvpn-creation> </div> +<div class="createComponent" *ngIf="createshow2"> + <app-e2e-creation + [createParams]="createData" + (nsCloseCreate)="nsCloseCreate($event)" + (e2eCloseCreate)="e2eCloseCreate($event)"> + </app-e2e-creation> +</div> |