summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-11-20 14:19:32 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-11-20 14:26:14 +0800
commit60d181ad6ba838446171c40c2d88679a22a4faae (patch)
tree5a4125dd7c455d6276dc8ffa13b416db01da5a3a
parent3144109a75e300eb978b9bbc6d1ebedc10f0cdc1 (diff)
Increase the loading of the list
Change-Id: I9ac26c1c657d6e0e8c51720d43ab5e9630877a47 Issue-ID: USECASEUI-159 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html228
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less10
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts11
3 files changed, 141 insertions, 108 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 3c849397..f0648ac1 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
@@ -14,7 +14,7 @@
limitations under the License.
-->
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
- <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, id, url)">
+ <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
<!-- nsList -->
<div class="list" *ngIf="tab === 'NS'">
<h3 class="title"> Onboard {{tabTitle}} </h3>
@@ -29,51 +29,59 @@
style="margin-top: 16px">
{{ nsuploading ? 'Uploading' : 'Start Upload' }}
</button>
- <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex'
- [nzLoading]="loading" nzSize="middle">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
- <tr>
- <th nzWidth="15%">NO</th>
- <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
- <th nzWidth="15%">Version</th>
- <th nzWidth="15%">Onboarding State</th>
- <th nzWidth="15%">Operational State</th>
- <th nzWidth="10%">Usage State</th>
- <th nzWidth="15%">Operation button</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td *ngIf="item.id">{{item.id}}</td>
- <td *ngIf="item.uuid">{{item.uuid}}</td>
-
- <td *ngIf="item.nsdName">{{item.nsdName}}</td>
- <td *ngIf="item.nsdName===null">无</td>
- <td *ngIf="item.name">{{item.name}}</td>
- <td *ngIf="item.name===null">无</td>
- <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
- <td *ngIf="item.nsdVersion===null">无</td>
- <td *ngIf="item.version">{{ item.version }}</td>
- <td>
- <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
- <span *ngIf="item.nsdOnboardingState === null">无</span>
- <span *ngIf="item.uuid">{{status}}</span>
-
- <!-- <span *ngIf="item.uuid" [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',
- 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
- <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
- </td>
- <td>{{item.nsdOperationalState}}</td>
- <td>{{item.nsdUsageState}}</td>
- <td>
- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
- </td>
- </tr>
- </tbody>
- </nz-table>
+ <nz-spin [nzSpinning]="isSpinning">
+ <div class="mask" *ngIf="isSpinning"></div>
+ <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex'
+ [nzLoading]="loading" nzSize="middle">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="15%">NO</th>
+ <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="15%">Operational State</th>
+ <th nzWidth="10%">Usage State</th>
+ <th nzWidth="15%">Operation button</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td *ngIf="item.id">{{item.id}}</td>
+ <td *ngIf="item.uuid">{{item.uuid}}</td>
+
+ <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+ <td *ngIf="item.nsdName === null">无</td>
+ <td *ngIf="item.name">{{item.name}}</td>
+ <td *ngIf="item.name===null">无</td>
+ <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+ <td *ngIf="item.nsdVersion === null">无</td>
+ <td *ngIf="item.version">{{ item.version }}</td>
+ <td>
+ <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
+ <span *ngIf="item.nsdOnboardingState === null">无</span>
+ <span *ngIf="item.uuid">{{status}}</span>
+
+ <!-- <span *ngIf="item.uuid" [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',
+ 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
+ <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
+ </td>
+ <td>{{item.nsdOperationalState}}</td>
+ <td>{{item.nsdUsageState}}</td>
+ <td>
+ <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
+ <button class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></button>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </nz-spin>
+ <!-- <div style="margin-top:8px;">
+ Loading state:
+ <nz-switch [(ngModel)]="isSpinning"></nz-switch>
+ </div> -->
+
</div>
<!-- VNFList -->
<div class="list" *ngIf="tab === 'VNF'">
@@ -89,40 +97,44 @@
style="margin-top: 16px">
{{ vnfuploading ? 'Uploading' : 'Start Upload' }}
</button>
- <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex'
- [nzLoading]="loading" nzSize="middle">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
- <tr>
- <th nzWidth="15%">NO</th>
- <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
- <th nzWidth="15%">Version</th>
- <th nzWidth="15%">Onboarding State</th>
- <th nzWidth="15%">Operational State</th>
- <th nzWidth="10%">Usage State</th>
- <th nzWidth="15%">Operation button</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td *ngIf="item.id">{{item.id}}</td>
- <td *ngIf="item.uuid">{{item.uuid}}</td>
- <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
- <td *ngIf="item.vnfProductName === null">无</td>
- <td *ngIf="item.name">{{item.name}}</td>
- <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
- <td *ngIf="item.vnfdVersion === null">无</td>
- <td *ngIf="item.version">{{item.version}}</td>
- <td>{{item.onboardingState}}</td>
- <td>{{item.usageState}}</td>
- <td>{{item.operationalState}}</td>
- <td>
- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
- </td>
- </tr>
- </tbody>
- </nz-table>
+ <nz-spin [nzSpinning]="isSpinning">
+ <div class="mask" *ngIf="isSpinning"></div>
+ <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex'
+ [nzLoading]="loading" nzSize="middle">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="15%">NO</th>
+ <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="15%">Operational State</th>
+ <th nzWidth="10%">Usage State</th>
+ <th nzWidth="15%">Operation button</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td *ngIf="item.id">{{item.id}}</td>
+ <td *ngIf="item.uuid">{{item.uuid}}</td>
+ <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+ <td *ngIf="item.vnfProductName === null">无</td>
+ <td *ngIf="item.name">{{item.name}}</td>
+ <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
+ <td *ngIf="item.vnfdVersion === null">无</td>
+ <td *ngIf="item.version">{{item.version}}</td>
+ <td>{{item.onboardingState}}</td>
+ <td>{{item.usageState}}</td>
+ <td>{{item.operationalState}}</td>
+ <td>
+ <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </nz-spin>
+
</div>
<!-- PNFList -->
<div class="list" *ngIf="tab === 'PNF'">
@@ -138,32 +150,36 @@
style="margin-top: 16px">
{{ pnfuploading ? 'Uploading' : 'Start Upload' }}
</button>
- <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex'
- [nzLoading]="loading" nzSize="middle">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
- <tr>
- <th nzWidth="15%">NO</th>
- <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
- <th nzWidth="15%">Version</th>
- <th nzWidth="15%">Onboarding State</th>
- <th nzWidth="10%">Usage State</th>
- <th nzWidth="15%">Operation button</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{item.id}}</td>
- <td>{{item.pnfdName}}</td>
- <td>{{item.pnfdVersion}}</td>
- <td>{{item.pnfdOnboardingState}}</td>
- <td>{{item.pnfdUsageState}}</td>
- <td>
- <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
- </td>
- </tr>
- </tbody>
- </nz-table>
+ <nz-spin [nzSpinning]="isSpinning">
+ <div class="mask" *ngIf="isSpinning"></div>
+ <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex'
+ [nzLoading]="loading" nzSize="middle">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="15%">NO</th>
+ <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="10%">Usage State</th>
+ <th nzWidth="15%">Operation button</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{item.id}}</td>
+ <td>{{item.pnfdName}}</td>
+ <td>{{item.pnfdVersion}}</td>
+ <td>{{item.pnfdOnboardingState}}</td>
+ <td>{{item.pnfdUsageState}}</td>
+ <td>
+ <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </nz-spin>
+
</div>
</nz-tab>
</nz-tabset>
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index 099383a2..3d2d4a72 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -79,4 +79,14 @@ hr {
}
}
}
+}
+.mask {
+ top: 0;
+ left: 0;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ opacity: 0.1;
+ background: black;
+ z-index: 1049;
} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 766540c0..bf2b6572 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -69,7 +69,7 @@ export class OnboardVnfVmComponent implements OnInit {
sortName = null;
sortValue = null;
tabs = ['NS', 'VNF', 'PNF'];
-
+ isSpinning = false;
isVisible = false;
isOkLoading = false;
showModal(): void {
@@ -263,12 +263,14 @@ changeUploadingSta(tab) {
// 获取NS列表
getTableData() {
+ this.isSpinning = true;
//vfc
this.myhttp.getOnboardTableData()
.subscribe((data) => {
console.log("NSlist-vfc-->",data);
console.log("NSlist-length-vfc-->",data.length);
this.nsvfcData = data;
+ //loading
this.nstableData = this.nsvfcData
}, (err) => {
console.log(err);
@@ -286,6 +288,7 @@ changeUploadingSta(tab) {
}else if(this.nsvfcData.length != 0 && this.nssdcData.length === 0){
this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
}
+ this.isSpinning = false;
}, (err) => {
console.log(err);
})
@@ -295,6 +298,7 @@ changeUploadingSta(tab) {
// 获取vnf列表
getTableVnfData() {
+ this.isSpinning = true;
this.myhttp.getOnboardTableVnfData()
.subscribe((data) => {
console.log("vnfList--vnf>", data);
@@ -319,18 +323,21 @@ changeUploadingSta(tab) {
this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
console.log(this.vnftableData)
}
+ this.isSpinning = false;
}, (err) => {
console.log(err);
})
}
// 获取pnf列表
- getTablePnfData() {
+ getTablePnfData() {
+ this.isSpinning = true;
this.myhttp.getOnboardTablePnfData()
.subscribe((data) => {
console.log("pnfList-->", data);
console.log("pnfList-->", data.length);
this.pnftableData = data;
+ this.isSpinning = false;
}, (err) => {
console.log(err);
})