Increase the loading of the list

Change-Id: I9ac26c1c657d6e0e8c51720d43ab5e9630877a47
Issue-ID: USECASEUI-159
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

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);
       })