diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html
index 5720c5ce04..f1ef65d56c 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.html
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.html
@@ -44,8 +44,8 @@
-
+ [ngStyle]="{backgroundColor: alarmColorSeverity(0.06)}">
+
{{alarmSeverityTranslations.get(notification.info.alarmSeverity) | translate}}
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss
index 5a660b0df5..64841e837b 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.scss
+++ b/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;
+ }
}
}
}
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.ts b/ui-ngx/src/app/shared/components/notification/notification.component.ts
index 0eb7c74513..2ac8f2f9dd 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.ts
+++ b/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) {
- return alarmSeverityColors.get(this.notification.info.alarmSeverity);
+ if (this.notification.type === NotificationType.ALARM) {
+ return AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity);
}
return 'transparent';
}
notificationIconColor(): object {
- if (this.notification.type === this.notificationType.ALARM) {
- return {color: alarmSeverityColors.get(this.notification.info.alarmSeverity)};
+ if (this.notification.type === NotificationType.ALARM) {
+ return {color: AlarmSeverityNotificationColors.get(this.notification.info.alarmSeverity)};
}
return null;
}
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index 86d1115584..cf907dfe70 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/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.GENERAL, 'transparent'],
- [NotificationType.ALARM, '#D12730'],
- [NotificationType.DEVICE_INACTIVITY, '#305680'],
- [NotificationType.ENTITY_ACTION, '#305680'],
- [NotificationType.ALARM_COMMENT, '#D12730']
-]);
-
export const NotificationTypeIcons = new Map([
[NotificationType.ALARM, 'warning'],
[NotificationType.DEVICE_INACTIVITY, 'phonelink_off'],
@@ -299,6 +291,16 @@ export const NotificationTypeIcons = new Map([
[NotificationType.ALARM_COMMENT, 'warning']
]);
+export const AlarmSeverityNotificationColors = new Map(
+ [
+ [AlarmSeverity.CRITICAL, '#D12730'],
+ [AlarmSeverity.MAJOR, '#FEAC0C'],
+ [AlarmSeverity.MINOR, '#F2DA05'],
+ [AlarmSeverity.WARNING, '#F66716'],
+ [AlarmSeverity.INDETERMINATE, '#00000061']
+ ]
+);
+
interface NotificationTemplateTypeTranslate {
name: string;
hint?: string;