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

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

1 files changed, 38 insertions, 9 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>