Merge master code to casablanca branch

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

13 files changed, 581 insertions, 304 deletions

diff --git a/usecaseui-portal/pom.xml b/usecaseui-portal/pom.xml
index 8064c11c..9f16c135 100644
--- a/usecaseui-portal/pom.xml
+++ b/usecaseui-portal/pom.xml
@@ -20,7 +20,7 @@
   <parent>
     <groupId>org.onap.usecase-ui</groupId>
     <artifactId>usecase-ui</artifactId>
-    <version>1.2.2-SNAPSHOT</version>
+    <version>1.3.0-SNAPSHOT</version>
   </parent>
 
   <modelVersion>4.0.0</modelVersion>
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
index 2ac88d32..a7e19a73 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css
@@ -22,15 +22,6 @@
   margin: 30px 0;
 }
 
-.tips{
-  margin: 20px auto;
-  padding:0 5px;
-  width: 100%;
-  height: 40px;
-  line-height: 40px;
-  border: 1px gainsboro solid;
-  border-radius: 10px;
-}
 .submit,.delete,.add{
   padding:10px 20px;
   width: 100px;
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
index 4fbe4875..e36fecc2 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html
@@ -14,13 +14,10 @@
     limitations under the License.
 -->
 <div class="model">
-  <!--图表-->
-  <div class="tips">
-    请根据以下操作，来配置您的网络
-  </div>
+  <!--chart-->
   <button nz-button nzType="primary" style="margin-top: 2px;display: block" (click)="showForm()">Add Link</button>
   <div id="tpContainer" style="overflow: hidden;"></div>
-  <!--弹出框-->
+  <!--Popup-->
   <div class="creation" id="d3_form" *ngIf="isVisible==true">
     <span class="v_color"></span>
     <h3 class="w_font4">Set Attribtes</h3>
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
index af62c10a..000e0d16 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -71,13 +71,12 @@ export class CcvpnNetworkComponent implements OnInit {
             thisNg.delTp2 = $(this).attr('data-tp2');
             thisNg.delNode1 = $(this).attr('data-node1');
             thisNg.delNode2 = $(this).attr('data-node2');
+            thisNg.delVersion = $(this).attr('data-version');
             thisNg.delNetwork1 = $(this).attr('data-network');
             thisNg.delNetwork2 = $(this).attr('data-cloudnetwork');
             thisNg.delcloudUrl = $(this).attr('data-url');
             thisNg.delLinkname = $(this).attr('data-link');
             thisNg.aaiId = $(this).attr('data-aaiid');
-            thisNg.getCloudUrl(thisNg.aaiId, thisNg);
-            thisNg.getExtAAIIdVersion(thisNg.aaiId, thisNg);
         });
     }
 
@@ -239,7 +238,6 @@ export class CcvpnNetworkComponent implements OnInit {
                     this.chose(textval);
                 }
                 console.log(this.logicalLinks);
-                console.log(this.dataCloudLink);
                 if (this.dataCloudLink.length > 0) {
                     this.getcloudLine(this.dataCloudLink);
                 }
@@ -585,12 +583,17 @@ export class CcvpnNetworkComponent implements OnInit {
         textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
         textval[7] = this.dataCloud[0]['networkId'];
         console.log(this.dataCloud);
-        console.log(textval);
         let dataD3 = this.d3Data;
+        let arr=[
+          textval[0],
+          textval[1]
+        ];
         for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
-            if (dataD3[p]['name'] == textval[0]) {
-                textval[8] = dataD3[p]['source']['name'];//network1
+          for (let pp= 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to
+            if (dataD3[p]['name'] == arr[pp]) {
+              textval[8] = dataD3[p]['source']['name'];//network1
             }
+          }
         }
         textval[9] = dataCloudLink[0]['link-name'];
         let lines_json = {};
@@ -601,18 +604,18 @@ export class CcvpnNetworkComponent implements OnInit {
         } else {
             width = 800;
         }
+        console.log("shuchu01dataCloudLink"+dataCloudLink[0]);
+        console.log("shuchutextval"+textval);
         for (let i = 0; i < $(".node").length; i++) {
             if ($('.node').eq(i).find('text').html() == textval[8]) {
                 //Get the x, y coordinates of the second level
                 var translates = $('.node').eq(i).css('transform');
-                console.log("shuchu:translates"+translates);
                 lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
                 lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
                 lines_json['x2'] = width - 100;
                 lines_json['y2'] = 100;
             }
         }
-        console.log("shuchu:x1,y1"+lines_json["x1"],lines_json["y1"]);
         var x1 = lines_json['x1'];
         var y1 = lines_json['y1'];
         var x2 = lines_json['x2'];
@@ -644,24 +647,32 @@ export class CcvpnNetworkComponent implements OnInit {
             'data-link': textval[9],
         });
         svg.html(svg.html());
+      this.getCloudUrl(textval[6]);
+      this.getExtAAIIdVersion(textval[6]);
     }
 
 
     //Query external cloud host url address
-    getCloudUrl(aaiId, thisNg) {
+    getCloudUrl(aaiId) {
         this.myhttp.queryCloudUrl(aaiId)
             .subscribe((data) => {
-                thisNg.delcloudUrl = data['service-url'];
+                this.delcloudUrl = data['service-url'];
+              $('.cloudline').attr({
+                'data-url': data['service-url']
+              });
             }, (err) => {
                 console.log(err);
             });
     }
 
   //Query external cloud ext-aai-id resource-version
-    getExtAAIIdVersion(aaiId, thisNg){
+    getExtAAIIdVersion(aaiId){
         this.myhttp.queryExtAAIIdVersion(aaiId)
           .subscribe((data) => {
-            thisNg.delVersion = data["resource-version"];
+            this.delVersion = data["resource-version"];
+            $('.cloudline').attr({
+              'data-version':data["resource-version"],
+            });
           }, (err) => {
             console.log(err);
           });
@@ -915,7 +926,7 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     //After creating an external cloud connection, query the connection immediately
-    queryOutCloudLink() {
+    queryOutCloudLink(time) {
         let networkVal1 = this.networkVal1,
             selectedNode1 = this.selectedNode1,
             selecteTpName1 = this.selecteTpName1,
@@ -929,13 +940,12 @@ export class CcvpnNetworkComponent implements OnInit {
         };
         this.myhttp.querySpecificLinkInfo(params)
             .subscribe((data) => {
-                let version = data['resource-version'];
                 let status = data['operational-status'];
                 let link_name = data['link-name'];
                 this.outCloudShow = true;
                 this.hideForm();
                 this.outCloud(this.imgmap);
-                setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name), 0);
+                setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name,time), 0);
             }, (err) => {
                 console.log(err);
             });
@@ -964,7 +974,7 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     //Add external cloud connection
-    cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name) {
+    cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name,time) {
         let lines_json = {};
         var _this = this,
             width;
@@ -973,10 +983,12 @@ export class CcvpnNetworkComponent implements OnInit {
         } else {
             width = 800;
         }
+        console.log("shuchuNetworkVal1:"+networkVal1);
         for (let i = 0; i < $(".node").length; i++) {
             if ($('.node').eq(i).find('text').html() == networkVal1) {
                 //Get the x, y coordinates of the second level
                 var translates = $('.node').eq(i).css('transform');
+                console.log("shuchuTranslates:"+translates);
                 lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
                 lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
                 lines_json['x2'] = width - 100;
@@ -1004,21 +1016,22 @@ export class CcvpnNetworkComponent implements OnInit {
             y2: y2,
             'data-tp1': selecteTpName1,
             'data-tp2': cloudTp,
-            'data-version': version,
             'data-node1': selectedNode1,
             'data-node2': cloudNode,
             'data-network': networkVal1,
             'data-cloudnetwork': cloudNetWork,
             'data-url': cloudUrl,
+            'data-aaiid':time,
             'data-link': link_name
         });
         svg.html(svg.html());
+        this.getExtAAIIdVersion(time);
     }
 
     //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
     createCloudNetwork(time) {
         let _thiss = this;
-
+        console.log("shuchuCloudNetwork:"+time);
         let params= {
                 "-xmlns": "http://org.onap.aai.inventory/v13",
                 "network-id":this.cloudNetwork,
@@ -1046,6 +1059,7 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     createPnfs(time) {
+        console.log("shuchupnf:"+time);
         let _thiss = this;
         let params= {
                 "-xmlns": "http://org.onap.aai.inventory/v13",
@@ -1087,6 +1101,7 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     createCloudTp(time) {
+        console.log("shuchuTp:"+time);
         let _thiss = this;
         let params= {
                 "-xmlns": "http://org.onap.aai.inventory/v13",
@@ -1117,6 +1132,7 @@ export class CcvpnNetworkComponent implements OnInit {
 
     createCloudLinks(time) {
         let _thiss = this;
+        console.log("shuchuCloudLinks:"+time);
         let params={
                 "-xmlns": "http://org.onap.aai.inventory/v13",
                 "link-name": this.linkName,
@@ -1146,7 +1162,7 @@ export class CcvpnNetworkComponent implements OnInit {
             .subscribe((data) => {
                 // resolve(data['status']);
                 if(data["status"]=="SUCCESS"){
-                    _thiss.queryOutCloudLink();
+                    _thiss.queryOutCloudLink(time);
                 }
             }, (err) => {
                 // reject(err);
@@ -1159,6 +1175,7 @@ export class CcvpnNetworkComponent implements OnInit {
     createCloudUrls(time) {
         let _thiss = this;
         console.log(this.cloudNetwork);
+        console.log("shuchuUrls:"+time);
         let params={
                 "-xmlns": "http://org.onap.aai.inventory/v13",
                 "aai-id":time,
@@ -1171,7 +1188,7 @@ export class CcvpnNetworkComponent implements OnInit {
                 }
         };
       console.log(time);
-      console.log(params["ext-aai-network"]["aai-id"]);
+      console.log(params["aai-id"]);
         // var pro = new Promise(function (resolve, reject) {
         //Do some asynchronous operations
         _thiss.myhttp.createCloudUrl(params)
@@ -1235,13 +1252,14 @@ export class CcvpnNetworkComponent implements OnInit {
             "aaiId": aaiId,
             "version": version,
         };
-        this.myhttp.deleteLink(params)
+        this.myhttp.deleteCloudLink(params)
             .subscribe((data) => {
                 console.log(data);
                 if (data['status'] == 'SUCCESS') {
                     console.log('delete');
                     this.delLine(deltp1, deltp2);
                     $('.cloudline').remove();
+                    $('#out').remove();
                 }
             }, (err) => {
                 console.log(err);
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
index 3cbc12ae..8fc9fb60 100644
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
@@ -164,7 +164,7 @@ export class E2eCreationComponent implements OnInit {
             let location = {
               vnfProfileId: input.name,
               locationConstraints:{
-                vimId:input.value.id
+                vimId: input.value.name + "_" + input.value.id,
               }
             }
             nsService.parameters.locationConstraints.push(location);
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index fda6d0f8..4d28d220 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -90,7 +90,7 @@ export class MyhttpService {
     ns_healService: this.baseUrl + "/uui-lcm/healNetworkServiceInstance?ns_instance_id=",
     vnfInfo: this.baseUrl + "/uui-lcm/VnfInfo/",
     progress: this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
-    nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=",
+    nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=",
     e2eScale: this.baseUrl + "/services/scaleServices/",
     e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/",
 
@@ -216,7 +216,7 @@ export class MyhttpService {
   }
 
   getVnfInfo(id) {
-    return this.http.get<any>(this.url.vnfInfo + id)
+    return this.http.get<any>(this.url.vnfInfo + id);
   }
   healNsService(id, requestBody) {
     // return this.http.get<any>(this.url.ns_healService);  //Local simulation
@@ -238,8 +238,8 @@ export class MyhttpService {
     let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId;
     return this.http.get<any>(url);
   }
-  getNsProgress(jobid, responseId) {
-    let url = this.url.nsProgress.replace("*_*", jobid) + responseId;
+  getNsProgress(jobid,serviceId){
+    let url = this.url.nsProgress.replace("*_*",jobid) + serviceId;
     return this.http.get<any>(url);
   }
 
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts
index 83ae6394..6ab1e282 100644
--- a/usecaseui-portal/src/app/onboard.service.ts
+++ b/usecaseui-portal/src/app/onboard.service.ts
@@ -73,8 +73,12 @@ export class onboardService {
     // Delete Vnf vfc package 
     deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=",  
     // Delete Pnf package
-    deletePnfPack: this.baseUrl + "deletePnfPackage?pnfPkgId=",
-  
+    deletePnfPack: this.baseUrl + "deletePnfPackage?pnfdInfoId=",
+
+    //进度接口
+    progress: this.baseUrl + "jobs/" + "_jobId" + "?responseId="
+
+
     // // download ns package
     // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX",
     // //download vnf package 
@@ -122,13 +126,18 @@ export class onboardService {
   //------------------------------------------------------------------------------
   //onboard sdc ns 
   getNsonboard(requestBody) {
-    return this.http.get<any>(this.url["onboardNs"], requestBody);
+    return this.http.post<any>(this.url["onboardNs"], requestBody);
   }
   //onboard sdc vnf
   getVnfonboard(requestBody) {
-    return this.http.get<any>(this.url["onboardVNF"], requestBody);
+    return this.http.post<any>(this.url["onboardVNF"], requestBody);
   }
 
+  //onboard progress
+  getProgress(jobid, responseId) {
+    let url = this.url.progress.replace("_jobId", jobid) + responseId;
+    return this.http.get<any>(url);
+  }
   //--------------------------------------------------------------------------
   // Delete ns vfc package
   deleteNsIdData(paramsObj) {
@@ -150,7 +159,7 @@ export class onboardService {
     //Local test
     // return this.http.get<any>(this.url.deletePnfPack); 
     //online test
-    return this.http.delete<any>(this.url["deletePnfpack"] + paramsObj);
+    return this.http.delete<any>(this.url.deletePnfPack + paramsObj);
   }
 
   //---------------------------------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 f6a13fd0..e5044935 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,4 +57,8 @@ hr {
 .list nz-table tbody td i.anticon:hover {
   color: #147dc2;
 }
-
+.list nz-table tbody td .cannotclick {
+  pointer-events: none;
+  color: #aaa;
+  opacity: 0.6;
+}
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 105f399f..09281d4b 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
@@ -29,45 +29,61 @@
                     style="margin-top: 16px">
                     {{ nsuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
-                <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex'
-                    [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
-                            <th nzWidth="15%">NO</th>
-                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                            <th nzWidth="15%">Version</th>
-                            <th nzWidth="15%">Onboarding State</th>
-                            <th nzWidth="15%">Operational State</th>
-                            <th nzWidth="10%">Usage State</th>
-                            <th nzWidth="15%">Operation button</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td *ngIf="item.id">{{item.id}}</td>
-                            <td *ngIf="item.uuid">{{item.uuid}}</td>
+                <nz-spin [nzSpinning]="isSpinning">
+                	<div class="mask" *ngIf="isSpinning"></div>
+               		<nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+	                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex'
+	                    [nzLoading]="loading" nzSize="middle">
+	                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+	                        <tr>
+	                            <th nzWidth="15%">NO</th>
+	                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+	                            <th nzWidth="15%">Version</th>
+	                            <th nzWidth="15%">Onboarding State</th>
+	                            <th nzWidth="15%">Operational State</th>
+	                            <th nzWidth="10%">Usage State</th>
+	                            <th nzWidth="15%">Operation button</th>
+	                        </tr>
+	                    </thead>
+	                    <tbody>
+	                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+	                            <td *ngIf="item.id">{{item.id}}</td>
+	                            <td *ngIf="item.uuid">{{item.uuid}}</td>
             
-                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
-                            <td *ngIf="item.nsdName === null">无</td>
-                            <td *ngIf="item.name">{{item.name}}</td>
-                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
-                            <td *ngIf="item.nsdVersion === null">无</td>
-                            <td *ngIf="item.version">{{ item.version }}</td>
-                            <td>
-                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
-                                <span *ngIf="item.nsdOnboardingState === null">无</span>
-                                <span *ngIf="item.uuid" data_id="i">{{status}}</span>
-                            </td>
-                            <td>{{item.nsdOperationalState}}</td> 
-                            <td>{{item.nsdUsageState}}</td>
-                            <td>
-                                <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
+	                            <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>
+                                
+	                                <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
+	                                'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
+	                                'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
+	                                <nz-progress  *ngIf="item.uuid"  *ngIf="data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
+	                            </td>
+	                            <td>{{item.nsdOperationalState}}</td> 
+	                            <td>{{item.nsdUsageState}}</td>
+	                            <td>
+	                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" 
+	                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *ngIf="item.uuid"></i>
+	                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
+	                            </td>
+	                        </tr>
+	                    </tbody>
+            		 </nz-table>
+                 </nz-spin>
+                      <!-- <div style="margin-top:8px;">
+                        Loading state：
+                        <nz-switch [(ngModel)]="isSpinning"></nz-switch>
+                      </div> -->
+               
             </div>
             <!-- VNFList -->
             <div class="list" *ngIf="tab === 'VNF'">
@@ -77,46 +93,51 @@
                         <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>
+                    <p class="ant-upload-hint"></p>
                 </nz-upload>
                 <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
                     style="margin-top: 16px">
                     {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
-                <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex'
-                    [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
-                            <th nzWidth="15%">NO</th>
-                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                            <th nzWidth="15%">Version</th>
-                            <th nzWidth="15%">Onboarding State</th>
-                            <th nzWidth="15%">Operational State</th>
-                            <th nzWidth="10%">Usage State</th>
-                            <th nzWidth="15%">Operation button</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td *ngIf="item.id">{{item.id}}</td>
-                            <td *ngIf="item.uuid">{{item.uuid}}</td>
-                            <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
-                            <td *ngIf="item.vnfProductName === null">无</td>
-                            <td *ngIf="item.name">{{item.name}}</td>
-                            <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
-                            <td *ngIf="item.vnfdVersion === null">无</td>
-                            <td *ngIf="item.version">{{item.version}}</td>
-                            <td>{{item.onboardingState}}</td>
-                            <td>{{item.usageState}}</td>
-                            <td>{{item.operationalState}}</td>
-                            <td>
-                                <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
+                <nz-spin [nzSpinning]="isSpinning">
+                    <div class="mask" *ngIf="isSpinning"></div>
+                    <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                        [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex'
+                        [nzLoading]="loading" nzSize="middle">
+                        <thead (nzSortChange)="sort($event)" nzSingleSort>
+                            <tr>
+                                <th nzWidth="15%">NO</th>
+                                <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                                <th nzWidth="15%">Version</th>
+                                <th nzWidth="15%">Onboarding State</th>
+                                <th nzWidth="15%">Operational State</th>
+                                <th nzWidth="10%">Usage State</th>
+                                <th nzWidth="15%">Operation button</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of nzTable.data; let i = index; ">
+                                <td *ngIf="item.id">{{item.id}}</td>
+                                <td *ngIf="item.uuid">{{item.uuid}}</td>
+                                <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+                                <td *ngIf="item.vnfProductName === null || 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.onboardingState}}</td>
+                                <td>{{item.usageState}}</td>
+                                <td>{{item.operationalState}}</td>
+                                <td>
+                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding'  && i == currentIndex}" 
+                                class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i>
                                 <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </nz-table>
+                </nz-spin>
+                
             </div>
             <!-- PNFList -->
             <div class="list" *ngIf="tab === 'PNF'">
@@ -126,38 +147,42 @@
                         <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>
+                    <p class="ant-upload-hint"></p>
                 </nz-upload>
                 <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
                     style="margin-top: 16px">
                     {{ pnfuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
-                <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex'
-                    [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
-                            <th nzWidth="15%">NO</th>
-                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                            <th nzWidth="15%">Version</th>
-                            <th nzWidth="15%">Onboarding State</th>
-                            <th nzWidth="10%">Usage State</th>
-                            <th nzWidth="15%">Operation button</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td>{{item.id}}</td>
-                            <td>{{item.pnfdName}}</td>
-                            <td>{{item.pnfdVersion}}</td>
-                            <td>{{item.pnfdOnboardingState}}</td>
-                            <td>{{item.pnfdUsageState}}</td>
-                            <td>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
+                <nz-spin [nzSpinning]="isSpinning">
+                        <div class="mask" *ngIf="isSpinning"></div>
+                        <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                        [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex'
+                        [nzLoading]="loading" nzSize="middle">
+                        <thead (nzSortChange)="sort($event)" nzSingleSort>
+                            <tr>
+                                <th nzWidth="15%">NO</th>
+                                <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                                <th nzWidth="15%">Version</th>
+                                <th nzWidth="15%">Onboarding State</th>
+                                <th nzWidth="10%">Usage State</th>
+                                <th nzWidth="15%">Operation button</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of nzTable.data; let i = index; ">
+                                <td>{{item.id}}</td>
+                                <td>{{item.pnfdName}}</td>
+                                <td>{{item.pnfdVersion}}</td>
+                                <td>{{item.pnfdOnboardingState}}</td>
+                                <td>{{item.pnfdUsageState}}</td>
+                                <td>
+                                    <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </nz-table>
+                </nz-spin>
+                
             </div>
         </nz-tab>
 </nz-tabset>
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index 099383a2..f5534619 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
@@ -76,7 +76,22 @@ hr {
                         color: #147dc2;
                     }
                 }
+                .cannotclick {
+                    pointer-events: none;
+                    color: #aaa;
+                    opacity: 0.6;
+                }
             }
         }
     }
+}
+.mask {
+    top: 0;
+    left: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    background: black;
+    z-index: 1049;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 4e57fc64..c60ac041 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
@@ -6,6 +6,8 @@ import { slideToRight } from '../../animates';
 import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
+import * as $ from 'jquery';
+
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -30,11 +32,11 @@ export class OnboardVnfVmComponent implements OnInit {
   fileListPNF: UploadFile[] = [];
   // onboard initial value
   status = "Onboard Available";
-
+  jobId = '';
   //url
   url = {
     // line up
-    ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',
+    ns:  '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
     vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
     pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
     // 本地
@@ -50,9 +52,14 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   //表格数据
-  tableData:any;
-  sdcData:any;
-  vfcData:any;
+  nstableData:any;
+  vnftableData:any;
+  pnftableData:any;
+  nssdcData:any;
+  nsvfcData:any;
+
+  vnfsdcData:any;
+  vnfvfcData:any;
   nspageIndex = 1;
   nspageSize = 10;
   vnfpageIndex = 1;
@@ -64,7 +71,7 @@ export class OnboardVnfVmComponent implements OnInit {
   sortName = null;
   sortValue = null;
   tabs = ['NS', 'VNF', 'PNF'];
-  
+  isSpinning = false;
   isVisible = false;
   isOkLoading = false; 
   showModal(): void {
@@ -85,12 +92,15 @@ export class OnboardVnfVmComponent implements OnInit {
     console.log(this.url);
     switch (tab) {
       case 'NS':
+          this.nstableData = [];
           this.getTableData();
         break
       case 'VNF':
+          this.vnftableData = [];
           this.getTableVnfData()
         break
       case 'PNF':
+          this.pnftableData = [];
           this.getTablePnfData()
         break
     }
@@ -146,7 +156,7 @@ export class OnboardVnfVmComponent implements OnInit {
   beforeUploadPNF = (file: UploadFile): boolean => {
     this.fileListPNF.push(file);
     console.log('beforeUpload');
-    console.log('fileListPNF--->' + this.fileListPNF);
+    console.log('fileListPNF--->' + JSON.stringify(this.fileListPNF));
       this.myhttp.getCreatensData("createPnfData",this.requestBody)  //on-line
       // this.myhttp.getCreatensData("creatensDataPNF")  //local
         .subscribe((data) => {
@@ -190,19 +200,19 @@ export class OnboardVnfVmComponent implements OnInit {
     switch(tab) {
       case "NS": 
         this.fileListNS.forEach((file: any) => {
-          formData.append('files[]', file);
+          formData.append('file', file);
         });
         this.nsuploading = true;
       break
       case "VNF": 
         this.fileListVNF.forEach((file: any) => {
-          formData.append('files[]', file);
+          formData.append('file', file);
         });
         this.vnfuploading = true;
       break
       case "PNF": 
         this.fileListPNF.forEach((file: any) => {
-          formData.append('files[]', file);
+          formData.append('file', file);
         });
         this.pnfloading = true;
       break
@@ -255,128 +265,241 @@ changeUploadingSta(tab) {
 
   // 获取NS列表
   getTableData() {
-    //vfc
+    this.isSpinning = true;
+    //ns vfc lists 
     this.myhttp.getOnboardTableData()
     .subscribe((data) => {
-      console.log(data)
-      this.vfcData = data;
-      console.log(typeof this.vfcData)
-      console.log("NSlist-vfc-->",data)
-    }, (err) => {
+      console.log("NSlist-vfc-->",data);
+      console.log("NSlist-length-vfc-->",data.length);
+      this.nsvfcData = data;
+      this.nstableData = this.nsvfcData;
+      //ns sdc list
+      this.myhttp.getSDC_NSTableData()
+        .subscribe((data) => {
+          this.isSpinning = false; //loading hide
+          console.log('NSlist-sdc-->',data);
+          console.log("NSlist-length-vfc-->",data.length);
+          this.nssdcData = data;
+          if (this.nsvfcData.length != 0 && this.nssdcData.length != 0){
+            this.nstableData = this.MergeArray(this.nsvfcData, this.nssdcData) //Array deduplication
+            }else if(this.nsvfcData.length === 0 && this.nssdcData.length != 0){
+            this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
+            }else if(this.nsvfcData.length != 0 && this.nssdcData.length === 0){
+            this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
+          }
+      }, (err) => {
       console.log(err);
-    })
-    // sdc
-    this.myhttp.getSDC_NSTableData()
-    .subscribe((data) => {
-      console.log('NSlist-sdc-->',data)
-      this.sdcData = data;
-      this.tableData = this.MergeArray(this.vfcData, this.sdcData)
+      })
+
     }, (err) => {
-     console.log(err);
-    })
+      console.log(err);
+    }) 
+    
   }
 
   // 获取vnf列表
   getTableVnfData() {
+    this.isSpinning = true;
+    //vnf vfc lists
     this.myhttp.getOnboardTableVnfData()
       .subscribe((data) => {
-        console.log("vnfList-->", data);
-        this.vfcData = data;
-        console.log("vnfList-vfc-->",data)
-      }, (err) => {
-        console.log(err);
-      })
+        console.log("vnfList--vnf>", data);
+        console.log("vnfList--vnf>", data.length);
+        this.vnfvfcData = data;
+        this.vnftableData = this.vnfvfcData;
+        //vnf sdc lists
+        this.myhttp.getSDC_VNFTableData()
+        .subscribe((data) => {
+          this.isSpinning = false; //loading hide
+          console.log('vnfList-sdc-->', data)
+          console.log('vnfList-sdc-->', data.length)
+          this.vnfsdcData = data;
+          if (this.vnfvfcData.length != 0 && this.vnfsdcData.length != 0){
+            this.vnftableData = this.MergeArray(this.vnfvfcData, this.vnfsdcData) //Array deduplication
+            }else if(this.vnfvfcData.length === 0 && this.vnfsdcData.length != 0){
+            this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
+            }else if(this.vnfvfcData.length != 0 && this.vnfsdcData.length === 0){
+            this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
+            console.log(this.vnftableData);
+          }
+        }, (err) => {
+          console.log(err);
+        })
 
-    // sdc
-    this.myhttp.getSDC_VNFTableData()
-      .subscribe((data) => {
-        console.log('vnfList-sdc-->', data)
-        this.sdcData = data;
-        this.tableData = this.MergeArray(this.vfcData, this.sdcData)
       }, (err) => {
         console.log(err);
       })
   }
 
   // 获取pnf列表
-  getTablePnfData() {   
+  getTablePnfData() { 
+    this.isSpinning = true;  
     this.myhttp.getOnboardTablePnfData()
       .subscribe((data) => {
         console.log("pnfList-->", data);
-        this.total = data["body"];
-        this.tableData = data;
+        console.log("pnfList-->", data.length);
+        this.pnftableData = data;
+        this.isSpinning = false;   //loading hide
       }, (err) => {
         console.log(err);
       })
   }
 
-  /* onboard  上传按钮 */
-  // ns onboard
- 
-  success(): void {
+  //合并并去重
+  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;
+  }
+
+//-----------------------------------------------------------------------------------
+  /* onboard */
+  //成功弹框
+  success(tab): void {
     const modal = this.modalService.success({
       nzTitle: 'This is an success message',
       nzContent: 'Package Onboard Completed.'
     });
-
-    window.setTimeout(() => modal.destroy(), 2000);
+    switch(tab) {
+      case "NS":
+          console.log("NS成功弹框")
+          this.getTableData();
+        break
+      case "VNF": 
+        console.log("VNF成功弹框")
+        this.getTableVnfData();
+        break
+    }
+    // window.setTimeout(() => modal.destroy(), 5000);
   }
 
+  //失败弹框
   error(): void {
     this.modalService.error({
       nzTitle: 'This is an error message',
       nzContent: 'Package Onboard Failed!'
     });
   }
-  updataNsService(id) {
-    console.log(id);
+
+  //onboard status
+  onboardData ={
+    status:"onboard",
+    progress: 0,
+  }
+  currentIndex = 0;
+
+  // ns onboard 上传按钮
+  updataNsService(id,index) {
+    this.currentIndex = index;
+    this.onboardData.status = "onboarding";
+    this.onboardData.progress = 0;
+    console.log("NS-onboard-id-->" + id);
     let requestBody = {
         "csarId": id
     }
     this.myhttp.getNsonboard(requestBody)
       .subscribe((data) => {
-        console.log('onboard ns sdc', data);
-        if(data["status"] == 200) {
-          this.success();
-         
-        } else {
+        console.log('onboard ns sdc-->', data);
+        if(data.status == "failed"){
+          console.log("Package Onboard Failed")
+          this.onboardData.status = "Failed";
           this.error();
+          return false
+        }else if(data.status == "success"){
+          this.success("NS");
+          this.onboardData.status = "onboarded";
         }
-        this.getTableData();
       }, (err) => {
         console.log(err);
       })
   }
 
-  // vnf onboard
-  updataVnfService(id) {
-    this.status = "Onboarding";
-    console.log(id)
+  // vnf onboard 上传按钮
+  updataVnfService(id,index) {
+    this.currentIndex = index;
+    this.onboardData.status = "onboarding";  //按钮置灰
+    this.onboardData.progress = 0;
+
+    console.log("VNF-onboard-id-->" + id)
     let requestBody = {
       "csarId": id
     }
-  this.myhttp.getVnfonboard(requestBody)
-    .subscribe((data) => {
-      console.log('onboard vnf sdc', data);
-     if(data["status"] == "200"){
-          this.success();
-        }else {
-          this.error();
-        }
-    }, (err) => {
-      console.log(err);
-    })
+    this.myhttp.getVnfonboard(requestBody)
+      .subscribe((data) => {
+        console.log('onboard vnf sdc-->', data);
+        this.jobId =  data.jobId;
+        console.log('onboard vnf sdc jobId-->'+ data.jobId);
+        this.queryProgress(this.jobId,0);   //vnf需要查询进度接口
+      }, (err) => {
+        console.log(err);
+      })
   }
 
-  // pnf onboard ?
-  updataPnfService(id) {
-    console.log('pnf',id);
-  }
+  // pnf onboard //暂时没有上传功能
+  // updataPnfService(id) {
+  //   console.log('pnf',id);
+  // }
 
+  //Progress 进度查询
+  queryProgress(jobId,responseId){
+    let mypromise = new Promise((res)=>{
+        this.myhttp.getProgress(jobId,responseId)
+          .subscribe((data)=>{
+            console.log("progressData-->");
+            console.log(data);
+            if(data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null){
+              console.log("progress == undefined");
+              this.onboardData.status = "onboarding";
+              setTimeout(()=>{
+                this.queryProgress(this.jobId,0);
+              },10000)
+              return false
+            }
+            if(data.responseDescriptor.progress > 100){
+              console.log("progress-->",data.responseDescriptor.progress)
+              console.log("Package Onboard Failed")
+              this.onboardData.status = "Failed";
+              this.error();
+              return false
+            }
+            if(data.responseDescriptor.progress < 100){
+              this.onboardData.status = "onboarding";
+              console.log("progress < 100")
+              setTimeout(()=>{
+                this.queryProgress(this.jobId,0);
+              },5000)
+            }else if(data.responseDescriptor.progress == 100){
+              res(data);
+              console.log("progress == 100");
+              console.log(data);
+              this.success("VNF");
+              this.onboardData.status = "onboarded";
+            }  
+            return false
+          })
+    })
+    return mypromise;
+  }
 
   //--------------------------------------------------------------------------------
   /* delete  删除按钮 */
-  // ns
   showConfirm(index,pkgid,tab): void {
     this.confirmModal = this.modal.confirm({
       nzTitle: 'Do you Want to delete these items?',
@@ -387,22 +510,21 @@ changeUploadingSta(tab) {
         switch (tab) {
           case 'NS':
           this.deleteNsService(index,pkgid);
-          setTimeout(Math.random() > 0.5 ? resolve : reject,1000);
+          setTimeout(Math.random() > 0.5 ? resolve : reject,2000);
           break
         case 'VNF':
           this.deleteVnfService(index,pkgid);
-          setTimeout(Math.random() > 0.5 ? resolve : reject,1000);
+          setTimeout(Math.random() > 0.5 ? resolve : reject,2000);
           break
         case 'PNF':
           this.deletePnfService(index,pkgid);
-          setTimeout(Math.random() > 0.5 ? resolve : reject,1000);
+          setTimeout(Math.random() > 0.5 ? resolve : reject,2000);
           break   
         }
       }).catch(() => console.log('Oops errors!'))
     });
   }
 
-  /* delete  删除按钮 */
   //delete nsItem
   deleteNsService(index,pkgid) {
     console.log(pkgid)
@@ -410,13 +532,11 @@ changeUploadingSta(tab) {
     this.myhttp.deleteNsIdData(pkgid)
       .subscribe((data) => {
         console.log("nsdel--->", data);
+        //refresh list after successful deletion
+        this.getTableData();
       }, (err) => {
         console.log(err);
       })
-      console.log(index)
-    this.tableData.splice(index, 1)
-    console.log('tableData.length NS--->',this.tableData.length)
-	  this.getTableData()
    }
 
   //delete vnfItem
@@ -426,13 +546,11 @@ changeUploadingSta(tab) {
     this.myhttp.deleteVnfIdData(pkgid)
       .subscribe((data) => {
         console.log('vnfdel--->', data);
+        //refresh list after successful deletion
+        this.getTableVnfData()
       }, (err) => {
         console.log(err);
       })
-      console.log(index)
-    this.tableData.splice(index, 1)
-    console.log('tableData.length VNF--->'+ this.tableData.length)
-    this.getTableVnfData()
   }
 
   //delete PnfItem
@@ -442,15 +560,14 @@ changeUploadingSta(tab) {
     this.myhttp.deletePnfIdData(pkgid)
       .subscribe((data) => {
         console.log('pnfdel--->', data);
+        //refresh list after successful deletion
+        this.getTablePnfData()
       }, (err) => {
         console.log(err);
       })
-      console.log(index)
-    this.tableData.splice(index, 1)
-    console.log('tableData.length PNF--->'+this.tableData.length)
-    this.getTablePnfData()
   }
 
+//------------------------------------------------------------------------------------
   //下载download
   // downloadNsService(id) {
   //   console.log('download')
@@ -484,27 +601,4 @@ changeUploadingSta(tab) {
   //   })
   // }
 
-  //合并并去重
-  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;
-  }
 }
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index fa875c0f..e652ff68 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -116,16 +116,17 @@
               <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
                     'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
                     'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
-              <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress>
+              <nz-progress *ngIf="data.status == 'processing' || data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress>
             </td>
             <td>
-              <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}"
+              <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}"
                 *ngIf="data.serviceDomain=='E2E Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i>
               <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
-              <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" 
-                *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i>
-              <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
-              <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'||data.status=='Scaling'}"  class="anticon anticon-delete" (click)="deleteModel(data)"></i>
+              <!-- <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" 
+                *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> -->
+              <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}"
+                *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+              <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'||data.status=='Scaling'}"  class="anticon anticon-delete" (click)="deleteModel(data)"></i>
             </td>
           </tr>
           <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 4e0770a3..24bb45c8 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -137,7 +137,7 @@ export class ServicesListComponent implements OnInit {
     
   }
   handleCancel(): void {
-    console.log('Button cancel clicked!');
+    // console.log('Button cancel clicked!');
     this.isVisible = false;
   }
 
@@ -168,6 +168,7 @@ export class ServicesListComponent implements OnInit {
           if(typeof item["childServiceInstances"] == "string"){
             item["childServiceInstances"] = JSON.parse(item["childServiceInstances"]);
           }
+
           item["childServiceInstances"] = item["childServiceInstances"].map((child)=>{
             if(typeof child == "string"){
               return JSON.parse(child);
@@ -175,11 +176,63 @@ export class ServicesListComponent implements OnInit {
               return child;
             }
           })
+
           if(item["serviceDomain"]=="Network Service"){
-            item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{
-              vnf["serviceDomain"] = "vnf";
-              return vnf;
-            });
+            if(item["vnfInfo"]){
+              item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{
+                vnf["serviceDomain"] = "vnf";
+                return vnf;
+              });
+            }else if(item["relationship-list"] && item["relationship-list"]["relationship"]){
+              item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate)=>{
+                return relate["related-to"]=="generic-vnf";
+              }).map((vnf)=>{
+                let vnfInfo = {vnfNsInstanceId:"",vnfInstanceId:"",vnfInstanceName:"",serviceDomain:"vnf"};
+                vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"];
+                vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid)=>{ return vnfid["relationship-key"]=="generic-vnf.vnf-id"})["relationship-value"];
+                vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname)=>{ return vnfname["property-key"]=="generic-vnf.vnf-name"})["property-value"];
+                return vnfInfo;
+              })
+            }
+          }
+
+          if(item["serviceStatus"]=="finished"){
+            item["status"] = "Active";
+          }else if(item["serviceStatus"]=="error"){
+            item["status"] = "error";
+          }else if(item["serviceStatus"]=="processing"){
+            item["status"] = "processing";
+            item["rate"] = 0;
+            if(item["serviceDomain"]=="Network Service"){
+              let updata = (prodata)=>{
+                item["rate"] = prodata.progress || item["rate"];
+                // >100 err
+                if(item["rate"] > 100){
+                  item["status"]=prodata.status;
+                }
+              }
+              let id = item["nsInstanceId"] || item["service-instance-id"];
+              let jobid = item["jobId"] || item["operationId"];
+              this.queryNsProgress(jobid,id,updata).then(()=>{
+                item["rate"] = 100;
+                item["status"] = "completed";
+              })
+            }else{
+              let updata = (prodata)=>{
+                item["rate"] = prodata.progress || item["rate"];
+                if(item["rate"] > 100){
+                  item["status"]=prodata.status;
+                }
+              }
+              let obj = {
+                serviceId:item["service-instance-id"],
+                operationId:item["operationId"]
+              }
+              this.queryProgress(obj,updata).then(()=>{
+                item["rate"] = 100;
+                item["status"] = "completed";
+              })
+            }
           }
           return item;
         })  
@@ -385,7 +438,10 @@ export class ServicesListComponent implements OnInit {
       }
       this.tableData = [newData,...this.tableData];
       let updata = (prodata)=>{
-        newData.rate = Math.floor(prodata.progress/3);   
+        newData.rate = Math.floor(prodata.progress/3);
+        if(newData["rate"] > 100){
+          newData["status"]=prodata.status;
+        }   
       }
       let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
       return this.queryProgress(queryParams,updata);
@@ -407,6 +463,9 @@ export class ServicesListComponent implements OnInit {
             allprogress[prodata.operationId] = prodata.progress;
             let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) 
             newData.rate = Math.floor(average/3) + stageNum;
+            if(newData["rate"] > 100){
+              newData["status"]=prodata.status;
+            }  
           }
           let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
           querypros.push(this.queryProgress(queryParams,updata))
@@ -438,6 +497,9 @@ export class ServicesListComponent implements OnInit {
             allprogress[prodata.operationId] = prodata.progress;
             let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) 
             newData.rate = Math.floor(average/3) + stageNum;
+            if(newData["rate"] > 100){
+              newData["status"]=prodata.status;
+            }  
           }
           let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
           querypros.push(this.queryProgress(queryParams,updata))
@@ -479,7 +541,7 @@ export class ServicesListComponent implements OnInit {
       console.log(data);
       newData = {  //
         'service-instance-id':data["serviceId"],
-        'service-instance-name':obj.name,
+        'service-instance-name':obj.service.name,
         serviceDomain:this.templateTypeSelected,
         childServiceInstances:[],
         status:"Creating",
@@ -489,6 +551,9 @@ export class ServicesListComponent implements OnInit {
       this.tableData = [newData,...this.tableData];
       let updata = (prodata)=>{
         newData.rate = prodata.progress;
+        if(newData["rate"] > 100){
+          newData["status"]=prodata.status;
+        }  
       }
       let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
       return this.queryProgress(queryParams,updata);
@@ -520,10 +585,6 @@ export class ServicesListComponent implements OnInit {
     this.myhttp.nsCreateInstance(obj.step1)
     .subscribe((data)=>{
       // console.log(data);
-      if(data.status == "FAILED"){
-        console.log("create ns service failed :" + JSON.stringify(data));
-        return false;
-      }
       newData = {  //
         'service-instance-id':data.nsInstanceId,
         'service-instance-name':obj.step1.nsName,
@@ -533,6 +594,11 @@ export class ServicesListComponent implements OnInit {
         rate:0,
       }
       this.tableData = [newData,...this.tableData];
+      if(data.status == "FAILED"){
+        console.log("create ns service failed :" + JSON.stringify(data));
+        newData.status = "failed";
+        return false;
+      }
       let createParams = "?ns_instance_id=" + data.nsInstanceId + 
                         "&customerId="+this.customerSelected.id + 
                         "&serviceType="+this.serviceTypeSelected.name + 
@@ -540,12 +606,18 @@ export class ServicesListComponent implements OnInit {
                         "&parentServiceInstanceId=";
       // step2
       this.createNsService(createParams,obj.step2).then((jobid)=>{
-
+        if(jobid == "failed"){
+          newData.status = "failed";
+          return false;
+        }
         let updata = (prodata)=>{
-          newData.rate = prodata.responseDescriptor.progress;
+          newData.rate = prodata.progress;
+          if(newData["rate"] > 100){
+            newData["status"]=prodata.status;
+          }  
         }
 
-        return this.queryNsProgress(jobid,updata);
+        return this.queryNsProgress(jobid,newData["service-instance-id"],updata);
       }).then((data)=>{
         console.log(data);
         newData.rate = 100;
@@ -581,6 +653,7 @@ export class ServicesListComponent implements OnInit {
         .subscribe((data)=>{
           if(data.status == "FAILED"){
             console.log("instantiate ns service failed :" + JSON.stringify(data));
+            res("failed");
             return false;
           }
           res(data.jobId);
@@ -597,6 +670,7 @@ export class ServicesListComponent implements OnInit {
       .subscribe((data)=>{
         if(data.status == "FAILED"){
           console.log("scale E2e service failed :" + JSON.stringify(data));
+          service.status = "failed";
           return false;
         }
         let obj = {
@@ -605,10 +679,13 @@ export class ServicesListComponent implements OnInit {
         }
         let updata = (prodata)=>{
           service.rate = prodata.progress;
+          if(service["rate"] > 100){
+            service["status"]=prodata.status;
+          }  
         }
         this.queryProgress(obj,updata).then(()=>{
           service.rate = 100;
-          service.status = "Active";
+          service.status = "completed";
         })
       })
   }
@@ -617,20 +694,25 @@ export class ServicesListComponent implements OnInit {
     console.log(service);
     service.rate = 0;
     service.status = "Healing";
-    this.myhttp.healNsService(service.nsInstanceId,requestBody)
+    let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"];
+    this.myhttp.healNsService(id,requestBody)
       .subscribe((data)=>{
         if(data.status == "FAILED"){
           console.log("heal nsvnf service failed :" + JSON.stringify(data));
+          service.status = "failed";
           return false;
         }
         let jobid = data.jobId;
         let updata = (prodata)=>{
-          service.rate = prodata.responseDescriptor.progress;
+          service.rate = prodata.progress;
+          if(service["rate"] > 100){
+            service["status"]=prodata.status;
+          }  
         }
-        this.queryNsProgress(jobid,updata).then((data1)=>{
+        this.queryNsProgress(jobid,null,updata).then((data1)=>{
           console.log(data1);
           service.rate = 100;
-          service.status = "Active";
+          service.status = "completed";
         });
       })
   }
@@ -653,6 +735,7 @@ export class ServicesListComponent implements OnInit {
         .subscribe((data)=>{
           if(data.status == "FAILED"){
             console.log("delete service failed :" + JSON.stringify(data));
+            service.status = "failed";
             return false;
           }
           let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
@@ -660,6 +743,9 @@ export class ServicesListComponent implements OnInit {
             allprogress[prodata.operationId] = prodata.progress;
             let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
             service["rate"]=average;
+            if(service["rate"] > 100){
+              service["status"]=prodata.status;
+            }  
           }
           querypros.push(this.queryProgress(obj,updata));
           res();
@@ -686,26 +772,34 @@ export class ServicesListComponent implements OnInit {
   deleteNsService(service){
     service.rate = 0;
     service.status = "Deleting";
-    let id = service.nsInstanceId;
+    let id = service.nsInstanceId || service["service-instance-id"];
     let requestBody = {
       terminationType : this.terminationType,
       gracefulTerminationTimeout : this.gracefulTerminationTimeout
     }
     this.stopNsService(id,requestBody).then((jobid)=>{
+      if(jobid == "failed"){
+        service.status = "failed";
+        return false;
+      }
       let updata = (prodata)=>{
-        service.rate = prodata.responseDescriptor.progress;
+        service.rate = prodata.progress;
+        if(service["rate"] > 100){
+          service["status"]=prodata.status;
+        }  
       }
-      return this.queryNsProgress(jobid,updata);
+      return this.queryNsProgress(jobid,null,updata);
     }).then(()=>{
       this.myhttp.nsDeleteInstance(id)
         .subscribe((data)=>{
           // console.log(data);
+          service.rate = 100;
+          service.status = "completed";
           if(data.status == "FAILED"){
             console.log("delete ns service failed :" + JSON.stringify(data));
+            service.status = "failed";
             return false;
           }
-          service.rate = 100;
-          service.status = "completed";
           let hasUndone = this.tableData.some((item)=>{
             return item.rate < 100;
           })
@@ -724,6 +818,7 @@ export class ServicesListComponent implements OnInit {
         .subscribe((data)=>{
           if(data.status == "FAILED"){
             console.log("stop ns service failed :" + JSON.stringify(data));
+            res("failed");
             return false;
           }
           res(data.jobId);
@@ -746,14 +841,28 @@ export class ServicesListComponent implements OnInit {
       //     "finishedAt": "" 
       //   }
       // }
+      let errorNums = 180;
       let requery = ()=>{
         this.myhttp.getProgress(obj)
           .subscribe((data)=>{
-            if(data.operationStatus.progress==undefined){
-              console.log(data);
+            if(data.status == "FAILED"){
+              callback({progress:255,status:"failed"});
+              return false;
+            }
+            if(data.operationStatus == null || data.operationStatus.progress==undefined){
+              // console.log(data);
+              errorNums--;
+              if(errorNums==0){
+                 callback({progress:255,status:"time over"});
+                 return false;
+              }
               setTimeout(()=>{
                 requery();
-              },5000)
+              },10000)
+              return false;
+            }
+            if(data.operationStatus.progress > 100){
+              callback({progress:255,status:"time over"});
               return false;
             }
             if(data.operationStatus.progress < 100){
@@ -781,7 +890,7 @@ export class ServicesListComponent implements OnInit {
     })
     return mypromise;
   }
-  queryNsProgress(jobid,callback){
+  queryNsProgress(jobid,id,callback){
     let mypromise = new Promise((res,rej)=>{
       // let data = {
       //   "jobId": "string",
@@ -802,20 +911,34 @@ export class ServicesListComponent implements OnInit {
       //     ]
       //   }
       // }
-      let requery = (responseId)=>{
-        this.myhttp.getNsProgress(jobid,responseId)
+      let errorNums = 180;
+      let requery = ()=>{
+        this.myhttp.getNsProgress(jobid,id)
           .subscribe((data)=>{
-            if(data.responseDescriptor.progress==undefined){
-              console.log(data);
+            if(data.status == "FAILED"){
+              callback({progress:255,status:"failed"});
+              return false;
+            }
+            if(data.responseDescriptor == null || data.responseDescriptor.progress==undefined){
+              // console.log(data);
+              errorNums--;
+              if(errorNums==0){
+                callback({progress:255,status:"time over"});
+                return false;
+              }
               setTimeout(()=>{
-                requery(data.responseDescriptor.responseId);
-              },5000)
+                requery();
+              },10000)
+              return false;
+            }
+            if(data.responseDescriptor.progress > 100){
+              callback({progress:255,status:"time over"});
               return false;
             }
             if(data.responseDescriptor.progress < 100){
-              callback(data);
+              callback(data.responseDescriptor);
               setTimeout(()=>{
-                requery(data.responseDescriptor.responseId);
+                requery();
               },5000)
             }else {
               res(data);
@@ -825,15 +948,15 @@ export class ServicesListComponent implements OnInit {
         //   console.log(data.responseDescriptor.progress)
         //   data.responseDescriptor.progress++;        
         //   if(data.responseDescriptor.progress<100){
-        //     callback(data);
-        //     requery(data.responseDescriptor.responseId)
+        //     callback(data.responseDescriptor);
+        //     requery()
         //   }else{
         //     callback(data);
         //     res(data)
         //   }
         // },100)
       }
-      requery(0);
+      requery();
     })
     return mypromise;
   }