dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add help popup in notification template

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-03-23 13:25:54 +02:00
parent 53fb5ccbea
commit 57390a9055
14 changed files with 82 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
View File

@ -114,8 +114,13 @@
notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.WEB.enabled').value"
[stepControl]="webTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.web' | translate }}</ng-template>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-fields-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '820px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="webTemplateForm">
<mat-form-field class="mat-block">
@ -207,8 +212,13 @@
[stepControl]="emailTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
<ng-template matStepContent>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-fields-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '820px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="emailTemplateForm">
<mat-form-field class="mat-block">
@ -227,8 +237,13 @@
notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SMS.enabled').value"
[stepControl]="smsTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.sms' | translate }}</ng-template>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-field-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '820px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="smsTemplateForm">
<mat-form-field class="mat-block">
@ -249,8 +264,13 @@
notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.SLACK.enabled').value"
[stepControl]="slackTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.slack' | translate }}</ng-template>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-field-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '820px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="slackTemplateForm" fxLayoutGap="8px">
<mat-form-field class="mat-block">

11
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
View File

@ -24,10 +24,6 @@
display: flex;
flex-direction: column;
.tb-form-fields {
margin-bottom: 18px;
}
.tb-title {
font-size: 16px;
line-height: 24px;
@ -40,11 +36,10 @@
.tb-hint-available-params {
border-radius: 6px;
background-color: rgba(48, 86, 128, 0.04);
line-height: 16px;
letter-spacing: 0.25px;
margin-bottom: 8px;
padding: 8px 12px;
color: rgba(0, 0, 0, 0.54);
padding: 8px 16px;
display: flex;
align-items: center;
}
.delivery-method-container {

36
ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
View File

@ -73,8 +73,13 @@
<mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.WEB.enabled').value"
[stepControl]="webTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.web' | translate }}</ng-template>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-fields-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '800px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="webTemplateForm">
<mat-form-field class="mat-block">
@ -165,8 +170,13 @@
[stepControl]="emailTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
<ng-template matStepContent>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-fields-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '800px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="emailTemplateForm">
<mat-form-field class="mat-block">
@ -184,8 +194,13 @@
<mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.SMS.enabled').value"
[stepControl]="smsTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.sms' | translate }}</ng-template>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-field-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '800px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="smsTemplateForm">
<mat-form-field class="mat-block">
@ -205,8 +220,13 @@
<mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.SLACK.enabled').value"
[stepControl]="slackTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.slack' | translate }}</ng-template>
<div class="tb-hint tb-hint-available-params">
{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).hint | translate }}
<div class="tb-hint-available-params mat-body-2">
{{ 'notification.input-field-support-templatization' | translate}}
<div tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '800px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></div>
</div>
<form [formGroup]="slackTemplateForm" fxLayoutGap="8px">
<mat-form-field class="mat-block">

11
ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
View File

@ -24,10 +24,6 @@
display: flex;
flex-direction: column;
.tb-form-fields {
margin-bottom: 18px;
}
.tb-title {
font-size: 16px;
line-height: 24px;
@ -40,11 +36,10 @@
.tb-hint-available-params {
border-radius: 6px;
background-color: rgba(48, 86, 128, 0.04);
line-height: 16px;
letter-spacing: 0.25px;
margin-bottom: 8px;
padding: 8px 12px;
color: rgba(0, 0, 0, 0.54);
padding: 8px 16px;
display: flex;
align-items: center;
}
.delivery-method-container {

18
ui-ngx/src/app/shared/models/notification.models.ts
View File

@ -441,56 +441,56 @@ export const ActionButtonLinkTypeTranslateMap = new Map<ActionButtonLinkType, st
interface NotificationTemplateTypeTranslate {
name: string;
hint?: string;
helpId?: string;
}
export const NotificationTemplateTypeTranslateMap = new Map<NotificationType, NotificationTemplateTypeTranslate>([
[NotificationType.GENERAL,
{
name: 'notification.template-type.general',
hint: 'notification.template-hint.general'
helpId: 'notification/general'
}
],
[NotificationType.ALARM,
{
name: 'notification.template-type.alarm',
hint: 'notification.template-hint.alarm'
helpId: 'notification/alarm'
}
],
[NotificationType.DEVICE_INACTIVITY,
{
name: 'notification.template-type.device-inactivity',
hint: 'notification.template-hint.device-inactivity'
helpId: 'notification/device_inactivity'
}
],
[NotificationType.ENTITY_ACTION,
{
name: 'notification.template-type.entity-action',
hint: 'notification.template-hint.entity-action'
helpId: 'notification/entity_action'
}
],
[NotificationType.ALARM_COMMENT,
{
name: 'notification.template-type.alarm-comment',
hint: 'notification.template-hint.alarm-comment'
helpId: 'notification/alarm_comment'
}
],
[NotificationType.ALARM_ASSIGNMENT,
{
name: 'notification.template-type.alarm-assignment',
hint: 'notification.template-hint.alarm-assignment'
helpId: 'notification/alarm_assignment'
}
],
[NotificationType.RULE_ENGINE_COMPONENT_LIFECYCLE_EVENT,
{
name: 'notification.template-type.rule-engine-lifecycle-event',
hint: 'notification.template-hint.rule-engine-lifecycle-event'
helpId: 'notification/rule_engine_lifecycle_event'
}
],
[NotificationType.ENTITIES_LIMIT,
{
name: 'notification.template-type.entities-limit',
hint: 'notification.template-hint.entities-limit'
helpId: 'notification/entities_limit'
}]
]);

1
ui-ngx/src/assets/help/en_US/notification/alarm.md Normal file
View File

@ -0,0 +1 @@
Available params: ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}

1
ui-ngx/src/assets/help/en_US/notification/alarm_assignment.md Normal file
View File

@ -0,0 +1 @@
Available params: ${assigneeFirstName}, ${assigneeLastName}, ${assigneeEmail}, ${assigneeFirstName}, ${userName}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}

1
ui-ngx/src/assets/help/en_US/notification/alarm_comment.md Normal file
View File

@ -0,0 +1 @@
Available params: ${comment}, ${alarmType}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}

1
ui-ngx/src/assets/help/en_US/notification/device_inactivity.md Normal file
View File

@ -0,0 +1 @@
Available params: ${deviceName}, ${deviceLabel}, ${deviceType}, ${deviceId}

1
ui-ngx/src/assets/help/en_US/notification/entities_limit.md Normal file
View File

@ -0,0 +1 @@
Available params: ${entityType}, ${currentCount}, ${limit}

1
ui-ngx/src/assets/help/en_US/notification/entity_action.md Normal file
View File

@ -0,0 +1 @@
Available params: ${actionType}, ${entityType}, ${entityName}, ${entityId}, ${originatorUserName}, ${originatorUserId}

1
ui-ngx/src/assets/help/en_US/notification/general.md Normal file
View File

@ -0,0 +1 @@
Available params: ${recipientEmail}, ${recipientFirstName}, ${recipientLastName}

1
ui-ngx/src/assets/help/en_US/notification/rule_engine_lifecycle_event.md Normal file
View File

@ -0,0 +1 @@
Available params: ${ruleChainName}, ${componentName}, ${eventType}, ${error}, ${ruleChainId}, ${componentId}

13
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -2801,6 +2801,8 @@
"filter": "Filter",
"first-recipient": "First recipient",
"inbox": "Inbox",
"input-field-support-templatization": "Input field support templatization.",
"input-fields-support-templatization": "Input fields support templatization.",
"link": "Link",
"link-required": "Link is required",
"link-type": {
@ -2869,6 +2871,7 @@
"search-rules": "Search rules",
"search-targets": "Search recipients",
"search-templates": "Search templates",
"see-documentation": "See documentation",
"selected-notifications": "{ count, plural, =1 {1 notification} other {# notifications} } selected",
"selected-requests": "{ count, plural, =1 {1 request} other {# requests} } selected",
"send-notification": "Send notification",
@ -2902,16 +2905,6 @@
"targets": "Recipients",
"targets-required": "Recipients is required",
"template": "Template",
"template-hint": {
"alarm": "Available params: ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}",
"alarm-assignment": "Available params: ${assigneeFirstName}, ${assigneeLastName}, ${assigneeEmail}, ${assigneeFirstName}, ${userName}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}",
"alarm-comment": "Available params: ${comment}, ${alarmType}, ${alarmId}, ${alarmType}, ${alarmSeverity}, ${alarmStatus}, ${alarmOriginatorEntityType}, ${alarmOriginatorId}, ${alarmId}, ${alarmAction}",
"device-inactivity": "Available params: ${deviceName}, ${deviceLabel}, ${deviceType}, ${deviceId}",
"entities-limit": "Available params: ${entityType}, ${currentCount}, ${limit}",
"entity-action": "Available params: ${actionType}, ${entityType}, ${entityName}, ${entityId}, ${originatorUserName}, ${originatorUserId}",
"general": "Available params: ${recipientEmail}, ${recipientFirstName}, ${recipientLastName}",
"rule-engine-lifecycle-event": "Available params: ${ruleChainName}, ${componentName}, ${eventType}, ${error}, ${ruleChainId}, ${componentId}"
},
"template-name": "Template name",
"template-required": "Template is required",
"template-type": {