1 files changed, 50 insertions, 0 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
new file mode 100644
index 00000000..f20fd48c
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
@@ -0,0 +1,50 @@
+<ng-template #notificationModel>
+  <div class="ant-notification-notice-content">
+    <div class="ant-notification-notice-with-icon">
+      <span class="ant-notification-notice-icon">
+        <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+      </span>
+      <!-- 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>
+      <!-- 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>
+  </div>
+</ng-template>