From cf7c9989a3cd0c9384634eb0c0093377372d28a1 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 27 Nov 2025 17:20:11 +0200
Subject: [PATCH] UI: Improved cf output strategy

---
 .../calculated-field-output.component.html    | 31 +++++++++----------
 .../assets/locale/locale.constant-en_US.json  | 13 +++++---
 2 files changed, 22 insertions(+), 22 deletions(-)

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 747faac88f..6b894c7861 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
@@ -95,40 +95,37 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       @if (outputForm.get('strategy.type').value === OutputStrategyType.IMMEDIATE) {
-        @if (outputForm.get('type').value === OutputType.Timeseries) {
-          <div class="tb-form-row flex-1">
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title" translate>calculated-fields.output-strategy.processing-parameters</div>
+          @if (outputForm.get('type').value === OutputType.Timeseries) {
             <mat-slide-toggle class="mat-slide" formControlName="saveTimeSeries">
               <div tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.save-time-series' | translate }}">
                 <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.save-time-series</div>
               </div>
             </mat-slide-toggle>
-          </div>
-          <div class="tb-form-row flex-1">
             <mat-slide-toggle class="mat-slide" formControlName="saveLatest">
               <div tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.save-latest-values' | translate }}">
                 <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.save-latest-values</div>
               </div>
             </mat-slide-toggle>
-          </div>
-        } @else {
-          <div class="tb-form-row flex-1">
+          } @else {
             <mat-slide-toggle class="mat-slide" formControlName="saveAttribute">
               <div tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.save-database' | translate }}">
                 <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.save-database</div>
               </div>
             </mat-slide-toggle>
-          </div>
-        }
-        <div class="tb-form-row flex-1">
+          }
           <mat-slide-toggle class="mat-slide" formControlName="sendWsUpdate">
-            <div tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.send-web-sockets' | translate }}">
+            <div tb-hint-tooltip-icon="{{ (outputForm.get('type').value === OutputType.Attribute
+                                            ? 'calculated-fields.output-strategy.hint.send-web-sockets-attribute'
+                                            : 'calculated-fields.output-strategy.hint.send-web-sockets-time-series') | translate }}">
               <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.send-web-sockets</div>
             </div>
           </mat-slide-toggle>
-        </div>
-        <div class="tb-form-row flex-1">
           <mat-slide-toggle class="mat-slide" formControlName="processCfs">
-            <div tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.save-calculated-fields' | translate }}">
+            <div tb-hint-tooltip-icon="{{ (outputForm.get('type').value === OutputType.Attribute
+                                            ? 'calculated-fields.output-strategy.hint.save-calculated-fields-attribute'
+                                            : 'calculated-fields.output-strategy.hint.save-calculated-fields-time-series') | translate }}">
               <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.save-calculated-fields</div>
             </div>
           </mat-slide-toggle>
@@ -137,9 +134,9 @@
           <div class="tb-form-row flex-1">
             <mat-slide-toggle class="mat-slide" formControlName="updateAttributesOnlyOnValueChange">
               <div tb-hint-tooltip-icon="{{ (outputForm.get('strategy.updateAttributesOnlyOnValueChange').value
-                                         ? 'calculated-fields.output-strategy.hint.update-attributes-only-on-value-change-enabled'
-                                         : 'calculated-fields.output-strategy.hint.update-attributes-only-on-value-change') | translate }}">
-                <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.update-attributes-only-on-value-change</div>
+                                              ? 'calculated-fields.output-strategy.hint.update-attribute-only-on-value-change-enabled'
+                                              : 'calculated-fields.output-strategy.hint.update-attribute-only-on-value-change') | translate }}">
+                <div translate tbTruncateWithTooltip>calculated-fields.output-strategy.update-attribute-only-on-value-change</div>
               </div>
             </mat-slide-toggle>
           </div>
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 e1ae77f465..25efae80b3 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1258,20 +1258,23 @@
             "save-latest-values": "Save to latest values",
             "send-web-sockets": "Send to WebSockets",
             "save-calculated-fields": "Send to Calculated fields",
-            "update-attributes-only-on-value-change": "Save attributes only if the value changes",
+            "update-attribute-only-on-value-change": "Update attribute only on value change",
             "ttl": "Custom TTL",
             "ttl-required": "TTL is required",
             "ttl-min": "Only 0 minimum TTL is allowed",
+            "processing-parameters": "Processing parameters",
             "hint": {
                 "strategy": "Controls whether the result is processed immediately or sent to a rule chain for additional processing",
                 "processing-options": "Processing options",
-                "update-attributes-only-on-value-change": "Updates the attributes on every incoming message disregarding if their value has changed. Increases API usage and reduces performance.",
-                "update-attributes-only-on-value-change-enabled": "Updates the attributes only if their value has changed. If the value is not changed, no update to the attribute timestamp nor attribute change notification will be sent.",
+                "update-attribute-only-on-value-change": "Updates attribute on every incoming message, regardless of whether the value has changed. This increases API usage and reduces performance.",
+                "update-attribute-only-on-value-change-enabled": "Updates attribute only when the value changes. If the value is unchanged, timestamps are not updated and notifications are not sent.",
                 "save-time-series": "Saves time series data to the ts_kv table in the database.",
                 "save-database": "Saves attribute data to the database.",
                 "save-latest-values": "Updates time series data in the ts_kv_latest table in the database if the new value is more recent.",
-                "send-web-sockets": "Notifies WebSocket subscriptions about updates to the attribute data.",
-                "save-calculated-fields": "Notifies calculated fields about updates to the attribute data.",
+                "send-web-sockets-attribute": "Notifies WebSocket subscriptions about updates to the attribute data.",
+                "send-web-sockets-time-series": "Notifies WebSocket subscriptions about updates to the time series data.",
+                "save-calculated-fields-attribute": "Notifies calculated fields about updates to the attribute data.",
+                "save-calculated-fields-time-series": "Notifies calculated fields about updates to the time series data.",
                 "ttl": "Defines the retention period for time series data. If disabled, the Tenant Profile TTL is used."
             }
         },