Fix ns/vnf list display function

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

5 files changed, 456 insertions, 347 deletions

diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts
index 5738256e..71b2f97c 100644
--- a/usecaseui-portal/src/app/onboard.service.ts
+++ b/usecaseui-portal/src/app/onboard.service.ts
@@ -7,104 +7,82 @@ import { onboardTableData, onboardDataVNF, onboardDataPNF } from './dataInterfac
 export class onboardService {
   constructor(private http: HttpClient) { }
   /* location */
-  baseUrl = "./assets/json";
-  url = {
-    // 数据列表
-    onboardTableData: this.baseUrl + "/onboard-vnf-mf/onboardTableData.json",
-    onboardDataVNF: this.baseUrl + "/onboard-vnf-mf/onboardDataVNF.json",
-    onboardDataPNF: this.baseUrl + "/onboard-vnf-mf/onboardDataPNF.json",
-    //ns sdc
-    sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json",
-    // vnf sdc
-    sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json",
-
-    //创建nspackages
-    creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json",
-       
-    //onboard ns sdc data 
-    onboardNs: this.baseUrl + "/onboard-vnf-mf//listData/onboardNs.json",
-    //onboard VNF sdc data 
-    onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json",
- 
-    // Delete ns package
-    deleteNspack: this.baseUrl + "/onboard-vnf-mf/deleteNspack.json",
-    // Delete Vnf vfc package
-    deleteVnfPack: this.baseUrl + "/deleteVnfPack.json",
-    // Delete Pnf package
-    deletePnfPack: this.baseUrl + "/deletePnfPack.json",
-
-    // // download ns package
-    // downloadNsData: this.baseUrl + "/downloadData.json",
-    // //download vnf package 
-    // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json"
-    
-  }
-
-//---------------------------------------------------------------------------------------
-  /* line up 线上*/
-  // baseUrl = "/api/usecaseui/server/v1/uui-lcm/";
-  // baseUrlUp = "/api/usecaseui/server/v1/";
+  // baseUrl = "./assets/json";
   // url = {
-  //   // 数据列表Data
-  //   onboardTableData: this.baseUrl + "ns-packages",
-  //   onboardDataVNF: this.baseUrl + "vnf-packages",
-  //   onboardDataPNF: this.baseUrl + "pnf-packages",
+  //   // 数据列表
+  //   onboardTableData: this.baseUrl + "/onboard-vnf-mf/onboardTableData.json",
+  //   onboardDataVNF: this.baseUrl + "/onboard-vnf-mf/onboardDataVNF.json",
+  //   onboardDataPNF: this.baseUrl + "/onboard-vnf-mf/onboardDataPNF.json",
   //   //ns sdc
-  //   sdc_nsListData: this.baseUrl + "sdc-ns-packages",
-  //   //vnf sdc
-  //   sdc_vnfListData: this.baseUrl + "sdc-vf-packages",
+  //   sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json",
+  //   // vnf sdc
+  //   sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json",
+
 
-  //   //创建 creatensData
-  //   creatensData: this.baseUrl + "_jsonData",  //本地
+  //   //创建nspackages
+  //   creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json",
 
-  //   //onboard
   //   //onboard ns sdc data 
-  //   onboardNs: this.baseUrl + "ns-packages",
+  //   onboardNs: this.baseUrl + "/onboard-vnf-mf/listData/onboardNs.json",
   //   //onboard VNF sdc data 
-  //   onboardVNF: this.baseUrl + "vf-packages",
+  //   onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json",
 
   //   // Delete ns package
-  //   deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=XXXXX",
-  //   // Delete Vnf vfc package
-  //   deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=XXXXX",
+  //   deleteNspack: this.baseUrl + "/onboard-vnf-mf/listData/deleteNspack.json",
+  //   // Delete ns sdc package
+  //   // deleteNssdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteNssdcData.json",
+
+  //   // Delete Vnf vfc package 
+  //   deleteVnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfPack.json",
+  //   // Delete Vnf sdc package
+  //   // deleteVnfsdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfsdcData.json",
+
   //   // Delete Pnf package
-  //   deletePnfPack: this.baseUrl + "",
+  //   deletePnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deletePnfPack.json",
 
   //   // // download ns package
-  //   // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX",
+  //   // downloadNsData: this.baseUrl + "/downloadData.json",
   //   // //download vnf package 
-  //   // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX"
-    
-  // }
+  //   // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json"
 
-  //-------------------------------------------------------------------------------------
-  // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1';
- 
-  // baseUrl = '/api/usecaseui/server/v1';
-  // url={
-  //   // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
-  //   // homeLineData:this.baseUrl + "/...........",
-  //   // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
-  //   // servicesTableData:this.baseUrl + "/xxxxxxxx.json",
-  //   // onboardTableData:this.baseUrl + "/xxxxxxx.json",
-    
-  //   // 数据列表
-  //   onboardTableData: this.baseUrl + "/uui-lcm/ns-packages",
-  //   onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages",
-  //   onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages",
+  // }
 
-  //   //创建nspackages
-  //   // creatensData: this.baseUrl + "/creatensData.json",
-    
-  //   // deleteService: this.baseUrl + "/deleteService.json?",
+  //---------------------------------------------------------------------------------------
+  /* line up 线上*/
+  baseUrl = "/api/usecaseui/server/v1/uui-lcm/";
+  baseUrlUp = "/api/usecaseui/server/v1/";
+  url = {
+    // 数据列表Data
+    onboardTableData: this.baseUrl + "ns-packages",
+    onboardDataVNF: this.baseUrl + "vnf-packages",
+    onboardDataPNF: this.baseUrl + "pnf-packages",
+  //ns sdc
+    sdc_nsListData: this.baseUrl + "sdc-ns-packages", // GET
+   // vnf sdc
+    sdc_vnfListData: this.baseUrl + "sdc-vf-packages", // GET
+
+  // createnspackages ? TODO
+  creatensData: this.baseUrl + "createNetworkServiceData",  //POST
+
+  // onboard ns sdc data 
+  onboardNs: this.baseUrl + "ns-packages", //POST
+  //onboard VNF sdc data 
+  onboardVNF: this.baseUrl + "vf-packages", //POST
+
+  //Delete ns package
+  deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=",  
+  // Delete Vnf vfc package 
+  deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=",  
+  // Delete Pnf package
+  deletePnfPack: this.baseUrl + "deletePnfPackage?pnfPkgId=",
+    // // download ns package
+    // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX",
+    // //download vnf package 
+    // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX"
 
-  //   // Delete ns package
-  //   deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage",
-  //   // download ns package
-  //   downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage",
-  // }
+  }
 
-//-----------------------------------Function-start------------------------------------------------------
+  //-----------------------------------Function-start------------------------------------------------------
   /* 查询数据列表 */
   // NS Data
   getOnboardTableData(paramsObj): Observable<HttpResponse<any>> {
@@ -119,14 +97,14 @@ export class onboardService {
     return this.http.get<onboardTableData>(this.url.sdc_nsListData, { observe: 'response', params });
     // return this.http.get<any>(this.url["onboardTableData"]);
   }
-  
- // VNF Data
+
+  // VNF Data
   getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> {
     let params = new HttpParams({ fromObject: paramsObj });
     return this.http.get<any>(this.url.onboardDataVNF, { observe: 'response', params });
   }
- // onboard VNF sdc Data
-  getSDC_VNFTableData(){
+  // onboard VNF sdc Data
+  getSDC_VNFTableData() {
     return this.http.get<any>(this.url["sdc_vnfListData"]);
   }
 
@@ -135,53 +113,68 @@ export class onboardService {
     let params = new HttpParams({ fromObject: paramsObj });
     return this.http.get<any>(this.url.onboardDataPNF, { observe: 'response', params });
   }
-//-------------------------------------------------------------------------------------
+  //-------------------------------------------------------------------------------------
 
   //创建--上传前拖拽文件后，获取到id  //线上接口 post
   // getCreatensData(url_upId,requestBody) {
   //   return this.http.post<any>(this.url.creatensData.replace("_jsonData",url_upId),requestBody);  //线上
   // }
 
-   //创建--上传前拖拽文件后，获取到id //本地json get
-   getCreatensData(url_upId) {
-    return this.http.get<any>(this.url.creatensData.replace("_jsonData",url_upId)); 
+  //创建--上传前拖拽文件后，获取到id //本地json get
+  getCreatensData(url_upId) {
+    return this.http.get<any>(this.url.creatensData.replace("_jsonData", url_upId));
   }
 
   //------------------------------------------------------------------------------
   //onboard sdc ns 
   getNsonboard(requestBody) {
-    return this.http.post<any>(this.url["onboardNs"], requestBody);
+    return this.http.get<any>(this.url["onboardNs"], requestBody);
   }
   //onboard sdc vnf
   getVnfonboard(requestBody) {
-    return this.http.post<any>(this.url["onboardVNF"], requestBody);
+    return this.http.get<any>(this.url["onboardVNF"], requestBody);
   }
 
   //--------------------------------------------------------------------------
   // Delete ns vfc package
   deleteNsIdData(paramsObj): Observable<HttpResponse<any>> {
+    // local test 
     let params = new HttpParams({ fromObject: paramsObj });
-    console.log(11111,params)
+    console.log(11111, params)
     return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params });
-    // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+
+    // Online test
+    // return this.http.delete<any>(this.url["deleteNspack"] + paramsObj);
   }
+  // delete ns sdc package
+  // deleteNssdcData(){
+  //   return this.http.get<any>(this.url.deleteNssdcData);  //Local simulation
+  //   // return this.http.delete<any>(this.url.deleteNssdcData + id);
+  // }
 
   // Delete Vnf vfc package
   deleteVnfIdData(paramsObj): Observable<HttpResponse<any>> {
     let params = new HttpParams({ fromObject: paramsObj });
-    console.log(11111,params)
+    console.log(11111, params)
     return this.http.get<any>(this.url.deleteVnfPack, { observe: 'response', params });
-    // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+    //online test
+    // return this.http.delete<any>(this.url["deleteVnfpack"] + paramsObj);
   }
 
+  // Delete Vnf sdc package
+  // deleteVnfsdcData(){
+  //   return this.http.get<any>(this.url.deleteVnfsdcData);
+  // }
+
   // Delete Pnf package
   deletePnfIdData(paramsObj): Observable<HttpResponse<any>> {
     let params = new HttpParams({ fromObject: paramsObj });
-    console.log(11111,params)
+    console.log(11111, params)
     return this.http.get<any>(this.url.deletePnfPack, { observe: 'response', params });
-    // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+    //online test
+    // return this.http.delete<any>(this.url["deletePnfpack"] + paramsObj);
   }
-//------------------------------------------------------------------------------
+  //------------------------------------------------------------------------------
   // download  nspak
   // downloadNsData(paramsObj): Observable<HttpResponse<any>> {
   //   console.log(66,paramsObj)
@@ -192,6 +185,37 @@ export class onboardService {
   // downloadVnfData(){
   //   return this.http.get<any>(this.url.downloadVnfData)
   // }
-//---------------------------------Function-end-------------------------------------------  
+
+  // testObservable() {
+  //   let myObservable = new Observable((observer) => {
+  //     observer.next(1);
+  //     observer.next((n) => {
+  //       console.log(3 + n);
+  //     })
+  //     setTimeout(() => {
+  //       observer.next(66666)
+  //     }, 100)
+  //     observer.next(() => {
+  //       setTimeout((n) => {
+  //         console.log("9999---" + n);
+  //       }, 10)
+  //     })
+  //     // observer.error(2);
+  //     // observer.complete();
+  //   });
+
+  //   myObservable.subscribe((e) => {
+  //     if (typeof e == "function") {
+  //       e(5)
+  //     }
+  //     console.log(e);
+  //   }, (err) => {
+  //     console.log(err);
+  //   }, () => {
+  //     console.log(555);
+  //   })
+  // }
+
+  //---------------------------------Function-end-------------------------------------------  
 
 }
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
index a1cc6455..f6a13fd0 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
@@ -57,3 +57,4 @@ hr {
 .list nz-table tbody td i.anticon:hover {
   color: #147dc2;
 }
+
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 c552ba73..82d0fc51 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
@@ -34,202 +34,181 @@
 </nz-tabset> -->
 
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab,nsdInfoId,url)">
-        <!-- nsList -->
-        <div class="list" *ngIf="tab === 'NS'">
-            <h3 class="title"> Onboard {{tabTitle}} </h3>
-            <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">Click or drag file to this area to upload</p>
-                <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
-            </nz-upload>
-            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
-                style="margin-top: 16px">
-                {{ uploading ? 'Uploading' : 'Start Upload' }}
-            </button>
-            <!-- tablist -->
-            <nz-table #nzTable [nzData]="tableData" 
-                nzShowSizeChanger [nzFrontPagination]="true" 
-                [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" 
-                [nzTotal]='total' [(nzPageSize)]="pageSize" 
-                [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" 
-                nzSize="middle" 
-                (nzPageSizeChange)="searchNsData(true)">
-                <!-- (nzPageIndexChange)="searchNsData()"  -->
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                        <!-- <th nzWidth="20%">Type</th> -->
-                        <th nzWidth="10%">Version</th>
-                        <th nzWidth="15%">Onboarding State</th>
-                        <th nzWidth="20%">Operational State</th>
-                        <th nzWidth="20%">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.nsdId">{{item.nsdId}}</td>
-                        <td *ngIf="item.uuid">{{item.uuid}}</td>
-
-                        <td *ngIf="item.nsdName">{{item.nsdName}}</td>
-                        <td *ngIf="item.name">{{item.name}}</td>
-
-                        <!-- <td>{{item.onboardingFailureDetails.type}}</td> -->
-                        <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
-                        <td *ngIf="item.version">{{ item.version }}</td>
-                        <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
-                            <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
-                        </td>
-                        <td>{{item.nsdOperationalState}}</td>
-                        <td>{{item.nsdUsageState}}</td>
-                        <td>
-                            <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
-                            <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> -->
-                            <i class="anticon anticon-delete" (click)="deleteNsService(i,item.id)" *ngIf="item.id"></i>
-                            <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> -->
-                        </td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </div>
-        <!-- VNFList -->
-        <div class="list" *ngIf="tab === 'VNF'">
-            <h3 class="title"> Onboard {{tabTitle}} </h3>
-            <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 file to this area to upload</p>
-                <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
-            </nz-upload>
-            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
-                style="margin-top: 16px">
-                {{ uploading ? 'Uploading' : 'Start Upload' }}
-            </button>
-            <!-- tabList -->
-            <nz-table #nzTable [nzData]="tableData" 
-                nzShowSizeChanger
-                [nzFrontPagination]="true" 
-                [nzShowQuickJumper]="true" 
-                [nzPageSizeOptions]="[5,10,15,20]" 
-                [nzTotal]= 'total'
-                [(nzPageSize)]="pageSize" 
-                [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading"
-                nzSize="middle"
-                (nzPageSizeChange)="searchVnfData(true)">
-                 <!--(nzPageIndexChange)="searchVnfData()" -->
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th>
-                        <th nzWidth="10%">Version</th>
-                        <th nzWidth="20%">Onboarding State</th>
-                        <th nzWidth="15%">usageState</th>
-                        <th nzWidth="20%">Operational State</th>
-                        <th nzWidth="20%">Operation button</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
-                    <tr *ngFor="let item of nzTable.data; let i = index; ">
-                        <!-- <td>{{i+1}}</td> -->
-                        <td *ngIf="item.id">{{item.id}}</td>
-                        <td *ngIf="item.uuid">{{item.uuid}}</td>
-                        <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
-                        <td *ngIf="item.name">{{item.name}}</td>
-                        <td  *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
-                        <td  *ngIf="item.version">{{item.version}}</td>
-                        <td>{{item.onboardingState}}</td>
-                        <td>{{item.usageState}}</td>
-                        <td>{{item.operationalState}}</td>
-                        <!-- <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span>
-                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                        </td> -->
-                        <td>
-                            <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
-                            <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> -->
-                            <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id}}" *ngIf="item.id"></i>
-                        </td>
-                    </tr>
-                    <!-- </ng-template> -->
-                </tbody>
-            </nz-table>
-        </div>
-        <!-- PNFList -->
-        <div class="list" *ngIf="tab === 'PNF'">
-            <h3 class="title"> Onboard {{tabTitle}} </h3>
-            <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 file to this area to upload</p>
-                <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
-            </nz-upload>
-            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
-                style="margin-top: 16px">
-                {{ uploading ? 'Uploading' : 'Start Upload' }}
-            </button>
-            <!-- tabList -->
-            <nz-table #nzTable [nzData]="tableData" 
-                nzShowSizeChanger
-                [nzFrontPagination]="true" 
-                [nzShowQuickJumper]="true" 
-                [nzPageSizeOptions]="[5,10,15,20]" 
-                [nzTotal]= 'total'
-                [(nzPageSize)]="pageSize" 
-                [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading"
-                nzSize="middle"
-                (nzPageSizeChange)="searchPnfData(true)">
-                 <!-- (nzPageIndexChange)="searchPnfData()"  -->
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                        <th nzWidth="15%">Version</th>
-                        <th nzWidth="20%">Onboarding State</th>
-                        <th nzWidth="20%">usageState</th>
-                        <th nzWidth="25%">Operation button</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
-                    <tr *ngFor="let item of nzTable.data; let i = index; ">
-                        <!-- <td>{{i+1}}</td> -->
-                        <td>{{item.id}}</td>
-                        <td>{{item.pnfdName}}</td>
-                        <td>{{item.pnfdVersion}}</td>
-                        <td>{{item.pnfdOnboardingState}}</td>
-                        <td>{{item.pnfdUsageState}}</td>
-                        <!-- <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                        </td> -->
-                        <td>
-                            <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> -->
-                            <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> -->
-                            <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)"></i>
-                        </td>
-                    </tr>
-                    <!-- </ng-template> -->
-                </tbody>
-            </nz-table>
-        </div>
-    </nz-tab>
+        <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, id, url)">
+            <!-- nsList -->
+            <div class="list" *ngIf="tab === 'NS'">
+                <h3 class="title"> Onboard {{tabTitle}} </h3>
+                <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">Click or drag file to this area to upload</p>
+                    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+                </nz-upload>
+                <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
+                    style="margin-top: 16px">
+                    {{ uploading ? 'Uploading' : 'Start Upload' }}
+                </button>
+                <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                    [nzLoading]="loading" nzSize="middle">
+                    <!-- (nzPageIndexChange)="searchNsData()" (nzPageSizeChange)="searchNsData(true)"-->
+                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                        <tr>
+                            <th nzWidth="5%">NO</th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                            <!-- <th nzWidth="20%">Type</th> -->
+                            <th nzWidth="10%">Version</th>
+                            <th nzWidth="15%">Onboarding State</th>
+                            <th nzWidth="20%">Operational State</th>
+                            <th nzWidth="20%">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.nsdId">{{item.nsdId}}</td>
+                            <td *ngIf="item.uuid">{{item.uuid}}</td>
+            
+                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+                            <td *ngIf="item.name">{{item.name}}</td>
+            
+                            <!-- <td>{{item.onboardingFailureDetails.type}}</td> -->
+                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+                            <td *ngIf="item.version">{{ item.version }}</td>
+                            <td>
+                                <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
+                                <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
+                            </td>
+                            <td>{{item.nsdOperationalState}}</td>
+                            <td>{{item.nsdUsageState}}</td>
+                            <td>
+                                <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+                                <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
+                                <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> -->
+                                <i  nzType="info" (click)="showConfirm(i, item.id)" class="anticon anticon-delete" *ngIf="item.id" ></i>
+                                <!-- (click)="deleteNsService(i,item.id)" -->
+                                <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> -->
+                                <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> -->
+                            </td>
+                        </tr>
+                    </tbody>
+                </nz-table>
+            </div>
+            <!-- VNFList -->
+            <div class="list" *ngIf="tab === 'VNF'">
+                <h3 class="title"> Onboard {{tabTitle}} </h3>
+                <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 file to this area to upload</p>
+                    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+                </nz-upload>
+                <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
+                    style="margin-top: 16px">
+                    {{ uploading ? 'Uploading' : 'Start Upload' }}
+                </button>
+                <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                    [nzLoading]="loading" nzSize="middle">
+                    <!-- (nzPageIndexChange)="searchVnfData()" (nzPageSizeChange)="searchVnfData(true)"-->
+                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                        <tr>
+                            <th nzWidth="5%">NO</th>
+                            <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th>
+                            <th nzWidth="10%">Version</th>
+                            <th nzWidth="20%">Onboarding State</th>
+                            <th nzWidth="15%">usageState</th>
+                            <th nzWidth="20%">Operational State</th>
+                            <th nzWidth="20%">Operation button</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+                            <!-- <td>{{i+1}}</td> -->
+                            <td *ngIf="item.id">{{item.id}}</td>
+                            <td *ngIf="item.uuid">{{item.uuid}}</td>
+                            <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+                            <td *ngIf="item.name">{{item.name}}</td>
+                            <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
+                            <td *ngIf="item.version">{{item.version}}</td>
+                            <td>{{item.onboardingState}}</td>
+                            <td>{{item.usageState}}</td>
+                            <td>{{item.operationalState}}</td>
+                            <!-- <td>
+                                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span>
+                                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                                        </td> -->
+                            <td>
+                                <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+                                <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
+                                <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> -->
+                                <i nzType="info" (click)="showVnfConfirm(i,item.id)" class="anticon anticon-delete" *ngIf="item.id"></i>
+                                <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> -->
+                            </td>
+                        </tr>
+                        <!-- </ng-template> -->
+                    </tbody>
+                </nz-table>
+            </div>
+            <!-- PNFList -->
+            <div class="list" *ngIf="tab === 'PNF'">
+                <h3 class="title"> Onboard {{tabTitle}} </h3>
+                <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 file to this area to upload</p>
+                    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+                </nz-upload>
+                <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
+                    style="margin-top: 16px">
+                    {{ uploading ? 'Uploading' : 'Start Upload' }}
+                </button>
+                <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                    [nzLoading]="loading" nzSize="middle">
+                    <!-- (nzPageIndexChange)="searchPnfData()"  (nzPageSizeChange)="searchPnfData(true)"-->
+                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                        <tr>
+                            <th nzWidth="5%">NO</th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                            <th nzWidth="15%">Version</th>
+                            <th nzWidth="20%">Onboarding State</th>
+                            <th nzWidth="20%">usageState</th>
+                            <th nzWidth="25%">Operation button</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+                            <!-- <td>{{i+1}}</td> -->
+                            <td>{{item.id}}</td>
+                            <td>{{item.pnfdName}}</td>
+                            <td>{{item.pnfdVersion}}</td>
+                            <td>{{item.pnfdOnboardingState}}</td>
+                            <td>{{item.pnfdUsageState}}</td>
+                            <!-- <td>
+                                <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                    'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                                <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                            </td> -->
+                            <td>
+                                <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+                                <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> -->
+                                <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> -->
+                                <i nzType="info" (click)="showPnfConfirm(i,item.id)" class="anticon anticon-delete"></i>
+                                <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> -->
+                            </td>
+                        </tr>
+                        <!-- </ng-template> -->
+                    </tbody>
+                </nz-table>
+            </div>
+        </nz-tab>
 </nz-tabset>
 
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index ab118737..099383a2 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -9,6 +9,38 @@ hr {
     background-color: #dce1e7;
     margin-bottom: 20px;
 }
+.switch_btn {
+    position: absolute;
+    right: 6%;
+    top: 18px;
+    border: 1px solid #3fa8eb;
+    width: 8%;
+    border-radius: 10px;
+    margin-bottom: 18px;
+    span {
+        display: block;
+        float: left;
+        text-align: center;
+        width: 50%;
+        color: #3fa8eb;
+        font-weight: 700;
+        cursor: pointer;
+    }
+    span:first-child {
+        border-radius: 10px 0 0 10px;
+    }
+    span:last-child {
+        border-radius: 0 10px 10px 0;
+    }
+    span.left_b {
+        border-left: 1px solid #3fa8eb;
+    }
+    span.active {
+        color: #fff;
+        background: #3fa8eb;
+    }
+}
+  
 .list {
     background-color: #fff;
     border-radius: 5px;
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 650f2162..794df742 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, HostBinding } from '@angular/core';
 // import { MyhttpService } from '../../myhttp.service';
 import { onboardService } from '../../onboard.service';
 import { slideToRight } from '../../animates';
-import { NzMessageService, UploadFile } from 'ng-zorro-antd';
+import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
 
@@ -24,6 +24,8 @@ export class OnboardVnfVmComponent implements OnInit {
     vnf: 'https://jsonplaceholder.typicode.com/posts/',
     pnf: 'https://jsonplaceholder.typicode.com/posts/',
   };
+  // delete Modal
+  confirmModal: NzModalRef; 
   nsdInfoId = '';
   vnfPkgId ='';
   pnfdInfoId = '';
@@ -32,7 +34,7 @@ export class OnboardVnfVmComponent implements OnInit {
   fileListNS: UploadFile[] = [];
   fileListVNF: UploadFile[] = [];
   fileListPNF: UploadFile[] = [];
-  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { }
+  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService) { }
 
   //default 默认调用ns数据
   ngOnInit() {
@@ -53,7 +55,7 @@ export class OnboardVnfVmComponent implements OnInit {
   tabs = ['NS', 'VNF', 'PNF'];
   
   isVisible = false;
-  isOkLoading = false;
+  isOkLoading = false; 
   showModal(): void {
     this.isVisible = true;
   }
@@ -66,6 +68,7 @@ export class OnboardVnfVmComponent implements OnInit {
   handleTabChange(tab,nsdInfoId,url) {
     this.tabTitle = tab;
     console.log(tab);
+    console.log(nsdInfoId);
     console.log(this.url);
     switch (tab) {
       case 'NS':
@@ -113,7 +116,7 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   //vnf  beforeUpload
-  beforeUploadVNF = (file: UploadFile,tab): boolean => {
+  beforeUploadVNF = (file: UploadFile): boolean => {
     this.fileListVNF.push(file);
     console.log('beforeUpload');
       // this.myhttp.getCreatensData("createVnfData",requestBody)//线上
@@ -129,7 +132,7 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   // //pnf eforeUpload
-  beforeUploadPNF = (file: UploadFile,tab): boolean => {
+  beforeUploadPNF = (file: UploadFile): boolean => {
     this.fileListPNF.push(file);
     console.log('beforeUpload');
       // this.myhttp.getCreatensData("createPnfData",requestBody)  //线上
@@ -143,27 +146,25 @@ export class OnboardVnfVmComponent implements OnInit {
         })
     return false;
   }
-    
-
   //拖拽后点击上传按钮
   onClick (tab) {
     switch (tab) {
       case 'NS':
       console.log(this.nsdInfoId);
       // this.handleUpload('http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content');
-        this.handleUpload(this.url.ns,tab);
+        this.handleUpload(this.url.ns, tab);
         this.getTableData();
         break
       case 'VNF':
       console.log(this.vnfPkgId);
      // this.handleUpload('http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content'); 
-        this.handleUpload(this.url.vnf,tab); 
+        this.handleUpload(this.url.vnf, tab); 
         this.getTableVnfData()
         break
       case 'PNF':
       console.log(this.pnfdInfoId);
       // this.handleUpload('http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content');
-        this.handleUpload(this.url.pnf,tab);  
+        this.handleUpload(this.url.pnf, tab);  
         this.getTablePnfData();  
         break
     }
@@ -174,26 +175,26 @@ export class OnboardVnfVmComponent implements OnInit {
     console.log('startUpload')
     const formData = new FormData();
     // tslint:disable-next-line:no-any
-    switch (tab) {
-      case 'NS':
-      this.fileListNS.forEach((file: any) => {
-        formData.append('files[]', file);
-      });
-    break
-    case 'VNF':
-      this.fileListVNF.forEach((file: any) => {
-        formData.append('files[]', file);
-      });
-    break
-    case 'PNF':
-      this.fileListPNF.forEach((file: any) => {
-        formData.append('files[]', file);
-      });
-    break
+    switch(tab) {
+      case "NS": 
+        this.fileListNS.forEach((file: any) => {
+          formData.append('files[]', file);
+        });
+      break
+      case "VNF": 
+        this.fileListVNF.forEach((file: any) => {
+          formData.append('files[]', file);
+        });
+      break
+      case "PNF": 
+        this.fileListPNF.forEach((file: any) => {
+          formData.append('files[]', file);
+        });
+      break
     }
     this.uploading = true;
     // You can use any AJAX library you like
-    const req = new HttpRequest('POST', url, formData, {
+    const req = new HttpRequest('PUT', url, formData, {
       reportProgress: true,
       withCredentials: true
     });
@@ -242,7 +243,8 @@ export class OnboardVnfVmComponent implements OnInit {
     .subscribe((data) => {
       console.log('NSlist-sdc-->',data)
       this.sdcData = data.body;
-      this.tableData = this.vfcData.concat(this.sdcData)
+      this.tableData = this.MergeArray(this.vfcData, this.sdcData)
+      // this.tableData = this.vfcData.concat(this.sdcData)
     }, (err) => {
      console.log(err);
     })
@@ -254,13 +256,13 @@ export class OnboardVnfVmComponent implements OnInit {
     let paramsObj = {
       pageIndex: this.pageIndex,
       pageSize: this.pageSize,
-      nameSort: this.sortValue
+      // nameSort: this.sortValue
     }
 
     this.myhttp.getOnboardTableVnfData(paramsObj)
       .subscribe((data) => {
         console.log("vnfList-->", data);
-        // this.total = data["body"].length; //body length
+        // this.total = data["body"]; //body length
         // console.log( this.total)
         this.vfcData = data.body;
         // this.tableData = data.body;
@@ -272,9 +274,10 @@ export class OnboardVnfVmComponent implements OnInit {
     // sdc
     this.myhttp.getSDC_VNFTableData()
       .subscribe((data) => {
-        console.log('vnfList-sdc-->',data)
+        console.log('vnfList-sdc-->', data)
         this.sdcData = data;
-        this.tableData = this.vfcData.concat(this.sdcData)
+        // this.tableData = this.vfcData.concat(this.sdcData)
+        this.tableData = this.MergeArray(this.vfcData, this.sdcData)
       }, (err) => {
         console.log(err);
       })
@@ -286,9 +289,9 @@ export class OnboardVnfVmComponent implements OnInit {
     let paramsObj = {
       pageIndex: this.pageIndex,
       pageSize: this.pageSize,
-      nameSort: this.sortValue
+      // nameSort: this.sortValue
     }
-
+    
     this.myhttp.getOnboardTablePnfData(paramsObj)
       .subscribe((data) => {
         console.log("pnfList-->", data);
@@ -299,16 +302,13 @@ export class OnboardVnfVmComponent implements OnInit {
       })
   }
 
-
-  sort(sort: { key: string, value: string }): void {
-    console.log(sort);
-    this.sortName = sort.key;
-    this.sortValue = sort.value;
-    this.getTableData();
-  }
+  // sort(sort: { key: string, value: string }): void {
+  //   console.log(sort);
+  //   this.sortName = sort.key;
+  //   this.sortValue = sort.value;
+  //   this.getTableData();
+  // }
   
-//-----------------------------------------------------------------------------------
-
   //选择条数
   // searchNsData(reset: boolean = false) {
   //   console.log('dddd',reset)
@@ -320,16 +320,17 @@ export class OnboardVnfVmComponent implements OnInit {
   // ns onboard
   updataNsService(id) {
     console.log(id);
+
     let requestBody = {
         "csarId": id
     }
     this.myhttp.getNsonboard(requestBody)
       .subscribe((data) => {
         console.log('onboard ns sdc', data);
+        this.getTableData();
       }, (err) => {
         console.log(err);
       })
-    
   }
 
   // searchVnfData(reset: boolean = false) {
@@ -342,10 +343,11 @@ export class OnboardVnfVmComponent implements OnInit {
     console.log(id)
     let requestBody = {
       "csarId": id
-  }
+    }
   this.myhttp.getVnfonboard(requestBody)
     .subscribe((data) => {
       console.log('onboard vnf sdc', data);
+      this.getTableVnfData();
     }, (err) => {
       console.log(err);
     })
@@ -364,6 +366,46 @@ export class OnboardVnfVmComponent implements OnInit {
 
   //--------------------------------------------------------------------------------
   /* delete  删除按钮 */
+  // ns
+  showConfirm(index, pkgid): void {
+    console.log(index)
+    console.log(pkgid)
+    this.confirmModal = this.modal.confirm({
+      nzTitle: 'Do you Want to delete these items?',
+      nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
+      nzOnOk: () =>  new Promise((resolve, reject) => {
+        this.deleteNsService(index,pkgid);
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'))
+    });
+  }
+
+  //vnf
+  showVnfConfirm(index, pkgid): void {
+    console.log(index)
+    console.log(pkgid)
+    this.confirmModal = this.modal.confirm({
+      nzTitle: 'Do you Want to delete these items?',
+      nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
+      nzOnOk: () =>  new Promise((resolve, reject) => {
+        this.deleteVnfService(index,pkgid);
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'))
+    });
+  }
+  //vnf
+  showPnfConfirm(index, pkgid): void {
+    console.log(index)
+    console.log(pkgid)
+    this.confirmModal = this.modal.confirm({
+      nzTitle: 'Do you Want to delete these items?',
+      nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
+      nzOnOk: () =>  new Promise((resolve, reject) => {
+        this.deletePnfService(index,pkgid);
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'))
+    });
+  }
   //delete nsItem
   deleteNsService(index,pkgid) {
     console.log(pkgid)
@@ -376,8 +418,8 @@ export class OnboardVnfVmComponent implements OnInit {
       })
       console.log(index)
     this.tableData.splice(index, 1)
-    console.log(this.tableData.length)
-	//  this.getTableData()
+    console.log('数组长度',this.tableData.length)
+	  this.getTableData()
    }
 
   //delete vnfItem
@@ -412,9 +454,7 @@ export class OnboardVnfVmComponent implements OnInit {
     this.getTablePnfData()
   }
 
-
-//--------------------------------------------------------------------------------------
-  //download 下载
+  //下载download
   // downloadNsService(id) {
   //   console.log('download')
   //   console.log(id)
@@ -436,5 +476,38 @@ export class OnboardVnfVmComponent implements OnInit {
   //   })
   // }
 
+  // downloadPnfService(id) {
+  //   console.log('downloadPnf')
+  //   console.log(id)
+  //   this.myhttp.downloadNsData(id)
+  //   .subscribe((data) => {
+  //     console.log(44, data);
+  //   }, (err) => {
+  //     console.log(err);
+  //   })
+  // }
 
+  //合并并去重
+  MergeArray(arr1, arr2) {
+    var _arr = new Array();
+    for (var i = 0; i < arr1.length; i++) {
+      if (arr1[i] != "") {
+        _arr.push(arr1[i]);
+      }
+    }
+    for (var i = 0; i < arr2.length; i++) {
+      var flag = true;
+      for (var j = 0; j < arr1.length; j++) {
+        // 根据vfc列表arr1的id和sdc列表arr2的uuid去重
+        if (arr2[i].uuid == arr1[j].id) {
+          flag = false;
+          break;
+        }
+      }
+      if (flag && arr2[i] != "") {
+        _arr.push(arr2[i]);
+      }
+    }
+    return _arr;
+  }
 }