From 276c3064b029c3103268192b1d32cc743321e277 Mon Sep 17 00:00:00 2001
From: ArtemDzhereleiko <adzhereleiko@thingsboard.io>
Date: Fri, 2 Jan 2026 16:38:27 +0200
Subject: [PATCH 1/2] UI: Preview for argument table

---
 ...ulated-field-argument-panel.component.html | 16 ++++---
 ...lculated-field-argument-panel.component.ts |  6 +++
 ...lated-field-arguments-table.component.html | 43 ++++++++++++-------
 ...culated-field-arguments-table.component.ts |  3 +-
 ...eofencing-zone-groups-panel.component.html | 16 ++++---
 ...-geofencing-zone-groups-panel.component.ts |  5 +++
 ...eofencing-zone-groups-table.component.html | 39 +++++++++++------
 ...-geofencing-zone-groups-table.component.ts |  3 +-
 ...culated-field-metrics-panel.component.html | 20 +++++----
 ...alculated-field-metrics-panel.component.ts |  7 ++-
 ...culated-field-metrics-table.component.html | 29 +++++++++----
 ...alculated-field-metrics-table.component.ts |  5 ++-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 13 files changed, 126 insertions(+), 67 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.html
index 30533dc714..484f1f9238 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.html
@@ -188,13 +188,15 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="saveArgument()"
-            [disabled]="argumentFormGroup.invalid || !argumentFormGroup.dirty">
-      {{ buttonTitle | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="saveArgument()"
+              [disabled]="argumentFormGroup.invalid || !argumentFormGroup.dirty">
+        {{ buttonTitle | translate }}
+      </button>
+    }
   </div>
 </div>
 
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.ts
index 51d14c9478..d6271409f8 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-argument-panel.component.ts
@@ -88,6 +88,7 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
     maxlength: 'calculated-fields.hint.argument-name-max-length',
     forbidden: 'calculated-fields.hint.argument-name-forbidden'
   };
+  @Input() readonly = false;
 
   @ViewChild('entityAutocomplete') entityAutocomplete: EntityAutocompleteComponent;
 
@@ -176,6 +177,11 @@ export class CalculatedFieldArgumentPanelComponent implements OnInit, AfterViewI
 
     this.argumentTypes = Object.values(ArgumentType)
       .filter(type => type !== ArgumentType.Rolling || this.isScript);
+
+    if (this.readonly) {
+      this.argumentType.disable({emitEvent: false});
+      this.argumentFormGroup.disable({emitEvent: false});
+    }
   }
 
   ngAfterViewInit(): void {
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html
index 99b4225db2..c61ce4c467 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.html
@@ -93,22 +93,33 @@
         <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">
-            <button type="button"
-                    mat-icon-button
-                    #button
-                    [disabled]="disable"
-                    (click)="manageArgument($event, button, argument)"
-                    [matTooltip]="'action.edit' | translate"
-                    matTooltipPosition="above">
-              <mat-icon
-                [matBadgeHidden]="isEditButtonShowBadge(argument)"
-                matBadgeColor="warn"
-                matBadgeSize="small"
-                matBadge="*"
-              >
-                edit
-              </mat-icon>
-            </button>
+            @if (disable) {
+              <button type="button"
+                      mat-icon-button
+                      #previewButton
+                      (click)="manageArgument($event, previewButton, argument, true)"
+                      [matTooltip]="'calculated-fields.preview' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            } @else {
+              <button type="button"
+                      mat-icon-button
+                      #button
+                      [disabled]="disable"
+                      (click)="manageArgument($event, button, argument)"
+                      [matTooltip]="'action.edit' | translate"
+                      matTooltipPosition="above">
+                <mat-icon
+                  [matBadgeHidden]="isEditButtonShowBadge(argument)"
+                  matBadgeColor="warn"
+                  matBadgeSize="small"
+                  matBadge="*"
+                >
+                  edit
+                </mat-icon>
+              </button>
+            }
             <button type="button"
                     mat-icon-button
                     [disabled]="disable"
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts
index a05326699d..9a88521ba3 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/calculated-field-arguments/calculated-field-arguments-table.component.ts
@@ -168,7 +168,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
     this.argumentsFormArray.markAsDirty();
   }
 
-  manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue): void {
+  manageArgument($event: Event, matButton: MatButton, argument = {} as CalculatedFieldArgumentValue, readonly: boolean = false): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -190,6 +190,7 @@ export class CalculatedFieldArgumentsTableComponent implements ControlValueAcces
         ownerId: this.ownerId,
         watchKeyChange: this.watchKeyChange,
         usedArgumentNames: this.argumentsFormArray.value.map(({ argumentName }) => argumentName).filter(name => name !== argument.argumentName),
+        readonly
       };
       this.popoverComponent = this.popoverService.displayPopover({
         trigger,
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html
index e09d5b0f4e..46e10acd4a 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.html
@@ -260,12 +260,14 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="saveZone()"
-            [disabled]="geofencingFormGroup.invalid || !geofencingFormGroup.dirty">
-      {{ buttonTitle | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="saveZone()"
+              [disabled]="geofencingFormGroup.invalid || !geofencingFormGroup.dirty">
+        {{ buttonTitle | translate }}
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.ts
index 3484e717cb..9216eaa12c 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-panel.component.ts
@@ -71,6 +71,7 @@ export class CalculatedFieldGeofencingZoneGroupsPanelComponent implements OnInit
   @Input() entityName: string;
   @Input() ownerId: EntityId;
   @Input() usedNames: string[];
+  @Input() readonly = false;
 
   @ViewChild('entityAutocomplete') entityAutocomplete: EntityAutocompleteComponent;
 
@@ -160,6 +161,10 @@ export class CalculatedFieldGeofencingZoneGroupsPanelComponent implements OnInit
 
     this.currentEntityFilter = getCalculatedFieldCurrentEntityFilter(this.entityName, this.entityId);
     this.updateEntityFilter(this.zone.refEntityId?.entityType);
+
+    if (this.readonly) {
+      this.geofencingFormGroup.disable({emitEvent: false});
+    }
   }
 
   fetchOptions(searchText: string): Observable<Array<string>> {
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html
index fa0ba32f22..d661f5021a 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.html
@@ -96,20 +96,31 @@
         <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">
-            <button type="button"
-                    mat-icon-button
-                    #button
-                    (click)="manageZone($event, button, geofenceZone)"
-                    [matTooltip]="'action.edit' | translate"
-                    [disabled]="disable"
-                    matTooltipPosition="above">
-              <mat-icon [matBadgeHidden]="geofenceZone.refEntityId?.id !== NULL_UUID"
-                        matBadgeColor="warn"
-                        matBadgeSize="small"
-                        matBadge="*">
-                edit
-              </mat-icon>
-            </button>
+            @if (disable) {
+              <button type="button"
+                      mat-icon-button
+                      #previewButton
+                      (click)="manageZone($event, previewButton, geofenceZone, true)"
+                      [matTooltip]="'calculated-fields.preview' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            } @else {
+              <button type="button"
+                      mat-icon-button
+                      #button
+                      (click)="manageZone($event, button, geofenceZone)"
+                      [matTooltip]="'action.edit' | translate"
+                      [disabled]="disable"
+                      matTooltipPosition="above">
+                <mat-icon [matBadgeHidden]="geofenceZone.refEntityId?.id !== NULL_UUID"
+                          matBadgeColor="warn"
+                          matBadgeSize="small"
+                          matBadge="*">
+                  edit
+                </mat-icon>
+              </button>
+            }
             <button type="button"
                     mat-icon-button
                     (click)="onDelete($event, geofenceZone)"
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts
index e102033f18..074a65e49b 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-configuration/calculated-field-geofencing-zone-groups-table.component.ts
@@ -147,7 +147,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
     this.zoneGroupsFormArray.markAsDirty();
   }
 
-  manageZone($event: Event, matButton: MatButton, zone = {} as CalculatedFieldGeofencingValue): void {
+  manageZone($event: Event, matButton: MatButton, zone = {} as CalculatedFieldGeofencingValue, readonly: boolean = false): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -167,6 +167,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
         entityName: this.entityName,
         ownerId: this.ownerId,
         usedNames: this.zoneGroupsFormArray.value.map(({ name }) => name).filter(name => name !== zone.name),
+        readonly
       };
       this.popoverComponent = this.popoverService.displayPopover({
         trigger,
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html
index b75c48264e..8d6fc37073 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html
@@ -110,7 +110,7 @@
                       matTooltip="{{ 'calculated-fields.test-script-function' | translate }}"
                       matTooltipPosition="above"
                       class="tb-mat-32"
-                      [disabled]="!arguments.length"
+                      [disabled]="!arguments.length || readonly"
                       (click)="onTestScript('filter')">
                 <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
               </button>
@@ -119,7 +119,7 @@
               <button mat-button mat-raised-button color="primary"
                       type="button"
                       (click)="onTestScript('filter')"
-                      [disabled]="!arguments.length">
+                      [disabled]="!arguments.length || readonly">
                 {{ 'calculated-fields.test-script-function' | translate }}
               </button>
             </div>
@@ -213,12 +213,14 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
-    <button mat-raised-button
-            color="primary"
-            type="button"
-            (click)="saveMetric()"
-            [disabled]="metricForm.invalid || !metricForm.dirty">
-      {{ buttonTitle | translate }}
-    </button>
+    @if (!readonly) {
+      <button mat-raised-button
+              color="primary"
+              type="button"
+              (click)="saveMetric()"
+              [disabled]="metricForm.invalid || !metricForm.dirty">
+        {{ buttonTitle | translate }}
+      </button>
+    }
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.ts
index 811f7b87fa..49dca514d2 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.ts
@@ -42,7 +42,7 @@ interface CalculatedFieldAggMetricValuePanel extends CalculatedFieldAggMetricVal
 @Component({
   selector: 'tb-calculated-field-metrics-panel',
   templateUrl: './calculated-field-metrics-panel.component.html',
-  styleUrl: '../common/calculated-field-panel.scss',
+  styleUrls: ['../common/calculated-field-panel.scss', '../../calculated-field.component.scss'],
 })
 export class CalculatedFieldMetricsPanelComponent implements OnInit {
 
@@ -54,6 +54,7 @@ export class CalculatedFieldMetricsPanelComponent implements OnInit {
   @Input() editorCompleter: TbEditorCompleter;
   @Input() highlightRules: AceHighlightRules;
   @Input({required: true}) testScript: (expression?: string) => Observable<string>;
+  @Input() readonly = false;
 
   metricDataApplied = output<CalculatedFieldAggMetricValue>();
   filterExpanded = false;
@@ -107,6 +108,10 @@ export class CalculatedFieldMetricsPanelComponent implements OnInit {
     if (this.simpleMode) {
       this.AggFunctions = this.AggFunctions.filter(aggFunc => aggFunc !== AggFunction.COUNT_UNIQUE);
     }
+
+    if (this.readonly) {
+      this.metricForm.disable({emitEvent: false});
+    }
   }
 
   saveMetric(): void {
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 4693d3afb4..3b50b9e152 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
@@ -93,15 +93,26 @@
         <mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/>
         <mat-cell *matCellDef="let metric;">
           <div class="tb-form-table-row-cell-buttons min-w-20">
-            <button type="button"
-                    mat-icon-button
-                    #button
-                    (click)="manageMetrics($event, button, metric)"
-                    [disabled]="disable"
-                    [matTooltip]="'action.edit' | translate"
-                    matTooltipPosition="above">
-              <mat-icon>edit</mat-icon>
-            </button>
+            @if (disable) {
+              <button type="button"
+                      mat-icon-button
+                      #previewButton
+                      (click)="manageMetrics($event, previewButton, metric, true)"
+                      [matTooltip]="'calculated-fields.preview' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>visibility</mat-icon>
+              </button>
+            } @else {
+              <button type="button"
+                      mat-icon-button
+                      #button
+                      (click)="manageMetrics($event, button, metric)"
+                      [disabled]="disable"
+                      [matTooltip]="'action.edit' | translate"
+                      matTooltipPosition="above">
+                <mat-icon>edit</mat-icon>
+              </button>
+            }
             <button type="button"
                     mat-icon-button
                     (click)="onDelete($event, metric)"
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 531f8d1014..a31c1d3bdc 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
@@ -153,7 +153,7 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
     this.metricsFormArray.markAsDirty();
   }
 
-  manageMetrics($event: Event, matButton: MatButton, metric = {} as CalculatedFieldAggMetricValue): void {
+  manageMetrics($event: Event, matButton: MatButton, metric = {} as CalculatedFieldAggMetricValue, readonly: boolean = false): void {
     $event?.stopPropagation();
     if (this.popoverComponent && !this.popoverComponent.tbHidden) {
       this.popoverComponent.hide();
@@ -173,7 +173,8 @@ export class CalculatedFieldMetricsTableComponent implements OnInit, ControlValu
         editorCompleter: this.editorCompleter,
         highlightRules: this.highlightRules,
         simpleMode: this.simpleMode,
-        testScript: this.testScript
+        testScript: this.testScript,
+        readonly
       };
       this.popoverComponent = this.popoverService.displayPopover({
         trigger,
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 e6ce6ccdc0..1646f00ff4 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1116,6 +1116,7 @@
             "time-series-data-aggregation": "Time series data aggregation",
             "time-series-data-aggregation-hint": "Aggregation of historical data from a current entity."
         },
+        "preview": "Preview",
         "arguments": "Arguments",
         "decimals-by-default": "Decimals by default",
         "debugging": "Calculated field debugging",

From 177ee35b65ac2ff9703e717148742b7b473a63ff Mon Sep 17 00:00:00 2001
From: Kalytka Eugene <43555187+kalutkaz@users.noreply.github.com>
Date: Mon, 5 Jan 2026 11:53:35 +0200
Subject: [PATCH 2/2] Share time-unit-input component (#14684)

* Share time-unit-input component

---------

Co-authored-by: Vladyslav Prykhodko <vprykhodko@thingsboard.io>
---
 ui-ngx/src/app/modules/common/modules-map.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui-ngx/src/app/modules/common/modules-map.ts b/ui-ngx/src/app/modules/common/modules-map.ts
index 85690447e3..9db2c7403d 100644
--- a/ui-ngx/src/app/modules/common/modules-map.ts
+++ b/ui-ngx/src/app/modules/common/modules-map.ts
@@ -121,6 +121,7 @@ import * as TbErrorComponent from '@shared/components/tb-error.component';
 import * as TbCheatSheetComponent from '@shared/components/cheatsheet.component';
 import * as BreadcrumbComponent from '@shared/components/breadcrumb.component';
 import * as UserMenuComponent from '@shared/components/user-menu.component';
+import * as TimeUnitInputComponent from '@shared/components/time-unit-input.component';
 import * as TimewindowComponent from '@shared/components/time/timewindow.component';
 import * as TimewindowPanelComponent from '@shared/components/time/timewindow-panel.component';
 import * as TimeintervalComponent from '@shared/components/time/timeinterval.component';
@@ -458,6 +459,7 @@ class ModulesMap implements IModulesMap {
     '@shared/components/cheatsheet.component': TbCheatSheetComponent,
     '@shared/components/breadcrumb.component': BreadcrumbComponent,
     '@shared/components/user-menu.component': UserMenuComponent,
+    '@shared/components/time-unit-input.component': TimeUnitInputComponent,
     '@shared/components/time/timewindow.component': TimewindowComponent,
     '@shared/components/time/timewindow-panel.component': TimewindowPanelComponent,
     '@shared/components/time/timeinterval.component': TimeintervalComponent,