Merge pull request #12267 from maxunbearable/fix/5223-debug-settings-adjustments

Debug settings minor fixes and adjustments

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

@@ -24,8 +24,8 @@
         (click)="openDebugStrategyPanel($event, matButton)">
   <mat-icon [color]="debugSettingsFormGroup.disabled ? 'inherit' : 'primary'">bug_report</mat-icon>
   @if (isDebugAllActive$ | async) {
-    {{ !allEnabled() ? (allEnabledUntil | durationLeft) : (maxDebugModeDuration | milliSecondsToTimeString: true : true) }}
+    {{ (allEnabled$ | async) === false ? (allEnabledUntil | durationLeft) : (maxDebugModeDuration | milliSecondsToTimeString: true : true) }}
   } @else {
-    {{ (failuresEnabled ? 'debug-config.failures' : 'common.disabled') | translate }}
+    {{ (failuresEnabled ? 'debug-settings.failures' : 'common.disabled') | translate }}
   }
 </button>

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

@@ -21,7 +21,6 @@ import {
   forwardRef,
   Input,
   Renderer2,
-  signal,
   ViewContainerRef
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -30,8 +29,8 @@ import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { MatButton } from '@angular/material/button';
 import { EntityDebugSettingsPanelComponent } from './entity-debug-settings-panel.component';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { of, shareReplay, timer } from 'rxjs';
+import { BehaviorSubject, of, shareReplay, timer } from 'rxjs';
 import { SECOND, MINUTE } from '@shared/models/time/time.models';
 import { EntityDebugSettings } from '@shared/models/entity.models';
 import { map, switchMap, takeWhile } from 'rxjs/operators';
@@ -61,6 +60,7 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f
 export class EntityDebugSettingsButtonComponent implements ControlValueAccessor {
 
   @Input() debugLimitsConfiguration: string;
+  @Input() entityLabel: string;
 
   debugSettingsFormGroup = this.fb.group({
     failuresEnabled: [false],
@@ -69,9 +69,10 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
   });
 
   disabled = false;
-  allEnabled = signal(false);
+  private allEnabledSubject = new BehaviorSubject(false);
+  allEnabled$ = this.allEnabledSubject.asObservable();
 
-  isDebugAllActive$ = toObservable(this.allEnabled).pipe(
+  isDebugAllActive$ = this.allEnabled$.pipe(
     switchMap((value) => {
       if (value) {
         return of(true);
@@ -105,7 +106,7 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
 
     this.debugSettingsFormGroup.get('allEnabled').valueChanges.pipe(
       takeUntilDestroyed()
-    ).subscribe(value => this.allEnabled.set(value));
+    ).subscribe(value => this.allEnabledSubject.next(value));
   }
 
   get failuresEnabled(): boolean {
@@ -131,7 +132,8 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
         {
           ...debugSettings,
           maxDebugModeDuration: this.maxDebugModeDuration,
-          debugLimitsConfiguration: this.debugLimitsConfiguration
+          debugLimitsConfiguration: this.debugLimitsConfiguration,
+          entityLabel: this.entityLabel
         },
         {},
         {}, {}, true);
@@ -152,7 +154,7 @@ export class EntityDebugSettingsButtonComponent implements ControlValueAccessor
 
   writeValue(settings: EntityDebugSettings): void {
     this.debugSettingsFormGroup.patchValue(settings, {emitEvent: false});
-    this.allEnabled.set(settings?.allEnabled);
+    this.allEnabledSubject.next(settings?.allEnabled);
     this.debugSettingsFormGroup.get('allEnabled').updateValueAndValidity({onlySelf: true});
   }
 

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

@@ -16,26 +16,26 @@
 
 -->
 <div class="flex max-w-sm flex-col gap-3 p-2">
-  <div class="tb-form-panel-title" translate>debug-config.label</div>
+  <div class="tb-form-panel-title" translate>debug-settings.label</div>
   <div class="hint-container">
     <div class="tb-form-hint tb-primary-fill tb-flex center">
       @if (debugLimitsConfiguration) {
-        {{ 'debug-config.hint.main-limited' | translate: { msg: maxMessagesCount, time: (maxTimeFrameDuration | milliSecondsToTimeString: true : true) } }}
+        {{ 'debug-settings.hint.main-limited' | translate: { entity: entityLabel ?? ('debug-settings.entity' | translate), msg: maxMessagesCount, time: (maxTimeFrameDuration | milliSecondsToTimeString: true : true) } }}
       } @else {
-        {{ 'debug-config.hint.main' | translate }}
+        {{ 'debug-settings.hint.main' | translate }}
       }
     </div>
   </div>
   <div class="flex flex-col gap-3">
     <mat-slide-toggle class="mat-slide" [formControl]="onFailuresControl">
-      <div tb-hint-tooltip-icon="{{ 'debug-config.hint.on-failure' | translate }}">
+      <div tb-hint-tooltip-icon="{{ 'debug-settings.hint.on-failure' | translate }}">
-        {{ 'debug-config.on-failure' | translate }}
+        {{ 'debug-settings.on-failure' | translate }}
       </div>
     </mat-slide-toggle>
     <div class="align-center flex justify-between">
       <mat-slide-toggle class="mat-slide" [formControl]="debugAllControl">
-        <div tb-hint-tooltip-icon="{{ 'debug-config.hint.all-messages' | translate }}">
+        <div tb-hint-tooltip-icon="{{ 'debug-settings.hint.all-messages' | translate }}">
-          {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : (maxDebugModeDuration | milliSecondsToTimeString: true : true) } }}
+          {{ 'debug-settings.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : (maxDebugModeDuration | milliSecondsToTimeString: true : true) } }}
         </div>
       </mat-slide-toggle>
       <button mat-icon-button *ngIf="(isDebugAllActive$ | async) && !allEnabled"

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

@@ -51,6 +51,7 @@ export class EntityDebugSettingsPanelComponent extends PageComponent implements
   @Input() popover: TbPopoverComponent<EntityDebugSettingsPanelComponent>;
   @Input({ transform: booleanAttribute }) failuresEnabled = false;
   @Input({ transform: booleanAttribute }) allEnabled = false;
+  @Input() entityLabel: string;
   @Input() allEnabledUntil = 0;
   @Input() maxDebugModeDuration: number;
   @Input() debugLimitsConfiguration: string;

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

@@ -38,6 +38,7 @@
       <tb-entity-debug-settings-button
         class="mr-2"
         formControlName="debugSettings"
+        [entityLabel]="'debug-settings.rule-node' | translate"
         [debugLimitsConfiguration]="ruleChainDebugPerTenantLimitsConfiguration"
       />
       <button mat-stroked-button

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

@@ -989,14 +989,16 @@
         "type-timeseries-deleted": "Telemetry deleted",
         "type-sms-sent": "SMS sent"
     },
-    "debug-config": {
+    "debug-settings": {
         "label": "Debug configuration",
         "on-failure": "Failures only (24/7)",
         "all-messages": "All messages ({{time}})",
         "failures": "Failures",
+        "entity": "entity",
+        "rule-node": "rule node",
         "hint": {
             "main": "All node debug messages rate limited with:",
-            "main-limited": "All node debug messages will be rate-limited, with a maximum of {{msg}} messages allowed per {{time}}.",
+            "main-limited": "All {{entity}} debug messages will be rate-limited, with a maximum of {{msg}} messages allowed per {{time}}.",
             "on-failure": "Save all failure debug events without time limit.",
             "all-messages": "Save all debug events during time limit."
         }