UI: Fixed debug settings panel; Improved model data entity debug settings

ui-ngx/src/app/core/auth/auth.models.ts

@@ -31,6 +31,7 @@ export interface SysParamsState {
   maxDataPointsPerRollingArg: number;
   maxArgumentsPerCF: number;
   ruleChainDebugPerTenantLimitsConfiguration?: string;
+  calculatedFieldDebugPerTenantLimitsConfiguration?: string;
 }
 
 export interface SysParams extends SysParamsState {

ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts

@@ -27,10 +27,9 @@ import { PageLink } from '@shared/models/page/page-link';
 import { Observable, of } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';
 import { EntityId } from '@shared/models/id/entity-id';
-import { MINUTE } from '@shared/models/time/time.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { getCurrentAuthState, getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { DestroyRef, Renderer2 } from '@angular/core';
 import { EntityDebugSettings } from '@shared/models/entity.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -47,7 +46,8 @@ import {
   getCalculatedFieldArgumentsHighlights,
 } from '@shared/models/calculated-field.models';
 import {
-  CalculatedFieldDebugDialogComponent, CalculatedFieldDebugDialogData,
+  CalculatedFieldDebugDialogComponent,
+  CalculatedFieldDebugDialogData,
   CalculatedFieldDialogComponent,
   CalculatedFieldDialogData,
   CalculatedFieldScriptTestDialogComponent,
@@ -60,9 +60,6 @@ import { DatePipe } from '@angular/common';
 
 export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedField> {
 
-  readonly calculatedFieldsDebugPerTenantLimitsConfiguration =
-    getCurrentAuthState(this.store)['calculatedFieldsDebugPerTenantLimitsConfiguration'];
-  readonly maxDebugModeDuration = getCurrentAuthState(this.store).maxDebugModeDurationMinutes * MINUTE;
   readonly tenantId = getCurrentAuthUser(this.store).tenantId;
   additionalDebugActionConfig = {
     title: this.translate.instant('calculated-fields.see-debug-events'),
@@ -189,9 +186,7 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
     this.entityDebugSettingsService.openDebugStrategyPanel({
       debugSettings,
       debugConfig: {
-        debugLimitsConfiguration: this.calculatedFieldsDebugPerTenantLimitsConfiguration,
+        entityType: EntityType.CALCULATED_FIELD,
-        maxDebugModeDuration: this.maxDebugModeDuration,
-        entityLabel: this.translate.instant('debug-settings.calculated-field'),
         additionalActionConfig,
       },
       onSettingsAppliedFn: settings => this.onDebugConfigChanged(id.id, settings)
@@ -215,7 +210,6 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
         value,
         buttonTitle,
         entityId: this.entityId,
-        debugLimitsConfiguration: this.calculatedFieldsDebugPerTenantLimitsConfiguration,
         tenantId: this.tenantId,
         entityName: this.entityName,
         additionalDebugActionConfig: this.additionalDebugActionConfig,

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

@@ -49,8 +49,7 @@
           <tb-entity-debug-settings-button
             formControlName="debugSettings"
             [class.mb-5]="fieldFormGroup.get('name').errors && fieldFormGroup.get('name').touched"
-            [entityLabel]="'debug-settings.calculated-field' | translate"
+            [entityType]="EntityType.CALCULATED_FIELD"
-            [debugLimitsConfiguration]="data.debugLimitsConfiguration"
             [additionalActionConfig]="additionalDebugActionConfig"
           />
         </div>

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

@@ -48,7 +48,6 @@ export interface CalculatedFieldDialogData {
   value?: CalculatedField;
   buttonTitle: string;
   entityId: EntityId;
-  debugLimitsConfiguration: string;
   tenantId: string;
   entityName?: string;
   additionalDebugActionConfig: AdditionalDebugActionConfig<(calculatedField: CalculatedField) => void>;

ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-button.component.ts

@@ -36,6 +36,7 @@ import { Store } from '@ngrx/store';
 import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { EntityDebugSettingsService } from '@home/components/entity/debug/entity-debug-settings.service';
 import { AdditionalDebugActionConfig } from '@home/components/entity/debug/entity-debug-settings.model';
+import { EntityType } from '@shared/models/entity-type.models';
 
 @Component({
   selector: 'tb-entity-debug-settings-button',
@@ -58,9 +59,8 @@ import { AdditionalDebugActionConfig } from '@home/components/entity/debug/entit
 })
 export class EntityDebugSettingsButtonComponent implements ControlValueAccessor {
 
-  @Input() debugLimitsConfiguration: string;
-  @Input() entityLabel: string;
   @Input() additionalActionConfig: AdditionalDebugActionConfig;
+  @Input({required: true}) entityType: EntityType;
 
   debugSettingsFormGroup = this.fb.group({
     failuresEnabled: [false],
@@ -123,8 +123,7 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
       debugSettings: this.debugSettingsFormGroup.value,
       debugConfig: {
         maxDebugModeDuration: this.maxDebugModeDuration,
-        debugLimitsConfiguration: this.debugLimitsConfiguration,
+        entityType: this.entityType,
-        entityLabel: this.entityLabel,
         additionalActionConfig: this.additionalActionConfig,
       },
       onSettingsAppliedFn: settings => {

ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.html

@@ -17,10 +17,10 @@
 -->
 <div class="flex w-96 flex-col gap-3 p-2">
   <div class="tb-form-panel-title" translate>debug-settings.label</div>
-  @if (debugLimitsConfiguration) {
+  @if (maxMessagesCount) {
     <div class="hint-container">
       <div class="tb-form-hint tb-primary-fill tb-flex center">
-        {{ 'debug-settings.hint.main-limited' | translate: { entity: entityLabel ?? ('debug-settings.entity' | translate), msg: maxMessagesCount, time: (maxTimeFrameDuration | milliSecondsToTimeString: true : true) } }}
+        {{ 'debug-settings.hint.main-limited' | translate: { entity: (entityLabel | translate | lowercase), msg: maxMessagesCount, time: (maxTimeFrameDuration | milliSecondsToTimeString: true : true) } }}
       </div>
     </div>
   }

ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings-panel.component.ts

@@ -28,13 +28,15 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
 import { FormBuilder } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import { SECOND } from '@shared/models/time/time.models';
+import { MINUTE, SECOND } from '@shared/models/time/time.models';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
 import { of, shareReplay, timer } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EntityDebugSettings } from '@shared/models/entity.models';
 import { distinctUntilChanged, map, startWith, switchMap, takeWhile } from 'rxjs/operators';
 import { AdditionalDebugActionConfig } from '@home/components/entity/debug/entity-debug-settings.model';
+import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models';
+import { getCurrentAuthState } from '@core/auth/auth.selectors';
 
 @Component({
   selector: 'tb-entity-debug-settings-panel',
@@ -51,10 +53,9 @@ export class EntityDebugSettingsPanelComponent extends PageComponent implements
 
   @Input({ transform: booleanAttribute }) failuresEnabled = false;
   @Input({ transform: booleanAttribute }) allEnabled = false;
-  @Input() entityLabel: string;
+  @Input() entityType: EntityType;
   @Input() allEnabledUntil = 0;
-  @Input() maxDebugModeDuration: number;
+  @Input() maxDebugModeDuration = getCurrentAuthState(this.store).maxDebugModeDurationMinutes * MINUTE;
-  @Input() debugLimitsConfiguration: string;
   @Input() additionalActionConfig: AdditionalDebugActionConfig;
 
   onFailuresControl = this.fb.control(false);
@@ -63,6 +64,7 @@ export class EntityDebugSettingsPanelComponent extends PageComponent implements
   maxMessagesCount: string;
   maxTimeFrameDuration: number;
   initialAllEnabled: boolean;
+  entityLabel: string;
 
   isDebugAllActive$ = this.debugAllControl.valueChanges.pipe(
     startWith(this.debugAllControl.value),
@@ -101,11 +103,13 @@ export class EntityDebugSettingsPanelComponent extends PageComponent implements
   }
 
   ngOnInit(): void {
-    this.maxMessagesCount = this.debugLimitsConfiguration?.split(':')[0];
+    const debugLimitsConfiguration = this.getByEntityTypeDebugLimit(this.entityType);
-    this.maxTimeFrameDuration = parseInt(this.debugLimitsConfiguration?.split(':')[1]) * SECOND;
+    this.maxMessagesCount = debugLimitsConfiguration?.split(':')[0];
+    this.maxTimeFrameDuration = parseInt(debugLimitsConfiguration?.split(':')[1]) * SECOND;
     this.onFailuresControl.patchValue(this.failuresEnabled);
     this.debugAllControl.patchValue(this.allEnabled);
     this.initialAllEnabled = this.allEnabled || this.allEnabledUntil > new Date().getTime();
+    this.entityLabel = entityTypeTranslations.has(this.entityType) ? entityTypeTranslations.get(this.entityType).type : 'debug-settings.entity';
   }
 
   onCancel(): void {
@@ -135,4 +139,13 @@ export class EntityDebugSettingsPanelComponent extends PageComponent implements
     this.allEnabledUntil = 0;
     this.cd.markForCheck();
   }
+
+  private getByEntityTypeDebugLimit(entityType: EntityType): string {
+    switch (entityType) {
+      case EntityType.RULE_NODE:
+        return getCurrentAuthState(this.store).ruleChainDebugPerTenantLimitsConfiguration;
+      case EntityType.CALCULATED_FIELD:
+        return getCurrentAuthState(this.store).calculatedFieldDebugPerTenantLimitsConfiguration;
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/entity/debug/entity-debug-settings.model.ts

@@ -15,6 +15,7 @@
 ///
 
 import { EntityDebugSettings } from '@shared/models/entity.models';
+import { EntityType } from '@shared/models/entity-type.models';
 
 export interface AdditionalDebugActionConfig<Action = (...args: unknown[]) => void> {
   action: Action;
@@ -24,10 +25,9 @@ export interface AdditionalDebugActionConfig<Action = (...args: unknown[]) => vo
 export interface EntityDebugSettingPanelConfig {
   debugSettings: EntityDebugSettings;
   debugConfig: {
-    maxDebugModeDuration: number;
+    maxDebugModeDuration?: number;
-    debugLimitsConfiguration: string;
-    entityLabel?: string;
     additionalActionConfig?: AdditionalDebugActionConfig;
+    entityType: EntityType;
   }
   onSettingsAppliedFn: (settings: EntityDebugSettings) => void;
 }

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html

@@ -22,7 +22,7 @@
   </button>
 </div>
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
-  <section class="title-row flex align-center">
+  <section class="title-row align-center flex">
     <mat-form-field class="mat-block flex-1">
       <mat-label translate>rulenode.name</mat-label>
       <input matInput formControlName="name" required>
@@ -38,8 +38,7 @@
       <tb-entity-debug-settings-button
         class="mr-2"
         formControlName="debugSettings"
-        [entityLabel]="'debug-settings.rule-node' | translate"
+        [entityType]="entityType.RULE_NODE"
-        [debugLimitsConfiguration]="ruleChainDebugPerTenantLimitsConfiguration"
       />
       <button mat-stroked-button
               class="tb-rounded-btn flex-1"

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts

@@ -26,10 +26,8 @@ import {
   ViewChild
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { FcRuleNode, RuleNodeType } from '@shared/models/rule-node.models';
+import { FcRuleNode } from '@shared/models/rule-node.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { Subject } from 'rxjs';
 import { RuleNodeConfigComponent } from './rule-node-config.component';
@@ -39,7 +37,6 @@ import { ComponentClusteringMode } from '@shared/models/component-descriptor.mod
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { ServiceType } from '@shared/models/queue.models';
 import { takeUntil } from 'rxjs/operators';
-import { getCurrentAuthState } from '@core/auth/auth.selectors';
 
 @Component({
   selector: 'tb-rule-node',
@@ -73,21 +70,17 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
   @Output()
   changeScript = new EventEmitter<void>();
 
-  ruleNodeType = RuleNodeType;
   entityType = EntityType;
 
   serviceType = ServiceType.TB_RULE_ENGINE;
 
   ruleNodeFormGroup: UntypedFormGroup;
 
-  readonly ruleChainDebugPerTenantLimitsConfiguration = getCurrentAuthState(this.store).ruleChainDebugPerTenantLimitsConfiguration;
-
   private destroy$ = new Subject<void>();
 
-  constructor(protected store: Store<AppState>,
+  constructor(private fb: UntypedFormBuilder,
-              private fb: UntypedFormBuilder,
               private router: Router) {
-    super(store);
+    super();
     this.ruleNodeFormGroup = this.fb.group({});
   }
 

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

@@ -996,8 +996,6 @@
         "all-messages": "All messages ({{time}})",
         "failures": "Failures",
         "entity": "entity",
-        "rule-node": "rule node",
-        "calculated-field": "calculated field",
         "hint": {
             "main-limited": "No more than {{msg}} {{entity}} debug messages per {{time}} will be recorded.",
             "on-failure": "Log error messages only.",