From 7f73097f9011571607ff574373948f0a23a96dd6 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 27 Nov 2025 16:41:41 +0200
Subject: [PATCH 1/2] UI: Mark required field description in API key

---
 .../components/api-key/add-api-key-dialog.component.html     | 5 ++++-
 .../api-key/edit-api-key-description-panel.component.html    | 5 ++++-
 .../api-key/edit-api-key-description-panel.component.ts      | 4 ++--
 ui-ngx/src/assets/locale/locale.constant-en_US.json          | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
index dd91707449..defcdbb81d 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html
@@ -35,7 +35,10 @@
     </div>
     <mat-form-field class="mat-block" appearance="outline" subscriptSizing="dynamic">
       <mat-label translate>api-key.description</mat-label>
-      <textarea #input cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
+      <textarea cdkTextareaAutosize matInput formControlName="description" rows="2" maxLength="255"></textarea>
+      <mat-error *ngIf="apiKeyForm.get('description').hasError('required')">
+        {{ 'asset.description-required' | translate }}
+      </mat-error>
     </mat-form-field>
     <mat-slide-toggle class="mat-slide" formControlName="enabled">
       {{ 'api-key.enable' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html
index 11f9e0e657..bd889248c9 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html
@@ -21,7 +21,10 @@
   <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>api-key.description</mat-label>
     <textarea #input cdkTextareaAutosize matInput [formControl]="descriptionFormControl" rows="2" maxLength="255"></textarea>
-    <mat-hint align="end">{{input.value?.length || 0}}/255</mat-hint>
+    <mat-error *ngIf="descriptionFormControl.hasError('required')">
+      {{ 'asset.description-required' | translate }}
+    </mat-error>
+    <mat-hint align="end">{{ input.value?.length || 0 }}/255</mat-hint>
   </mat-form-field>
   <div class="tb-edit-api-key-description-panel-buttons">
     <button mat-button
diff --git a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.ts b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.ts
index 54f709f42f..80985f6121 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.ts
@@ -16,7 +16,7 @@
 
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { ApiKeyService } from '@core/http/api-key.service';
 
@@ -37,7 +37,7 @@ export class EditApiKeyDescriptionPanelComponent implements OnInit {
   @Output()
   descriptionApplied = new EventEmitter<string>();
 
-  descriptionFormControl = this.fb.control<string>(null);
+  descriptionFormControl = this.fb.control<string>(null, Validators.required);
 
   constructor(private fb: FormBuilder,
               private popover: TbPopoverComponent<EditApiKeyDescriptionPanelComponent>,
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 dd55dafa95..e1ae77f465 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -772,6 +772,7 @@
         "name-max-length": "Name should be less than 256",
         "label-max-length": "Label should be less than 256",
         "description": "Description",
+        "description-required": "Description is required.",
         "type": "Type",
         "type-required": "Type is required.",
         "details": "Details",

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 2/2] 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."
             }
         },