Service instance lifecycle management

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

2 files changed, 404 insertions, 67 deletions

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 2839e5b8..7fe4564d 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
@@ -74,7 +74,7 @@
         </div>
         <div *ngIf="templateTypeSelected == 'E2E Service'">
             <div class="select-list">
-                <span style="display:inline-block;width:70px;">Orchestrator: </span>
+                <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span>
                 <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear>
                     <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
                 </nz-select>
@@ -166,13 +166,13 @@
                             <li>
                                 <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
                                    class="anticon anticon-setting" (click)="scaleService(data)"></i>
-                                <span>scale</span>
+                                <span> {{"i18nTextDefine_Scale" | translate}} </span>
+                            </li>
+                            <li>
+                                <i [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                                   class="anticon anticon-cloud-upload-o" (click)="update(data)"></i>
+                                <span> {{"i18nTextDefine_Update" | translate}} </span>
                             </li>
-                           <li>
-                               <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                                  class="anticon anticon-cloud-upload-o" (click)="update(data)"></i>
-                               <span>update</span>
-                           </li>
                         </ul>
                         <!-- <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 == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
@@ -202,13 +202,17 @@
             </tbody>
         </nz-table>
 
-        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} " (nzOnCancel)="scaleCancel()"
-                  (nzOnOk)="scaleOk()" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
+                  (nzOnCancel)="scaleCancel()"
+                  (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
             <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
             <div class="question">
                 <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
-                <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
-                    thisService["vnfInstanceId"]}}</div>
+                <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] ||
+                    thisService["nsInstanceId"] ||
+                    thisService["vnfInstanceId"]}}
+                </div>
             </div>
             <div *ngFor="let item of e2e_nsData" style="margin-top: 20px">
                 <h3>{{ item.netWorkServiceName }}</h3>
@@ -236,20 +240,53 @@
                     </nz-select>
                 </div>
             </div>
+            <!--2019.05.09 add Scale notification-->
+            <ng-template #templatescalestarting >
+                <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">E2E &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>
+                </div>
+            </ng-template>
         </nz-modal>
 
-        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteCancel()"
-                  (nzOnOk)="deleteOk()"  nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+                  (nzOnCancel)="deleteCancel()"
+                  (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
+                  nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
+                  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
             <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureDelete" | translate}} </h3>
             <div class="question">
                 <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4>
-                <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
-                    thisService["nsInstanceId"] }}</div>
+                <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
+                    thisService["nsInstanceName"] }}
+                </div>
             </div>
             <div class="question">
                 <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
-                <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
-                    thisService["nsInstanceName"] }}</div>
+                <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
+                    thisService["nsInstanceId"] }}
+                </div>
             </div>
             <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
                 <div class="question">
@@ -265,10 +302,42 @@
                            [(ngModel)]="gracefulTerminationTimeout">
                 </div>
             </div>
+            <!--2019.05.09 add delete notification-->
+            <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>
+                </div>
+            </ng-template>
         </nz-modal>
 
-        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " (nzOnCancel)="healCancel()"
-                  (nzOnOk)="healOk()" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
+                  (nzOnCancel)="healCancel()"
+                  (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
             <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureHeal" | translate}} </h3>
             <div class="heal-question">
                 <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </p>
@@ -331,9 +400,217 @@
                     </nz-select>
                 </div>
             </div>
+            <!--2019.05.09 add heal notification-->
+            <ng-template #templatehealstarting >
+                <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">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>
+                </div>
+            </ng-template>
         </nz-modal>
-    </div>
 
+        <!-- add notification-->
+        <ng-template #templateCreatestarting >
+            <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="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">{{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationStarting" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E &nbsp; {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS &nbsp; {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisCreateService["service-instance-name"] }}
+                                </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected2.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisCreateService['serviceDomain'] }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template #templateCreateSuccessFaild >
+            <div class="ant-notification-notice-content">
+                <div class="ant-notification-notice-with-icon">
+                        <span class="ant-notification-notice-icon">
+                            <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisCreateService.status == 'Successful'">
+                            <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisCreateService.status == 'Failed'">
+                        </span>
+                    <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Successful'">{{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">E2E &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">NS &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">{{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">E2E &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">NS &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisCreateService["service-instance-name"] ||
+                                    thisCreateService["nsInstanceName"] }}
+                                </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected2.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisCreateService["serviceDomain"] }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template #templateDeleteSuccessFaild >
+            <div class="ant-notification-notice-content">
+                <div class="ant-notification-notice-with-icon">
+                        <span class="ant-notification-notice-icon">
+                            <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+                            <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+                        </span>
+                    <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Successful'">{{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">E2E &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}</div>
+                    <div class="ant-notification-notice-message" *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" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">NS &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | 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>
+            </div>
+        </ng-template>
+        <ng-template #templateScaleSuccessFaild >
+            <div class="ant-notification-notice-content">
+                <div class="ant-notification-notice-with-icon">
+                        <span class="ant-notification-notice-icon">
+                            <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+                            <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+                        </span>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">E2E &nbsp; {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E &nbsp; {{"i18nTextDefine_InstanceScaleFailed" | 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>
+            </div>
+        </ng-template>
+        <ng-template #templatehealSuccessFaild >
+            <div class="ant-notification-notice-content">
+                <div class="ant-notification-notice-with-icon">
+                          <span class="ant-notification-notice-icon">
+                            <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+                            <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+                        </span>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">NS &nbsp; {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS &nbsp; {{"i18nTextDefine_InstanceHealingFailed" | 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>
+            </div>
+        </ng-template>
+        <ng-template #templateUpdateSuccessFaild >
+            <div class="ant-notification-notice-content">
+                <div class="ant-notification-notice-with-icon">
+                    <span class="ant-notification-notice-icon">
+                            <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+                            <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+                        </span>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">CCVPN &nbsp; {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}</div>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN &nbsp; {{"i18nTextDefine_InstanceUpdateFailed" | 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>
+            </div>
+        </ng-template>
+    </div>
     <div class="detailComponent" *ngIf="detailshow">
         <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData"
                           (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail>
@@ -345,14 +622,14 @@
     <div class="createComponent" *ngIf="createshow">
         <app-ccvpn-creation
                 [createParams]="createData"
-                (closeCreate)="closeCreate($event)">
+                (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
         </app-ccvpn-creation>
     </div>
     <div class="createComponent" *ngIf="createshow2">
         <app-e2e-creation
                 [createParams]="createData"
-                (nsCloseCreate)="nsCloseCreate($event)"
-                (e2eCloseCreate)="e2eCloseCreate($event)">
+                (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"
+                (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
         </app-e2e-creation>
     </div>
     <!--</div>-->
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 85ebb8fb..088bc7bc 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
@@ -13,10 +13,11 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { MyhttpService } from '../../myhttp.service';
-import { slideToRight } from '../../animates';
-import { NzModalService } from 'ng-zorro-antd';
+import {Component, OnInit, HostBinding,TemplateRef } from '@angular/core';
+import {MyhttpService} from '../../myhttp.service';
+import {slideToRight} from '../../animates';
+import {NzModalService} from 'ng-zorro-antd';
+import { NzNotificationService } from 'ng-zorro-antd';
 
 @Component({
   selector: 'app-services-list',
@@ -26,8 +27,8 @@ import { NzModalService } from 'ng-zorro-antd';
 })
 export class ServicesListComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
-  constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
-
+    constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
+    }
 
   ngOnInit() {
     this.getallCustomers();
@@ -50,7 +51,6 @@ export class ServicesListComponent implements OnInit {
   listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
   language="en";
     iconMore=false;
-    maskShow=false;
     serviceMunber = [
         {
             "serviceDomain": "E2E",
@@ -384,7 +384,8 @@ export class ServicesListComponent implements OnInit {
         this.e2e_nsData = data;
       })
   }
-  scaleOk(){
+
+    scaleOk(templatescalestarting,templateScaleSuccessFaild) {
     this.scaleModelVisible = false;
     let requestBody = {
       "service": {
@@ -406,12 +407,23 @@ export class ServicesListComponent implements OnInit {
         })
       }
     }
-    this.scaleE2eService(this.thisService,requestBody);
+        this.scaleE2eService(this.thisService, requestBody,templateScaleSuccessFaild);
+        this.scaleNotification(templatescalestarting);
   }
   scaleCancel(){
     this.scaleModelVisible = false;
   }
 
+    scaleNotification(template: TemplateRef<{}>): void {
+        console.log(template,"scaleNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
+    scaleSuccessNotification(template: TemplateRef<{}>): void {
+        console.log(template,"scaleNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
   updataService(){
     console.log("updataService!");
   }
@@ -458,7 +470,6 @@ export class ServicesListComponent implements OnInit {
     // console.log(service);
     this.thisService = service;
     this.healModelVisible = true;
-        this.maskShow = true;
     if(service.serviceDomain == "vnf"){
       this.vnfParams.vnfInstanceId = service.vnfInstanceId;
       this.myhttp.getVnfInfo(service.vnfInstanceId)
@@ -469,9 +480,8 @@ export class ServicesListComponent implements OnInit {
         })
     }
   }
-  healOk(){
+  healOk(templatehealstarting,templatehealSuccessFaild){
     this.healModelVisible = false;
-        this.maskShow = false;
     // nsParams
     this.nsParams.actionsHealing = this.healActions.map((item)=>{return item.value});
     let additional = {};
@@ -485,13 +495,23 @@ export class ServicesListComponent implements OnInit {
 
     let requestBody = this.thisService["serviceDomain"] == "Network Service" ? {healNsData:this.nsParams} : {healVnfData:this.vnfParams};
     console.log(requestBody);
-    this.healNsVnfService(this.thisService,requestBody);
-  }
-  healCancel(){
-    this.healModelVisible = false;
-        this.maskShow = false;
+        this.healNsVnfService(this.thisService, requestBody,templatehealSuccessFaild);
+        this.healNotification(templatehealstarting);
   }
+    healCancel() {
+        this.healModelVisible = false;
+    }
 
+    healNotification(template: TemplateRef<{}>): void {
+        console.log(template,"healNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
+    healSuccessNotification(template: TemplateRef<{}>): void {
+        console.log(template,"healNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
   // show detail
   detailshow = false;
     detailshow2 = false;
@@ -526,26 +546,46 @@ export class ServicesListComponent implements OnInit {
   deleteModel(service){
     this.thisService = service;
     this.deleteModelVisible = true;
-        this.maskShow = true;
   }
-  deleteOk(){
-    this.deleteModelVisible = false;
-        this.maskShow = false;
-    if(this.thisService["serviceDomain"] == "Network Service"){
-      this.deleteNsService(this.thisService);
-    }else{
-      this.deleteService(this.thisService);
+deleteOk(templatedeletestarting,templateDeleteSuccessFaild) {
+        this.deleteModelVisible = false;
+        if (this.thisService["serviceDomain"] == "Network Service") {
+            this.deleteNsService(this.thisService,templateDeleteSuccessFaild);
+        } else {
+            this.deleteService(this.thisService,templateDeleteSuccessFaild);
+        }
+        this.deleteNotification(templatedeletestarting);
     }
-  }
 
-  deleteCancel(){
-    this.deleteModelVisible = false;
-        this.maskShow = false;
-  }
+    deleteCancel() {
+        this.deleteModelVisible = false;
+    }
+
+    deleteNotification(template: TemplateRef<{}>): void {
+        console.log(template,"deleteNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
+    deleteSuccessNotification(template: TemplateRef<{}>): void {
+        console.log(template,"deleteSuccessNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
 
+    createNotification(template: TemplateRef<{}>): void {
+        console.log(template,"deleteNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
+    createSuccessNotification(template: TemplateRef<{}>): void {
+        console.log(template,"deleteSuccessNotification show");
+        this.notification.template(template);
+        // this.notification.template(template,{ nzDuration: 0 });
+    }
   //ccvpn sotn createservice
   parentServiceInstanceId="";
-  closeCreate(obj){
+    thisCreateService = {};
+  closeCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
     if(!obj){
       this.createshow = false; //close
       this.listDisplay = false; //close
@@ -556,10 +596,10 @@ export class ServicesListComponent implements OnInit {
     console.log(obj);
     let newData; //Newly created service data for the main table
 
-        let createParams = "?customerId=" + this.customerSelected.id +
+        let createParams = "?customerId=" + this.customerSelected2.id +
             "&serviceType=" + this.serviceTypeSelected2.name +
             "&serviceDomain=" + this.templateTypeSelected;
-        this.createService(obj, createParams).then((data) => {
+        this.createService(obj, createParams,templateCreatestarting,templateCreateSuccessFaild).then((data) => {
             console.log(data)
             newData = {  //Newly created service data in the main form
                 'service-instance-id': data["serviceId"],
@@ -571,8 +611,9 @@ export class ServicesListComponent implements OnInit {
                 statusClass: 1001,
                 tips: ""
             };
+            this.thisCreateService = newData;
             this.tableData = [newData, ...this.tableData];
-
+            this.createNotification(templateCreatestarting);
             let updata = (prodata) => {
                 newData.rate = prodata.progress;
                 newData.tips = this.listSortMasters["operationTypes"].find((its) => {
@@ -591,6 +632,7 @@ export class ServicesListComponent implements OnInit {
             console.log(data);
             newData.rate = 100;
             newData.status = "Successful";
+            this.createSuccessNotification(templateCreateSuccessFaild);
             newData.tips = this.listSortMasters["operationTypes"].find((its) => {
                 return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
             })["sortValue"] + '\xa0\xa0\xa0' + newData["status"];
@@ -605,7 +647,7 @@ export class ServicesListComponent implements OnInit {
         })
     }
 
-  e2eCloseCreate(obj){
+e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
     if(!obj){
       this.createshow2 = false; //
       this.listDisplay = false; //
@@ -621,7 +663,7 @@ export class ServicesListComponent implements OnInit {
                         "&parentServiceInstanceId="+
                         "&uuid="+obj.service.serviceUuid+
                         "&invariantUuuid="+obj.service.serviceInvariantUuid;
-    this.createService(obj,createParams).then((data)=>{
+        this.createService(obj, createParams,templateCreatestarting,templateCreateSuccessFaild).then((data) => {
       console.log(data);
       newData = {  //
         'service-instance-id':data["serviceId"],
@@ -632,8 +674,9 @@ export class ServicesListComponent implements OnInit {
         rate:0,
         tips:""
       }
-
+            this.thisCreateService = newData;
       this.tableData = [newData,...this.tableData];
+            this.createNotification(templateCreatestarting);
       let updata = (prodata)=>{
         newData.rate = prodata.progress;
         newData.tips = newData["status"]+newData.rate+"%";
@@ -648,6 +691,7 @@ export class ServicesListComponent implements OnInit {
       console.log(data);
       newData.rate = 100;
       newData.status = "Successful";
+       this.createSuccessNotification(templateCreateSuccessFaild);
       newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"];
       let hasUndone = this.tableData.some((item)=>{
         return item.rate < 100;
@@ -661,7 +705,7 @@ export class ServicesListComponent implements OnInit {
 
   }
 
-  nsCloseCreate(obj){
+    nsCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
     if(!obj){
       this.createshow2 = false; //
       this.listDisplay = false; //
@@ -684,20 +728,24 @@ export class ServicesListComponent implements OnInit {
         rate:0,
         tips:""
       }
+                this.thisCreateService = newData;
       this.tableData = [newData,...this.tableData];
+                this.createNotification(templateCreatestarting);
       if(data.status == "FAILED"){
+              this.createSuccessNotification(templateCreateSuccessFaild);
         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 +
+                    "&customerId=" + this.customerSelected2.id +
                         "&serviceType="+this.serviceTypeSelected2.name +
                         "&serviceDomain="+ this.templateTypeSelected +
                         "&parentServiceInstanceId=";
       // step2
       this.createNsService(createParams,obj.step2).then((jobid)=>{
         if(jobid == "failed"){
+            this.createSuccessNotification(templateCreateSuccessFaild);
           newData.status = "failed";
           return false;
         }
@@ -716,6 +764,7 @@ export class ServicesListComponent implements OnInit {
         console.log(data);
         newData.rate = 100;
         newData.status = "Successful";
+	this.createSuccessNotification(templateCreateSuccessFaild);
         newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"];
         let hasUndone = this.tableData.some((item)=>{
           return item.rate < 100;
@@ -729,11 +778,12 @@ export class ServicesListComponent implements OnInit {
     })
   }
 
-  createService(requestBody,createParams){
+    createService(requestBody, createParams,templateCreatestarting,templateCreateSuccessFaild) {
     let mypromise = new Promise((res,rej)=>{
       this.myhttp.createInstance(requestBody,createParams)
         .subscribe((data)=>{
           if(data.status == "FAILED"){
+                        this.createSuccessNotification(templateCreateSuccessFaild);
             console.log("create e2e service failed :" + JSON.stringify(data));
             return false;
           }
@@ -757,7 +807,7 @@ export class ServicesListComponent implements OnInit {
     return mypromise;
   }
 
-  scaleE2eService(service,requestBody){
+    scaleE2eService(service, requestBody,templateScaleSuccessFaild) {
     let id = service["service-instance-id"];
     service.rate = 0;
     service.status = "In Progress";
@@ -768,6 +818,7 @@ export class ServicesListComponent implements OnInit {
         if(data.status == "FAILED"){
           console.log("scale E2e service failed :" + JSON.stringify(data));
           service.status = "failed";
+                    this.scaleSuccessNotification(templateScaleSuccessFaild);
           return false;
         }
         let obj = {
@@ -787,11 +838,12 @@ export class ServicesListComponent implements OnInit {
           service.rate = 100;
           service.status = "Successful";
                     service.tips = "Scaling"+ '\xa0\xa0\xa0' + service["status"];
+                    this.scaleSuccessNotification(templateScaleSuccessFaild);
         })
       })
   }
 
-  healNsVnfService(service,requestBody){
+    healNsVnfService(service, requestBody,templatehealSuccessFaild) {
     console.log(service);
     service.rate = 0;
     service.status = "In Progress";
@@ -803,6 +855,7 @@ export class ServicesListComponent implements OnInit {
         if(data.status == "FAILED"){
           console.log("heal nsvnf service failed :" + JSON.stringify(data));
           service.status = "failed";
+                    this.healSuccessNotification(templatehealSuccessFaild);
           return false;
         }
         let jobid = data.jobId;
@@ -821,11 +874,12 @@ export class ServicesListComponent implements OnInit {
           service.rate = 100;
           service.status = "Successful";
           service.tips = "Healing" + service["status"];
+                    this.healSuccessNotification(templatehealSuccessFaild);
         });
       })
   }
 
-  deleteService(service){
+    deleteService(service,templateDeleteSuccessFaild) {
     let allprogress = {};  //
     let querypros = [];  //
     service.rate = 0;
@@ -871,6 +925,7 @@ export class ServicesListComponent implements OnInit {
         service.rate = 100;
         service.status = "Successful";
         service.tips = "Deleting" + service.status;
+                this.deleteSuccessNotification(templateDeleteSuccessFaild);
         let hasUndone = this.tableData.some((item)=>{
           return item.rate < 100;
         })
@@ -882,7 +937,7 @@ export class ServicesListComponent implements OnInit {
       })
     })
   }
-  deleteNsService(service){
+    deleteNsService(service,templateDeleteSuccessFaild) {
     service.rate = 0;
     service.status = "In Progress";
     service.tips = "Deleting";
@@ -915,12 +970,17 @@ export class ServicesListComponent implements OnInit {
           service.rate = 100;
           service.status = "Successful";
           service.tips = "Deleting" +  service["status"];
+                    this.deleteSuccessNotification(templateDeleteSuccessFaild);
           if(data.status == "FAILED"){
             console.log("delete ns service failed :" + JSON.stringify(data));
             service.status = "failed";
                         service.tips = "Deleting" +'\xa0\xa0\xa0' + service["status"];
+                        this.deleteSuccessNotification(templateDeleteSuccessFaild);
             return false;
           }
+                    console.log(service,"deleteservice");
+                    console.log(this.thisService,"thisService");
+                    this.deleteSuccessNotification(templateDeleteSuccessFaild);
           let hasUndone = this.tableData.some((item)=>{
             return item.rate < 100;
           })