UI: Added key name autocomplete in alarms rules to device profile

@@ -69,4 +69,20 @@ export class DeviceProfileService {
     return this.http.get<PageData<DeviceProfileInfo>>(url, defaultHttpOptionsFromConfig(config));
   }
 
+  public getDeviceProfileDevicesAttributesKeys(deviceProfileId?: string, config?: RequestConfig): Observable<Array<string>> {
+    let url = `/api/deviceProfile/devices/keys/attributes`;
+    if (isDefinedAndNotNull(deviceProfileId)) {
+      url += `?deviceProfileId=${deviceProfileId}`;
+    }
+    return this.http.get<Array<string>>(url, defaultHttpOptionsFromConfig(config));
+  }
+
+  public getDeviceProfileDevicesTimeseriesKeys(deviceProfileId?: string, config?: RequestConfig): Observable<Array<string>> {
+    let url = `/api/deviceProfile/devices/keys/timeseries`;
+    if (isDefinedAndNotNull(deviceProfileId)) {
+      url += `?deviceProfileId=${deviceProfileId}`;
+    }
+    return this.http.get<Array<string>>(url, defaultHttpOptionsFromConfig(config));
+  }
+
 }

@@ -40,11 +40,19 @@
           <mat-form-field fxFlex="60" class="mat-block">
             <mat-label translate>filter.key-name</mat-label>
             <input matInput required formControlName="key"
-                   [matAutocomplete]="auto"
-                   [matAutocompleteDisabled]="keyFilterFormGroup.get('key.type').value !== entityField">
-            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-              <mat-option *ngFor="let option of filteredEntityFields | async" [value]="option">
-                {{option}}
+                   #keyNameInput
+                   (focusin)="onFocus()"
+                   [matAutocomplete]="keyName"
+                   [matAutocompleteDisabled]="!showAutocomplete">
+            <button *ngIf="keyFilterFormGroup.get('key.key').value && showAutocomplete"
+                    type="button"
+                    matSuffix mat-button mat-icon-button aria-label="Clear"
+                    (click)="clear()">
+              <mat-icon class="material-icons">close</mat-icon>
+            </button>
+            <mat-autocomplete autoActiveFirstOption #keyName="matAutocomplete">
+              <mat-option *ngFor="let keyName of filteredKeysName | async" [value]="keyName">
+                <span [innerHTML]="keyName | highlight:searchText"></span>
               </mat-option>
             </mat-autocomplete>
             <mat-error *ngIf="keyFilterFormGroup.get('key.key').hasError('required')">

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, ElementRef, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -32,9 +32,12 @@ import {
 } from '@shared/models/query/query.models';
 import { DialogService } from '@core/services/dialog.service';
 import { TranslateService } from '@ngx-translate/core';
-import { EntityField, entityFields } from '@shared/models/entity.models';
-import { Observable } from 'rxjs';
-import { filter, map, startWith } from 'rxjs/operators';
+import { entityFields } from '@shared/models/entity.models';
+import { Observable, of, Subject } from 'rxjs';
+import { filter, map, mergeMap, publishReplay, refCount, startWith, takeUntil } from 'rxjs/operators';
+import { isDefined } from '@core/utils';
+import { EntityId } from '@shared/models/id/entity-id';
+import { DeviceProfileService } from '@core/http/device-profile.service';
 
 export interface KeyFilterDialogData {
   keyFilter: KeyFilterInfo;
@@ -43,6 +46,7 @@ export interface KeyFilterDialogData {
   allowUserDynamicSource: boolean;
   readonly: boolean;
   telemetryKeysOnly: boolean;
+  entityId?: EntityId;
 }
 
 @Component({
@@ -53,7 +57,13 @@ export interface KeyFilterDialogData {
 })
 export class KeyFilterDialogComponent extends
   DialogComponent<KeyFilterDialogComponent, KeyFilterInfo>
-  implements OnInit, ErrorStateMatcher {
+  implements OnInit, OnDestroy, ErrorStateMatcher {
+
+  @ViewChild('keyNameInput', {static: true}) private keyNameInput: ElementRef;
+
+  private dirty = false;
+  private entityKeysName: Observable<Array<string>>;
+  private destroy$ = new Subject();
 
   keyFilterFormGroup: FormGroup;
 
@@ -72,19 +82,18 @@ export class KeyFilterDialogComponent extends
 
   submitted = false;
 
-  entityFields: { [fieldName: string]: EntityField };
-
-  entityFieldsList: string[];
+  showAutocomplete = false;
 
-  readonly entityField = EntityKeyType.ENTITY_FIELD;
+  filteredKeysName: Observable<Array<string>>;
 
-  filteredEntityFields: Observable<string[]>;
+  searchText = '';
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: KeyFilterDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<KeyFilterDialogComponent, KeyFilterInfo>,
+              private deviceProfileService: DeviceProfileService,
               private dialogs: DialogService,
               private translate: TranslateService,
               private fb: FormBuilder) {
@@ -104,7 +113,9 @@ export class KeyFilterDialogComponent extends
     );
 
     if (!this.data.readonly) {
-      this.keyFilterFormGroup.get('valueType').valueChanges.subscribe((valueType: EntityKeyValueType) => {
+      this.keyFilterFormGroup.get('valueType').valueChanges.pipe(
+        takeUntil(this.destroy$)
+      ).subscribe((valueType: EntityKeyValueType) => {
         const prevValue: EntityKeyValueType = this.keyFilterFormGroup.value.valueType;
         const predicates: KeyFilterPredicate[] = this.keyFilterFormGroup.get('predicates').value;
         if (prevValue && prevValue !== valueType && predicates && predicates.length) {
@@ -121,11 +132,26 @@ export class KeyFilterDialogComponent extends
         }
       });
 
+      this.keyFilterFormGroup.get('key.type').valueChanges.pipe(
+        startWith(this.data.keyFilter.key.type),
+        takeUntil(this.destroy$)
+      ).subscribe((type: EntityKeyType) => {
+        if (type === EntityKeyType.ENTITY_FIELD || isDefined(this.data.entityId)) {
+          this.entityKeysName = null;
+          this.dirty = false;
+          this.showAutocomplete = true;
+        } else {
+          this.showAutocomplete = false;
+        }
+      });
+
       this.keyFilterFormGroup.get('key.key').valueChanges.pipe(
-        filter((keyName) => this.keyFilterFormGroup.get('key.type').value === this.entityField && this.entityFields.hasOwnProperty(keyName))
+        filter((keyName) =>
+          this.keyFilterFormGroup.get('key.type').value === EntityKeyType.ENTITY_FIELD && entityFields.hasOwnProperty(keyName)),
+        takeUntil(this.destroy$)
       ).subscribe((keyName: string) => {
         const prevValueType: EntityKeyValueType = this.keyFilterFormGroup.value.valueType;
-        const newValueType = this.entityFields[keyName]?.time ? EntityKeyValueType.DATE_TIME : EntityKeyValueType.STRING;
+        const newValueType = entityFields[keyName]?.time ? EntityKeyValueType.DATE_TIME : EntityKeyValueType.STRING;
         if (prevValueType !== newValueType) {
           this.keyFilterFormGroup.get('valueType').patchValue(newValueType, {emitEvent: false});
         }
@@ -133,18 +159,20 @@ export class KeyFilterDialogComponent extends
     } else {
       this.keyFilterFormGroup.disable({emitEvent: false});
     }
+  }
 
-    this.entityFields = entityFields;
-    this.entityFieldsList = Object.values(entityFields).map(entityField => entityField.keyName).sort();
+  ngOnInit() {
+    this.filteredKeysName = this.keyFilterFormGroup.get('key.key').valueChanges
+      .pipe(
+        map(value => value ? value : ''),
+        mergeMap(name => this.fetchEntityName(name))
+      );
   }
 
-  ngOnInit(): void {
-    this.filteredEntityFields = this.keyFilterFormGroup.get('key.key').valueChanges.pipe(
-      startWith(''),
-      map(value => {
-        return this.entityFieldsList.filter(option => option.startsWith(value));
-      })
-    );
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -157,6 +185,21 @@ export class KeyFilterDialogComponent extends
     this.dialogRef.close(null);
   }
 
+  clear() {
+    this.keyFilterFormGroup.get('key.key').patchValue('', {emitEvent: true});
+    setTimeout(() => {
+      this.keyNameInput.nativeElement.blur();
+      this.keyNameInput.nativeElement.focus();
+    }, 0);
+  }
+
+  onFocus() {
+    if (!this.dirty && this.showAutocomplete) {
+      this.keyFilterFormGroup.get('key.key').updateValueAndValidity({onlySelf: true, emitEvent: true});
+      this.dirty = true;
+    }
+  }
+
   save(): void {
     this.submitted = true;
     if (this.keyFilterFormGroup.valid) {
@@ -164,4 +207,41 @@ export class KeyFilterDialogComponent extends
       this.dialogRef.close(keyFilter);
     }
   }
+
+  private fetchEntityName(searchText?: string): Observable<Array<string>> {
+    this.searchText = searchText;
+    return this.getEntityKeys().pipe(
+      map(keys => searchText ? keys.filter(key => key.toUpperCase().startsWith(searchText.toUpperCase())) : keys)
+    );
+  }
+
+  private getEntityKeys(): Observable<Array<string>> {
+    if (!this.entityKeysName) {
+      let keyNameObservable: Observable<Array<string>>;
+      switch (this.keyFilterFormGroup.get('key.type').value) {
+        case EntityKeyType.ENTITY_FIELD:
+          keyNameObservable = of(Object.values(entityFields).map(entityField => entityField.keyName).sort());
+          break;
+        case EntityKeyType.ATTRIBUTE:
+          keyNameObservable = this.deviceProfileService.getDeviceProfileDevicesAttributesKeys(
+            this.data.entityId?.id,
+            {ignoreLoading: true}
+          );
+          break;
+        case EntityKeyType.TIME_SERIES:
+          keyNameObservable = this.deviceProfileService.getDeviceProfileDevicesTimeseriesKeys(
+            this.data.entityId?.id,
+            {ignoreLoading: true}
+          );
+          break;
+        default:
+          keyNameObservable = of([]);
+      }
+      this.entityKeysName = keyNameObservable.pipe(
+        publishReplay(1),
+        refCount()
+      );
+    }
+    return this.entityKeysName;
+  }
 }

@@ -19,7 +19,8 @@ import {
   AbstractControl,
   ControlValueAccessor,
   FormArray,
-  FormBuilder, FormControl,
+  FormBuilder,
+  FormControl,
   FormGroup,
   NG_VALUE_ACCESSOR,
   Validators
@@ -28,12 +29,13 @@ import { Observable, Subscription } from 'rxjs';
 import {
   EntityKeyType,
   entityKeyTypeTranslationMap,
-  KeyFilter,
-  KeyFilterInfo, keyFilterInfosToKeyFilters
+  KeyFilterInfo,
+  keyFilterInfosToKeyFilters
 } from '@shared/models/query/query.models';
 import { MatDialog } from '@angular/material/dialog';
 import { deepClone } from '@core/utils';
 import { KeyFilterDialogComponent, KeyFilterDialogData } from '@home/components/filter/key-filter-dialog.component';
+import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-key-filter-list',
@@ -57,6 +59,8 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
 
   @Input() telemetryKeysOnly = false;
 
+  @Input() entityId: EntityId;
+
   keyFilterListFormGroup: FormGroup;
 
   entityKeyTypeTranslations = entityKeyTypeTranslationMap;
@@ -170,7 +174,8 @@ export class KeyFilterListComponent implements ControlValueAccessor, OnInit {
         readonly: this.disabled,
         displayUserParameters: this.displayUserParameters,
         allowUserDynamicSource: this.allowUserDynamicSource,
-        telemetryKeysOnly: this.telemetryKeysOnly
+        telemetryKeysOnly: this.telemetryKeysOnly,
+        entityId: this.entityId
       }
     }).afterClosed();
   }

@@ -96,7 +96,8 @@
             {count: alarmRulesFormGroup.get('alarms').value ?
                 alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
           <tb-device-profile-alarms
-            formControlName="alarms">
+            formControlName="alarms"
+            [deviceProfileId]="null">
           </tb-device-profile-alarms>
         </form>
       </mat-step>

@@ -34,6 +34,7 @@
           [displayUserParameters]="false"
           [allowUserDynamicSource]="false"
           [telemetryKeysOnly]="true"
+          [entityId]="entityId"
           formControlName="keyFilters">
         </tb-key-filter-list>
         <section formGroupName="spec" class="row">

@@ -22,15 +22,16 @@ import { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
-import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { KeyFilter, keyFilterInfosToKeyFilters, keyFiltersToKeyFilterInfos } from '@shared/models/query/query.models';
+import { keyFilterInfosToKeyFilters, keyFiltersToKeyFilterInfos } from '@shared/models/query/query.models';
 import { AlarmCondition, AlarmConditionType, AlarmConditionTypeTranslationMap } from '@shared/models/device.models';
 import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models';
+import { EntityId } from '@shared/models/id/entity-id';
 
 export interface AlarmRuleConditionDialogData {
   readonly: boolean;
   condition: AlarmCondition;
+  entityId?: EntityId;
 }
 
 @Component({
@@ -50,6 +51,7 @@ export class AlarmRuleConditionDialogComponent extends DialogComponent<AlarmRule
 
   readonly = this.data.readonly;
   condition = this.data.condition;
+  entityId = this.data.entityId;
 
   conditionFormGroup: FormGroup;
 
@@ -61,7 +63,6 @@ export class AlarmRuleConditionDialogComponent extends DialogComponent<AlarmRule
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<AlarmRuleConditionDialogComponent, AlarmCondition>,
               private fb: FormBuilder,
-              private utils: UtilsService,
               public translate: TranslateService) {
     super(store, router, dialogRef);
 

@@ -33,6 +33,7 @@ import {
   AlarmRuleConditionDialogData
 } from '@home/components/profile/alarm/alarm-rule-condition-dialog.component';
 import { TimeUnit } from '@shared/models/time/time.models';
+import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-alarm-rule-condition',
@@ -56,6 +57,9 @@ export class AlarmRuleConditionComponent implements ControlValueAccessor, OnInit
   @Input()
   disabled: boolean;
 
+  @Input()
+  deviceProfileId: EntityId;
+
   alarmRuleConditionFormGroup: FormGroup;
 
   specText = '';
@@ -123,7 +127,8 @@ export class AlarmRuleConditionComponent implements ControlValueAccessor, OnInit
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         readonly: this.disabled,
-        condition: this.disabled ? this.modelValue : deepClone(this.modelValue)
+        condition: this.disabled ? this.modelValue : deepClone(this.modelValue),
+        entityId: this.deviceProfileId
       }
     }).afterClosed().subscribe((result) => {
       if (result) {

@@ -16,7 +16,7 @@
 
 -->
 <div fxLayout="column" [formGroup]="alarmRuleFormGroup">
-  <tb-alarm-rule-condition formControlName="condition">
+  <tb-alarm-rule-condition formControlName="condition" [deviceProfileId]="deviceProfileId">
   </tb-alarm-rule-condition>
   <tb-alarm-schedule-info formControlName="schedule">
   </tb-alarm-schedule-info>

@@ -33,6 +33,7 @@ import {
   EditAlarmDetailsDialogComponent,
   EditAlarmDetailsDialogData
 } from '@home/components/profile/alarm/edit-alarm-details-dialog.component';
+import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-alarm-rule',
@@ -65,6 +66,9 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat
     this.requiredValue = coerceBooleanProperty(value);
   }
 
+  @Input()
+  deviceProfileId: EntityId;
+
   private modelValue: AlarmRule;
 
   alarmRuleFormGroup: FormGroup;

@@ -35,7 +35,7 @@
         </mat-error>
       </mat-form-field>
       <mat-divider vertical></mat-divider>
-      <tb-alarm-rule formControlName="alarmRule" required fxFlex>
+      <tb-alarm-rule formControlName="alarmRule" [deviceProfileId]="deviceProfileId" required fxFlex>
       </tb-alarm-rule>
     </div>
     <button *ngIf="!disabled"

@@ -30,7 +30,8 @@ import {
 import { AlarmRule, alarmRuleValidator } from '@shared/models/device.models';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
-import { AlarmSeverity, alarmSeverityTranslations } from '../../../../../shared/models/alarm.models';
+import { AlarmSeverity, alarmSeverityTranslations } from '@shared/models/alarm.models';
+import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-create-alarm-rules',
@@ -59,6 +60,9 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
   @Input()
   disabled: boolean;
 
+  @Input()
+  deviceProfileId: EntityId;
+
   createAlarmRulesFormGroup: FormGroup;
 
   private usedSeverities: AlarmSeverity[] = [];

@@ -80,14 +80,16 @@
   </mat-expansion-panel>
   <div fxFlex fxLayout="column">
     <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
-    <tb-create-alarm-rules formControlName="createRules" style="padding-bottom: 16px;">
+    <tb-create-alarm-rules formControlName="createRules"
+                           style="padding-bottom: 16px;"
+                           [deviceProfileId]="deviceProfileId">
     </tb-create-alarm-rules>
     <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
     <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
          [fxShow]="alarmFormGroup.get('clearRule').value"
          style="padding-bottom: 8px;">
       <div class="clear-alarm-rule" fxFlex fxLayout="row">
-        <tb-alarm-rule formControlName="clearRule" fxFlex>
+        <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
         </tb-alarm-rule>
       </div>
       <button *ngIf="!disabled"

@@ -29,6 +29,7 @@ import { AlarmRule, DeviceProfileAlarm, deviceProfileAlarmValidator } from '@sha
 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';
 
 @Component({
   selector: 'tb-device-profile-alarm',
@@ -60,6 +61,9 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
   @Input()
   expanded = false;
 
+  @Input()
+  deviceProfileId: EntityId;
+
   private modelValue: DeviceProfileAlarm;
 
   alarmFormGroup: FormGroup;

@@ -22,6 +22,7 @@
          fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
       <tb-device-profile-alarm [formControl]="alarmControl"
                                [expanded]="$index === 0"
+                               [deviceProfileId]="deviceProfileId"
                                (removeAlarm)="removeAlarm($index)">
       </tb-device-profile-alarm>
     </div>

@@ -34,6 +34,7 @@ import { DeviceProfileAlarm, deviceProfileAlarmValidator } from '@shared/models/
 import { guid } from '@core/utils';
 import { Subscription } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
+import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-device-profile-alarms',
@@ -68,6 +69,9 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
   @Input()
   disabled: boolean;
 
+  @Input()
+  deviceProfileId: EntityId;
+
   private valueChangeSubscription: Subscription = null;
 
   private propagateChange = (v: any) => { };

@@ -116,7 +116,8 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <tb-device-profile-alarms
-              formControlName="alarms">
+              formControlName="alarms"
+              [deviceProfileId]="deviceProfileId">
             </tb-device-profile-alarms>
           </mat-expansion-panel>
           <mat-expansion-panel [expanded]="true">

@@ -39,6 +39,7 @@ import {
 import { EntityType } from '@shared/models/entity-type.models';
 import { RuleChainId } from '@shared/models/id/rule-chain-id';
 import { ServiceType } from '@shared/models/queue.models';
+import { EntityId } from '@shared/models/id/entity-id';
 
 @Component({
   selector: 'tb-device-profile',
@@ -66,6 +67,8 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
 
   serviceType = ServiceType.TB_RULE_ENGINE;
 
+  deviceProfileId: EntityId;
+
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
               @Optional() @Inject('entity') protected entityValue: DeviceProfile,
@@ -83,6 +86,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
   }
 
   buildForm(entity: DeviceProfile): FormGroup {
+    this.deviceProfileId = entity?.id ? entity.id : null;
     this.displayProfileConfiguration = entity && entity.type &&
       deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration;
     this.displayTransportConfiguration = entity && entity.transportType &&
@@ -157,6 +161,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
   }
 
   updateForm(entity: DeviceProfile) {
+    this.deviceProfileId = entity.id;
     this.displayProfileConfiguration = entity.type &&
       deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration;
     this.displayTransportConfiguration = entity.transportType &&

@@ -76,7 +76,7 @@
                   [required]="!createProfile"
                   [transportType]="deviceWizardFormGroup.get('transportType').value"
                   formControlName="deviceProfileId"
-                  [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"                              
+                  [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
                   (deviceProfileChanged)="$event?.transportType ? deviceWizardFormGroup.get('transportType').patchValue($event?.transportType) : {}"
                   [addNewProfile]="false"
                   [selectDefaultProfile]="true"
@@ -133,7 +133,8 @@
             {count: alarmRulesFormGroup.get('alarms').value ?
                 alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
           <tb-device-profile-alarms
-            formControlName="alarms">
+            formControlName="alarms"
+            [deviceProfileId]="null">
           </tb-device-profile-alarms>
         </form>
       </mat-step>

@@ -46,7 +46,7 @@
           }}" #alarmRules="matTab">
   <div class="mat-padding" [formGroup]="detailsForm">
     <div formGroupName="profileData">
-      <tb-device-profile-alarms formControlName="alarms"></tb-device-profile-alarms>
+      <tb-device-profile-alarms formControlName="alarms" [deviceProfileId]="entity.id"></tb-device-profile-alarms>
     </div>
   </div>
 </mat-tab>