From 1feb690c1005537935241c01e1f90e627fafef70 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Thu, 11 Dec 2025 18:04:46 +0200
Subject: [PATCH] UI: enhancement and bug-fix for alarm rule and cf

---
 .../filter/alarm-rule-filter-list.component.scss   |  8 ++++----
 ...alarm-rule-filter-predicate-list.component.scss |  8 +++-----
 .../calculated-field-argument-panel.component.scss |  4 ----
 .../dialog/calculated-field-dialog.component.html  |  2 +-
 .../entity-aggregation-component.component.html    |  2 +-
 .../calculated-field-metrics-table.component.html  | 14 ++++++++++++++
 .../calculated-field-metrics-table.component.ts    |  2 +-
 .../output/calculated-field-output.component.html  | 11 +++--------
 ui-ngx/src/app/shared/models/alarm-rule.models.ts  |  2 +-
 .../src/assets/locale/locale.constant-en_US.json   | 11 ++++++-----
 10 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-list.component.scss b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-list.component.scss
index a4bbf1afdd..ea40e01bd0 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-list.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-list.component.scss
@@ -20,13 +20,13 @@
     font-size: 14px;
     font-weight: 500;
   }
+  .no-data-found {
+    height: 50px;
+    font-size: 16px;
+  }
   .filter-list {
     overflow: auto;
     max-height: 300px;
-    .no-data-found {
-      height: 50px;
-      font-size: 16px;
-    }
 
     &-divider {
       border-top: 1px solid rgba(0, 0, 0, 0.12);
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-list.component.scss b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-list.component.scss
index a5f63938fd..29499ab3fb 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-list.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate-list.component.scss
@@ -19,11 +19,9 @@
     font-size: 14px;
     font-weight: 500;
   }
-  .predicate-list {
-    .no-data-found {
-      height: 50px;
-      font-size: 16px;
-    }
+  .no-data-found {
+    height: 50px;
+    font-size: 16px;
   }
 
   .key-filter-list-divider {
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.scss
index f3e13b1f19..1d41a2b57e 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.scss
@@ -27,10 +27,6 @@
       }
     }
   }
-
-  .tb-primary-fill {
-    overflow: visible;
-  }
 }
 
 :host ::ng-deep {
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
index 14ec6d1ce8..0feeda19d4 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex max-w-4xl flex-col">
+<div [formGroup]="fieldFormGroup" class="calculated-field-dialog-container flex flex-col">
   <mat-toolbar color="primary">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
index c49c6f25cc..19600f8085 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
@@ -127,7 +127,7 @@
     <div class="tb-form-panel stroked">
       <mat-slide-toggle class="mat-slide flex" formControlName="produceIntermediateResult">
         <div tb-hint-tooltip-icon="{{ 'calculated-fields.entity-aggregation.produce-intermediate-result-hint' | translate: {
-          time: (intermediateAggregationIntervalInSecForCF * 1000 | milliSecondsToTimeString )
+          time: (intermediateAggregationIntervalInSecForCF * 1000 | milliSecondsToTimeString: false: true )
         } }}">
           {{ 'calculated-fields.entity-aggregation.produce-intermediate-result' | translate }}
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html
index ff969775d5..a35dc97d8a 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.html
@@ -56,6 +56,20 @@
           <div tbTruncateWithTooltip>{{ AggFunctionTranslations.get(metric.function) | translate }}</div>
         </mat-cell>
       </ng-container>
+      <ng-container [matColumnDef]="'argumentName'">
+        <mat-header-cell mat-sort-header *matHeaderCellDef class="xs:hidden lt-md:w-1/2" [class]="{
+            'w-1/5': !simpleMode,
+            'w-1/2': simpleMode,
+        }">
+          {{ 'calculated-fields.metrics.argument-name' | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let metric" class="xs:hidden lt-md:w-1/2" [class]="{
+            'w-1/5': !simpleMode,
+            'w-1/2': simpleMode,
+        }">
+          <div tbTruncateWithTooltip>{{ metric.input.key }}</div>
+        </mat-cell>
+      </ng-container>
       <ng-container [matColumnDef]="'filter'">
         <mat-header-cell mat-sort-header *matHeaderCellDef class="w-1/5 lt-md:hidden">
           {{ 'calculated-fields.metrics.filtered' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts
index ec916213e7..78021529d6 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-table.component.ts
@@ -116,7 +116,7 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
 
   ngOnInit() {
     if (this.simpleMode) {
-      this.displayColumns = ['name', 'function', 'actions'];
+      this.displayColumns = ['name', 'function', 'argumentName', 'actions'];
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
index f81d5afee2..3a47c00b1c 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
@@ -51,14 +51,9 @@
       } @else {
         <div class="flex items-start gap-3 xs:flex-col xs:items-stretch">
           <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
-            <mat-label>
-              {{
-                (outputForm.get('type').value === OutputType.Timeseries
-                  ? 'calculated-fields.timeseries-key'
-                  : 'calculated-fields.attribute-key')
-                  | translate
-              }}
-            </mat-label>
+            <mat-label>{{ (outputForm.get('type').value === OutputType.Timeseries
+              ? 'calculated-fields.timeseries-key'
+              : 'calculated-fields.attribute-key') | translate }}</mat-label>
             <input matInput formControlName="name" required>
             @if (outputForm.get('name').errors && outputForm.get('name').touched) {
               <mat-error>
diff --git a/ui-ngx/src/app/shared/models/alarm-rule.models.ts b/ui-ngx/src/app/shared/models/alarm-rule.models.ts
index 3d94461684..3accaed95c 100644
--- a/ui-ngx/src/app/shared/models/alarm-rule.models.ts
+++ b/ui-ngx/src/app/shared/models/alarm-rule.models.ts
@@ -239,7 +239,7 @@ export const alarmRuleBooleanOperationTranslationMap = new Map<AlarmRuleBooleanO
 );
 
 export const alarmRuleDefaultScript =
-  '// Sample expression for an alarm rule: triggers when temperature is above 20 degree\n' +
+  '// Triggers when temperature is above 20 degrees\n' +
   'return temperature > 20;'
 
 export type AlarmRuleTestScriptFn = (calculatedField: CalculatedField, expression: string, argumentsObj?: Record<string, unknown>, closeAllOnSave?: boolean) => Observable<string>;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 54492e06b5..2ac3b23b3f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1226,10 +1226,11 @@
             "metric-name": "Metric name",
             "metric-name-required": "Metric name is required.",
             "metric-name-pattern": "Metric name is invalid.",
-            "metric-name-duplicate": "Metric name with such name already exists.",
+            "metric-name-duplicate": "Metric with such name already exists.",
             "metric-name-max-length": "Metric name should be less than 256 characters.",
             "metric-name-forbidden": "Metric name is reserved and cannot be used.",
             "copy-metric-name": "Copy metric name",
+            "argument-name": "Argument name",
             "aggregation": "Aggregation",
             "aggregation-type": {
                 "avg": "Average",
@@ -1301,8 +1302,8 @@
         "aggregate-period-hint-offset": "Your aggregation interval will be: {{ interval }}",
         "aggregate-period-hint-offset-and-so-on": "Your aggregation interval will be: {{ interval }} and so on",
         "entity-aggregation": {
-            "argument-hint": "Data will be fetched from selected entity",
-            "argument-setting-hint": "Latest telemetry is the only available argument type for this calculated field",
+            "argument-hint": "Data will be fetched from current entity",
+            "argument-setting-hint": "Latest telemetry is the only available argument type for this calculated field.",
             "aggregation-interval": "Aggregation interval",
             "aggregation-interval-hint": "Defines how often to perform aggregation. Example: every 1 hour aggregates data at 00:00, 01:00, 02:00, etc.",
             "apply-offset": "Apply offset to aggregation interval",
@@ -1312,11 +1313,11 @@
             "offset-value-min": "Offset value must be a positive integer",
             "offset-value-max": "Offset value should be less than the aggregate interval value",
             "wait-delay": "Wait for delayed telemetry",
-            "wait-delay-hint": "Waits for delayed telemetry after the interval ends",
+            "wait-delay-hint": "Waits for delayed telemetry after the interval ends.",
             "duration": "Duration",
             "duration-required": "Duration is required",
             "duration-min": "Duration should be at least 1 minute",
-            "duration-hint": "How long to wait for delayed data after the interval ends",
+            "duration-hint": "How long to wait for delayed data after the interval ends.",
             "produce-intermediate-result": "Produce intermediate result",
             "produce-intermediate-result-hint": "Calculates metrics during the current interval to produce an intermediate result. Updates occur no more often than once every {{ time }}."
         },