improvement custom translation for alarm type field

@@ -26,7 +26,7 @@
     </span>
     <span *ngIf="alarmRuleFormGroup.get('alarmDetails').value" class="tb-alarm-rule-details"
           (click)="openEditDetailsDialog($event)"
-          [innerHTML]="alarmRuleFormGroup.get('alarmDetails').value"></span>
+          [innerHTML]="alarmDetailsText"></span>
     <button mat-icon-button color="primary"
        type="button"
        (click)="openEditDetailsDialog($event)"

@@ -35,6 +35,7 @@ import {
 } from '@home/components/profile/alarm/edit-alarm-details-dialog.component';
 import { EntityId } from '@shared/models/id/entity-id';
 import { DashboardId } from '@shared/models/id/dashboard-id';
+import { UtilsService } from '@core/services/utils.service';
 
 @Component({
   selector: 'tb-alarm-rule',
@@ -79,6 +80,7 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
   private propagateChange = (v: any) => { };
 
   constructor(private dialog: MatDialog,
+              private utils: UtilsService,
               private fb: FormBuilder) {
   }
 
@@ -146,6 +148,11 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
     };
   }
 
+  get alarmDetailsText(): string {
+    const alarmType = this.alarmRuleFormGroup.get('alarmDetails').value;
+    return this.utils.customTranslation(alarmType, alarmType);
+  }
+
   private updateModel() {
     const value = this.alarmRuleFormGroup.value;
     if (this.modelValue) {

@@ -20,7 +20,7 @@
     <div fxFlex fxLayout="row" fxLayoutAlign="start center">
       <mat-panel-title>
         <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-          {{ alarmFormGroup.get('alarmType').value }}
+          {{ alarmTypeTitle }}
         </div>
       </mat-panel-title>
       <span fxFlex></span>

@@ -30,6 +30,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { EntityId } from '@shared/models/id/entity-id';
+import { UtilsService } from '@core/services/utils.service';
 
 @Component({
   selector: 'tb-device-profile-alarm',
@@ -72,6 +73,7 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
   private propagateChangePending = false;
 
   constructor(private dialog: MatDialog,
+              private utils: UtilsService,
               private fb: FormBuilder) {
   }
 
@@ -185,6 +187,10 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
     }
   }
 
+  get alarmTypeTitle(): string {
+    const alarmType = this.alarmFormGroup.get('alarmType').value;
+    return this.utils.customTranslation(alarmType, alarmType);
+  }
 
   private updateModel() {
     const value = this.alarmFormGroup.value;