Improvement notification alarm style

ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html

@@ -35,7 +35,7 @@
    </div>
   </section>
   <mat-divider></mat-divider>
-  <section fxLayoutAlign="center center" style="margin-bottom: 12px">
+  <section fxLayoutAlign="center center">
     <button fxFlex mat-button color="primary" (click)="viewAll($event)">
       {{ 'notification.view-all' | translate }}
     </button>

ui-ngx/src/app/shared/components/notification/notification.component.html

@@ -44,8 +44,8 @@
       </button>
     </div>
     <div class="alarm-severity" *ngIf="notification.type === notificationType.ALARM"
-         [ngStyle]="{backgroundColor: alarmColorSeverity(0.08)}">
+         [ngStyle]="{backgroundColor: alarmColorSeverity(0.06)}">
-      <span [ngStyle]="{color: alarmColorSeverity(0.78)}">
+      <span [ngStyle]="notificationIconColor()" class="severity">
         {{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
       </span>
     </div>

ui-ngx/src/app/shared/components/notification/notification.component.scss

@@ -63,6 +63,11 @@
     .alarm-severity {
       padding: 5px;
       border-radius: 8px;
+
+      .severity {
+        font-weight: 500;
+        letter-spacing: 0.25px;
+      }
     }
   }
 }

ui-ngx/src/app/shared/components/notification/notification.component.ts

@@ -15,11 +15,16 @@
 ///
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Notification, NotificationType, NotificationTypeIcons } from '@shared/models/notification.models';
+import {
+  AlarmSeverityNotificationColors,
+  Notification,
+  NotificationType,
+  NotificationTypeIcons
+} from '@shared/models/notification.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { alarmSeverityColors, alarmSeverityTranslations } from '@shared/models/alarm.models';
+import { alarmSeverityTranslations } from '@shared/models/alarm.models';
 import * as tinycolor_ from 'tinycolor2';
 
 @Component({
@@ -86,8 +91,12 @@ export class NotificationComponent implements OnInit {
       $event.stopPropagation();
     }
     if (!this.preview) {
-      this.router.navigateByUrl(this.router.parseUrl(this.notification.additionalConfig.actionButtonConfig.link)).then(() => {
+      if (this.notification.additionalConfig.actionButtonConfig.link.startsWith('/')) {
-      });
+        this.router.navigateByUrl(this.router.parseUrl(this.notification.additionalConfig.actionButtonConfig.link)).then(() => {
+        });
+      } else {
+        window.open(this.notification.additionalConfig.actionButtonConfig.link, '_blank');
+      }
       if (this.onClose) {
         this.onClose();
       }
@@ -95,19 +104,19 @@ export class NotificationComponent implements OnInit {
   }
 
   alarmColorSeverity(alpha: number) {
-    return this.tinycolor(alarmSeverityColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
+    return this.tinycolor(AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)).setAlpha(alpha).toRgbString();
   }
 
   notificationColor(): string {
-    if (this.notification.type === this.notificationType.ALARM) {
+    if (this.notification.type === NotificationType.ALARM) {
-      return alarmSeverityColors.get(this.notification.info.alarmSeverity);
+      return AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity);
     }
     return 'transparent';
   }
 
   notificationIconColor(): object {
-    if (this.notification.type === this.notificationType.ALARM) {
+    if (this.notification.type === NotificationType.ALARM) {
-      return {color: alarmSeverityColors.get(this.notification.info.alarmSeverity)};
+      return {color: AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)};
     }
     return null;
   }

ui-ngx/src/app/shared/models/notification.models.ts

@@ -284,14 +284,6 @@ export enum NotificationType {
   ALARM_COMMENT = 'ALARM_COMMENT'
 }
 
-export const NotificationTypeColors = new Map<NotificationType, string>([
-  [NotificationType.GENERAL, 'transparent'],
-  [NotificationType.ALARM, '#D12730'],
-  [NotificationType.DEVICE_INACTIVITY, '#305680'],
-  [NotificationType.ENTITY_ACTION, '#305680'],
-  [NotificationType.ALARM_COMMENT, '#D12730']
-]);
-
 export const NotificationTypeIcons = new Map<NotificationType, string | null>([
   [NotificationType.ALARM, 'warning'],
   [NotificationType.DEVICE_INACTIVITY, 'phonelink_off'],
@@ -299,6 +291,16 @@ export const NotificationTypeIcons = new Map<NotificationType, string | null>([
   [NotificationType.ALARM_COMMENT, 'warning']
 ]);
 
+export const AlarmSeverityNotificationColors = new Map<AlarmSeverity, string>(
+  [
+    [AlarmSeverity.CRITICAL, '#D12730'],
+    [AlarmSeverity.MAJOR, '#FEAC0C'],
+    [AlarmSeverity.MINOR, '#F2DA05'],
+    [AlarmSeverity.WARNING, '#F66716'],
+    [AlarmSeverity.INDETERMINATE, '#00000061']
+  ]
+);
+
 interface NotificationTemplateTypeTranslate {
   name: string;
   hint?: string;