UI: bug fixes with alarm rule

ui-ngx/src/app/core/http/entity.service.ts

@@ -189,6 +189,12 @@ export class EntityService {
       case EntityType.AI_MODEL:
         observable = this.aiModelService.getAiModelById(entityId, config);
         break;
+      case EntityType.DEVICE_PROFILE:
+        observable = this.deviceProfileService.getDeviceProfile(entityId, config);
+        break;
+      case EntityType.ASSET_PROFILE:
+        observable = this.assetProfileService.getAssetProfile(entityId, config);
+        break;
     }
     return observable;
   }

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html

@@ -47,6 +47,7 @@
           </mat-form-field>
           <tb-entity-debug-settings-button
             formControlName="debugSettings"
+            entityLabel="alarm-rule.alarm-rule"
             [class.mb-5]="fieldFormGroup.get('name').errors && fieldFormGroup.get('name').touched"
             [entityType]="EntityType.CALCULATED_FIELD"
             [additionalActionConfig]="additionalDebugActionConfig"
@@ -85,14 +86,14 @@
                                                [entityName]="data.entityName"/>
         </div>
         <div class="tb-form-panel">
-          <div class="tb-form-panel-title">{{ 'alarm-rule.create-alarm-rules' | translate }}</div>
+          <div class="tb-form-panel-title">{{ 'alarm-rule.create-conditions' | translate }}</div>
           <div class="flex flex-1 flex-col">
             <tb-create-cf-alarm-rules formControlName="createRules" [arguments]="arguments">
             </tb-create-cf-alarm-rules>
           </div>
         </div>
         <div class="tb-form-panel">
-          <div class="tb-form-panel-title">{{ 'alarm-rule.clear-alarm-rule' | translate }}</div>
+          <div class="tb-form-panel-title">{{ 'alarm-rule.clear-condition' | translate }}</div>
           <div class="flex flex-row items-center justify-start gap-2 pb-2"
                [class.!hidden]="!configFormGroup.get('clearRule').value">
             <div class="clear-alarm-rule flex flex-1 flex-row">

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.ts

@@ -79,7 +79,7 @@ export class AlarmRuleDialogComponent extends DialogComponent<AlarmRuleDialogCom
 
   readonly EntityType = EntityType;
   readonly entityTypeTranslations = entityTypeTranslations;
-  readonly alarmRuleEntityTypeList = [EntityType.DEVICE, EntityType.ASSET, EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE, EntityType.CUSTOMER];
+  readonly alarmRuleEntityTypeList = [EntityType.DEVICE, EntityType.ASSET, EntityType.CUSTOMER, EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE];
   readonly CalculatedFieldType = CalculatedFieldType;
   readonly ScriptLanguage = ScriptLanguage;
 
@@ -166,7 +166,7 @@ export class AlarmRuleDialogComponent extends DialogComponent<AlarmRuleDialogCom
   }
 
   private applyDialogData(): void {
-    const { configuration = {}, type = CalculatedFieldType.ALARM, debugSettings = { failuresEnabled: true, allEnabled: true }, entityId, ...value } = this.data.value ?? {};
+    const { configuration = {}, type = CalculatedFieldType.ALARM, debugSettings = { failuresEnabled: true, allEnabled: true }, entityId = this.data.entityId, ...value } = this.data.value ?? {};
     this.fieldFormGroup.patchValue({ configuration, type, debugSettings, entityId, ...value }, {emitEvent: false});
   }
 

ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.ts

@@ -100,7 +100,7 @@ export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAcces
 
   entityType = EntityType;
 
-  listEntityTypes = [EntityType.DEVICE, EntityType.ASSET, EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE, EntityType.CUSTOMER];
+  listEntityTypes = [EntityType.DEVICE, EntityType.ASSET, EntityType.CUSTOMER, EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE];
   entityTypeTranslations = entityTypeTranslations;
 
   private alarmRuleFilterConfig: AlarmRuleFilterConfig;

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html

@@ -22,7 +22,7 @@
     <div formGroupName="expression" class="flex flex-row items-center justify-start gt-xs:gap-4" style="min-width: fit-content;">
       <tb-toggle-select formControlName="type" appearance="fill-invert" selectMediaBreakpoint="xs">
         <tb-toggle-option [value]="AlarmRuleExpressionType.SIMPLE">{{ 'alarm-rule.expression-type.simple' | translate }}</tb-toggle-option>
-        <tb-toggle-option [value]="AlarmRuleExpressionType.TBEL">{{ 'alarm-rule.expression-type.tbel' | translate }}</tb-toggle-option>
+        <tb-toggle-option [value]="AlarmRuleExpressionType.TBEL">{{ 'alarm-rule.expression-type.script' | translate }}</tb-toggle-option>
       </tb-toggle-select>
     </div>
     <button mat-icon-button
@@ -57,6 +57,7 @@
             </div>
             <tb-js-func formControlName="expression"
                         functionName="expression"
+                        class="tb-alarm-rule-script"
                         [disableUndefinedCheck]="true"
                         [scriptLanguage]="scriptLanguage.TBEL"
                         [functionArgs]="functionArgs"
@@ -64,7 +65,7 @@
                         [editorCompleter]="argumentsEditorCompleter"
                         noValidate="true">
               <div toolbarPrefixButton
-                   class="tb-primary-background tbel-script-lang-chip">{{ 'alarm-rule.expression-type.tbel' | translate }}
+                   class="tb-primary-background tbel-script-lang-chip">{{ 'alarm-rule.expression-type.script' | translate }}
               </div>
             </tb-js-func>
           </div>

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.ts

@@ -74,12 +74,16 @@ export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Vali
   @coerceBoolean()
   disabled: boolean;
 
+  @Input()
+  @coerceBoolean()
+  required: boolean;
+
   @Input()
   arguments: Record<string, CalculatedFieldArgument>;
 
   alarmRuleConditionFormGroup = this.fb.group({
     type: ['SIMPLE'],
-    expression: [{type: AlarmRuleExpressionType.SIMPLE}, Validators.required],
+    expression: [{type: AlarmRuleExpressionType.SIMPLE}],
     schedule: [null],
   });
 
@@ -114,19 +118,21 @@ export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Vali
   }
 
   writeValue(value: AlarmRuleCondition): void {
-    this.modelValue = value;
+    if (value) {
-    this.updateConditionInfo();
+      this.modelValue = value;
+      this.updateConditionInfo();
+    }
   }
 
   public conditionSet() {
-    return this.modelValue && (this.modelValue.expression?.expression || this.modelValue.expression?.filters);
+    return this.modelValue && (this.modelValue.expression?.expression || this.modelValue.expression?.filters) || !this.required;
   }
 
   public validate(c: UntypedFormControl) {
     return this.conditionSet() ? null : {
       alarmRuleCondition: {
         valid: false,
-      },
+      }
     };
   }
 

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-form-panel no-border no-padding" [formGroup]="alarmRuleFormGroup">
-  <tb-cf-alarm-rule-condition formControlName="condition" [arguments]="arguments">
+  <tb-cf-alarm-rule-condition formControlName="condition" [arguments]="arguments" [required]="required">
   </tb-cf-alarm-rule-condition>
   @if (!disabled || alarmRuleFormGroup.get('alarmDetails').value) {
     <div class="tb-form-row space-between column-xs">

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.ts

@@ -21,14 +21,13 @@ import {
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   UntypedFormControl,
-  Validator,
+  Validator
-  Validators
 } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { isDefinedAndNotNull } from '@core/utils';
 import { DashboardId } from '@shared/models/id/dashboard-id';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { AlarmRule } from "@shared/models/alarm-rule.models";
+import { AlarmRule, AlarmRuleCondition } from "@shared/models/alarm-rule.models";
 import { CalculatedFieldArgument } from "@shared/models/calculated-field.models";
 import {
   AlarmRuleDetailsDialogComponent,
@@ -69,7 +68,7 @@ export class CfAlarmRuleComponent implements ControlValueAccessor, OnInit, Valid
   private modelValue: AlarmRule;
 
   alarmRuleFormGroup = this.fb.group({
-    condition: this.fb.control({}, Validators.required),
+    condition: this.fb.control<AlarmRuleCondition | null>(null),
     alarmDetails: [null],
     dashboardId: [null]
   });
@@ -106,12 +105,14 @@ export class CfAlarmRuleComponent implements ControlValueAccessor, OnInit, Valid
   }
 
   writeValue(value: AlarmRule): void {
-    this.modelValue = value;
+    if (value) {
-    const model = this.modelValue ? {
+      this.modelValue = value;
-      ...this.modelValue,
+      const model = this.modelValue ? {
-      dashboardId: this.modelValue.dashboardId?.id
+        ...this.modelValue,
-    } : null;
+        dashboardId: this.modelValue.dashboardId?.id
-    this.alarmRuleFormGroup.patchValue(model, {emitEvent: false});
+      } : null;
+      this.alarmRuleFormGroup.patchValue(model, {emitEvent: false});
+    }
   }
 
   public openEditDetailsDialog($event: Event) {

ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rules-dialog.component.scss

@@ -20,41 +20,38 @@
     display: grid;
     grid-template-rows: min-content minmax(auto, 1fr) min-content;
   }
-
+}
-  .tbel-script-lang-chip {
+.tbel-script-lang-chip {
-    line-height: 20px;
+  line-height: 20px;
-    font-size: 14px;
+  font-size: 14px;
-    font-weight: 500;
+  font-weight: 500;
-    color: white;
+  color: white;
-    border-radius: 100px;
+  border-radius: 100px;
-    width: 70px;
+  width: 70px;
-    min-width: 70px;
+  min-width: 70px;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    margin-top: 2px;
+  margin-top: 2px;
-    margin-right: 4px;
+  margin-right: 4px;
-  }
+}
-
+.tb-js-func {
-  .tb-js-func {
+  .ace_tb {
-    .ace_tb {
+    &.ace_calculated-field {
-      &.ace_calculated-field {
+      &-ctx {
-        &-ctx {
+        color: #C52F00;
-          color: #C52F00;
+      }
-        }
+      &-args {
-        &-args {
+        color: #185F2A;
-          color: #185F2A;
+      }
-        }
+      &-key {
-        &-key {
+        color: #c24c1a;
-          color: #c24c1a;
+      }
-        }
+      &-time-window, &-values, &-func, &-value, &-ts, &-latestTs {
-        &-time-window, &-values, &-func, &-value, &-ts, &-latestTs {
+        color: #7214D0;
-          color: #7214D0;
+      }
-        }
+      &-start-ts, &-end-ts {
-        &-start-ts, &-end-ts {
+        color: #2CAA00;
-          color: #2CAA00;
-        }
       }
     }
   }
 }
-

ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.html

@@ -55,6 +55,7 @@
   </div>
   <div *ngIf="!disabled">
     <button mat-stroked-button color="primary"
+            [disabled]="createAlarmRulesFormArray().controls.length > 4"
             type="button"
             (click)="addCreateAlarmRule()"
             matTooltip="{{ 'alarm-rule.add-create-alarm-rule' | translate }}"

ui-ngx/src/app/modules/home/components/alarm-rules/create-cf-alarm-rules.component.ts

@@ -157,7 +157,7 @@ export class CreateCfAlarmRulesComponent implements ControlValueAccessor, Valida
   }
 
   public validate(c: UntypedFormControl) {
-    return (this.createAlarmRulesFormGroup.valid) ? null : {
+    return (this.createAlarmRulesFormArray().length && this.createAlarmRulesFormGroup.valid) ? null : {
       createAlarmRules: {
         valid: false,
       },

ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts

@@ -271,7 +271,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
       return acc;
     }, {} as Record<EntityType, string[]>);
     const tasks = Object.entries(entitiesByType).map(([entityType, ids]) =>
-      this.entityService.getEntities(entityType as EntityType, ids)
+      this.entityService.getEntities(entityType as EntityType, ids, {ignoreLoading: true})
     );
     if (!tasks.length) {
       return;

ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-button.component.ts

@@ -61,6 +61,7 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
 
   @Input() additionalActionConfig: AdditionalDebugActionConfig;
   @Input({required: true}) entityType: EntityType;
+  @Input() entityLabel: string;
 
   debugSettingsFormGroup = this.fb.group({
     failuresEnabled: [false],
@@ -124,6 +125,7 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
       debugConfig: {
         maxDebugModeDuration: this.maxDebugModeDuration,
         entityType: this.entityType,
+        entityLabel: this.entityLabel,
         additionalActionConfig: this.additionalActionConfig,
       },
       onSettingsAppliedFn: settings => {

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

@@ -112,17 +112,6 @@
         </tb-device-profile-transport-configuration>
       </form>
     </mat-step>
-    <mat-step [stepControl]="alarmRulesFormGroup" [optional]="true">
-      <form [formGroup]="alarmRulesFormGroup" style="padding-bottom: 16px;">
-        <ng-template matStepLabel>{{'device-profile.alarm-rules-with-count' | translate:
-          {count: alarmRulesFormGroup.get('alarms').value ?
-              alarmRulesFormGroup.get('alarms').value.length : 0} }}</ng-template>
-        <tb-device-profile-alarms
-          formControlName="alarms"
-          [deviceProfileId]="null">
-        </tb-device-profile-alarms>
-      </form>
-    </mat-step>
     <mat-step [stepControl]="provisionConfigFormGroup" [optional]="true">
       <form [formGroup]="provisionConfigFormGroup" style="padding-bottom: 16px;">
         <ng-template matStepLabel>{{ 'device-profile.device-provisioning' | translate }}</ng-template>

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

@@ -85,8 +85,6 @@ export class AddDeviceProfileDialogComponent extends
 
   transportConfigFormGroup: UntypedFormGroup;
 
-  alarmRulesFormGroup: UntypedFormGroup;
-
   provisionConfigFormGroup: UntypedFormGroup;
 
   serviceType = ServiceType.TB_RULE_ENGINE;
@@ -132,12 +130,6 @@ export class AddDeviceProfileDialogComponent extends
       this.deviceProfileTransportTypeChanged();
     });
 
-    this.alarmRulesFormGroup = this.fb.group(
-      {
-        alarms: [null]
-      }
-    );
-
     this.provisionConfigFormGroup = this.fb.group(
       {
         provisionConfiguration: [{
@@ -176,8 +168,6 @@ export class AddDeviceProfileDialogComponent extends
       case 1:
         return this.transportConfigFormGroup;
       case 2:
-        return this.alarmRulesFormGroup;
-      case 3:
         return this.provisionConfigFormGroup;
     }
   }
@@ -199,7 +189,6 @@ export class AddDeviceProfileDialogComponent extends
         profileData: {
           configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT),
           transportConfiguration: this.transportConfigFormGroup.get('transportConfiguration').value,
-          alarms: this.alarmRulesFormGroup.get('alarms').value,
           provisionConfiguration: deviceProvisionConfiguration
         }
       };

ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts

@@ -301,6 +301,18 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
           this.entityRequiredText = 'ai-models.model-required';
           this.notFoundEntities = 'ai-models.no-model-text';
           break;
+        case EntityType.DEVICE_PROFILE:
+          this.entityText = 'device-profile.device-profile';
+          this.noEntitiesMatchingText = 'device-profile.no-device-profiles-matching';
+          this.entityRequiredText = 'device-profile.device-profile-required';
+          this.notFoundEntities = 'device-profile.no-device-profiles-text';
+          break;
+        case EntityType.ASSET_PROFILE:
+          this.entityText = 'asset-profile.asset-profile';
+          this.noEntitiesMatchingText = 'asset-profile.no-asset-profiles-matching';
+          this.entityRequiredText = 'asset-profile.asset-profile-required';
+          this.notFoundEntities = 'asset-profile.no-asset-profiles-text';
+          break;
         case AliasEntityType.CURRENT_CUSTOMER:
           this.entityText = 'customer.default-customer';
           this.noEntitiesMatchingText = 'customer.no-customers-matching';

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

@@ -1373,7 +1373,7 @@
         "schedule-days-of-week-required": "At least one day of week should be selected.",
         "expression-type": {
             "simple": "Simple",
-            "tbel": "TBEL"
+            "script": "Script"
         },
         "operation-type": {
             "and": "And",
@@ -1411,8 +1411,8 @@
         "condition-repeating-value-range": "Count of events should be in a range from 1 to 2147483647.",
         "condition-repeating-value-pattern": "Count of events should be integers.",
         "condition-repeating-value-required": "Count of events is required.",
-        "create-alarm-rules": "Create alarm rules",
+        "create-conditions": "Create conditions",
-        "clear-alarm-rule": "Clear alarm rule",
+        "clear-condition": "Clear condition",
         "no-clear-alarm-rule": "No clear condition configured",
         "advanced-settings": "Advanced settings",
         "propagate-alarm": "Propagate alarm to related entities",