Merge pull request #14437 from vvlladd28/bug/cf-api-key/improvement

Improvement cf and api keys

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 }}

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

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>,

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>

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",
@@ -1257,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."
             }
         },