UI: Add new propagate alarm fields

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.html

@@ -15,8 +15,9 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" style="min-width: 0;">
+<div fxLayout="row" fxLayoutAlign="start center" [formGroup]="alarmRuleConditionFormGroup" (click)="openFilterDialog($event)" style="min-width: 0;">
-  <div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center" (click)="openFilterDialog($event)">
+  <span class="tb-alarm-rule-condition title">{{('device-profile.condition' | translate) + ': '}}</span>
+  <div class="tb-alarm-rule-condition" fxFlex fxLayout="column" fxLayoutAlign="center">
     <tb-filter-text formControlName="condition"
                     [nowrap]="true"
                     required

ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule-condition.component.scss

@@ -27,6 +27,11 @@
       opacity: 0.7;
       padding: 4px;
     }
+    &.title {
+      padding: 4px;
+      opacity: 0.7;
+      overflow: visible;
+    }
   }
 }
 

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html

@@ -82,6 +82,12 @@
             <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
           </mat-form-field>
         </section>
+        <mat-checkbox formControlName="propagateToOwner" style="display: block; padding-bottom: 16px;">
+          {{ 'device-profile.propagate-alarm-to-owner' | translate }}
+        </mat-checkbox>
+        <mat-checkbox formControlName="propagateToTenant" style="display: block; padding-bottom: 16px;">
+          {{ 'device-profile.propagate-alarm-to-tenant' | translate }}
+        </mat-checkbox>
       </ng-template>
     </mat-expansion-panel>
     <div fxFlex fxLayout="column">

ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.ts

@@ -97,7 +97,9 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
       createRules: [null],
       clearRule: [null],
       propagate: [null],
-      propagateRelationTypes: [null]
+      propagateRelationTypes: [null],
+      propagateToOwner: [null],
+      propagateToTenant: [null]
     }, { validators: deviceProfileAlarmValidator });
     this.alarmFormGroup.valueChanges.subscribe(() => {
       this.updateModel();

ui-ngx/src/app/modules/home/components/profile/alarm/edit-alarm-details-dialog.component.html

@@ -33,6 +33,7 @@
         <mat-form-field class="mat-block">
           <mat-label translate>device-profile.alarm-details</mat-label>
           <textarea matInput formControlName="alarmDetails" rows="5"></textarea>
+          <mat-hint [innerHTML]="'device-profile.alarm-rule-details-hint' | translate | safe: 'html'"></mat-hint>
         </mat-form-field>
       </div>
     </fieldset>

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

@@ -517,6 +517,8 @@ export interface DeviceProfileAlarm {
   createRules: {[severity: string]: AlarmRule};
   clearRule?: AlarmRule;
   propagate?: boolean;
+  propagateToOwner?: boolean;
+  propagateToTenant?: boolean;
   propagateRelationTypes?: Array<string>;
 }
 

ui-ngx/src/app/shared/pipe/safe.pipe.ts

@@ -0,0 +1,37 @@
+///
+/// Copyright © 2016-2022 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+  constructor(protected sanitizer: DomSanitizer) {}
+
+  public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
+    switch (type) {
+      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
+      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
+      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
+      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
+      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+      default: throw new Error(`Invalid safe type specified: ${type}`);
+    }
+  }
+}

ui-ngx/src/app/shared/shared.module.ts

@@ -158,6 +158,7 @@ import { HELP_MARKDOWN_COMPONENT_TOKEN, SHARED_MODULE_TOKEN } from '@shared/comp
 import { TbMarkdownComponent } from '@shared/components/markdown.component';
 import { ProtobufContentComponent } from '@shared/components/protobuf-content.component';
 import { CssComponent } from '@shared/components/css.component';
+import { SafePipe } from '@shared/pipe/safe.pipe';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -172,6 +173,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     TruncatePipe,
     TbJsonPipe,
     FileSizePipe,
+    SafePipe,
     {
       provide: FlowInjectionToken,
       useValue: Flow
@@ -263,6 +265,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     TruncatePipe,
     TbJsonPipe,
     FileSizePipe,
+    SafePipe,
     SelectableColumnsPipe,
     KeyboardShortcutPipe,
     TbJsonToStringDirective,
@@ -457,6 +460,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     TbJsonPipe,
     KeyboardShortcutPipe,
     FileSizePipe,
+    SafePipe,
     SelectableColumnsPipe,
     RouterModule,
     TranslateModule,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1199,13 +1199,16 @@
         "condition-duration-time-unit-required": "Time unit is required.",
         "advanced-settings": "Advanced settings",
         "alarm-rule-details": "Details",
+        "alarm-rule-details-hint": "Hint: use <code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code> to substitute values of the attribute or telemetry keys that are used in alarm rule condition.",
         "add-alarm-rule-details": "Add details",
         "alarm-rule-mobile-dashboard": "Mobile dashboard",
         "alarm-rule-mobile-dashboard-hint": "Used by mobile application as an alarm details dashboard",
         "alarm-rule-no-mobile-dashboard": "No dashboard selected",
-        "propagate-alarm": "Propagate alarm",
+        "propagate-alarm": "Propagate alarm to related entities",
         "alarm-rule-relation-types-list": "Relation types to propagate",
         "alarm-rule-relation-types-list-hint": "If Propagate relation types are not selected, alarms will be propagated without filtering by relation type.",
+        "propagate-alarm-to-owner": "Propagate alarm to entity owner (Customer or Tenant)",
+        "propagate-alarm-to-tenant": "Propagate alarm to Tenant",
         "alarm-details": "Alarm details",
         "alarm-rule-condition": "Alarm rule condition",
         "enter-alarm-rule-condition-prompt": "Please add alarm rule condition",