feat: optimize the code for the onboard page

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

2 files changed, 199 insertions, 316 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 787d76b6..9ff2d9a8 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
@@ -26,7 +26,7 @@
                         <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">
+                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length === 0" class="upload">
                         {{ nsuploading ? 'Uploading' : 'Start Upload' }}
                     </button>
                 </div>
@@ -41,26 +41,25 @@
                             <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>
+                            <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" *ngIf="nsfile.success == 0" class="success"></i>
-                            <i class="anticon anticon-exclamation-circle"  *ngIf="nsfile.success == 1" class="fail"></i>
+                            <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>
             </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]" [nzTotal]='total' [(nzPageSize)]="nspageSize"
-                    [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    [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%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | 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>
@@ -71,28 +70,16 @@
                     <tbody>
                         <tr *ngFor="let item of nzTable.data; let i = index; ">
                             <td>{{i+1}}</td>
-
-                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
-                            <td *ngIf="item.nsdName === null || item.nsdName === ''">&nbsp;</td>
-                            <td *ngIf="item.name">{{item.name}}</td>
-                            <td *ngIf="item.name===null || item.name=== ''">&nbsp;</td>
-                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
-                            <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''">&nbsp;</td>
-                            <td *ngIf="item.version">{{item.version}}</td>
-                            <td *ngIf="item.version === null || item.version === ''">&nbsp;</td>
-                            <td>
-                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
-                                <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''">&nbsp;</span>
-                                <span *ngIf="item.uuid">{{status}}</span>
-
-                            </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}"
+                                <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)="showConfirm(i,item.id,tab,notificationModel)"
+                                <i class="anticon anticon-delete" nzType="info" (click)="showDeleteConfirm(i,item.id,tab,notificationModel)"
                                     *ngIf="item.id"></i>
 
                             </td>
@@ -104,7 +91,7 @@
         </div>
         <!-- VNFList -->
         <div class="list" *ngIf="tab === 'VNF'">
-            <div  class="listUploadContainer">
+            <div class="listUploadContainer">
             <div class="listupload">
                 <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
                     <p class="ant-upload-drag-icon">
@@ -113,32 +100,27 @@
                     <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"
-                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                <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 style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                <div style="height:80%;overflow: auto">
-                    <div class="listfilebgc" *ngFor="let itemns of vnfRightList">
-                        <div>
-                            <i class="anticon anticon-link"></i>
-                        </div>
-                        <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
-                        <div class="color" *ngIf="itemns.status">
-                            <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
-                        </div>
-                        <div class="color" *ngIf="!itemns.status">
-                            <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                            <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                        </div>
-                        <div *ngIf="!itemns.status">
-                            <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
-                            <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
-                        </div>
+                <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>
             </div>
@@ -146,12 +128,12 @@
             <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]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize"
-                    [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    [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%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | 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>
@@ -160,22 +142,18 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+                        <tr *ngFor="let item of nzTable.data; let i = index;">
                             <td>{{i+1}}</td>
-                            <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
-                            <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''">&nbsp;</td>
-                            <td *ngIf="item.name">{{item.name}}</td>
-                            <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
-                            <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''">&nbsp;</td>
-                            <td *ngIf="item.version">{{item.version}}</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}"
+                                <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" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"
+                                <i class="anticon anticon-delete" (click)="showDeleteConfirm(i,item.id,tab,notificationModel)"
                                     *ngIf="item.id"></i>
                             </td>
                         </tr>
@@ -195,45 +173,40 @@
                     <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"
-                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                <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 style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                <div style="height:80%;overflow: auto">
-                    <div class="listfilebgc" *ngFor="let itemns of pnfRightList">
-                        <div>
-                            <i class="anticon anticon-link"></i>
-                        </div>
-                        <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
-                        <div class="color" *ngIf="itemns.status">
-                            <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
+                <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="!itemns.status">
-                            <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                            <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+                        <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="!itemns.status">
-                            <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
-                            <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
+                        <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>
-            </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]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize"
-                    [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    [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%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | 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>
@@ -248,7 +221,7 @@
                             <td>{{item.pnfdOnboardingState}}</td>
                             <td>{{item.pnfdUsageState}}</td>
                             <td>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"></i>
+                                <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,tab,notificationModel)"></i>
                             </td>
                         </tr>
                     </tbody>
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 d5c548fb..b2b8cbb3 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,12 +15,11 @@
 */
 import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
-import { NzNotificationService } from 'ng-zorro-antd';
+import { NzNotificationService, NzCollapseModule } 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',
@@ -34,19 +33,17 @@ export class OnboardVnfVmComponent implements OnInit {
   // delete Modal
   confirmModal: NzModalRef;
   nsdInfoId: string;
-  vnfPkgId = '';
-  pnfdInfoId = '';
-  tabTitle = "NS";
+  vnfPkgId: string;
+  pnfdInfoId: string;
   nsuploading:boolean = false;
-  vnfuploading = false;
-  pnfloading = false;
-  fileList: UploadFile[] = [];
+  vnfuploading:boolean = false;
+  pnfloading: boolean = false;
   fileListNS: UploadFile[] = [];
   fileListVNF: UploadFile[] = [];
   fileListPNF: UploadFile[] = [];
   // onboard initial value
-  status = "Onboard Available";
-  jobId = '';
+  status: string = "Onboard Available";
+  jobId: string;
   //url
   url = {
     // line up
@@ -58,8 +55,6 @@ export class OnboardVnfVmComponent implements OnInit {
     private myhttp: onboardService,
     private http: HttpClient,
     private msg: NzMessageService,
-    private titleService: Title,
-    private modal: NzModalService,
     private modalService: NzModalService,
     private notification: NzNotificationService
   ) { }
@@ -72,62 +67,54 @@ export class OnboardVnfVmComponent implements OnInit {
   nstableData: any;
   vnftableData: any;
   pnftableData: any;
-  nssdcData: any;
-
-  vnfsdcData: any;
   nspageIndex: number = 1;
   nspageSize: number = 10;
-  vnfpageIndex = 1;
-  vnfpageSize = 10;
-  pnfpageIndex = 1;
-  pnfpageSize = 10;
-
-  total;
-  nsloading = false;
-  sortName = null;
-  sortValue = null;
-  tabs = ['NS', 'VNF', 'PNF'];
+  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": this.tabs[0],
-    "imgPath": "../../../../assets/images/execute-inproess.png",
-    "action": "OnboardingState",
-    "status": "InProgress",
-    "id": null
-  };
-  notificationModelShow(template: TemplateRef<{}>): void {
-    this.notification.template(template);
+  notificationAttributes: {
+    title: string,
+    imgPath: string,
+    action: string,
+    status: string,
+    id: string
   }
-  notificationSuccess(notificationModel) {
-    this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png";
-    this.notificationAttributes.status = "Success";
-    this.notificationModelShow(notificationModel);
+  setNotification({ title, imgPath, action, status, id }):void{
+    this.notificationAttributes = { title, imgPath, action, status, id }
+  }
+
+  notificationSuccess(notificationModel,title,action,id) {
+    this.setNotification({ title, imgPath:"assets/images/execute-success.png", action, status:"Success", id })
+    this.notification.template(notificationModel);
   }
-  notificationFailed(notificationModel) {
-    this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png";
-    this.notificationAttributes.status = "Failed";
-    this.notificationModelShow(notificationModel);
+  notificationFailed(notificationModel,title,action,id) {
+    this.setNotification({ title, imgPath:"assets/images/execute-faild.png", action, status:"Failed", id })    
+    this.notification.template(notificationModel);
   }
+
+
   // Handling tab switching request data
   handleTabChange(tab) {
     switch (tab) {
       case 'NS':
         this.nstableData = [];
         this.getTableData();
-        this.fileList = []; //Empty uploaded files when switching
         break
       case 'VNF':
         this.vnftableData = [];
         this.getTableVnfData()
-        this.fileList = [];
         break
       case 'PNF':
         this.pnftableData = [];
         this.getTablePnfData()
-        this.fileList = [];
         break
     }
   }
@@ -142,17 +129,13 @@ export class OnboardVnfVmComponent implements OnInit {
     }
   }
 
-  //NS/VNF List add file
-  beforeUpload = (file: UploadFile): boolean => {
-    this.fileList.push(file);
-    return false;
-  }
 
   // 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);
@@ -162,9 +145,8 @@ export class OnboardVnfVmComponent implements OnInit {
 
   //vnf  beforeUpload
   beforeUploadVNF = (file: UploadFile): boolean => {
-    this.fileListVNF.push(file);
+    this.fileListVNF.splice(0,1,file);
     this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line
-      // this.myhttp.getCreatensData("creatensDataVNF") //local
       .subscribe((data) => {
         this.vnfPkgId = data["id"];
       }, (err) => {
@@ -175,9 +157,8 @@ export class OnboardVnfVmComponent implements OnInit {
 
   // //pnf eforeUpload
   beforeUploadPNF = (file: UploadFile): boolean => {
-    this.fileListPNF.push(file);
+    this.fileListPNF.splice(0,1,file)
     this.myhttp.getCreatensData("createPnfData", this.requestBody)  //on-line
-      // this.myhttp.getCreatensData("creatensDataPNF")  //local
       .subscribe((data) => {
         this.pnfdInfoId = data["id"];
       }, (err) => {
@@ -186,21 +167,6 @@ export class OnboardVnfVmComponent implements OnInit {
     return false;
   }
 
-  //Get list list id
-  onClickId(id, tab) {
-    switch (tab) {
-      case 'NS':
-        this.nsdInfoId = id;
-        break
-      case 'VNF':
-        this.vnfPkgId = id;
-        break
-      case 'PNF':
-        this.pnfdInfoId = id;
-        break
-    }
-  }
-
   //Drag and drop and click the upload button
   onClick(tab) {
     this.isNone = 'none';
@@ -227,10 +193,20 @@ export class OnboardVnfVmComponent implements OnInit {
     status: boolean,
     success: number
   };
-  vnfRightList = [];
-  vnfNum = 0;
-  pnfRightList = [];
-  pnfNum = 0;
+  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 {
     const formData = new FormData();
@@ -260,59 +236,47 @@ export class OnboardVnfVmComponent implements OnInit {
         break
       case "VNF":
         this.fileListVNF.forEach((file: any) => {
-          formData.append('file', file);
+          formData.set('file', file);
         });
         this.vnfuploading = true;
-        let lastVnf = this.fileListVNF[this.fileListVNF.length - 1];
-        let vnffile = {
-          name: lastVnf.name,
-          uid: lastVnf.uid,
+        this.vnffile = {
+          name: this.fileListVNF[0].name,
+          uid: this.fileListVNF[0].uid,
           progress: 0,
           status: true,
           success: 0
         };
-        this.vnfNum += 1;
-        this.vnfRightList.push(vnffile);
         let requeryVnf = (vnffile) => {
           setTimeout(() => {
-            vnffile.progress += 2;
+            vnffile.progress += 3;
             if (vnffile.progress < 100) {
               requeryVnf(vnffile)
-            } else {
-              vnffile.progress = 100;
-              vnffile.status = false;
             }
           }, 100)
         };
-        requeryVnf(vnffile);
+        requeryVnf(this.vnffile);
         break
       case "PNF":
         this.fileListPNF.forEach((file: any) => {
-          formData.append('file', file);
+          formData.set('file', file);
         });
         this.pnfloading = true;
-        let lastPnf = this.fileListPNF[this.fileListPNF.length - 1];
-        let pnffile = {
-          name: lastPnf.name,
-          uid: lastPnf.uid,
+        this.pnffile = {
+          name: this.fileListPNF[0].name,
+          uid: this.fileListPNF[0].uid,
           progress: 0,
           status: true,
           success: 0
         };
-        this.pnfNum += 1;
-        this.pnfRightList.push(pnffile);
         let requeryPnf = (pnffile) => {
           setTimeout(() => {
-            pnffile.progress += 2;
+            pnffile.progress += 3;
             if (pnffile.progress < 100) {
               requeryPnf(pnffile)
-            } else {
-              pnffile.progress = 100;
-              pnffile.status = false;
             }
           }, 100)
         };
-        requeryPnf(pnffile);
+        requeryPnf(this.pnffile);
         break
     }
     // line PUT
@@ -321,7 +285,6 @@ export class OnboardVnfVmComponent implements OnInit {
       withCredentials: true
     });
     //Upload pre-empty array
-    this.fileList = [];
     this.fileListNS = [];
     this.fileListVNF = [];
     this.fileListPNF = [];
@@ -332,19 +295,17 @@ export class OnboardVnfVmComponent implements OnInit {
           if (tab == "NS") {
             this.nsfile.progress = 100;
             this.nsfile.status = false;
-            this.isNone = 'block';
           }
           if (tab == "VNF") {
-            this.vnfRightList[this.vnfNum - 1].progress = 100;
-            this.vnfRightList[this.vnfNum - 1].status = false;
-            this.vnfRightList[this.vnfNum - 1].success = 0;
+            this.vnffile.progress = 100;
+            this.vnffile.status = false;
           }
           if (tab == "PNF") {
-            this.pnfRightList[this.pnfNum - 1].progress = 100;
-            this.pnfRightList[this.pnfNum - 1].status = false;
-            this.pnfRightList[this.pnfNum - 1].success = 0;
+            this.pnffile.progress = 100;
+            this.pnffile.status = false;
           }
           this.changeUploadingSta(tab);
+          this.isNone = 'block';
           this.msg.success('upload successfully.');
         },
         err => {
@@ -354,16 +315,17 @@ export class OnboardVnfVmComponent implements OnInit {
             this.nsfile.success = 1;
           }
           if (tab == "VNF") {
-            this.vnfRightList[this.vnfNum - 1].progress = 100;
-            this.vnfRightList[this.vnfNum - 1].status = false;
-            this.vnfRightList[this.vnfNum - 1].success = 1;
+            this.vnffile.progress = 100;
+            this.vnffile.status = false;
+            this.vnffile.success = 1;
           }
           if (tab == "PNF") {
-            this.pnfRightList[this.pnfNum - 1].progress = 100;
-            this.pnfRightList[this.pnfNum - 1].status = false;
-            this.pnfRightList[this.pnfNum - 1].success = 1;
+            this.pnffile.progress = 100;
+            this.pnffile.status = false;
+            this.pnffile.success = 1;
           }
           this.changeUploadingSta(tab);
+          this.isNone = 'block';
           this.msg.error('upload failed.');
         }
       );
@@ -396,9 +358,9 @@ export class OnboardVnfVmComponent implements OnInit {
         this.myhttp.getSDC_NSTableData()
           .subscribe((data) => {
             this.isSpinning = false; //loading hide
-            this.nssdcData = data;
-            this.nstableData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
-            let sameData = this.nssdcData.filter((nssdc) => { return !this.nstableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
+            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);
           }, (err) => {
             console.error(err);
@@ -408,7 +370,7 @@ export class OnboardVnfVmComponent implements OnInit {
         console.error(err);
         this.isSpinning = false;
       })
-
+    
   }
 
   // Get the vnf list
@@ -422,9 +384,9 @@ export class OnboardVnfVmComponent implements OnInit {
         this.myhttp.getSDC_VNFTableData()
           .subscribe((data) => {
             this.isSpinning = false; //loading hide
-            this.vnfsdcData = data;
-            this.vnftableData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
-            let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnftableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
+            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);
           }, (err) => {
             console.error(err);
@@ -451,29 +413,36 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   //-----------------------------------------------------------------------------------
-  /* onboard */
-  //Successful frame
-  success(tab): void {
-    const modal = this.modalService.success({
-      nzTitle: 'This is an success message',
-      nzContent: 'Package Onboard Completed.'
-    });
-    switch (tab) {
-      case "NS":
-        this.getTableData();
-        break
-      case "VNF":
-        this.getTableVnfData();
-        break
-    }
-  }
 
-  //Failure frame
-  error(): void {
-    this.modalService.error({
-      nzTitle: 'This is an error message',
-      nzContent: 'Package Onboard Failed!'
-    });
+  // modal
+  showConfirm(requestBody, notificationModel, id, type): void{
+    let API = type === '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);
+                this.getTableData();
+              }else{
+                this.jobId = data.jobId;
+                this.queryProgress(this.jobId, notificationModel,id);
+                this.getTableVnfData();
+              }
+            } else {
+              this.onboardData.status = "Failed";
+              this.notificationFailed(notificationModel,this.tabs[0],"OnboardingState",id);
+              return false
+            } 
+          }, (err) => {
+            console.log(err);
+          })
+      }
+    })
   }
 
   //onboard status
@@ -487,32 +456,8 @@ export class OnboardVnfVmComponent implements OnInit {
     this.currentIndex = index;
     this.onboardData.status = "onboarding"; //Disabled
     this.onboardData.progress = 0;
-    let requestBody = {
-      "csarId": id
-    };
-    this.notificationAttributes = {
-      "title": this.tabs[0],
-      "imgPath": "../../../../assets/images/execute-inproess.png",
-      "action": "OnboardingState",
-      "status": "InProgress",
-      "id": id
-    };
-    this.notificationModelShow(notificationModel);
-    this.myhttp.getNsonboard(requestBody)
-      .subscribe((data) => {
-        if (data.status == "failed") {
-          this.onboardData.status = "Failed";
-          this.notificationFailed(notificationModel);
-          this.error();
-          return false
-        } else if (data.status == "success") {
-          this.success("NS");
-          this.onboardData.status = "onboarded";
-          this.notificationSuccess(notificationModel);
-        }
-      }, (err) => {
-        console.log(err);
-      })
+    let requestBody = { "csarId": id };
+    this.showConfirm(requestBody,notificationModel,id,'NS')
   }
 
   // vnf onboard Upload button
@@ -520,56 +465,34 @@ export class OnboardVnfVmComponent implements OnInit {
     this.currentIndex = index;
     this.onboardData.status = "onboarding";  //Disabled button
     this.onboardData.progress = 0;
-
-
-    let requestBody = {
-      "csarId": id
-    };
-    this.notificationAttributes = {
-      "title": this.tabs[1],
-      "imgPath": "../../../../assets/images/execute-inproess.png",
-      "action": "OnboardingState",
-      "status": "InProgress",
-      "id": id
-    };
-    this.notificationModelShow(notificationModel);
-    this.myhttp.getVnfonboard(requestBody)
-      .subscribe((data) => {
-        this.jobId = data.jobId;
-        this.queryProgress(this.jobId, 0, notificationModel);   //vnf Need to query progress interface
-      }, (err) => {
-        console.log(err);
-      })
+    let requestBody = { "csarId": id };
+    this.showConfirm(requestBody,notificationModel,id,'VNF')
   }
 
   //Progress Progress inquiry
-  queryProgress(jobId, responseId, notificationModel) {
+  queryProgress(jobId, notificationModel,id) {
     let mypromise = new Promise((res) => {
-      this.myhttp.getProgress(jobId, responseId)
+      this.myhttp.getProgress(jobId, 0)
         .subscribe((data) => {
-          if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) {
+          if (data.responseDescriptor === null ||data.responseDescriptor ===  "null" || data.responseDescriptor.progress == undefined ||  data.responseDescriptor.progress === null) {
             this.onboardData.status = "onboarding";
             setTimeout(() => {
-              this.queryProgress(this.jobId, 0, notificationModel);
+              this.queryProgress(this.jobId, notificationModel,id);
             }, 10000)
             return false
           }
           if (data.responseDescriptor.progress > 100) {
             this.onboardData.status = "Failed";
-            this.notificationFailed(notificationModel);
-            this.error();
-            return false
-          }
-          if (data.responseDescriptor.progress < 100) {
+            this.notificationFailed(notificationModel,'VNS','OnboardingState',id);
+          }else if (data.responseDescriptor.progress < 100) {
             this.onboardData.status = "onboarding";
             setTimeout(() => {
-              this.queryProgress(this.jobId, 0, notificationModel);
+              this.queryProgress(this.jobId, notificationModel,id);
             }, 5000)
-          } else if (data.responseDescriptor.progress == 100) {
+          } else {
             res(data);
-            this.success("VNF");
             this.onboardData.status = "onboarded";
-            this.notificationSuccess(notificationModel);
+            this.notificationSuccess(notificationModel,'VNS','OnboardingState',id);
           }
           return false
         })
@@ -579,38 +502,22 @@ export class OnboardVnfVmComponent implements OnInit {
 
   //--------------------------------------------------------------------------------
   /* delete button */
-  showConfirm(index, pkgid, tab, notificationModel): void {
-    this.notificationAttributes = {
-      "title": this.tabs[0],
-      "imgPath": "../../../../assets/images/execute-inproess.png",
-      "action": "OnboardingState",
-      "status": "InProgress",
-      "id": pkgid
-    };
-    this.confirmModal = this.modal.confirm({
+  showDeleteConfirm(pkgid, tab, notificationModel): void {
+    this.confirmModal = 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, reject) => {
+      nzOnOk: () => new Promise((resolve) => {
         switch (tab) {
           case 'NS':
-            this.notificationAttributes.title = this.tabs[0];
-            this.notificationModelShow(notificationModel);
-            this.deleteNsService(index, pkgid, notificationModel);
-            setTimeout(Math.random() > 0.5 ? resolve : reject, 2000);
+            this.deleteNsService(pkgid, notificationModel,resolve);
             break
           case 'VNF':
-            this.notificationAttributes.title = this.tabs[1];
-            this.notificationModelShow(notificationModel);
-            this.deleteVnfService(index, pkgid, notificationModel);
-            setTimeout(Math.random() > 0.5 ? resolve : reject, 2000);
+            this.deleteVnfService(pkgid, notificationModel,resolve);
             break
           case 'PNF':
-            this.notificationAttributes.title = this.tabs[2];
-            this.notificationModelShow(notificationModel);
-            this.deletePnfService(index, pkgid, notificationModel);
-            setTimeout(Math.random() > 0.5 ? resolve : reject, 2000);
+            this.deletePnfService(pkgid, notificationModel,resolve);
             break
         }
       }).catch(() => console.log('Oops errors!'))
@@ -618,41 +525,44 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   //delete nsItem
-  deleteNsService(index, pkgid, notificationModel) {
+  deleteNsService(pkgid, notificationModel,resolve) {
     this.myhttp.deleteNsIdData(pkgid)
       .subscribe((data) => {
-        this.notificationSuccess(notificationModel);
+        this.notificationSuccess(notificationModel,'NS','OnboardingState',pkgid);
+        resolve()
         //refresh list after successful deletion
         this.getTableData();
       }, (err) => {
         console.log(err);
-        this.notificationFailed(notificationModel);
+        this.notificationFailed(notificationModel,'NS','OnboardingState',pkgid);
       })
   }
 
   //delete vnfItem
-  deleteVnfService(index, pkgid, notificationModel) {
+  deleteVnfService(pkgid, notificationModel,resolve) {
     this.myhttp.deleteVnfIdData(pkgid)
       .subscribe((data) => {
-        this.notificationSuccess(notificationModel);
+        this.notificationSuccess(notificationModel,'VNF','OnboardingState',pkgid);
+        resolve()
         //refresh list after successful deletion
         this.getTableVnfData()
       }, (err) => {
         console.log(err);
-        this.notificationFailed(notificationModel);
+        this.notificationFailed(notificationModel,'VNF','OnboardingState',pkgid);
       })
   }
 
   //delete PnfItem
-  deletePnfService(index, pkgid, notificationModel) {
+  deletePnfService(pkgid, notificationModel,resolve) {
     this.myhttp.deletePnfIdData(pkgid)
       .subscribe((data) => {
+        this.notificationSuccess(notificationModel,'PNF','OnboardingState',pkgid);
+        resolve()
         //refresh list after successful deletion
-        this.notificationSuccess(notificationModel);
         this.getTablePnfData()
       }, (err) => {
         console.log(err);
-        this.notificationFailed(notificationModel);
+        this.notificationFailed(notificationModel,'PNF','OnboardingState',pkgid);
       })
   }