summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-11-05 10:35:42 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-11-05 10:35:57 +0800
commita9c61e99f395e091b8f16ac5861a50b5148e9033 (patch)
tree837d037b4d4188626618266f84b19267bf5e1ede /usecaseui-portal/src
parent52fb178dc3cd639a3efa89803b226ccdc53b287d (diff)
fixed list switching function
Change-Id: I3d659ffcf2055221340388e35ebafb67bff8bcba Issue-ID: USECASEUI-159 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html262
1 files changed, 206 insertions, 56 deletions
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 9ada2aef..c0e91543 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -16,13 +16,13 @@
<h3 class="title"> Onboard VNF </h3>
<nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
<p class="ant-upload-drag-icon">
- <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+ <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
</p>
<p class="ant-upload-text">Click or drag file to this area to upload</p>
- <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+ <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or
+ other band files</p>
</nz-upload>
-<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0"
- style="margin-top: 16px">
+<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0" style="margin-top: 16px">
{{ uploading ? 'Uploading' : 'Start Upload' }}
</button>
<!-- <button nz-button nzType="primary" (click)="showModal()">
@@ -31,10 +31,10 @@
<nz-modal [(nzVisible)]="isVisible" nzTitle="Modal Title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
[nzOkLoading]="isOkLoading">
<p>
- <input nz-input placeholder="??¨º?¨¨?key" [(ngModel)]="value1">
+ <input nz-input placeholder="请输入key" [(ngModel)]="value1">
</p>
<p>
- <input nz-input placeholder="??¨º?¨¨?value" [(ngModel)]="value2">
+ <input nz-input placeholder="请输入value" [(ngModel)]="value2">
</p>
</nz-modal> -->
@@ -45,54 +45,204 @@
</nz-tabset> -->
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
- <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
- <div class="list">
- <nz-table #nzTable [nzData]="tableData"
- nzShowSizeChanger
- [nzFrontPagination]="true"
- [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]"
- [nzTotal]= 'total'
- [(nzPageSize)]="pageSize"
- [(nzPageIndex)]='pageIndex'
- [nzLoading]="loading"
- nzSize="middle"
- (nzPageIndexChange)="searchData()"
- (nzPageSizeChange)="searchData(true)">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
- <tr>
- <th nzWidth="5%">NO</th>
- <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
- <th nzWidth="20%">Type</th>
- <th nzWidth="20%">Version</th>
- <th nzWidth="15%">Onboarding State</th>
- <th nzWidth="20%">Operational State</th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <!-- <td>{{i+1}}</td> -->
- <td>{{item.id}}</td>
- <td>{{item.name}}</td>
- <td>{{item.type}}</td>
- <td>{{item.version}}</td>
- <td>
- <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
- 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
- </td>
- <td>
- <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.uuid"></i>
- <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
- <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
- </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- </div>
- </nz-tab>
- </nz-tabset>
+ <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, url)">
+ <!-- nsList -->
+ <div class="list" *ngIf="tab === 'NS'">
+ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+ <!-- <th nzWidth="20%">Type</th> -->
+ <th nzWidth="10%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="20%">Operational State</th>
+ <th nzWidth="20%">Usage State</th>
+ <th nzWidth="15%"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td *ngIf="item.nsdId">{{item.nsdId}}</td>
+ <td *ngIf="item.uuid">{{item.uuid}}</td>
+
+ <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+ <td *ngIf="item.name">{{item.name}}</td>
+ <!-- <td>{{item.onboardingFailureDetails.type}}</td> -->
+ <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+ <td *ngIf="item.version">{{ item.version }}</td>
+ <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
+ <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
+ </td>
+ <td>{{item.nsdOperationalState}}</td>
+ <td>{{item.nsdUsageState}}</td>
+ <td>
+ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+ <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"></i>
+ <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
+ <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ <!-- VNFList -->
+ <!-- <div class="list" *ngIf="tab === 'VNF'">
+ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="20%">Type</th>
+ <th nzWidth="20%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="20%">Operational State</th>
+ </tr>
+ </thead> -->
+ <!-- <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{item.id}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.type}}</td>
+ <td>{{item.version}}</td>
+ <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+ <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+ </td>
+ <td> -->
+ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+ <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.id)"></i>
+ <i class="anticon anticon-download" (click)="downloadVnfService(item.id)" *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id }}"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div> -->
+ <div class="list" *ngIf="tab === 'VNF'">
+ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="10%">Version</th>
+ <th nzWidth="20%">Onboarding State</th>
+ <th nzWidth="15%">usageState</th>
+ <th nzWidth="20%">Operational State</th>
+ <th nzWidth="20%">Operation button</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <!-- <td>{{i+1}}</td> -->
+ <td>{{item.id}}</td>
+ <td>{{item.vnfProductName}}</td>
+ <td>{{item.vnfdVersion}}</td>
+ <td>{{item.onboardingState}}</td>
+ <td>{{item.usageState}}</td>
+ <td>{{item.operationalState}}</td>
+ <!-- <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+ <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+ </td> -->
+ <td>
+ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+ <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
+ *ngIf="item.uuid"></i>
+ <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
+ <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ <!-- PNFList -->
+ <!-- <div class="list" *ngIf="tab === 'PNF'">
+ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="20%">Type</th>
+ <th nzWidth="20%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="20%">Operational State</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{item.id}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.type}}</td>
+ <td>{{item.version}}</td>
+ <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+ <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+ </td>
+ <td>
+ <i class="anticon anticon-upload upicon" #upload_icon (click)="updataPnfService(item.id)"></i>
+ <i class="anticon anticon-download" (click)="downloadPnfService(item.id)" *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)" id="{{ item.id }}"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div> -->
+ <div class="list" *ngIf="tab === 'PNF'">
+ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="20%">Onboarding State</th>
+ <th nzWidth="20%">usageState</th>
+ <th nzWidth="25%">Operation button</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <!-- <td>{{i+1}}</td> -->
+ <td>{{item.id}}</td>
+ <td>{{item.pnfdName}}</td>
+ <td>{{item.pnfdVersion}}</td>
+ <td>{{item.pnfdOnboardingState}}</td>
+ <td>{{item.pnfdUsageState}}</td>
+ <!-- <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+ <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+ </td> -->
+ <td>
+ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+ <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
+ *ngIf="item.uuid"></i>
+ <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
+ <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ </nz-tab>
+</nz-tabset> \ No newline at end of file