UI: Fixed validation and style in Save ts rule node config

ui-ngx/src/app/modules/home/components/rule-node/action/advanced-persistence-setting-row.component.html

@@ -32,6 +32,7 @@
       requiredText="{{ 'rule-node-config.save-time-series.deduplication-interval-required' | translate }}"
       minErrorText="{{ 'rule-node-config.save-time-series.deduplication-interval-min-max-range' | translate }}"
       maxErrorText="{{ 'rule-node-config.save-time-series.deduplication-interval-min-max-range' | translate }}"
+      [minTime]="1"
       [maxTime]="maxDeduplicateTime"
       formControlName="deduplicationIntervalSecs">
     </tb-time-unit-input>

ui-ngx/src/app/modules/home/components/rule-node/action/timeseries-config.component.html

@@ -45,6 +45,7 @@
           minErrorText="{{ 'rule-node-config.save-time-series.deduplication-interval-min-max-range' | translate }}"
           maxErrorText="{{ 'rule-node-config.save-time-series.deduplication-interval-min-max-range' | translate }}"
           [maxTime]="maxDeduplicateTime"
+          [minTime]="1"
           formControlName="deduplicationIntervalSecs">
         </tb-time-unit-input>
       }
@@ -56,12 +57,18 @@
       ></tb-advanced-persistence-settings>
     }
   </div>
-  <section class="tb-form-panel stroked">
+  <section class="tb-form-panel stroked no-padding-bottom">
     <mat-expansion-panel class="tb-settings">
       <mat-expansion-panel-header>
         <mat-panel-title translate>rule-node-config.advanced-settings</mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
+        <div tb-hint-tooltip-icon="{{ 'rule-node-config.use-server-ts-hint' | translate}}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" formControlName="useServerTs">
+            {{ 'rule-node-config.use-server-ts' | translate }}
+          </mat-slide-toggle>
+        </div>
         <tb-time-unit-input
           required
           labelText="{{ 'rule-node-config.default-ttl' | translate }}"
@@ -76,12 +83,6 @@
             help
           </mat-icon>
         </tb-time-unit-input>
-        <div tb-hint-tooltip-icon="{{ 'rule-node-config.use-server-ts-hint' | translate}}"
-             class="tb-form-row no-border no-padding">
-          <mat-slide-toggle class="mat-slide" formControlName="useServerTs">
-            {{ 'rule-node-config.use-server-ts' | translate }}
-          </mat-slide-toggle>
-        </div>
       </ng-template>
     </mat-expansion-panel>
   </section>

ui-ngx/src/app/modules/home/components/rule-node/action/timeseries-config.component.ts

@@ -60,16 +60,16 @@ export class TimeseriesConfigComponent extends RuleNodeConfigurationComponent {
     if (config?.persistenceSettings) {
       const isAdvanced = config?.persistenceSettings?.type === PersistenceType.ADVANCED;
       persistenceSettings = {
-        ...config.persistenceSettings,
-        isAdvanced: isAdvanced,
         type: isAdvanced ? PersistenceType.ON_EVERY_MESSAGE : config.persistenceSettings.type,
+        isAdvanced: isAdvanced,
+        deduplicationIntervalSecs: config.persistenceSettings?.deduplicationIntervalSecs ?? 60,
         advanced: isAdvanced ? config.persistenceSettings : defaultAdvancedPersistenceStrategy
       }
     } else {
       persistenceSettings = {
         type: PersistenceType.ON_EVERY_MESSAGE,
         isAdvanced: false,
-        deduplicationIntervalSecs: 10,
+        deduplicationIntervalSecs: 60,
         advanced: defaultAdvancedPersistenceStrategy
       };
     }
@@ -104,7 +104,7 @@ export class TimeseriesConfigComponent extends RuleNodeConfigurationComponent {
         isAdvanced: [config?.persistenceSettings?.isAdvanced ?? false],
         type: [config?.persistenceSettings?.type ?? PersistenceType.ON_EVERY_MESSAGE],
         deduplicationIntervalSecs: [
-          {value: config?.persistenceSettings?.deduplicationIntervalSecs ?? 10, disabled: true},
+          {value: config?.persistenceSettings?.deduplicationIntervalSecs ?? 60, disabled: true},
           [Validators.required, Validators.max(maxDeduplicateTimeSecs)]
         ],
         advanced: [{value: null, disabled: true}]

ui-ngx/src/app/modules/home/components/rule-node/action/timeseries-config.models.ts

@@ -16,7 +16,7 @@
 
 import { DAY, SECOND } from '@shared/models/time/time.models';
 
-export const maxDeduplicateTimeSecs = DAY / SECOND + 1;
+export const maxDeduplicateTimeSecs = DAY / SECOND;
 
 export interface TimeseriesNodeConfiguration {
   persistenceSettings: PersistenceSettings;

ui-ngx/src/app/modules/home/components/rule-node/common/time-unit-input.component.html

@@ -33,7 +33,7 @@
       {{ maxErrorText }}
     </mat-error>
   </mat-form-field>
-  <mat-form-field class="max-w-33% flex-full">
+  <mat-form-field class="h-fit max-w-33% flex-full">
     <mat-label translate>rule-node-config.units</mat-label>
     <mat-select formControlName="timeUnit">
       @for (timeUnit of timeUnits; track timeUnit) {

ui-ngx/src/app/modules/home/components/rule-node/common/time-unit-input.component.ts

@@ -22,7 +22,8 @@ import {
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
-  Validator, Validators
+  Validator,
+  Validators
 } from '@angular/forms';
 import { TimeUnit, timeUnitTranslations } from '../rule-node-config.models';
 import { isDefinedAndNotNull, isNumeric } from '@core/utils';
@@ -60,6 +61,10 @@ export class TimeUnitInputComponent implements ControlValueAccessor, Validator,
   @Input()
   requiredText: string;
 
+  @Input()
+  @coerceNumber()
+  minTime = 0;
+
   @Input()
   minErrorText: string;
 
@@ -75,7 +80,7 @@ export class TimeUnitInputComponent implements ControlValueAccessor, Validator,
   timeUnitTranslations = timeUnitTranslations;
 
   timeInputForm = this.fb.group({
-    time: [0, Validators.min(0)],
+    time: [0],
     timeUnit: [TimeUnit.SECONDS]
   });
 
@@ -97,7 +102,7 @@ export class TimeUnitInputComponent implements ControlValueAccessor, Validator,
   ngOnInit() {
     if(this.required || this.maxTime) {
       const timeControl = this.timeInputForm.get('time');
-      const validators = [];
+      const validators = [Validators.pattern(/^\d*$/)];
       if (this.required) {
         validators.push(Validators.required);
       }
@@ -106,6 +111,9 @@ export class TimeUnitInputComponent implements ControlValueAccessor, Validator,
           Validators.max(Math.floor(this.maxTime / this.timeIntervalsInSec.get(this.timeInputForm.get('timeUnit').value)))(control)
         );
       }
+      if (isDefinedAndNotNull(this.minTime)) {
+        validators.push(Validators.min(this.minTime));
+      }
 
       timeControl.setValidators(validators);
       timeControl.updateValueAndValidity({ emitEvent: false });
@@ -137,6 +145,9 @@ export class TimeUnitInputComponent implements ControlValueAccessor, Validator,
       this.timeInputForm.disable({emitEvent: false});
     } else {
       this.timeInputForm.enable({emitEvent: false});
+      if(this.timeInputForm.invalid) {
+        setTimeout(() => this.updatedModel(this.timeInputForm.value, true))
+      }
     }
   }
 
@@ -161,9 +172,9 @@ export class TimeUnitInputComponent implements ControlValueAccessor, Validator,
     };
   }
 
-  private updatedModel(value: Partial<TimeUnitInputModel>) {
+  private updatedModel(value: Partial<TimeUnitInputModel>, forceUpdated = false) {
     const time = value.time * this.timeIntervalsInSec.get(value.timeUnit);
-    if (this.modelValue !== time) {
+    if (this.modelValue !== time || forceUpdated) {
       this.modelValue = time;
       this.propagateChange(time);
     }