feat: optimize the code for the onboard page

Change-Id: Ib217e75b81c47281be3cea97f91e52f42338cf15
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 268 insertions, 556 deletions

diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 9ff2d9a8..d4429c0b 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -13,243 +13,131 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
+
+<!-- tab -->
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
-        <!-- nsList -->
-        <div class="list" *ngIf="tab === 'NS'">
-            <div  class="listUploadContainer">
-                <div class="listupload">
-                    <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
-                        <p class="ant-upload-drag-icon">
-                            <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                        </p>
-                        <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
-                        <p class="ant-upload-hint"></p>
-                    </nz-upload>
-                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length === 0" class="upload">
-                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
-                    </button>
+    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab>
+</nz-tabset>
+<div class="list">
+    <!-- upload -->
+    <div  class="listUploadContainer">
+        <div class="listupload">
+            <nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+                <p class="ant-upload-drag-icon">
+                    <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+                </p>
+                <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
+                <p class="ant-upload-hint"></p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick()" [disabled]="fileList.length == 0" class="upload">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+        </div>
+        <div class="listlin"></div>
+        <div class="listfile">
+            <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+            <div class="nouploadfile" [style.display]="display">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+            <div class="listfilebgc" *ngIf="file">
+                <i class="anticon anticon-link icon"></i>
+                <div class="color" [ngClass]="{'progress':file.status}">{{file.name}}</div>
+                <div class="color" *ngIf="file.status">
+                    <nz-progress [nzPercent]="file.progress" [nzShowInfo]="false"></nz-progress>
                 </div>
-                <div class="listlin"></div>
-                <div class="listfile">
-                    <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                    <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                    <div class="listfilebgc" *ngIf="nsfile">
-                        <i class="anticon anticon-link icon"></i>
-                        <div class="color" [ngClass]="{'progress':nsfile.status}">{{nsfile.name}}</div>
-                        <div class="color" *ngIf="nsfile.status">
-                            <nz-progress [nzPercent]="nsfile.progress" [nzShowInfo]="false"></nz-progress>
-                        </div>
-                        <div class="color" *ngIf="!nsfile.status">
-                            <span *ngIf="nsfile.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                            <span *ngIf="nsfile.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                        </div>
-                        <div *ngIf="!nsfile.status">
-                            <i class="anticon anticon-check-circle success" *ngIf="nsfile.success === 0"></i>
-                            <i class="anticon anticon-exclamation-circle fail" *ngIf="nsfile.success === 1"></i>
-                        </div>
-                    </div>
+                <div class="color" *ngIf="!file.status">
+                    <span *ngIf="file.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+                    <span *ngIf="file.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
                 </div>
-            </div>
-            <nz-spin [nzSpinning]="isSpinning" class="listContainer">
-                <div class="mask" *ngIf="isSpinning"></div>
-                <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true"
-                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="nspageSize"
-                    [(nzPageIndex)]='nspageIndex' nzSize="middle">
-                    <thead>
-                        <tr class="theadColor">
-                            <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th>
-                            <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <td>{{item.nsdName || item.name }}</td>     
-                            <td>{{item.nsdVersion || item.version}}</td>
-                            <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</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,notificationModel)"
-                                    *ngIf="item.uuid"></i>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showDeleteConfirm(i,item.id,tab,notificationModel)"
-                                    *ngIf="item.id"></i>
-
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
-            </nz-spin>
-
-        </div>
-        <!-- VNFList -->
-        <div class="list" *ngIf="tab === 'VNF'">
-            <div class="listUploadContainer">
-            <div class="listupload">
-                <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
-                    <p class="ant-upload-drag-icon">
-                        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                    </p>
-                    <p class="ant-upload-text">Click or drag CSAR File here</p>
-                    <p class="ant-upload-hint"></p>
-                </nz-upload>
-                <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length === 0" class="upload">
-                    {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
-                </button>
-            </div>
-            <div class="listlin"></div>
-            <div class="listfile">
-                <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                <div class="listfilebgc" *ngIf="vnffile">
-                    <i class="anticon anticon-link"></i>
-                    <div class="color" [ngClass]="{'progress':vnffile.status === true}">{{vnffile.name}}</div>
-                    <div class="color" *ngIf="vnffile.status">
-                        <nz-progress [nzPercent]="vnffile.progress" [nzShowInfo]="false"></nz-progress>
-                    </div>
-                    <div class="color" *ngIf="!vnffile.status">
-                        <span *ngIf="vnffile.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                        <span *ngIf="vnffile.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                    </div>
-                    <div *ngIf="!vnffile.status">
-                        <i class="anticon anticon-check-circle success" *ngIf="vnffile.success === 0"></i>
-                        <i class="anticon anticon-exclamation-circle fail"  *ngIf="vnffile.success === 1"></i>
-                    </div>
+                <div *ngIf="!file.status">
+                    <i class="anticon anticon-check-circle success" *ngIf="file.success === 0"></i>
+                    <i class="anticon anticon-exclamation-circle fail"  *ngIf="file.success === 1"></i>
                 </div>
             </div>
-            </div>
-            <nz-spin [nzSpinning]="isSpinning" class="listContainer">
-                <div class="mask" *ngIf="isSpinning"></div>
-                <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true"
-                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="vnfpageSize"
-                    [(nzPageIndex)]='vnfpageIndex' nzSize="middle">
-                    <thead>
-                        <tr>
-							<th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th>
-                            <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index;">
-                            <td>{{i+1}}</td>
-                            <td>{{item.vnfProductName || item.name }}</td>     
-                            <td>{{item.vnfdVersion || item.version}}</td>
-                            <td>{{item.onboardingState}}</td>
-                            <td>{{item.operationalState}}</td>
-                            <td>{{item.usageState}}</td>
-                            <td>
-                                <i [ngClass]="{'cannotclick':onboardData.status === 'onboarding'  && i === currentIndex}"
-                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i,notificationModel)"
-                                    *ngIf="item.uuid"></i>
-                                <i class="anticon anticon-delete" (click)="showDeleteConfirm(i,item.id,tab,notificationModel)"
-                                    *ngIf="item.id"></i>
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
-            </nz-spin>
-
         </div>
-        <!-- PNFList -->
-        <div class="list" *ngIf="tab === 'PNF'">
-            <div class="listUploadContainer">
-            <div class="listupload">
-                <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF">
-                    <p class="ant-upload-drag-icon">
-                        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                    </p>
-                    <p class="ant-upload-text">Click or drag CSAR File here</p>
-                    <p class="ant-upload-hint"></p>
-                </nz-upload>
-                <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length === 0" class="upload">
-                    {{ pnfuploading ? 'Uploading' : 'Start Upload' }}
-                </button>
-            </div>
-            <div class="listlin"></div>
-            <div class="listfile">
-                <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                    <div class="listfilebgc" *ngIf="pnffile">
-                        <i class="anticon anticon-link"></i>
-                        <div class="color" [ngClass]="{'progress':pnffile.status == true}">{{pnffile.name}}</div>
-                        <div class="color" *ngIf="pnffile.status">
-                            <nz-progress [nzPercent]="pnffile.progress" [nzShowInfo]="false"></nz-progress>
-                        </div>
-                        <div class="color" *ngIf="!pnffile.status">
-                            <span *ngIf="pnffile.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                            <span *ngIf="pnffile.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                        </div>
-                        <div *ngIf="!pnffile.status">
-                            <i class="anticon anticon-check-circle success" *ngIf="pnffile.success == 0"></i>
-                            <i class="anticon anticon-exclamation-circle fail"  *ngIf="pnffile.success == 1"></i>
-                        </div>
-                    </div>
-                </div>
+    </div>
+    <!-- table -->
+    <nz-spin [nzSpinning]="isSpinning" class="listContainer">
+        <div class="mask" *ngIf="isSpinning"></div>
+        <nz-table #nzTable [nzData]="currentTab === 'NS'? nsTableData: (currentTab === 'VNF'? vnfTableData : pnfTableData)" nzShowSizeChanger [nzFrontPagination]="true"
+            [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="pageSize"
+            [(nzPageIndex)]='pageIndex' nzSize="middle">
+            <thead>
+                <tr class="theadColor">
+                    <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
+                    <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
+                    <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
+                    <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
+                    <th nzWidth="15%" *ngIf="currentTab !== 'PNF'"> {{"i18nTextDefine_OperationalState" | translate}} </th>
+                    <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
+                    <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
+                </tr>
+            </thead>
+            <tbody *ngIf="currentTab === 'NS'">
+                <tr *ngFor="let item of nzTable.data;let i = index;">
+                    <td>{{i+1}}</td>    
+                    <td>{{item.nsdName || item.name }}</td>     
+                    <td>{{item.nsdVersion || item.version}}</td>
+                    <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td>                       
+                    <td>{{item.nsdOperationalState}}</td>
+                    <td>{{item.nsdUsageState}}</td>
+                    <td>
+                        <i [ngClass]="{'cannotclick': isUpdate}"
+                            class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid,notificationModel)"
+                            *ngIf="item.uuid"></i>
+                        <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,notificationModel)"
+                            *ngIf="item.id"></i>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody *ngIf="currentTab === 'VNF'">
+                <tr *ngFor="let item of nzTable.data;let i = index;">
+                    <td>{{i+1}}</td>
+                    <td>{{item.vnfProductName || item.name }}</td>     
+                    <td>{{item.vnfdVersion || item.version}}</td>
+                    <td>{{item.onboardingState}}</td>
+                    <td>{{item.operationalState}}</td>
+                    <td>{{item.usageState}}</td>
+                    <td>
+                        <i [ngClass]="{'cannotclick': isUpdate}"
+                            class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid,notificationModel)"
+                            *ngIf="item.uuid"></i>
+                        <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,notificationModel)"
+                            *ngIf="item.id"></i>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody *ngIf="currentTab === 'PNF'" >
+                <tr *ngFor="let item of nzTable.data; let i = index;">
+                    <td>{{i+1}}</td>
+                    <td>{{item.pnfdName}}</td>
+                    <td>{{item.pnfdVersion}}</td>
+                    <td>{{item.pnfdOnboardingState}}</td>
+                    <td>{{item.pnfdUsageState}}</td>
+                    <td>
+                        <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,notificationModel)"></i>
+                    </td>
+                </tr> 
+            </tbody>
+        </nz-table>
+    </nz-spin>
+</div>
+<ng-template #notificationModel >
+    <div class="ant-notification-notice-content">
+        <div class="ant-notification-notice-with-icon">
+                    <span class="ant-notification-notice-icon">
+                        <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+                    </span>
+            <div class="ant-notification-notice-message">
+                {{notificationAttributes.title}}&nbsp;
+                {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
             </div>
-            <nz-spin [nzSpinning]="isSpinning" class="listContainer">
-                <div class="mask" *ngIf="isSpinning"></div>
-                <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true"
-                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="pnfpageSize"
-                    [(nzPageIndex)]='pnfpageIndex' nzSize="middle">
-                    <thead>
-                        <tr>
-							<th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                            <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>                 
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <td>{{item.pnfdName}}</td>
-                            <td>{{item.pnfdVersion}}</td>
-                            <td>{{item.pnfdOnboardingState}}</td>
-                            <td>{{item.pnfdUsageState}}</td>
-                            <td>
-                                <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,tab,notificationModel)"></i>
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
-            </nz-spin>
-
-        </div>
-    </nz-tab>
-    <!--2019.08.14 add notification-->
-    <ng-template #notificationModel >
-        <div class="ant-notification-notice-content">
-            <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
-                        </span>
-                <div class="ant-notification-notice-message">
-                    {{notificationAttributes.title}}&nbsp;
-                    {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+            <div class="ant-notification-notice-description">
+                <div class="notificationlist">
+                    <p>{{notificationAttributes.title}} id:&nbsp;</p>
+                    <span>{{ notificationAttributes.id }}</span>
                 </div>
-                <div class="ant-notification-notice-description">
-                    <div class="notificationlist">
-                        <p>{{notificationAttributes.title}} id:&nbsp;</p>
-                        <span>{{ notificationAttributes.id }}</span>
-                    </div>
-                </div>
-                <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
             </div>
+            <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
         </div>
-    </ng-template>
-</nz-tabset>
+    </div>
+</ng-template>
 
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index b2b8cbb3..ed6f0d74 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -15,11 +15,12 @@
 */
 import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
-import { NzNotificationService, NzCollapseModule } from 'ng-zorro-antd';
+import { NzNotificationService } from 'ng-zorro-antd';
 import { onboardService } from '../../../core/services/onboard.service';
 import { slideToRight } from '../../../shared/utils/animates';
 import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -30,27 +31,42 @@ import { filter } from 'rxjs/operators';
 export class OnboardVnfVmComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
 
-  // delete Modal
-  confirmModal: NzModalRef;
-  nsdInfoId: string;
-  vnfPkgId: string;
-  pnfdInfoId: string;
-  nsuploading:boolean = false;
-  vnfuploading:boolean = false;
-  pnfloading: boolean = false;
-  fileListNS: UploadFile[] = [];
-  fileListVNF: UploadFile[] = [];
-  fileListPNF: UploadFile[] = [];
-  // onboard initial value
+  // upload
+  tabs: string[] = ['NS', 'VNF', 'PNF'];
+  currentTab: string = 'NS'
+  fileList: UploadFile[] = [];
+  uploading:boolean = false;
+  infoId: string;
+  display: string = 'block';
+
+  // table
+  isSpinning: boolean = false;
+  nsTableData: any[];
+  vnfTableData: any[];
+  pnfTableData: any[];
   status: string = "Onboard Available";
+  pageIndex: number = 1;
+  pageSize: number = 10;
+
+  // update or delete
+  isUpdate: boolean = false;
   jobId: string;
+
   //url
   url = {
-    // line up
     ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content',
     vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content',
     pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content'
   };
+
+  file: {
+    name: string,
+    uid: string,
+    progress: number,
+    status: boolean,
+    success: number
+  };
+
   constructor(
     private myhttp: onboardService,
     private http: HttpClient,
@@ -58,28 +74,12 @@ export class OnboardVnfVmComponent implements OnInit {
     private modalService: NzModalService,
     private notification: NzNotificationService
   ) { }
+
   //default Call ns data by default
   ngOnInit() {
     this.getTableData();
   }
 
-  //Tabular data
-  nstableData: any;
-  vnftableData: any;
-  pnftableData: any;
-  nspageIndex: number = 1;
-  nspageSize: number = 10;
-  vnfpageIndex: number = 1;
-  vnfpageSize: number = 10;
-  pnfpageIndex: number = 1;
-  pnfpageSize: number = 10;
-
-  nsloading: boolean = false;
-  tabs: string[] = ['NS', 'VNF', 'PNF'];
-  isSpinning: boolean = false;
-  isNone: string = 'block';
-
-  //2019.08.14 add
   notificationAttributes: {
     title: string,
     imgPath: string,
@@ -87,39 +87,37 @@ export class OnboardVnfVmComponent implements OnInit {
     status: string,
     id: string
   }
-  setNotification({ title, imgPath, action, status, id }):void{
-    this.notificationAttributes = { title, imgPath, action, status, id }
+  setNotification({ imgPath, action, status, id }):void{
+    this.notificationAttributes = { title: this.currentTab, imgPath, action, status, id }
   }
 
-  notificationSuccess(notificationModel,title,action,id) {
-    this.setNotification({ title, imgPath:"assets/images/execute-success.png", action, status:"Success", id })
+  notificationSuccess(notificationModel: TemplateRef<{}>, action: string, id: string): void {
+    this.setNotification({ imgPath:"assets/images/execute-success.png", action, status:"Success", id })
     this.notification.template(notificationModel);
   }
-  notificationFailed(notificationModel,title,action,id) {
-    this.setNotification({ title, imgPath:"assets/images/execute-faild.png", action, status:"Failed", id })    
+  notificationFailed(notificationModel: TemplateRef<{}>, action: string ,id: string): void{
+    this.setNotification({ imgPath:"assets/images/execute-faild.png", action, status:"Failed", id })    
     this.notification.template(notificationModel);
   }
 
-
   // Handling tab switching request data
-  handleTabChange(tab) {
+  handleTabChange(tab: string): void {
+    this.currentTab = tab;
+    this.fileList = [];
+    delete this.file;
     switch (tab) {
       case 'NS':
-        this.nstableData = [];
         this.getTableData();
         break
       case 'VNF':
-        this.vnftableData = [];
         this.getTableVnfData()
         break
       case 'PNF':
-        this.pnftableData = [];
         this.getTablePnfData()
         break
     }
   }
 
-
   //before put create--Drag and drop files to the page before uploading
   requestBody = {
     "userDefinedData": {
@@ -129,239 +127,108 @@ export class OnboardVnfVmComponent implements OnInit {
     }
   }
 
-
-  // ns  beforeUpload
-  beforeUploadNS = (file: UploadFile): boolean => {
-    this.fileListNS.splice(0,1,file);
-    this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line
-      .subscribe((data) => {
-        console.log(data)
-        this.nsdInfoId = data["id"];
-      }, (err) => {
-        console.log(err);
-      })
-    return false;
-  }
-
-  //vnf  beforeUpload
-  beforeUploadVNF = (file: UploadFile): boolean => {
-    this.fileListVNF.splice(0,1,file);
-    this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line
-      .subscribe((data) => {
-        this.vnfPkgId = data["id"];
-      }, (err) => {
-        console.log(err);
-      })
-    return false;
-  }
-
-  // //pnf eforeUpload
-  beforeUploadPNF = (file: UploadFile): boolean => {
-    this.fileListPNF.splice(0,1,file)
-    this.myhttp.getCreatensData("createPnfData", this.requestBody)  //on-line
+  beforeUpload = (file: UploadFile): boolean => {
+    this.fileList.splice(0,1,file);
+    let API: string;
+    if(this.currentTab === 'NS'){
+      API = 'createNetworkServiceData';
+    }else if(this.currentTab === 'VNF'){
+      API = 'createVnfData';
+    }else {
+      API = 'createPnfData';
+    }
+    this.myhttp.getCreatensData(API, this.requestBody)//on-line
       .subscribe((data) => {
-        this.pnfdInfoId = data["id"];
+        this.infoId = data["id"];
       }, (err) => {
         console.log(err);
       })
     return false;
   }
 
-  //Drag and drop and click the upload button
-  onClick(tab) {
-    this.isNone = 'none';
-    switch (tab) {
+  // Drag and drop and click the upload button
+  onClick(): void {
+    this.display = 'none';
+    switch (this.currentTab) {
       case 'NS':
-        this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab);
+        this.handleUpload(this.url.ns.replace("*_*", this.infoId));
         this.getTableData();
         break
       case 'VNF':
-        this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab);
+        this.handleUpload(this.url.vnf.replace("*_*", this.infoId));
         this.getTableVnfData()
         break
       case 'PNF':
-        this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab);
+        this.handleUpload(this.url.pnf.replace("*_*", this.infoId));
         this.getTablePnfData();
         break
     }
   }
 
-  nsfile: {
-    name: string,
-    uid: string,
-    progress: number,
-    status: boolean,
-    success: number
-  };
-  vnffile: {
-    name: string,
-    uid: string,
-    progress: number,
-    status: boolean,
-    success: number
-  };
-  pnffile:{
-    name: string,
-    uid: string,
-    progress: number,
-    status: boolean,
-    success: number
-  }
-  //put Upload Upload
-  handleUpload(url, tab): void {
+  handleUpload(url: string): void {
     const formData = new FormData();
     // tslint:disable-next-line:no-any
-    switch (tab) {
-      case "NS":
-        this.fileListNS.forEach((file: any) => {
-          formData.set('file', file);
-        });
-        this.nsuploading = true;
-        this.nsfile = {
-          name: this.fileListNS[0].name,
-          uid: this.fileListNS[0].uid,
-          progress: 0,
-          status: true,
-          success: 0
-        };
-        let requeryNS = (nsfile) => {
-          nsfile.progress += 3;
-          setTimeout(() => {
-            if (nsfile.progress < 100) {
-              requeryNS(nsfile)
-            }
-          }, 100)
-        };
-        requeryNS(this.nsfile);
-        break
-      case "VNF":
-        this.fileListVNF.forEach((file: any) => {
-          formData.set('file', file);
-        });
-        this.vnfuploading = true;
-        this.vnffile = {
-          name: this.fileListVNF[0].name,
-          uid: this.fileListVNF[0].uid,
-          progress: 0,
-          status: true,
-          success: 0
-        };
-        let requeryVnf = (vnffile) => {
-          setTimeout(() => {
-            vnffile.progress += 3;
-            if (vnffile.progress < 100) {
-              requeryVnf(vnffile)
-            }
-          }, 100)
-        };
-        requeryVnf(this.vnffile);
-        break
-      case "PNF":
-        this.fileListPNF.forEach((file: any) => {
-          formData.set('file', file);
-        });
-        this.pnfloading = true;
-        this.pnffile = {
-          name: this.fileListPNF[0].name,
-          uid: this.fileListPNF[0].uid,
-          progress: 0,
-          status: true,
-          success: 0
-        };
-        let requeryPnf = (pnffile) => {
-          setTimeout(() => {
-            pnffile.progress += 3;
-            if (pnffile.progress < 100) {
-              requeryPnf(pnffile)
-            }
-          }, 100)
-        };
-        requeryPnf(this.pnffile);
-        break
-    }
-    // line PUT
+    this.fileList.forEach((file: any) => {
+      formData.set('file', file);
+    });
+    this.uploading = true;
+    this.file = {
+      name: this.fileList[0].name,
+      uid: this.fileList[0].uid,
+      progress: 0,
+      status: true,
+      success: 0
+    };
+    let requery = (file) => {
+      file.progress += 3;
+      setTimeout(() => {
+        if (file.progress < 100) {
+          requery(file)
+        }
+      }, 100)
+    };
+    requery(this.file);
     const req = new HttpRequest('PUT', url, formData, {
       reportProgress: true,
       withCredentials: true
     });
     //Upload pre-empty array
-    this.fileListNS = [];
-    this.fileListVNF = [];
-    this.fileListPNF = [];
+    this.fileList = [];
     this.http.request(req)
       .pipe(filter(e => e instanceof HttpResponse))
       .subscribe(
         (event: {}) => {
-          if (tab == "NS") {
-            this.nsfile.progress = 100;
-            this.nsfile.status = false;
-          }
-          if (tab == "VNF") {
-            this.vnffile.progress = 100;
-            this.vnffile.status = false;
-          }
-          if (tab == "PNF") {
-            this.pnffile.progress = 100;
-            this.pnffile.status = false;
-          }
-          this.changeUploadingSta(tab);
-          this.isNone = 'block';
+          this.file.progress = 100;
+          this.file.status = false;
+          this.display = 'block';
+          this.uploading = false;
           this.msg.success('upload successfully.');
         },
         err => {
-          if (tab == "NS") {
-            this.nsfile.progress = 100;
-            this.nsfile.status = false;
-            this.nsfile.success = 1;
-          }
-          if (tab == "VNF") {
-            this.vnffile.progress = 100;
-            this.vnffile.status = false;
-            this.vnffile.success = 1;
-          }
-          if (tab == "PNF") {
-            this.pnffile.progress = 100;
-            this.pnffile.status = false;
-            this.pnffile.success = 1;
-          }
-          this.changeUploadingSta(tab);
-          this.isNone = 'block';
+          this.file.progress = 100;
+          this.file.status = false;
+          this.file.success = 1;
+          this.uploading = false;
           this.msg.error('upload failed.');
         }
       );
   }
 
-  //  Control the status of uploading
-  changeUploadingSta(tab) {
-    switch (tab) {
-      case "NS":
-        this.nsuploading = false;
-        break
-      case "VNF":
-        this.vnfuploading = false;
-        break
-      case "PNF":
-        this.pnfloading = false;
-    }
-  }
-
-  //----------------------------------------------------------------------------------------------
-
   // Get the NS list
-  getTableData() {
+  getTableData(): void{
     this.isSpinning = true;
     //ns vfc lists 
     this.myhttp.getOnboardTableData()
       .subscribe((data) => {
-        this.nstableData = data;
+        this.nsTableData = data;
         //ns sdc list
         this.myhttp.getSDC_NSTableData()
           .subscribe((data) => {
             this.isSpinning = false; //loading hide
-            let nssdcData = data;
-            this.nstableData.map((nsvfc) => { nsvfc.sameid = nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
-            let sameData = nssdcData.filter((nssdc) => { return !this.nstableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
-            this.nstableData = this.nstableData.concat(sameData);
+            let nsData = data;
+            // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
+            let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
+            this.nsTableData = this.nsTableData.concat(sameData);
           }, (err) => {
             console.error(err);
             this.isSpinning = false;
@@ -370,29 +237,27 @@ export class OnboardVnfVmComponent implements OnInit {
         console.error(err);
         this.isSpinning = false;
       })
-    
   }
 
   // Get the vnf list
-  getTableVnfData() {
+  getTableVnfData(): void{
     this.isSpinning = true;
     //vnf vfc lists
     this.myhttp.getOnboardTableVnfData()
       .subscribe((data) => {
-        this.vnftableData = data;
+        this.vnfTableData = data;
         //vnf sdc lists
         this.myhttp.getSDC_VNFTableData()
           .subscribe((data) => {
             this.isSpinning = false; //loading hide
-            let vnfsdcData = data;
-            this.vnftableData.map((vnfvfc) => { vnfvfc.sameid = vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
-            let sameData = vnfsdcData.filter((vnfsdc) => { return !this.vnftableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
-            this.vnftableData = this.vnftableData.concat(sameData);
+            let vnfData = data;
+            // this.VNFTableData.map((vnfvfc) => { vnfvfc.sameid = this.vnfData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
+            let sameData = vnfData.filter((vnfsdc) => { return !this.vnfTableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
+            this.vnfTableData = this.vnfTableData.concat(sameData);
           }, (err) => {
             console.error(err);
             this.isSpinning = false;
           })
-
       }, (err) => {
         console.error(err);
         this.isSpinning = false;
@@ -404,7 +269,7 @@ export class OnboardVnfVmComponent implements OnInit {
     this.isSpinning = true;
     this.myhttp.getOnboardTablePnfData()
       .subscribe((data) => {
-        this.pnftableData = data;
+        this.pnfTableData = data;
         this.isSpinning = false;   //loading hide
       }, (err) => {
         console.error(err);
@@ -412,21 +277,18 @@ export class OnboardVnfVmComponent implements OnInit {
       })
   }
 
-  //-----------------------------------------------------------------------------------
-
-  // modal
-  showConfirm(requestBody, notificationModel, id, type): void{
-    let API = type === 'NS'? 'getNsonboard' : 'getVnfonboard';
+  // confirm
+  showConfirm(requestBody: object, notificationModel: TemplateRef<{}>, id: string): void{
+    let API = this.currentTab === 'NS'? 'getNsonboard' : 'getVnfonboard';
     this.modalService.confirm({
       nzTitle: '<p>Are you sure you want to do this?</p>',
-      nzContent: '<b>Some descriptions</b>',
       nzOnOk: () => {
         this.myhttp[API](requestBody)
           .subscribe((data) => {
             if (data.status == "success") {
-              if(type === 'NS'){
-                this.onboardData.status = "onboarded";
-                this.notificationSuccess(notificationModel, this.tabs[0],"OnboardingState",id);
+              if(this.currentTab === 'NS'){
+                this.isUpdate = false;
+                this.notificationSuccess(notificationModel, "OnboardingState", id);
                 this.getTableData();
               }else{
                 this.jobId = data.jobId;
@@ -434,8 +296,8 @@ export class OnboardVnfVmComponent implements OnInit {
                 this.getTableVnfData();
               }
             } else {
-              this.onboardData.status = "Failed";
-              this.notificationFailed(notificationModel,this.tabs[0],"OnboardingState",id);
+              this.isUpdate = false;
+              this.notificationFailed(notificationModel, "OnboardingState", id);
               return false
             } 
           }, (err) => {
@@ -445,54 +307,38 @@ export class OnboardVnfVmComponent implements OnInit {
     })
   }
 
-  //onboard status
-  onboardData = {
-    status: "onboard",
-    progress: 0,
-  }
-  currentIndex = 0;
-  // ns onboard Upload button
-  updataNsService(id, index, notificationModel) {
-    this.currentIndex = index;
-    this.onboardData.status = "onboarding"; //Disabled
-    this.onboardData.progress = 0;
-    let requestBody = { "csarId": id };
-    this.showConfirm(requestBody,notificationModel,id,'NS')
-  }
 
-  // vnf onboard Upload button
-  updataVnfService(id, index, notificationModel) {
-    this.currentIndex = index;
-    this.onboardData.status = "onboarding";  //Disabled button
-    this.onboardData.progress = 0;
+  // ns onboard Upload button
+  updataService(id: string, notificationModel: TemplateRef<{}>) {
+    this.isUpdate = true;
     let requestBody = { "csarId": id };
-    this.showConfirm(requestBody,notificationModel,id,'VNF')
-  }
+    this.showConfirm(requestBody, notificationModel, id)
+  } 
 
   //Progress Progress inquiry
-  queryProgress(jobId, notificationModel,id) {
+  queryProgress(jobId: string,  notificationModel: TemplateRef<{}>, id: string): any{
     let mypromise = new Promise((res) => {
       this.myhttp.getProgress(jobId, 0)
         .subscribe((data) => {
-          if (data.responseDescriptor === null ||data.responseDescriptor ===  "null" || data.responseDescriptor.progress == undefined ||  data.responseDescriptor.progress === null) {
-            this.onboardData.status = "onboarding";
+          if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) {
+            this.isUpdate = true;
             setTimeout(() => {
-              this.queryProgress(this.jobId, notificationModel,id);
+              this.queryProgress(this.jobId, notificationModel, id);
             }, 10000)
             return false
           }
           if (data.responseDescriptor.progress > 100) {
-            this.onboardData.status = "Failed";
-            this.notificationFailed(notificationModel,'VNS','OnboardingState',id);
+            this.isUpdate = false;
+            this.notificationFailed(notificationModel, 'OnboardingState', id);
           }else if (data.responseDescriptor.progress < 100) {
-            this.onboardData.status = "onboarding";
+            this.isUpdate = true;
             setTimeout(() => {
               this.queryProgress(this.jobId, notificationModel,id);
             }, 5000)
           } else {
             res(data);
-            this.onboardData.status = "onboarded";
-            this.notificationSuccess(notificationModel,'VNS','OnboardingState',id);
+            this.isUpdate = false;
+            this.notificationSuccess(notificationModel, 'OnboardingState', id);
           }
           return false
         })
@@ -500,70 +346,48 @@ export class OnboardVnfVmComponent implements OnInit {
     return mypromise;
   }
 
-  //--------------------------------------------------------------------------------
   /* delete button */
-  showDeleteConfirm(pkgid, tab, notificationModel): void {
-    this.confirmModal = this.modalService.confirm({
+  showDeleteConfirm(pkgid: string, notificationModel: TemplateRef<{}>): void {
+    this.modalService.confirm({
       nzTitle: 'Do you Want to delete these items?',
       nzContent: 'Do you Want to delete these items?',
       nzOkText: 'Yes',
       nzCancelText: 'No',
       nzOnOk: () => new Promise((resolve) => {
-        switch (tab) {
-          case 'NS':
-            this.deleteNsService(pkgid, notificationModel,resolve);
-            break
-          case 'VNF':
-            this.deleteVnfService(pkgid, notificationModel,resolve);
-            break
-          case 'PNF':
-            this.deletePnfService(pkgid, notificationModel,resolve);
-            break
-        }
+        this.deleteService(pkgid, notificationModel,resolve);
       }).catch(() => console.log('Oops errors!'))
     });
   }
 
   //delete nsItem
-  deleteNsService(pkgid, notificationModel,resolve) {
-    this.myhttp.deleteNsIdData(pkgid)
-      .subscribe((data) => {
-        this.notificationSuccess(notificationModel,'NS','OnboardingState',pkgid);
-        resolve()
-        //refresh list after successful deletion
-        this.getTableData();
-      }, (err) => {
-        console.log(err);
-        this.notificationFailed(notificationModel,'NS','OnboardingState',pkgid);
-      })
-  }
-
-  //delete vnfItem
-  deleteVnfService(pkgid, notificationModel,resolve) {
-    this.myhttp.deleteVnfIdData(pkgid)
-      .subscribe((data) => {
-        this.notificationSuccess(notificationModel,'VNF','OnboardingState',pkgid);
-        resolve()
-        //refresh list after successful deletion
-        this.getTableVnfData()
-      }, (err) => {
-        console.log(err);
-        this.notificationFailed(notificationModel,'VNF','OnboardingState',pkgid);
-      })
-  }
-
-  //delete PnfItem
-  deletePnfService(pkgid, notificationModel,resolve) {
-    this.myhttp.deletePnfIdData(pkgid)
+  deleteService(pkgid, notificationModel,resolve) {
+    let API: string;
+    if(this.currentTab === 'NS'){
+      API = 'deleteNsIdData';
+    }else if(this.currentTab === 'VNF'){
+      API = 'deleteVnfIdData';
+    }else{
+      API = 'deletePnfIdData';
+    }
+    this.myhttp[API](pkgid)
       .subscribe((data) => {
-        this.notificationSuccess(notificationModel,'PNF','OnboardingState',pkgid);
+        this.notificationSuccess(notificationModel, 'OnboardingState', pkgid);
         resolve()
         //refresh list after successful deletion
-        this.getTablePnfData()
+        switch(this.currentTab){
+          case 'NS':
+            this.getTableData();
+            break
+          case 'VNF':
+            this.getTableVnfData();
+            break
+          case 'PNF':
+            this.getTablePnfData();
+            break
+        }
       }, (err) => {
         console.log(err);
-        this.notificationFailed(notificationModel,'PNF','OnboardingState',pkgid);
+        this.notificationFailed(notificationModel, 'OnboardingState', pkgid);
       })
   }
-
 }