UI: Fixed cf and alarm rule in preview

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

@@ -79,6 +79,7 @@
                                              [entityId]="entityId"
                                              [tenantId]="tenantId"
                                              [ownerId]="ownerId"
+                                             [isEditValue]="isEditValue"
                                              [watchKeyChange]="true"
                                              [entityName]="entityName"/>
       </div>
@@ -97,14 +98,16 @@
             <tb-cf-alarm-rule formControlName="clearRule" class="flex-1" [arguments]="arguments" [testScript]="onTestScript.bind(this)" isClearCondition>
             </tb-cf-alarm-rule>
           </div>
-          <button mat-icon-button
+          @if (isEditValue) {
-                  class="button-icon"
+            <button mat-icon-button
-                  type="button"
+                    class="button-icon"
-                  (click)="removeClearAlarmRule()"
+                    type="button"
-                  matTooltip="{{ 'action.remove' | translate }}"
+                    (click)="removeClearAlarmRule()"
-                  matTooltipPosition="above">
+                    matTooltip="{{ 'action.remove' | translate }}"
-            <mat-icon>delete</mat-icon>
+                    matTooltipPosition="above">
-          </button>
+              <mat-icon>delete</mat-icon>
+            </button>
+          }
         </div>
         <div *ngIf="!configFormGroup.get('clearRule').value">
           <span translate class="tb-prompt flex items-center justify-center text-base">alarm-rule.no-clear-alarm-rule</span>

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

@@ -53,7 +53,7 @@ import { EntityService } from '@core/http/entity.service';
 @Component({
   selector: 'tb-alarm-rules',
   templateUrl: './alarm-rules.component.html',
-  styleUrls: []
+  styleUrls: ['./alarm-rule-dialog.component.scss']
 })
 export class AlarmRulesComponent extends EntityComponent<CalculatedFieldsTableEntity> {
 
@@ -175,7 +175,8 @@ export class AlarmRulesComponent extends EntityComponent<CalculatedFieldsTableEn
         expression: {
           type: AlarmRuleExpressionType.SIMPLE
         }
-      }
+      },
+      alarmDetails: null
     };
     this.configFormGroup.patchValue({clearRule: clearAlarmRule});
   }

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

@@ -50,6 +50,7 @@
                 <tb-alarm-rule-filter-list
                   [operation]="conditionFormGroup.get('expression.operation').value"
                   [arguments]="arguments"
+                  [readonly]="readonly"
                   formControlName="filters">
                 </tb-alarm-rule-filter-list>
               </div>
@@ -75,7 +76,7 @@
                           matTooltip="{{ 'calculated-fields.test-script-function' | translate }}"
                           matTooltipPosition="above"
                           class="tb-mat-32"
-                          [disabled]="!argumentsList.length"
+                          [disabled]="!argumentsList.length || readonly"
                           (click)="onTestScript($event)">
                     <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
                   </button>
@@ -84,7 +85,7 @@
                   <button mat-button mat-raised-button color="primary"
                           type="button"
                           (click)="onTestScript($event)"
-                          [disabled]="!argumentsList.length">
+                          [disabled]="!argumentsList.length || readonly">
                     {{ 'calculated-fields.test-script-function' | translate }}
                   </button>
                 </div>
@@ -111,7 +112,7 @@
                                                  required>
                       </tb-alarm-rule-filter-text>
                     } @else {
-                      <span class="tb-prompt text-base justify-center">{{ 'alarm-rule.no-filter-preview' | translate }}</span>
+                      <span class="tb-prompt justify-center text-base">{{ 'alarm-rule.no-filter-preview' | translate }}</span>
                     }
                   </div>
                 </ng-template>
@@ -135,7 +136,7 @@
             <span>{{ 'alarm-rule.condition-type-hint' | translate }}</span>
           </div>
         }
-        @if (conditionFormGroup.get('type').value == AlarmConditionType.DURATION) {
+        @if (conditionFormGroup.get('type').value === AlarmConditionType.DURATION) {
           <div class="tb-form-panel stroked no-padding-bottom">
             <div class="flex flex-row items-center justify-between">
               <div class="tb-form-panel-title">{{ 'alarm-rule.value' | translate }}</div>
@@ -167,7 +168,7 @@
               </div>
             </div>
           </div>
-        } @else if (conditionFormGroup.get('type').value == AlarmConditionType.REPEATING) {
+        } @else if (conditionFormGroup.get('type').value === AlarmConditionType.REPEATING) {
           <div class="tb-form-panel stroked">
             <div class="flex flex-row items-center justify-between">
               <div class="tb-form-panel-title">{{ 'alarm-rule.value' | translate }}</div>

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

@@ -196,6 +196,10 @@ export class CfAlarmRuleConditionDialogComponent extends DialogComponent<CfAlarm
     this.updateValidators(this.conditionFormGroup.get('type').value ?? AlarmRuleConditionType.SIMPLE);
     this.updateSpecText(this.conditionFormGroup.get('type').value ?? AlarmRuleConditionType.SIMPLE);
     this.updateExpressionTypeValidator(this.condition?.expression?.type ?? 'SIMPLE');
+
+    if (this.readonly) {
+      this.conditionFormGroup.disable({emitEvent: false});
+    }
   }
 
   updateStaticValueValidator(type: AlarmRuleConditionType, dynamicValue: boolean) {

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

@@ -46,7 +46,7 @@
                   {{ dayOfWeekTranslationsArray[day] | translate }}
                 </mat-chip-option>
               </mat-chip-listbox>
-              <tb-error class="block mb-2" [error]="alarmScheduleForm.get('staticValue.daysOfWeek').hasError('required')
+              <tb-error class="mb-2 block" [error]="alarmScheduleForm.get('staticValue.daysOfWeek').hasError('required')
                     ? ('alarm-rule.schedule-days-of-week-required' | translate) : ''"></tb-error>
               <div class="flex flex-row xs:flex-col gt-xs:gap-2">
                 <div class="flex flex-row gap-2 gt-md:flex-1">
@@ -63,7 +63,7 @@
                     <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
                   </mat-form-field>
                 </div>
-                <div class="flex flex-1 items-center justify-center mb-[22px]">
+                <div class="flex flex-1 items-center justify-center" style="margin-bottom: 22px;">
                   <div class="text-center" [innerHTML]="getSchedulerRangeText(alarmScheduleForm.get('staticValue'))"></div>
                 </div>
               </div>
@@ -90,7 +90,7 @@
                       <input required matInput formControlName="endsOn" [matDatetimepicker]="endTimePicker">
                     </mat-form-field>
                   </div>
-                  <div class="flex flex-1 items-center justify-center sm:max-w-[120px] text-center"
+                  <div class="flex flex-1 items-center justify-center text-center sm:max-w-[120px]"
                        [innerHTML]="getSchedulerRangeText(itemsSchedulerForm.at(day))">
                   </div>
                 </div>

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

@@ -49,7 +49,7 @@
     </div>
   }
   @if (!createAlarmRulesFormArray().controls.length) {
-    <span translate class="flex items-center justify-center tb-prompt text-base required" [class.required]="!disabled">
+    <span translate class="tb-prompt required flex items-center justify-center text-base" [class.required]="!disabled">
         alarm-rule.add-create-alarm-rule-prompt
     </span>
   }

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

@@ -52,10 +52,12 @@
             cdkFocusInitial>
       {{'action.cancel' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    @if (!readonly) {
-            type="submit"
+      <button mat-raised-button color="primary"
-            [disabled]="complexFilterFormGroup.invalid || !complexFilterFormGroup.dirty">
+              type="submit"
-      {{ (isAdd ? 'action.add' : 'action.update') | translate }}
+              [disabled]="complexFilterFormGroup.invalid || !complexFilterFormGroup.dirty">
-    </button>
+        {{ (isAdd ? 'action.add' : 'action.update') | translate }}
+      </button>
+    }
   </div>
 </form>

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

@@ -36,6 +36,7 @@ export interface AlarmRuleComplexFilterPredicateDialogData {
   valueType: EntityKeyValueType;
   arguments: Record<string, CalculatedFieldArgument>;
   argumentInUse: string;
+  readonly: boolean;
 }
 
 @Component({
@@ -63,6 +64,8 @@ export class AlarmRuleComplexFilterPredicateDialogComponent extends
 
   arguments = this.data.arguments;
 
+  readonly = this.data.readonly;
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: AlarmRuleComplexFilterPredicateDialogData,
@@ -73,6 +76,10 @@ export class AlarmRuleComplexFilterPredicateDialogComponent extends
     this.isAdd = this.data.isAdd;
 
     this.complexFilterFormGroup.patchValue(this.data.complexPredicate, {emitEvent: false});
+
+    if (this.readonly) {
+      this.complexFilterFormGroup.disable({emitEvent: false});
+    }
   }
 
   cancel(): void {

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

@@ -46,7 +46,7 @@
               </mat-icon>
             }
           </mat-form-field>
-          <mat-form-field class="flex-1 tb-value-type" appearance="outline" subscriptSizing="dynamic" hideRequiredMarker>
+          <mat-form-field class="tb-value-type flex-1" appearance="outline" subscriptSizing="dynamic" hideRequiredMarker>
             <mat-label translate>filter.value-type.value-type</mat-label>
             <mat-select formControlName="valueType">
               <mat-select-trigger>
@@ -93,10 +93,12 @@
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button color="primary"
+    @if (!readonly) {
-            type="submit"
+      <button mat-raised-button color="primary"
-            [disabled]="filterFormGroup.invalid || !filterFormGroup.dirty || !predicatesValid">
+              type="submit"
-      {{ (data.isAdd ? 'action.add' : 'action.update') | translate }}
+              [disabled]="filterFormGroup.invalid || !filterFormGroup.dirty || !predicatesValid">
-    </button>
+        {{ (data.isAdd ? 'action.add' : 'action.update') | translate }}
+      </button>
+    }
   </div>
 </form>

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

@@ -39,6 +39,7 @@
   isAdd: boolean;
   arguments: Record<string, CalculatedFieldArgument>;
   usedArguments: Array<string>;
+  readonly: boolean;
 }
 
 @Component({
@@ -66,6 +67,8 @@ export class AlarmRuleFilterDialogComponent extends DialogComponent<AlarmRuleFil
   arguments = this.data.arguments;
   argumentsList: Array<string>;
 
+  readonly = this.data.readonly;
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: AlarmRuleFilterDialogData,
@@ -114,6 +117,10 @@ export class AlarmRuleFilterDialogComponent extends DialogComponent<AlarmRuleFil
         }
       }
     });
+
+    if (this.readonly) {
+      this.filterFormGroup.disable({emitEvent: false});
+    }
   }
 
   argumentInUse(argument: string): boolean {

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

@@ -40,11 +40,11 @@
           </div>
           <div class="flex max-w-92% flex-full flex-col">
             <div class="flex flex-row items-center justify-start">
-              <div class="flex-1 filters-text">{{ filterControl.value?.argument }}</div>
+              <div class="filters-text flex-1">{{ filterControl.value?.argument }}</div>
-              <div class="flex-1 filters-text">{{ FilterPredicateTypeTranslationMap.get(filterControl.value?.valueType) | translate }}</div>
+              <div class="filters-text flex-1">{{ FilterPredicateTypeTranslationMap.get(filterControl.value?.valueType) | translate }}</div>
               <button mat-icon-button color="primary" class="tb-budge-button"
                       type="button"
-                      (click)="editFilter(index)"
+                      (click)="editFilter(index, readonly)"
                       matTooltip="{{  'alarm-rule.edit-filter' | translate }}"
                       matTooltipPosition="above">
                 <mat-icon
@@ -53,11 +53,12 @@
                   matBadgeSize="small"
                   matBadge="*"
                 >
-                  edit
+                  {{ readonly ? 'visibility' : 'edit' }}
                 </mat-icon>
               </button>
               <button mat-icon-button color="primary"
                       type="button"
+                      [disabled]="disabled || readonly"
                       (click)="removeFilter(index)"
                       matTooltip="{{ 'alarm-rule.remove-filter' | translate }}"
                       matTooltipPosition="above">

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

@@ -71,6 +71,9 @@ export class AlarmRuleFilterListComponent implements ControlValueAccessor, Valid
   @Input()
   operation: ComplexOperation = ComplexOperation.AND;
 
+  @Input()
+  readonly = false;
+
   filterListFormGroup = this.fb.group({
     filters: this.fb.array([])
   });
@@ -143,17 +146,17 @@ export class AlarmRuleFilterListComponent implements ControlValueAccessor, Valid
     });
   }
 
-  public editFilter(index: number) {
+  public editFilter(index: number, readonly = false) {
     const filter: AlarmRuleFilter =
       (this.filterListFormGroup.get('filters') as FormArray).at(index).value;
-    this.openFilterDialog(filter).subscribe(result => {
+    this.openFilterDialog(filter, readonly).subscribe(result => {
       if (result) {
         (this.filterListFormGroup.get('filters') as FormArray).at(index).patchValue(result);
       }
     });
   }
 
-  private openFilterDialog(filter?: AlarmRuleFilter): Observable<AlarmRuleFilter> {
+  private openFilterDialog(filter?: AlarmRuleFilter, readonly = false): Observable<AlarmRuleFilter> {
     const isAdd = !filter;
     if (isAdd) {
       filter = {
@@ -171,7 +174,8 @@ export class AlarmRuleFilterListComponent implements ControlValueAccessor, Valid
         filter: filter ? deepClone(filter) : null,
         isAdd,
         arguments: this.arguments,
-        usedArguments: this.getUsedArguments
+        usedArguments: this.getUsedArguments,
+        readonly
       }
     }).afterClosed();
   }

ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-list.component.html

@@ -31,7 +31,7 @@
       <mat-divider style="padding-bottom: 5px;"></mat-divider>
       <div class="predicate-list">
         @for (predicateControl of predicatesFormArray.controls; track predicateControl; let index = $index) {
-          <div class="flex flex-row items-stretch justify-start relative"
+          <div class="relative flex flex-row items-stretch justify-start"
                [class.key-filter-list-divider]="$index">
             @if (index) {
               <div class="filters-operation-container">

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

@@ -80,6 +80,8 @@ export class AlarmRuleFilterPredicateListComponent implements ControlValueAccess
 
   @Input() argumentInUse: string;
 
+  @Input() readonly: boolean;
+
   filterListFormGroup = this.fb.group({
     predicates: this.fb.array([])
   });
@@ -197,7 +199,8 @@ export class AlarmRuleFilterPredicateListComponent implements ControlValueAccess
         valueType: this.valueType,
         isAdd: true,
         arguments: this.arguments,
-        argumentInUse: this.argumentInUse
+        argumentInUse: this.argumentInUse,
+        readonly: this.readonly
       }
     }).afterClosed().pipe(
       map(result => result)

ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-no-data-value.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="tb-form-panel no-border no-gap no-padding" [formGroup]="filterPredicateValueNoDataFormGroup">
   <div class="tb-form-row no-padding no-border column-xs">
-    <mat-form-field hideRequiredMarker class="flex-1 w-full max-w-30% xs:max-w-full" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field hideRequiredMarker class="w-full max-w-30% flex-1 xs:max-w-full" appearance="outline" subscriptSizing="dynamic">
       <mat-select [formControl]="dynamicModeControl" placeholder="{{'filter.dynamic-source-type' | translate}}">
         <mat-option [value]="false">{{'alarm-rule.static' | translate}}</mat-option>
         <mat-option [value]="true">{{'alarm-rule.dynamic' | translate}}</mat-option>
@@ -39,7 +39,7 @@
             }
         </mat-form-field>
       } @else {
-        <mat-form-field class="flex-1 w-full" appearance="outline" subscriptSizing="dynamic">
+        <mat-form-field class="w-full flex-1" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="dynamicValueArgument" placeholder="{{ 'action.set' | translate }}">
             @for (argument of argumentsList; track argument) {
               <mat-option [value]="argument" [disabled]="argument === argumentInUse">{{ argument }}</mat-option>

ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-value.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="tb-form-panel no-border no-gap no-padding" [formGroup]="filterPredicateValueFormGroup">
   <div class="tb-form-row no-padding no-border column-xs">
-    <mat-form-field hideRequiredMarker class="flex-1 w-full max-w-30% xs:max-w-full" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field hideRequiredMarker class="w-full max-w-30% flex-1 xs:max-w-full" appearance="outline" subscriptSizing="dynamic">
       <mat-select [formControl]="dynamicModeControl" placeholder="{{'filter.dynamic-source-type' | translate}}">
         <mat-option [value]="false">{{'alarm-rule.static' | translate}}</mat-option>
         <mat-option [value]="true">{{'alarm-rule.dynamic' | translate}}</mat-option>
@@ -52,7 +52,7 @@
         }
       }
     } @else {
-      <mat-form-field class="flex-1 w-full" appearance="outline" subscriptSizing="dynamic">
+      <mat-form-field class="w-full flex-1" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="dynamicValueArgument" placeholder="{{ 'action.set' | translate }}">
           @for (argument of argumentsList; track argument) {
             <mat-option [value]="argument" [disabled]="argument === argumentInUse">{{ argument }}</mat-option>

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

@@ -19,7 +19,7 @@
   <div class="tb-form-panel no-border no-padding-right flex-1" style="flex-direction: row">
     @switch (type) {
       @case (filterPredicateType.STRING) {
-        <div class="tb-form-row no-padding no-border column-xs w-full max-w-30% xs:max-w-full flex-1/">
+        <div class="tb-form-row no-padding no-border column-xs flex-1/ w-full max-w-30% xs:max-w-full">
           <mat-form-field hideRequiredMarker class="flex-1" appearance="outline" subscriptSizing="dynamic">
             <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
               <mat-option *ngFor="let operation of stringOperations" [value]="operation">
@@ -64,7 +64,7 @@
                   (click)="openComplexFilterDialog()">
             <div class="flex items-center gap-2">
               <span class="w-full text-start" translate>filter.complex-filter</span>
-              <mat-icon class="tb-mat-20 tb-alarm-rule-schedule-edit-icon">edit</mat-icon>
+              <mat-icon class="tb-mat-20 tb-alarm-rule-schedule-edit-icon">{{ disabled ? 'visibility' : 'edit' }} </mat-icon>
             </div>
           </button>
         </div>

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

@@ -203,6 +203,7 @@ export class AlarmRuleFilterPredicateComponent implements ControlValueAccessor,
         isAdd: false,
         arguments: this.arguments,
         argumentInUse: this.argumentInUse,
+        readonly: this.disabled
       }
     }).afterClosed().subscribe(
       (result) => {

ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html

@@ -101,6 +101,7 @@
                                      [entityName]="entityName"
                                      [ownerId]="ownerId"
                                      [tenantId]="tenantId"
+                                     [isEditValue]="isEditValue"
         ></tb-geofencing-configuration>
       }
       @case (CalculatedFieldType.PROPAGATION) {
@@ -111,6 +112,7 @@
                                       [tenantId]="tenantId"
                                       [ownerId]="ownerId"
                                       [testScript]="onTestScript.bind(this)"
+                                      [isEditValue]="isEditValue"
         ></tb-propagation-configuration>
       }
       @case (CalculatedFieldType.RELATED_ENTITIES_AGGREGATION) {
@@ -120,6 +122,7 @@
                                                    [entityName]="entityName"
                                                    [tenantId]="tenantId"
                                                    [testScript]="onTestScript.bind(this)"
+                                                   [isEditValue]="isEditValue"
         ></tb-related-entities-aggregation-component>
       }
       @case (CalculatedFieldType.ENTITY_AGGREGATION) {
@@ -128,6 +131,7 @@
                                          [entityId]="entityId"
                                          [entityName]="entityName"
                                          [tenantId]="tenantId"
+                                         [isEditValue]="isEditValue"
         ></tb-entity-aggregation-component>
       }
       @default {
@@ -139,6 +143,7 @@
                                  [tenantId]="tenantId"
                                  [isScript]="entityForm.get('type').value === CalculatedFieldType.SCRIPT"
                                  [testScript]="onTestScript.bind(this)"
+                                 [isEditValue]="isEditValue"
         ></tb-simple-configuration>
       }
     }

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

@@ -93,7 +93,7 @@
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
         <mat-cell *matCellDef="let argument;">
           <div class="tb-form-table-row-cell-buttons min-w-20">
-            @if (disable) {
+            @if (!isEditValue) {
               <button type="button"
                       mat-icon-button
                       #previewButton

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

@@ -89,6 +89,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
   @Input() ownerId: EntityId;
   @Input() isScript: boolean;
   @Input({transform: booleanAttribute}) disable = false;
+  @Input({transform: booleanAttribute}) isEditValue = true;
   @Input() watchKeyChange = false;
 
   @ViewChild(MatSort, { static: true }) sort: MatSort;

ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html

@@ -26,6 +26,7 @@
     <tb-entity-aggregation-arguments-table formControlName="arguments"
                                            [entityId]="entityId"
                                            [tenantId]="tenantId"
+                                           [isEditValue]="isEditValue"
                                            [entityName]="entityName"/>
   </div>
   <div class="tb-form-panel">

ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input } from '@angular/core';
+import { booleanAttribute, Component, forwardRef, Input } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -87,6 +87,8 @@ export class EntityAggregationComponentComponent implements ControlValueAccessor
 
   @Input() testScript: (expression?: string) => Observable<string>;
 
+  @Input({transform: booleanAttribute}) isEditValue = true;
+
   readonly minAllowedAggregationIntervalInSecForCF = getCurrentAuthState(this.store).minAllowedAggregationIntervalInSecForCF;
   readonly intermediateAggregationIntervalInSecForCF = getCurrentAuthState(this.store).intermediateAggregationIntervalInSecForCF;
   readonly DayInSec = DAY / SECOND;

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html

@@ -96,7 +96,7 @@
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
         <mat-cell *matCellDef="let geofenceZone;">
           <div class="tb-form-table-row-cell-buttons min-w-20">
-            @if (disable) {
+            @if (!isEditValue) {
               <button type="button"
                       mat-icon-button
                       #previewButton

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectorRef,
   Component,
   DestroyRef,
@@ -82,6 +83,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
   @Input({required: true}) tenantId: string;
   @Input({required: true}) entityName: string;
   @Input({required: true}) ownerId: EntityId;
+  @Input({transform: booleanAttribute}) isEditValue = true;
 
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/geofencing-configuration.component.html

@@ -44,6 +44,7 @@
                                                       [entityId]="entityId"
                                                       [tenantId]="tenantId"
                                                       [ownerId]="ownerId"
+                                                      [isEditValue]="isEditValue"
                                                       [entityName]="entityName"/>
     <div class="tb-form-row space-between flex-1 columns-xs" [class.!hidden]="!isRelatedEntity">
       <mat-slide-toggle class="mat-slide" formControlName="scheduledUpdateEnabled">

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/geofencing-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { booleanAttribute, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -72,6 +72,8 @@ export class GeofencingConfigurationComponent implements ControlValueAccessor, V
   @Input({required: true})
   ownerId: EntityId;
 
+  @Input({transform: booleanAttribute}) isEditValue = true;
+
   readonly minAllowedScheduledUpdateIntervalInSecForCF = getCurrentAuthState(this.store).minAllowedScheduledUpdateIntervalInSecForCF;
   readonly DataKeyType = DataKeyType;
 

ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.html

@@ -56,6 +56,7 @@
                                   [entityName]="entityName"
                                   [ownerId]="ownerId"
                                   [watchKeyChange]="true"
+                                  [isEditValue]="isEditValue"
                                   [isScript]="this.propagateConfiguration.get('applyExpressionToResolvedArguments').value"/>
   </div>
   <div class="tb-form-panel no-gap" [class.!hidden]="!this.propagateConfiguration.get('applyExpressionToResolvedArguments').value">

ui-ngx/src/app/modules/home/components/calculated-fields/components/propagation-configuration/propagation-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input } from '@angular/core';
+import { booleanAttribute, Component, forwardRef, Input } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -77,6 +77,8 @@ export class PropagationConfigurationComponent implements ControlValueAccessor,
   @Input({required: true})
   testScript: () => Observable<string>;
 
+  @Input({transform: booleanAttribute}) isEditValue = true;
+
   propagateConfiguration = this.fb.group({
     arguments: this.fb.control({}, notEmptyObjectValidator()),
     applyExpressionToResolvedArguments: [false],

ui-ngx/src/app/modules/home/components/calculated-fields/components/related-entities-aggregation-configuration/related-entities-aggregation-component.component.html

@@ -48,6 +48,7 @@
                                             [entityId]="entityId"
                                             [tenantId]="tenantId"
                                             [entityName]="entityName"
+                                            [isEditValue]="isEditValue"
                                             [relation]="relatedAggregationConfiguration.get('relation').value"/>
   </div>
   <div class="tb-form-panel">

ui-ngx/src/app/modules/home/components/calculated-fields/components/related-entities-aggregation-configuration/related-entities-aggregation-component.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input } from '@angular/core';
+import { booleanAttribute, Component, forwardRef, Input } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -76,6 +76,8 @@ export class RelatedEntitiesAggregationComponentComponent implements ControlValu
   @Input({required: true})
   testScript: (expression?: string) => Observable<string>;
 
+  @Input({transform: booleanAttribute}) isEditValue = true;
+
   readonly ScriptLanguage = ScriptLanguage;
   readonly CalculatedFieldType = CalculatedFieldType;
   readonly OutputType = OutputType;

ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.html

@@ -26,6 +26,7 @@
                                          [tenantId]="tenantId"
                                          [ownerId]="ownerId"
                                          [entityName]="entityName"
+                                         [isEditValue]="isEditValue"
                                          [watchKeyChange]="true"
                                          [isScript]="isScript" />
   </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { booleanAttribute, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -81,6 +81,8 @@ export class SimpleConfigurationComponent implements ControlValueAccessor, Valid
   @Input({required: true})
   testScript: () => Observable<string>;
 
+  @Input({transform: booleanAttribute}) isEditValue = true;
+
   simpleConfiguration = this.fb.group({
     arguments: this.fb.control({}),
     expressionSIMPLE: ['', [Validators.required, Validators.pattern(oneSpaceInsideRegex), Validators.maxLength(255)]],

ui-ngx/src/app/modules/home/pages/alarm/alarm-routing.module.ts

@@ -22,13 +22,10 @@ import { AlarmsMode } from '@shared/models/alarm.models';
 import { MenuId } from '@core/services/menu.models';
 import { RouterTabsComponent } from "@home/components/router-tabs.component";
 import { AlarmRulesTableComponent } from "@home/components/alarm-rules/alarm-rules-table.component";
-import { CalculatedFieldsTableComponent } from '@home/components/calculated-fields/calculated-fields-table.component';
 import { EntityDetailsPageComponent } from '@home/components/entity/entity-details-page.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { entityDetailsPageBreadcrumbLabelFunction } from '@home/pages/home-pages.models';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
-import { CalculatedFieldsTableConfigResolver } from '@home/pages/calculated-fields/calculated-fields-routing.module';
-import { CalculatedFieldsTableConfig } from '@home/components/calculated-fields/calculated-fields-table-config';
 import { CalculatedFieldsService } from '@core/http/calculated-fields.service';
 import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';