feat: extract the deletion notification of the service-list page

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

6 files changed, 111 insertions, 132 deletions

diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.html b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
index acf6f62a..f20fd48c 100644
--- a/usecaseui-portal/src/app/shared/components/notification/notification.component.html
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
@@ -4,18 +4,47 @@
       <span class="ant-notification-notice-icon">
         <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
       </span>
-      <div class="ant-notification-notice-message">
-        {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}}&nbsp;
-        {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+      <!-- customer&onboard -->
+      <div *ngIf="!isServicesList">
+        <div class="ant-notification-notice-message">
+          {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}}&nbsp;
+          {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+        </div>
+        <div class="ant-notification-notice-description">
+          <div class="notificationlist">
+            <p *ngIf="notificationAttributes.action !== 'OnboardingState'">{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
+            <p *ngIf="notificationAttributes.action === 'OnboardingState'">{{notificationAttributes.title}} id:&nbsp;</p>
+            <span>{{ notificationAttributes.name }}</span>
+          </div>
+        </div>
+        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
       </div>
-      <div class="ant-notification-notice-description">
-        <div class="notificationlist">
-          <p *ngIf="notificationAttributes.action !== 'OnboardingState'">{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
-          <p *ngIf="notificationAttributes.action === 'OnboardingState'">{{notificationAttributes.title}} id:&nbsp;</p>
-          <span>{{ notificationAttributes.name }}</span>
+      <!-- services-list -->
+      <div *ngIf="isServicesList">
+        <div class="ant-notification-notice-message"
+          *ngIf="notificationAttributes.title === 'CCVPN' || notificationAttributes.title === 'SOTN'">
+          {{ notificationAttributes.title }} &nbsp; {{notificationAttributes.status === 'Success'? "i18nTextDefine_InstanceTeminatedSuccessfully" : (notificationAttributes.status === 'Failed'?"i18nTextDefine_InstanceTeminationFailed":"i18nTextDefine_InstanceTeminationStarting") | translate}}
+        </div>
+        <div class="ant-notification-notice-message"
+            *ngIf="notificationAttributes.title === 'E2E Service' || notificationAttributes.title === 'Network Service'">
+            {{notificationAttributes.title === 'E2E Service'?'E2E': 'NS'}} &nbsp;{{notificationAttributes.status === 'Success'? "i18nTextDefine_InstanceTeminatedSuccessfully" :(notificationAttributes.status === 'Failed'?"i18nTextDefine_InstanceTeminationFailed":"i18nTextDefine_InstanceTeminationStarting")| translate}}
+        </div>
+        <div class="ant-notification-notice-description">
+          <div class="notificationlist">
+            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+            <span>{{ notificationAttributes.name }} </span>
+          </div>
+          <div class="notificationlist">
+            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+            <span>{{ customerSelected.name }}</span>
+          </div>
+          <div class="notificationlist">
+            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+            <span>{{ notificationAttributes.title }}</span>
+          </div>
         </div>
+        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
       </div>
-      <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
     </div>
   </div>
 </ng-template>
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
index 00ccf90b..de0df083 100644
--- a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import { NzNotificationService } from 'ng-zorro-antd';
 
 @Component({
@@ -8,6 +8,8 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NotificationComponent implements OnInit {
   @ViewChild('notificationModel')notificationModel: any;
+  @Input()isServicesList: boolean;
+  @Input()customerSelected: object;
 
   notificationAttributes: {
     title: string,
@@ -23,17 +25,22 @@ export class NotificationComponent implements OnInit {
   }
 
   setNotification({ title, imgPath, action, status, name }):void{
-      this.notificationAttributes = { title, imgPath, action, status, name }
+    this.notificationAttributes = { title, imgPath, action, status, name };
   }
   notificationSuccess(title: string, action: string, name: string): void {
-    this.notification.remove()
+    this.notification.remove();
     this.setNotification({ title, imgPath: "assets/images/execute-success.png", action, status: 'Success', name })
     this.notification.template(this.notificationModel);
   }
   notificationFailed(title: string, action: string, name: string): void {
-    this.notification.remove()
+    this.notification.remove();
     this.setNotification({ title, imgPath: "assets/images/execute-faild.png", action, status: 'Failed', name })
     this.notification.template(this.notificationModel)
   }
+  notificationStart(title: string, action: string, name: string): void {
+    this.notification.remove();
+    this.setNotification({ title, imgPath: "assets/images/execute-inproess.png", action , status: 'instance temination is starting', name })
+    this.notification.template(this.notificationModel)
+  }
 
 }
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.html b/usecaseui-portal/src/app/views/management/customer/customer.component.html
index 0f033e47..63b0a5b8 100644
--- a/usecaseui-portal/src/app/views/management/customer/customer.component.html
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.html
@@ -114,5 +114,5 @@
       <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
     </div>
   </nz-modal>
-  <app-notification #notification></app-notification> 
+  <app-notification #notification [isServicesList]="false"></app-notification> 
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 374afe0d..c48d68f9 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -120,4 +120,4 @@
         </nz-table>
     </nz-spin>
 </div>
-<app-notification #notification></app-notification>
\ No newline at end of file
+<app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index a82c8a2b..a97c3766 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -66,7 +66,7 @@
             [serviceDetailName]="item.detailName">
         </app-top-card>
     </div>
-    <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
+    <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay === true}">
         <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
             [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize"
             [(nzPageIndex)]='pageIndex' [nzLoading]="loading" [nzSize]="'middle'"
@@ -224,7 +224,7 @@
         </nz-modal>
         <!-- <app-delete-modal *ngIf="deleteModalVisible" [deleteModalVisible]="deleteModalVisible"></app-delete-modal> -->
         <nz-modal nzWidth="428" [(nzVisible)]="deleteModalVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}}"
-            (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
+            (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templateDeleteSuccessFaild)"
             nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
             nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
             nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
@@ -256,46 +256,6 @@
                         [(ngModel)]="gracefulTerminationTimeout">
                 </div>
             </div>
-
-            <ng-template #templatedeletestarting>
-                <div class="ant-notification-notice-content">
-                    <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
-                        </span>
-                        <div class="ant-notification-notice-message"
-                            *ngIf="thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
-                            {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationStarting" |
-                            translate}}
-                        </div>
-                        <div class="ant-notification-notice-message"
-                            *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
-                            {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
-                        </div>
-                        <div class="ant-notification-notice-message"
-                            *ngIf="thisService['serviceDomain'] == 'Network Service'">NS &nbsp;
-                            {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
-                        </div>
-                        <div class="ant-notification-notice-description">
-                            <div class="notificationlist">
-                                <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
-                                <span>{{ thisService["service-instance-name"] ||
-                                    thisService["nsInstanceName"] }}
-                                </span>
-                            </div>
-                            <div class="notificationlist">
-                                <p> {{"i18nTextDefine_Customer" | translate}} :</p>
-                                <span>{{ customerSelected.name }}</span>
-                            </div>
-                            <div class="notificationlist">
-                                <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
-                                <span>{{ thisService["serviceDomain"] }}</span>
-                            </div>
-                        </div>
-                        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
-                    </div>
-                </div>
-            </ng-template>
         </nz-modal>
 
         <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
@@ -401,6 +361,7 @@
             </ng-template>
         </nz-modal>
 
+        <app-notification #notification [isServicesList]="true" [customerSelected]="customerSelected"></app-notification>
         <!-- add notification-->
         <ng-template #templateCreatestarting>
             <div class="ant-notification-notice-content">
@@ -409,7 +370,7 @@
                         <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
                     </span>
                     <div class="ant-notification-notice-message"
-                        *ngIf="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
+                        *ngIf="thisCreateService['serviceDomain'] === 'CCVPN' || thisService['serviceDomain'] === 'SOTN'">
                         {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationStarting" |
                         translate}}
                     </div>
@@ -517,6 +478,7 @@
                         *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">
                         NS &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
                     </div>
+                    
                     <div class="ant-notification-notice-message"
                         *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">
                         {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" |
@@ -678,7 +640,7 @@
     </div>
     <!--</div>-->
 </nz-layout>
-<!-- <div class="loading" *ngIf="loadingAnimateShow">
+<div class="loading" *ngIf="loadingAnimateShow">
     <img src="assets/images/loading-animate2.gif" alt="loading">
     <p>Please wating……</p>
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
index 5a1a1ab0..9de72233 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -13,7 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
+import { Component, OnInit, HostBinding, TemplateRef, ViewChild } from '@angular/core';
 import { ServiceListService } from '../../../core/services/serviceList.service';
 import { slideToRight } from '../../../shared/utils/animates';
 import { NzModalService } from 'ng-zorro-antd';
@@ -28,6 +28,7 @@ import { Observable } from 'rxjs/Rx';
 })
 export class ServicesListComponent implements OnInit {
     @HostBinding('@routerAnimate') routerAnimateState;
+    @ViewChild('notification') notification1: any;
 
     public width:number = document.documentElement.clientWidth;
 
@@ -516,7 +517,7 @@ export class ServicesListComponent implements OnInit {
         })
         if (service["serviceDomain"] === 'CCVPN' || service["serviceDomain"] === 'SOTN') {
             this.detailshow = true;
-            if (typeNum == 1) {
+            if (typeNum === 1) {
                 this.upDateShow = false;
             } else {
                 this.upDateShow = true;
@@ -538,25 +539,21 @@ export class ServicesListComponent implements OnInit {
         this.deleteModalVisible = true;
     }
 
-    deleteOk(templatedeletestarting, templateDeleteSuccessFaild) {
+    deleteOk(templateDeleteSuccessFaild) {
         this.deleteModalVisible = false;
         this.loadingAnimateShow = true;
-        if (this.thisService["serviceDomain"] == "Network Service") {
-            this.deleteNsService(this.thisService, templateDeleteSuccessFaild);
+        if (this.thisService["serviceDomain"] === "Network Service") {
+            this.deleteNsService(this.thisService);
         } else {
             this.deleteService(this.thisService, templateDeleteSuccessFaild);
         }
-        this.deleteNotification(templatedeletestarting);
+        this.notification1.notificationStart(this.thisService['serviceDomain'],'deleteStarting',this.thisService["service-instance-name"] ||this.thisService["nsInstanceName"])
     }
 
     deleteCancel() {
         this.deleteModalVisible = false;
     }
 
-    deleteNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
     deleteSuccessNotification(template: TemplateRef<{}>): void {
         this.notification.template(template);
     }
@@ -1072,7 +1069,7 @@ export class ServicesListComponent implements OnInit {
         })
     }
 
-    deleteNsService(service, templateDeleteSuccessFaild) {
+    deleteNsService(service) {
         service.rate = 0;
         service.status = "In Progress";
         service.tips = "";
@@ -1084,9 +1081,9 @@ export class ServicesListComponent implements OnInit {
             gracefulTerminationTimeout: this.gracefulTerminationTimeout
         }
         this.stopNsService(id, requestBody).then((jobid) => {
-            if (jobid == "Failed") {
+            if (jobid === "Failed") {
                 service.status = "Failed";
-                this.deleteSuccessNotification(templateDeleteSuccessFaild);
+                this.notification1.notificationFailed(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])
                 service.tips = this.listSortMasters["operationTypes"].find((its) => {
                     return its["sortCode"] == service.statusClass && its["language"] == this.language
                 })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
@@ -1095,55 +1092,47 @@ export class ServicesListComponent implements OnInit {
                 return false;
             }
             let updata = (prodata) => {
-                service.rate = prodata.progress;
+                service.rate = prodata.progress || 0;
+                if(service['rate'] > 100)service["status"] = prodata.status;
                 service.tips = this.listSortMasters["operationTypes"].find((its) => {
                     return its["sortCode"] == service.statusClass && its["language"] == this.language
-                })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%";
-                if (service["rate"] > 100) {
-                    service["status"] = prodata.status;
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + service["status"];
-                }
+                })["sortValue"] + (service["rate"] > 100? service["status"] : ('\xa0\xa0\xa0' + service.rate + "%"));
             }
-            return this.queryNsProgress(jobid, null, updata, operationType);
-        }).then(() => {
-            let paramsObj = {
-                "ns_instance_id":id
-            };
-            this.myhttp.nsDeleteInstance(paramsObj)
-                .subscribe((data) => {
-                    console.log(data);
-                    service.rate = 100;
-                    service.status = "Successful";
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2001 && its["language"] == this.language
-                    })["sortValue"];
-                    this.deleteSuccessNotification(templateDeleteSuccessFaild);
-                    if (data.status == "FAILED") {
-                        console.log("delete ns service Failed :" + JSON.stringify(data));
-                        service.status = "Failed";
-                        service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == service.statusClass && its["language"] == this.language
-                        })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                            return its["sortCode"] == 2002 && its["language"] == this.language
-                        })["sortValue"];
-                        this.deleteSuccessNotification(templateDeleteSuccessFaild);
-                        return false;
-                    }
-                    console.log(service, "deleteservice");
-                    console.log(this.thisService, "thisService");
-                    let hasUndone = this.tableData.some((item) => {
-                        return item.rate < 100;
+            this.queryNsProgress(jobid, null, updata, operationType).then(() => {
+                let paramsObj = {
+                    "ns_instance_id":id
+                };
+                this.myhttp.nsDeleteInstance(paramsObj)
+                    .subscribe((data) => {
+                        if(data.status == "SUCCESS"){
+                            service.rate = 100;
+                            service.status = "Successful";
+                            service.tips = this.listSortMasters["operationTypes"].find((its) => {
+                                return its["sortCode"] == service.statusClass && its["language"] == this.language
+                            })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
+                                return its["sortCode"] == 2001 && its["language"] == this.language
+                            })["sortValue"];
+                            this.notification1.notificationSuccess(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])
+                        }else {
+                            service.status = "Failed";
+                            service.tips = this.listSortMasters["operationTypes"].find((its) => {
+                                return its["sortCode"] == service.statusClass && its["language"] == this.language
+                            })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
+                                return its["sortCode"] == 2002 && its["language"] == this.language
+                            })["sortValue"];
+                            this.notification1.notificationFailed(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])
+                            return false;
+                        }
+                        let hasUndone = this.tableData.some((item) => {
+                            return item.rate < 100;
+                        })
+                        if (!hasUndone) {
+                            setTimeout(() => {
+                                this.getTableData();
+                            }, 1000)
+                        }
                     })
-                    if (!hasUndone) {
-                        setTimeout(() => {
-                            this.getTableData();
-                        }, 1000)
-                    }
-                })
+            })
         })
     }
 
@@ -1151,7 +1140,7 @@ export class ServicesListComponent implements OnInit {
         let paramsObj = {
             "ns_instance_id":id
         }
-        let mypromise = new Promise((res, rej) => {
+        return new Promise((res, rej) => {
             this.myhttp.stopNsService(paramsObj, obj)
                 .subscribe((data) => {
                     this.loadingAnimateShow = false;
@@ -1163,7 +1152,6 @@ export class ServicesListComponent implements OnInit {
                     res(data.jobId);
                 })
         })
-        return mypromise;
     }
 
     queryProgress(obj, callback) {
@@ -1201,7 +1189,7 @@ export class ServicesListComponent implements OnInit {
     }
 
     queryNsProgress(jobid, id, callback, operationType) {
-        let mypromise = new Promise((res, rej) => {
+        return new Promise((res, rej) => {
             let errorNums = 180;
             let paramsObj = {
                 "responseId":0,
@@ -1213,24 +1201,18 @@ export class ServicesListComponent implements OnInit {
                     .subscribe((data) => {
                         if (data.status == "FAILED") {
                             callback({ progress: 255, status: "Failed" });
-                            return false;
-                        }
-                        if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) {
+                        }else if (data.responseDescriptor === null || data.responseDescriptor.progress === undefined) {
                             errorNums--;
-                            if (errorNums == 0) {
+                            if (errorNums === 0) {
                                 callback({ progress: 255, status: "time over" });
                                 return false;
                             }
                             this.progressNsOutTimer = setTimeout(()=>{
                                 requeryNs();
                             },10000);
-                            return false;
-                        }
-                        if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") {
+                        }else if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status === "error") {
                             callback({ progress: 255, status: data.responseDescriptor.statusDescription });
-                            return false;
-                        }
-                        if (data.responseDescriptor.progress < 100) {
+                        }else if (data.responseDescriptor.progress < 100) {
                             callback(data.responseDescriptor);
                             this.progressingNsTimer = setTimeout(()=>{
                                 requeryNs();
@@ -1242,6 +1224,5 @@ export class ServicesListComponent implements OnInit {
             };
             requeryNs();
         });
-        return mypromise;
     }
 }