Support NS Package Upload for VF-C

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

1 files changed, 53 insertions, 51 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 f0648ac1..b6c92e7a 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
@@ -30,53 +30,54 @@
                     {{ nsuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
                 <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 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 [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" 
+	                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *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 style="margin-top:8px;">
                         Loading state：
                         <nz-switch [(ngModel)]="isSpinning"></nz-switch>
@@ -98,8 +99,8 @@
                     {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
                 <nz-spin [nzSpinning]="isSpinning">
-                        <div class="mask" *ngIf="isSpinning"></div>
-                        <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                    <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>
@@ -127,8 +128,9 @@
                                 <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>
+                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding'  && i == currentIndex}" 
+                                class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i>
+                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
                                 </td>
                             </tr>
                         </tbody>