fix:Optimization code, for services-list page

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

1 files changed, 187 insertions, 88 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 1370f4bf..127d9ad9 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
@@ -40,18 +40,24 @@
     <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
             class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> {{"i18nTextDefine_Create" | translate}} </span>
     </button>
-    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
+              (nzOnCancel)="handleCancel()"
+              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
+              nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+              nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
         <div class="select-list">
             <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear (ngModelChange)="customerChange()">
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear
+                       (ngModelChange)="customerChange()">
                 <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option>
             </nz-select>
         </div>
         <div class="select-list">
             <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear (ngModelChange)="serviceTypeChange()">
-                <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option>
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear
+                       (ngModelChange)="serviceTypeChange()">
+                <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name"
+                           [nzLabel]="item.name"></nz-option>
             </nz-select>
         </div>
         <div class="select-list">
@@ -82,11 +88,14 @@
         </div>
         <div *ngIf="templateTypeSelected == 'E2E Service'">
             <div class="check-box" style="margin:30px; height: 50px">
-                <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox" [(ngModel)]="isSol005Interface" value="true" nzAllowClear>
+                <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox"
+                       [(ngModel)]="isSol005Interface" value="true" nzAllowClear>
                 <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label>
             </div>
         </div>
-        <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips"> {{"i18nTextDefine_Templateparsingfailed" | translate}}</div>
+        <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips">
+            {{"i18nTextDefine_Templateparsingfailed" | translate}}
+        </div>
     </nz-modal>
 </div>
 <nz-layout style=" padding: 20px 32px; ">
@@ -94,18 +103,18 @@
         <li *ngFor="let item of serviceMunber" class="top-list">
             <span class="round">{{item.serviceDomain}}</span>
             <div class="top-list-text">
-                    <p>
-                        <span>{{item.failed}}</span>
-                        <span> {{"i18nTextDefine_Failed" | translate}} </span>
-                    </p>
-                    <p>
-                        <span>{{item.Success}}</span>
-                        <span> {{"i18nTextDefine_Success" | translate}} </span>
-                    </p>
-                    <p>
-                        <span>{{item.InProgress}}</span>
-                        <span> {{"i18nTextDefine_InProgress" | translate}} </span>
-                    </p>
+                <p>
+                    <span>{{item.failed}}</span>
+                    <span> {{"i18nTextDefine_Failed" | translate}} </span>
+                </p>
+                <p>
+                    <span>{{item.Success}}</span>
+                    <span> {{"i18nTextDefine_Success" | translate}} </span>
+                </p>
+                <p>
+                    <span>{{item.InProgress}}</span>
+                    <span> {{"i18nTextDefine_InProgress" | translate}} </span>
+                </p>
             </div>
             <p class="service-description"> {{item.detailName | translate}} </p>
         </li>
@@ -127,13 +136,13 @@
                   (nzPageSizeChange)="searchData(true)">
             <thead>
             <tr>
-                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th>
+                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th>
                 <th nzWidth="5%"></th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}} </th>
-                <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}} </th>
-                <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}} </th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}} </th>
-                <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}} </th>
+                <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th>
+                <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th>
+                <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th>
+                <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th>
             </tr>
             </thead>
             <tbody>
@@ -171,12 +180,14 @@
                            (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>
 
                         <ul *ngIf="data.iconMore==true " class="icon-more">
-                            <li (click)="scaleService(data)" [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
+                            <li (click)="scaleService(data)"
+                                [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
                                 <i class="anticon anticon-scale"></i>
                                 <span> {{"i18nTextDefine_Scale" | translate}} </span>
                             </li>
-                            <li (click)="serviceDetail(data,2)" [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
-                                <i class="anticon anticon-update" ></i>
+                            <li (click)="serviceDetail(data,2)"
+                                [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
+                                <i class="anticon anticon-update"></i>
                                 <span> {{"i18nTextDefine_Update" | translate}} </span>
                             </li>
                         </ul>
@@ -210,7 +221,8 @@
 
         <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
                   (nzOnCancel)="scaleCancel()"
-                  (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+                  (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">
@@ -229,17 +241,17 @@
                         <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option>
                     </nz-select>
                 </div>
-               <div class="e2eScaleContent">
-                   <span class="e2eScaleLable"> {{"i18nTextDefine_AspectId" | translate}} :</span>
-                   <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
-               </div>
+                <div class="e2eScaleContent">
+                    <span class="e2eScaleLable"> {{"i18nTextDefine_AspectId" | translate}} :</span>
+                    <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
+                </div>
                 <div class="e2eScaleContent">
                     <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</span>
                     <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
                                      nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
                 </div>
                 <div class="e2eScaleContent">
-                    <span class="e2eScaleLable" > {{"i18nTextDefine_ScalingDirection" | translate}} :</span>
+                    <span class="e2eScaleLable"> {{"i18nTextDefine_ScalingDirection" | translate}} :</span>
                     <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection">
                         <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option>
                         <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option>
@@ -247,13 +259,15 @@
                 </div>
             </div>
 
-            <ng-template #templatescalestarting >
+            <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-message">E2E &nbsp;
+                            {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
+                        </div>
                         <div class="ant-notification-notice-description">
                             <div class="notificationlist">
                                 <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
@@ -304,22 +318,32 @@
                     </nz-select>
                 </div>
                 <div class="question">
-                    <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} :</h4>
+                    <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}}
+                        :</h4>
                     <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
                            [(ngModel)]="gracefulTerminationTimeout">
                 </div>
             </div>
 
-            <ng-template #templatedeletestarting >
+            <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 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-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>
@@ -344,20 +368,24 @@
 
         <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
                   (nzOnCancel)="healCancel()"
-                  (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+                  (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>
                 <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] ||
-                    thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
-                    thisService["vnfInstanceId"]}}</div>
+                    thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] ||
+                    thisService["nsInstanceId"] ||
+                    thisService["vnfInstanceId"]}}
+                </div>
             </div>
             <!-- NS -->
             <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
                 <div class="question">
                     <p class="heal-label"> {{"i18nTextDefine_degreeHealing" | translate}} :</p>
-                    <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" [(ngModel)]="nsParams.degreeHealing">
+                    <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px"
+                               [(ngModel)]="nsParams.degreeHealing">
                         <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
                         <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
                         <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option>
@@ -392,7 +420,7 @@
                 </div>
             </div>
             <!-- vnf -->
-            <div *ngIf="thisService['serviceDomain'] == 'vnf'"  style="clear: both">
+            <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both">
                 <div class="heal-question">
                     <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p>
                     <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input">
@@ -403,19 +431,23 @@
                 </div>
                 <div class="heal-question">
                     <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</p>
-                    <nz-select style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" [(ngModel)]="vmSelected">
+                    <nz-select
+                            style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px"
+                            [(ngModel)]="vmSelected">
                         <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
                     </nz-select>
                 </div>
             </div>
 
-            <ng-template #templatehealstarting >
+            <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_InstanceHealingStarting" | translate}}</div>
+                        <div class="ant-notification-notice-message">NS &nbsp;
+                            {{"i18nTextDefine_InstanceHealingStarting" | translate}}
+                        </div>
                         <div class="ant-notification-notice-description">
                             <div class="notificationlist">
                                 <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
@@ -439,16 +471,25 @@
         </nz-modal>
 
         <!-- add notification-->
-        <ng-template #templateCreatestarting >
+        <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 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-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>
@@ -468,21 +509,41 @@
                 </div>
             </div>
         </ng-template>
-        <ng-template #templateCreateSuccessFaild >
+        <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'">
+                            <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 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 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-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>
@@ -503,21 +564,41 @@
                 </div>
             </div>
         </ng-template>
-        <ng-template #templateDeleteSuccessFaild >
+        <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'">
+                            <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 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 == '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 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-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>
@@ -538,15 +619,21 @@
                 </div>
             </div>
         </ng-template>
-        <ng-template #templateScaleSuccessFaild >
+        <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'">
+                            <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-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>
@@ -567,15 +654,21 @@
                 </div>
             </div>
         </ng-template>
-        <ng-template #templatehealSuccessFaild >
+        <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'">
+                            <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-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>
@@ -596,15 +689,21 @@
                 </div>
             </div>
         </ng-template>
-        <ng-template #templateUpdateSuccessFaild >
+        <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'">
+                            <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-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>
@@ -629,11 +728,11 @@
     <div class="detailComponent" *ngIf="detailshow">
         <app-ccvpn-detail [detailParams]="detailData"
                           [upDateShow]="upDateShow"
-                           (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)"
+                          (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)"
                           (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail>
     </div>
     <div class="detailComponent" *ngIf="detailshow2">
-        <app-e2e-detail  [detailParams]="detailData"
+        <app-e2e-detail [detailParams]="detailData"
                         (closeDetail)="detailshow2 = false;listDisplay = false;"></app-e2e-detail>
     </div>
     <div class="createComponent" *ngIf="createshow">