delete nsService function

Change-Id: Ied7b698ee77084e57fc2b7f36aa4aef1b47ed291
Issue-ID: USECASEUI-161
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

4 files changed, 173 insertions, 141 deletions

diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css
index 63426fd9..1f9d051a 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.css
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css
@@ -96,6 +96,14 @@ hr {
   font-size: 12px;
   color: green;
 }
+.list nz-table tbody td span.stopping {
+  font-size: 12px;
+  color: purple;
+}
+.list nz-table tbody td span.healing {
+  font-size: 12px;
+  color: orangered;
+}
 .list nz-table tbody td i.anticon {
   cursor: pointer;
   font-size: 18px;
@@ -104,34 +112,14 @@ hr {
 .list nz-table tbody td i.anticon:hover {
   color: #147dc2;
 }
-.list nz-table tbody tr.childtr td {
-  font-size: 12px;
-  color: #147dc2;
-}
-.list nz-table.table2 tr td {
-  padding: 10px 8px;
-}
-.list nz-table.table2 tr td span.action {
-  color: #3fa8eb;
-  cursor: pointer;
-  padding: 5px;
-}
-.list nz-table.table2 tr td span.cannotclick {
+.list nz-table tbody td .cannotclick {
   pointer-events: none;
   color: #aaa;
   opacity: 0.6;
 }
-.list nz-table.table2 tr td span.deleting {
-  color: red;
-  font-size: 12px;
-  display: block;
-  height: 12px;
-}
-.list nz-table.table2 tr td span.creating {
-  color: #3fa8eb;
+.list nz-table tbody tr.childtr td {
   font-size: 12px;
-  display: block;
-  height: 12px;
+  color: #147dc2;
 }
 .detailComponent {
   position: absolute;
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 c18d294a..cfb81703 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
@@ -37,7 +37,7 @@
     </ul>
   </nz-dropdown>
 
-  <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+  <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
   <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
     <span style="display:inline-block;width:70px;">Service: </span>
     <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()">
@@ -93,11 +93,11 @@
       [nzScroll]="{ y: '58vh' }"
       (nzPageIndexChange)="searchData()"
       (nzPageSizeChange)="searchData(true)">
-      <thead (nzSortChange)="sort($event)" nzSingleSort>
+      <thead>
         <tr>
           <th nzWidth="5%">NO</th>
           <th nzWidth="5%"></th>
-          <th nzWidth="20%" nzShowSort nzSortKey="name">Service Instance Id</th>
+          <th nzWidth="20%">Service Instance Id</th>
           <th nzWidth="20%">Name</th>
           <th nzWidth="15%">Type</th>
           <th nzWidth="20%">Status</th>
@@ -114,33 +114,48 @@
             <td>{{data.serviceDomain}}</td>
             <td>
               <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'}">{{data.status || "Active"}}</span>
-              <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress>
-              <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> -->
+                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
+                    'stopping':data.status=='Stopping','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
+              <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Stopping' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress>
             </td>
             <td>
               <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network 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 *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i>
               <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i>
               <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
-              <i class="anticon anticon-delete" (click)="deleteService(data)"></i>
-              <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
-              (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
-            <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
-              (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> -->
+              <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"  class="anticon anticon-delete" (click)="deleteModel(data)"></i>
             </td>
           </tr>
           <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
             <td></td>
             <td></td>
-            <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
-            <td>{{data["service-instance-name"] || data.nsName}}</td>
-            <td colspan="3">{{item.serviceDomain}}</td>
+            <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
+            <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
+            <td>{{item.serviceDomain}}</td>
+            <td>
+              <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Active"}}</span>
+              <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
+            </td>
+            <td>
+              <i *ngIf="item.serviceDomain=='vnf'" [ngClass]="{'cannotclick':item.status=='Healing'}"  class="anticon anticon-reload" (click)="restartService(item)"></i>
+            </td>
           </tr>
         </ng-template>
       </tbody>
     </nz-table>
+    <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()">
+      <h3><i class="anticon anticon-question-circle" style="color:red;"></i>Are you sure delete this instance?</h3>
+      Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] }}</b>
+      <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+        <span style="display:inline-block;width:50%;">terminationType:</span>
+        <nz-select style="width: 165px;" [(ngModel)]="terminationType" >
+          <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
+          <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
+        </nz-select>
+        <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
+        <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input [(ngModel)]="gracefulTerminationTimeout">
+      </div>
+    </nz-modal>
 </div>
 
 <div class="detailComponent" *ngIf="detailshow">
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index 8f83cc9d..3d9962d2 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -99,6 +99,14 @@ hr {
                     font-size: 12px;
                     color: green;
                 }
+                span.stopping {
+                    font-size: 12px;
+                    color: purple;
+                }
+                span.healing {
+                    font-size: 12px;
+                    color: orangered;
+                }
                 i.anticon {
                     cursor: pointer;
                     font-size: 18px;
@@ -107,6 +115,11 @@ hr {
                         color: #147dc2;
                     }
                 }
+                .cannotclick {
+                    pointer-events: none;
+                    color: #aaa;
+                    opacity: 0.6;
+                }
             }
             tr.childtr {
                 td {
@@ -118,31 +131,6 @@ hr {
     }
 }
 
-.list nz-table.table2 tr td {
-    padding: 10px 8px;
-}
-.list nz-table.table2 tr td span.action {
-    color: #3fa8eb;
-    cursor: pointer;
-    padding: 5px;
-}
-.list nz-table.table2 tr td span.cannotclick {
-    pointer-events: none;
-    color: #aaa;
-    opacity: 0.6;
-}
-.list nz-table.table2 tr td span.deleting {
-    color: red;
-    font-size: 12px;
-    display: block;
-    height: 12px;
-}
-.list nz-table.table2 tr td span.creating {
-    color: #3fa8eb;
-    font-size: 12px;
-    display: block;
-    height: 12px;
-}
 
 .detailComponent {
     position: absolute;
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 9ea28d4b..aecc6f2c 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
@@ -68,7 +68,7 @@ export class ServicesListComponent implements OnInit {
 
   // Create modal box 2 (dialog box) create -------------------------------
   isVisible = false;
-  showModal(): void {
+  createModal(): void {
     this.isVisible = true;
     this.getAlltemplates();
   }
@@ -103,13 +103,12 @@ export class ServicesListComponent implements OnInit {
   }
 
 
-
   // 
   createshow = false;
   createshow2 = false;
   createData:Object={};
   handleOk(): void {
-    console.log('Button ok clicked!');
+    // console.log('Button ok clicked!');
     this.isVisible = false;
 
     if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){
@@ -135,34 +134,35 @@ export class ServicesListComponent implements OnInit {
   pageSize = 10;
   total = 100;
   loading = false;
-  sortName = null;
-  sortValue = null;
+
   getTableData(){
     // params: customer serviceType pageIndex，pageSize，sortName
     let paramsObj = {
       customer:this.customerSelected.id,
       serviceType:this.serviceTypeSelected.name,
       pageIndex:this.pageIndex,
-      pageSize:this.pageSize,
-      serviceIdSort:this.sortValue
+      pageSize:this.pageSize
     }
     this.myhttp.getServicesTableData(paramsObj)
       .subscribe((data)=>{
         console.log(data);
         this.total = data.body.total;
-        this.tableData = data.body.tableList;
+        this.tableData = data.body.tableList.map((item)=>{
+          if(item["serviceDomain"]=="Network Service"){
+            item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{
+              vnf["serviceDomain"] = "vnf";
+              return vnf;
+            });
+          }
+          return item;
+        })  
       },(err)=>{
         console.log(err);
       })
   }
-  sort(sort: { key: string, value: string }): void {
-    console.log(sort);
-    this.sortName = sort.key;
-    this.sortValue = sort.value;
-    this.getTableData();
-  }
+
   searchData(reset:boolean = false){
-    console.log(reset)
+    // console.log(reset)
     this.getTableData();
   }
 
@@ -198,68 +198,27 @@ export class ServicesListComponent implements OnInit {
     this.detailData = service;
     console.log(service);
   }
-  // deleteService(){
-  //   console.log("deleteService!");
-  // }
 
-  
-  // 
-  deleteService(service){
-    this.modalService.confirm({
-      nzTitle     : 'Are you sure delete this instance?',
-      nzContent   : `Instance ID: <b class="deleteModelContent"> ${service["service-instance-id"]}</b>`,
-      nzOkText    : 'Yes',
-      nzOkType    : 'danger',
-      nzOnOk      : () => {
-        console.log(service);
-        let allprogress = {};  //
-        let querypros = [];  //
-        service.rate = 0;
-        service.status = "Deleting";
-
-        service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]})
-
-        let deletePros = service["childServiceInstances"].map((item)=>{
-          let params = {
-            globalSubscriberId:this.customerSelected.id,
-            serviceType:this.serviceTypeSelected,
-            serviceInstanceId:item["service-instance-id"]
-          }
-          return new Promise((res,rej)=>{
-            this.myhttp.deleteInstance(params)
-            .subscribe((data)=>{
-              let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
-              let updata = (prodata)=>{
-                allprogress[prodata.operationId] = prodata.progress;
-                let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
-                service["rate"]=average;
-              }
-              querypros.push(this.queryProgress(obj,updata));
-              res();
-            })
-          })  
-        })
-        console.log(deletePros)
-        Promise.all(deletePros).then(()=>{
-          Promise.all(querypros).then((data)=>{
-            console.log(data);
-            service.rate = 100;
-            service.status = "completed";
-            let hasUndone = this.tableData.some((item)=>{
-              return item.rate < 100;
-            })
-            if(!hasUndone){
-              setTimeout(()=>{
-                this.getTableData();
-              },1000)
-            }
-          })
-        })
+  thisService = {};
+  deleteModelVisible = false;
+  terminationType = "graceful";
+  gracefulTerminationTimeout = 120;
+  // delete Model show
+  deleteModel(service){
+    this.thisService = service;
+    this.deleteModelVisible = true;
+  }
+  deleteOk(){
+    this.deleteModelVisible = false;
+    if(this.thisService["serviceDomain"] == "Network Service"){
+      this.deleteNsService(this.thisService);
+    }else{
+      this.deleteService(this.thisService);
+    }
+  }
 
-      },
-      nzCancelText: 'No',
-      nzOnCancel  : () => console.log('Cancel')
-    });
+  deleteCancel(){
+    this.deleteModelVisible = false;
   }
 
   //ccvpn sotn createservice
@@ -461,8 +420,6 @@ export class ServicesListComponent implements OnInit {
           },1000)
         }
       })
-
-
     })
   }
 
@@ -485,7 +442,91 @@ export class ServicesListComponent implements OnInit {
     })
     return mypromise;
   }
- 
+
+  deleteService(service){
+    let allprogress = {};  //
+    let querypros = [];  //
+    service.rate = 0;
+    service.status = "Deleting";
+
+    service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]});
+    let deletePros = service["childServiceInstances"].map((item)=>{
+      let params = {
+        globalSubscriberId:this.customerSelected.id,
+        serviceType:this.serviceTypeSelected,
+        serviceInstanceId:item["service-instance-id"]
+      }
+      return new Promise((res,rej)=>{
+        this.myhttp.deleteInstance(params)
+        .subscribe((data)=>{
+          let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId}
+          let updata = (prodata)=>{
+            allprogress[prodata.operationId] = prodata.progress;
+            let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
+            service["rate"]=average;
+          }
+          querypros.push(this.queryProgress(obj,updata));
+          res();
+        })
+      })  
+    })
+    // console.log(deletePros)
+    Promise.all(deletePros).then(()=>{
+      Promise.all(querypros).then((data)=>{
+        console.log(data);
+        service.rate = 100;
+        service.status = "completed";
+        let hasUndone = this.tableData.some((item)=>{
+          return item.rate < 100;
+        })
+        if(!hasUndone){
+          setTimeout(()=>{
+            this.getTableData();
+          },1000)
+        }
+      })
+    })
+  }
+  deleteNsService(service){
+    service.rate = 0;
+    service.status = "Deleting";
+    let id = service.nsInstanceId;
+    let requestBody = {
+      terminationType : this.terminationType,
+      gracefulTerminationTimeout : this.gracefulTerminationTimeout
+    }
+    this.stopNsService(id,requestBody).then((jobid)=>{
+      let updata = (prodata)=>{
+        service.rate = prodata.responseDescriptor.progress;
+      }
+      return this.queryNsProgress(jobid,updata);
+    }).then(()=>{
+      this.myhttp.nsDeleteInstance(id)
+        .subscribe((data)=>{
+          console.log(data);
+          service.rate = 100;
+          service.status = "completed";
+          let hasUndone = this.tableData.some((item)=>{
+            return item.rate < 100;
+          })
+          if(!hasUndone){
+            setTimeout(()=>{
+              this.getTableData();
+            },1000)
+          }
+        })
+    })
+  }
+
+  stopNsService(id,obj){
+    let mypromise = new Promise((res,rej)=>{
+      this.myhttp.stopNsService(id,obj)
+        .subscribe((data)=>{
+          res(data.jobId);
+        })
+    })
+    return mypromise;
+  }
   queryProgress(obj,callback){
     let mypromise = new Promise((res,rej)=>{
       // let data = {