Changed UI of timeWindow

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.html

@@ -168,22 +168,20 @@
           </div>
         </div>
       } @else {
-        <div class="tb-form-row">
-          <div class="fixed-title-width">{{ 'calculated-fields.time-window' | translate }}</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput type="number" min="0" name="value" formControlName="timeWindow" placeholder="{{ 'action.set' | translate }}"/>
-              <span class="block pr-2" matSuffix>{{ 'common.suffix.ms' | translate }}</span>
-            </mat-form-field>
+        <div class="tb-form-panel stroked">
+          <div class="tb-form-panel-title">{{ 'calculated-fields.time-window' | translate }}</div>
+          <div class="tb-form-row no-border">
+            <tb-timeinterval
+              subscriptSizing="dynamic"
+              appearance="outline"
+              class="w-full"
+              formControlName="timeWindow"
+            />
           </div>
         </div>
         <div class="tb-form-row">
           <div class="fixed-title-width">{{ 'calculated-fields.limit' | translate }}</div>
-          <div class="tb-flex no-gap">
-            <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-              <input matInput type="number" min="0" name="value" formControlName="limit" placeholder="{{ 'action.set' | translate }}"/>
-            </mat-form-field>
-          </div>
+          <tb-datapoints-limit class="w-full" formControlName="limit"/>
         </div>
       }
     </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.ts

@@ -36,6 +36,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EntityFilter } from '@shared/models/query/query.models';
 import { AliasFilterType } from '@shared/models/alias.models';
 import { merge } from 'rxjs';
+import { MINUTE } from '@shared/models/time/time.models';
 
 @Component({
   selector: 'tb-calculated-field-argument-panel',
@@ -68,8 +69,8 @@ export class CalculatedFieldArgumentPanelComponent extends PageComponent impleme
       scope: [{ value: AttributeScope.SERVER_SCOPE, disabled: true }],
     }),
     defaultValue: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
-    limit: [null],
-    timeWindow: [null],
+    limit: [10],
+    timeWindow: [MINUTE * 15],
   });
 
   argumentTypes: ArgumentType[];

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1037,7 +1037,7 @@
         "shared-attributes": "Shared attributes",
         "attribute-key": "Attribute key",
         "default-value": "Default value",
-        "limit": "Limit",
+        "limit": "Max values",
         "time-window": "Time window",
         "customer-name": "Customer name",
         "timeseries": "Time series",