From 02016487c7c7e22b12c4e78f52b907c5ebf12cf2 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 29 Nov 2024 13:05:33 +0200
Subject: [PATCH 1/6] Debug settings changed approach to ControlValueAccessor
 and refactoring

---
 .../debug-config-button.component.html        | 46 ----------
 .../debug-config-button.component.scss        | 20 ----
 .../debug-settings-button.component.html      | 39 ++++++++
 .../debug-settings-button.component.ts}       | 92 ++++++++++++++-----
 .../debug-settings-panel.component.html}      | 27 +++---
 .../debug-settings-panel.component.ts}        | 37 ++++----
 ...enant-profile-configuration.component.html | 35 +++----
 ...-tenant-profile-configuration.component.ts |  2 +-
 .../rule-node-details.component.html          |  7 +-
 .../rulechain/rule-node-details.component.ts  | 12 +--
 .../rulechain/rulechain-page.component.ts     | 20 +---
 .../home/pages/rulechain/rulechain.module.ts  |  4 +-
 .../import-export/import-export.service.ts    | 20 ++--
 ui-ngx/src/app/shared/models/entity.models.ts | 14 ++-
 .../src/app/shared/models/rule-node.models.ts |  6 +-
 .../assets/locale/locale.constant-en_US.json  |  2 +-
 16 files changed, 196 insertions(+), 187 deletions(-)
 delete mode 100644 ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.html
 delete mode 100644 ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.scss
 create mode 100644 ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
 rename ui-ngx/src/app/modules/home/components/{debug-config/debug-config-button.component.ts => debug-settings/debug-settings-button.component.ts} (55%)
 rename ui-ngx/src/app/modules/home/components/{debug-config/debug-config-panel.component.html => debug-settings/debug-settings-panel.component.html} (74%)
 rename ui-ngx/src/app/modules/home/components/{debug-config/debug-config-panel.component.ts => debug-settings/debug-settings-panel.component.ts} (70%)

diff --git a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.html b/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.html
deleted file mode 100644
index bdaf2de487..0000000000
--- a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<button mat-stroked-button
-        *ngIf="!minifyMode else minifiedButton"
-        class="tb-rounded-btn flex-1 w-36"
-        color="primary"
-        #matButton
-        [class.active]="((isDebugAllActive$ | async) || debugFailures) && !disabled"
-        [disabled]="disabled"
-        (click)="openDebugStrategyPanel($event, matButton)">
-  <mat-icon [color]="disabled ? 'inherit' : 'primary'">bug_report</mat-icon>
-  <span *ngIf="!debugFailures && !(isDebugAllActive$ | async)" translate>common.disabled</span>
-  <span *ngIf="(isDebugAllActive$ | async) && debugFailures" translate>debug-config.all</span>
-  <span *ngIf="(isDebugAllActive$ | async) && !debugFailures">
-    {{ !debugAll ? (debugAllUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
-  </span>
-  <span *ngIf="!(isDebugAllActive$ | async) && debugFailures" translate>debug-config.failures</span>
-</button>
-<ng-template #minifiedButton>
-  <button mat-icon-button
-          class="mini-debug-btn"
-          [disabled]="disabled"
-          #matButton
-          [matTooltip]="(isDebugAllActive$ | async) ? (debugAllUntil | durationLeft) : null"
-          matTooltipPosition="above"
-          (click)="openDebugStrategyPanel($event, matButton)">
-    <mat-icon class="material-icons" [color]="((isDebugAllActive$ | async) || debugFailures) && !disabled ? 'primary' : 'inherit'">
-      bug_report
-    </mat-icon>
-  </button>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.scss b/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.scss
deleted file mode 100644
index 06fcba27be..0000000000
--- a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  .mini-debug-btn {
-    color: rgba(0, 0, 0, 0.6);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
new file mode 100644
index 0000000000..cd43d56e96
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
@@ -0,0 +1,39 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<button mat-stroked-button
+        class="tb-rounded-btn flex-1 w-36"
+        color="primary"
+        #matButton
+        [class.active]="((isDebugAllActive$ | async) || failuresEnabled) && !disabled"
+        [disabled]="disabled"
+        (click)="openDebugStrategyPanel($event, matButton)">
+  <mat-icon [color]="debugSettingsFormGroup.disabled ? 'inherit' : 'primary'">bug_report</mat-icon>
+  @if (failuresEnabled) {
+    @if (isDebugAllActive$ | async) {
+      {{ 'debug-config.all' | translate }}
+    } @else {
+      {{ 'debug-config.failures' | translate }}
+    }
+  } @else {
+    @if (isDebugAllActive$ | async) {
+      {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
+    } @else {
+      {{ 'common.disabled' | translate }}
+    }
+  }
+</button>
diff --git a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
similarity index 55%
rename from ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.ts
rename to ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
index c1a93d8ed9..8f05d7dad0 100644
--- a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-button.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
@@ -21,82 +21,128 @@ import {
   ViewContainerRef,
   DestroyRef,
   ChangeDetectionStrategy,
-  EventEmitter,
-  Output
+  forwardRef
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { MatButton } from '@angular/material/button';
-import { DebugConfigPanelComponent } from './debug-config-panel.component';
+import { DebugSettingsPanelComponent } from './debug-settings-panel.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { shareReplay, timer } from 'rxjs';
 import { SECOND } from '@shared/models/time/time.models';
-import { HasDebugConfig } from '@shared/models/entity.models';
+import { DebugSettings } from '@shared/models/entity.models';
 import { map } from 'rxjs/operators';
 import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  NG_VALUE_ACCESSOR,
+  UntypedFormGroup,
+} from '@angular/forms';
 
 @Component({
-  selector: 'tb-debug-config-button',
-  templateUrl: './debug-config-button.component.html',
-  styleUrls: ['./debug-config-button.component.scss'],
+  selector: 'tb-debug-settings-button',
+  templateUrl: './debug-settings-button.component.html',
   standalone: true,
   imports: [
     CommonModule,
     SharedModule,
     DurationLeftPipe,
   ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DebugSettingsButtonComponent),
+      multi: true
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DebugConfigButtonComponent {
+export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
-  @Input() debugFailures = false;
-  @Input() debugAll = false;
-  @Input() debugAllUntil = 0;
-  @Input() disabled = false;
-  @Input() minifyMode = false;
   @Input() debugLimitsConfiguration: string;
 
-  @Output() onDebugConfigChanged = new EventEmitter<HasDebugConfig>();
-
-  isDebugAllActive$ = timer(0, SECOND).pipe(map(() => this.debugAllUntil > new Date().getTime() || this.debugAll), shareReplay(1));
+  debugSettingsFormGroup: UntypedFormGroup;
+  disabled = false;
+  isDebugAllActive$ = timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime() || this.allEnabled), shareReplay(1));
 
   readonly maxDebugModeDurationMinutes = getCurrentAuthState(this.store).maxDebugModeDurationMinutes;
 
+  private onChange: (settings: DebugSettings) => void;
+
   constructor(private popoverService: TbPopoverService,
               private renderer: Renderer2,
               private store: Store<AppState>,
               private viewContainerRef: ViewContainerRef,
               private destroyRef: DestroyRef,
-  ) {}
+              private fb: FormBuilder,
+  ) {
+    this.debugSettingsFormGroup = this.fb.group({
+      failuresEnabled: [false],
+      allEnabled: [false],
+      allEnabledUntil: []
+    });
+
+    this.debugSettingsFormGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.onChange(value);
+    })
+  }
+
+  get failuresEnabled(): boolean {
+    return this.debugSettingsFormGroup.get('failuresEnabled').value;
+  }
+
+  get allEnabled(): boolean {
+    return this.debugSettingsFormGroup.get('allEnabled').value;
+  }
+
+  get allEnabledUntil(): number {
+    return this.debugSettingsFormGroup.get('allEnabledUntil').value;
+  }
 
   openDebugStrategyPanel($event: Event, matButton: MatButton): void {
     if ($event) {
       $event.stopPropagation();
     }
     const trigger = matButton._elementRef.nativeElement;
+    const debugSettings = this.debugSettingsFormGroup.value;
+
     if (this.popoverService.hasPopover(trigger)) {
       this.popoverService.hidePopover(trigger);
     } else {
       const debugStrategyPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, DebugConfigPanelComponent, 'bottom', true, null,
+        this.viewContainerRef, DebugSettingsPanelComponent, 'bottom', true, null,
         {
-          debugFailures: this.debugFailures,
-          debugAll: this.debugAll,
-          debugAllUntil: this.debugAllUntil,
+          ...debugSettings,
           maxDebugModeDurationMinutes: this.maxDebugModeDurationMinutes,
           debugLimitsConfiguration: this.debugLimitsConfiguration
         },
         {},
         {}, {}, true);
       debugStrategyPopover.tbComponentRef.instance.popover = debugStrategyPopover;
-      debugStrategyPopover.tbComponentRef.instance.onConfigApplied.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((config: HasDebugConfig) => {
-        this.onDebugConfigChanged.emit(config);
+      debugStrategyPopover.tbComponentRef.instance.onConfigApplied.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((settings: DebugSettings) => {
+        this.debugSettingsFormGroup.patchValue(settings);
         debugStrategyPopover.hide();
       });
     }
   }
+
+  registerOnChange(fn: (settings: DebugSettings) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(_: () => void): void {}
+
+  writeValue(settings: DebugSettings): void {
+    this.debugSettingsFormGroup.patchValue(settings, {emitEvent: false});
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.debugSettingsFormGroup[isDisabled ? 'disable' : 'enable']({emitEvent: false});
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-panel.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
similarity index 74%
rename from ui-ngx/src/app/modules/home/components/debug-config/debug-config-panel.component.html
rename to ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
index 379ad579eb..7e4b1fb231 100644
--- a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
@@ -19,10 +19,11 @@
   <div class="tb-form-panel-title" translate>debug-config.label</div>
   <div class="hint-container">
     <div class="tb-form-hint tb-primary-fill tb-flex center">
-      <span *ngIf="debugLimitsConfiguration else noLimitHint">
+      @if (debugLimitsConfiguration) {
         {{ 'debug-config.hint.main-limited' | translate: { msg: maxMessagesCount, sec: maxTimeFrameSec } }}
-      </span>
-      <ng-template #noLimitHint>{{ 'debug-config.hint.main' | translate }}</ng-template>
+      } @else {
+        {{ 'debug-config.hint.main' | translate }}
+      }
     </div>
   </div>
   <div class="flex flex-col gap-3">
@@ -34,17 +35,19 @@
     <div class="flex justify-between align-center">
       <mat-slide-toggle class="mat-slide" [formControl]="debugAllControl">
         <div tb-hint-tooltip-icon="{{ 'debug-config.hint.all-messages' | translate }}">
-          {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !debugAll ? (debugAllUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) } }}
+          {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) } }}
         </div>
       </mat-slide-toggle>
-      <button mat-icon-button *ngIf="(isDebugAllActive$ | async) && !debugAll"
-              class="tb-mat-20"
-              matTooltip="{{ 'action.reset' | translate }}"
-              matTooltipPosition="above"
-              color="primary"
-              (click)="onReset()">
-        <mat-icon class="material-icons">refresh</mat-icon>
-      </button>
+      @if ((isDebugAllActive$ | async) && !allEnabled) {
+        <button mat-icon-button
+                class="tb-mat-20"
+                matTooltip="{{ 'action.reset' | translate }}"
+                matTooltipPosition="above"
+                color="primary"
+                (click)="onReset()">
+          <mat-icon class="material-icons">refresh</mat-icon>
+        </button>
+      }
     </div>
   </div>
   <div class="flex justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-panel.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
similarity index 70%
rename from ui-ngx/src/app/modules/home/components/debug-config/debug-config-panel.component.ts
rename to ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
index 7ad88955ba..e9e7f084c3 100644
--- a/ui-ngx/src/app/modules/home/components/debug-config/debug-config-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
@@ -31,12 +31,13 @@ import { MINUTE, SECOND } from '@shared/models/time/time.models';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
 import { shareReplay, timer } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { HasDebugConfig } from '@shared/models/entity.models';
+import { DebugSettings } from '@shared/models/entity.models';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
-  selector: 'tb-debug-config-panel',
-  templateUrl: './debug-config-panel.component.html',
+  selector: 'tb-debug-settings-panel',
+  templateUrl: './debug-settings-panel.component.html',
   standalone: true,
   imports: [
     SharedModule,
@@ -45,12 +46,12 @@ import { distinctUntilChanged, map, tap } from 'rxjs/operators';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DebugConfigPanelComponent extends PageComponent implements OnInit {
+export class DebugSettingsPanelComponent extends PageComponent implements OnInit {
 
-  @Input() popover: TbPopoverComponent<DebugConfigPanelComponent>;
-  @Input() debugFailures = false;
-  @Input() debugAll = false;
-  @Input() debugAllUntil = 0;
+  @Input() popover: TbPopoverComponent<DebugSettingsPanelComponent>;
+  @Input() @coerceBoolean() failuresEnabled = false;
+  @Input() @coerceBoolean() allEnabled = false;
+  @Input() allEnabledUntil = 0;
   @Input() maxDebugModeDurationMinutes: number;
   @Input() debugLimitsConfiguration: string;
 
@@ -63,14 +64,14 @@ export class DebugConfigPanelComponent extends PageComponent implements OnInit {
   isDebugAllActive$ = timer(0, SECOND).pipe(
     map(() => {
       this.cd.markForCheck();
-      return this.debugAllUntil > new Date().getTime() || this.debugAll;
+      return this.allEnabledUntil > new Date().getTime() || this.allEnabled;
     }),
     distinctUntilChanged(),
     tap(isDebugOn => this.debugAllControl.patchValue(isDebugOn, { emitEvent: false })),
     shareReplay(1),
   );
 
-  onConfigApplied = new EventEmitter<HasDebugConfig>();
+  onConfigApplied = new EventEmitter<DebugSettings>();
 
   constructor(private fb: UntypedFormBuilder, private cd: ChangeDetectorRef) {
     super();
@@ -81,7 +82,7 @@ export class DebugConfigPanelComponent extends PageComponent implements OnInit {
   ngOnInit(): void {
     this.maxMessagesCount = this.debugLimitsConfiguration?.split(':')[0];
     this.maxTimeFrameSec = this.debugLimitsConfiguration?.split(':')[1];
-    this.onFailuresControl.patchValue(this.debugFailures);
+    this.onFailuresControl.patchValue(this.failuresEnabled);
   }
 
   onCancel(): void {
@@ -90,22 +91,22 @@ export class DebugConfigPanelComponent extends PageComponent implements OnInit {
 
   onApply(): void {
     this.onConfigApplied.emit({
-      debugAll: this.debugAll,
-      debugFailures: this.onFailuresControl.value,
-      debugAllUntil: this.debugAllUntil
+      allEnabled: this.allEnabled,
+      failuresEnabled: this.onFailuresControl.value,
+      allEnabledUntil: this.allEnabledUntil
     });
   }
 
   onReset(): void {
-    this.debugAll = true;
-    this.debugAllUntil = new Date().getTime() + this.maxDebugModeDurationMinutes * MINUTE;
+    this.allEnabled = true;
+    this.allEnabledUntil = new Date().getTime() + this.maxDebugModeDurationMinutes * MINUTE;
     this.cd.markForCheck();
   }
 
   private observeDebugAllChange(): void {
     this.debugAllControl.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
-      this.debugAllUntil = value? new Date().getTime() + this.maxDebugModeDurationMinutes * MINUTE : 0;
-      this.debugAll = value;
+      this.allEnabledUntil = value? new Date().getTime() + this.maxDebugModeDurationMinutes * MINUTE : 0;
+      this.allEnabled = value;
       this.cd.markForCheck();
     });
   }
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index dd095117d7..8566eeb47f 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -76,22 +76,6 @@
         <mat-hint></mat-hint>
       </mat-form-field>
     </div>
-    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
-      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
-        <mat-label translate>tenant-profile.maximum-debug-duration-min</mat-label>
-        <input matInput required min="0" step="1"
-               formControlName="maxDebugModeDurationMinutes"
-               type="number">
-        <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxDebugModeDurationMinutes').hasError('required')">
-          {{ 'tenant-profile.maximum-debug-duration-min-range' | translate }}
-        </mat-error>
-        <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxDebugModeDurationMinutes').hasError('min')">
-          {{ 'tenant-profile.maximum-debug-duration-min-required' | translate }}
-        </mat-error>
-        <mat-hint></mat-hint>
-      </mat-form-field>
-      <div class="flex-1"></div>
-    </div>
     <mat-expansion-panel class="configuration-panel">
       <mat-expansion-panel-header>
         <mat-panel-description class="flex items-stretch justify-end" translate>
@@ -370,6 +354,25 @@
     </div>
   </fieldset>
 
+  <fieldset class="fields-group">
+    <legend class="group-title">
+      {{ 'tenant-profile.debug' | translate }} <span translate>tenant-profile.unlimited</span>
+    </legend>
+    <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
+      <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
+        <mat-label translate>tenant-profile.maximum-debug-duration-min</mat-label>
+        <input matInput min="0" step="1"
+               formControlName="maxDebugModeDurationMinutes"
+               type="number">
+        <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxDebugModeDurationMinutes').hasError('min')">
+          {{ 'tenant-profile.maximum-debug-duration-min-range' | translate }}
+        </mat-error>
+        <mat-hint></mat-hint>
+      </mat-form-field>
+      <div class="flex-1"></div>
+    </div>
+  </fieldset>
+
   <fieldset class="fields-group">
     <legend class="group-title">
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts
index c715a978b2..98c382b479 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts
@@ -85,7 +85,7 @@ export class DefaultTenantProfileConfigurationComponent implements ControlValueA
       tenantNotificationRequestsRateLimit: [null, []],
       tenantNotificationRequestsPerRuleRateLimit: [null, []],
       maxTransportMessages: [null, [Validators.required, Validators.min(0)]],
-      maxDebugModeDurationMinutes: [null, [Validators.required, Validators.min(0)]],
+      maxDebugModeDurationMinutes: [null, [Validators.min(0)]],
       maxTransportDataPoints: [null, [Validators.required, Validators.min(0)]],
       maxREExecutions: [null, [Validators.required, Validators.min(0)]],
       maxJSExecutions: [null, [Validators.required, Validators.min(0)]],
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 5ae72a8880..a9ab128d09 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -35,13 +35,10 @@
       </mat-error>
     </mat-form-field>
     <section class="flex flex-row max-w-xs mb-5">
-      <tb-debug-config-button
+      <tb-debug-settings-button
         class="mr-2"
-        [debugAll]="ruleNode.debugAll"
-        [debugFailures]="ruleNode.debugFailures"
-        [debugAllUntil]="ruleNode.debugAllUntil"
+        formControlName="debugSettings"
         [debugLimitsConfiguration]="ruleChainDebugPerTenantLimitsConfiguration"
-        (onDebugConfigChanged)="onDebugConfigChanged($event)"
       />
       <button mat-stroked-button
               class="tb-rounded-btn flex-1"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
index 6eb76d512a..c0140e7849 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
@@ -40,7 +40,6 @@ 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';
-import { HasDebugConfig } from '@shared/models/entity.models';
 
 @Component({
   selector: 'tb-rule-node',
@@ -96,9 +95,7 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
     if (this.ruleNode) {
       this.ruleNodeFormGroup = this.fb.group({
         name: [this.ruleNode.name, [Validators.required, Validators.pattern('(.|\\s)*\\S(.|\\s)*'), Validators.maxLength(255)]],
-        debugAll: [this.ruleNode.debugAll],
-        debugFailures: [this.ruleNode.debugFailures],
-        debugAllUntil: [this.ruleNode.debugAllUntil],
+        debugSettings: [this.ruleNode.debugSettings],
         singletonMode: [this.ruleNode.singletonMode, []],
         configuration: [this.ruleNode.configuration, [Validators.required]],
         additionalInfo: this.fb.group(
@@ -208,11 +205,4 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
   isSingletonEditAllowed() {
     return this.ruleNode.component.clusteringMode === ComponentClusteringMode.USER_PREFERENCE;
   }
-
-  onDebugConfigChanged(config: HasDebugConfig): void {
-    this.ruleNodeFormGroup.get('debugAllUntil').setValue(config.debugAllUntil);
-    this.ruleNodeFormGroup.get('debugAll').setValue(config.debugAll);
-    this.ruleNodeFormGroup.get('debugFailures').setValue(config.debugFailures);
-    this.ruleNodeFormGroup.markAsDirty();
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
index 2e0c1d95a9..099f034202 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
@@ -575,9 +575,7 @@ export class RuleChainPageComponent extends PageComponent
         additionalInfo: ruleNode.additionalInfo,
         configuration: ruleNode.configuration,
         configurationVersion: isDefinedAndNotNull(ruleNode.configurationVersion) ? ruleNode.configurationVersion : 0,
-        debugAll: ruleNode.debugAll,
-        debugFailures: ruleNode.debugFailures,
-        debugAllUntil: ruleNode.debugAllUntil,
+        debugSettings: ruleNode.debugSettings,
         singletonMode: ruleNode.singletonMode,
         queueName: ruleNode.queueName,
         x: Math.round(ruleNode.additionalInfo.layoutX),
@@ -938,9 +936,7 @@ export class RuleChainPageComponent extends PageComponent
             name: node.name,
             configuration: deepClone(node.configuration),
             additionalInfo: node.additionalInfo ? deepClone(node.additionalInfo) : {},
-            debugFailures: node.debugFailures,
-            debugAllUntil: node.debugAllUntil,
-            debugAll: node.debugAll,
+            debugSettings: node.debugSettings,
             singletonMode: node.singletonMode,
             queueName: node.queueName
           };
@@ -1013,9 +1009,7 @@ export class RuleChainPageComponent extends PageComponent
             name: outputEdge.label,
             configuration: {},
             additionalInfo: {},
-            debugFailures: false,
-            debugAllUntil: 0,
-            debugAll: false,
+            debugSettings: {},
             singletonMode: false
           };
           outputNode.additionalInfo.layoutX = Math.round(destNode.x);
@@ -1061,9 +1055,7 @@ export class RuleChainPageComponent extends PageComponent
             configuration: {
               ruleChainId: ruleChain.id.id
             },
-            debugFailures: false,
-            debugAllUntil: 0,
-            debugAll: false,
+            debugSettings: {},
             singletonMode: false,
             x: Math.round(ruleChainNodeX),
             y: Math.round(ruleChainNodeY),
@@ -1483,9 +1475,7 @@ export class RuleChainPageComponent extends PageComponent
               : node.component.configurationVersion,
             configuration: node.configuration,
             additionalInfo: node.additionalInfo ? node.additionalInfo : {},
-            debugFailures: node.debugFailures,
-            debugAllUntil: node.debugAllUntil,
-            debugAll: node.debugAll,
+            debugSettings: node.debugSettings,
             singletonMode: node.singletonMode,
             queueName: node.queueName
           };
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
index dc6f9149d9..1fdf11c780 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
@@ -33,7 +33,7 @@ import { RuleNodeLinkComponent } from './rule-node-link.component';
 import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
 import { RuleNodeConfigComponent } from './rule-node-config.component';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
-import { DebugConfigButtonComponent } from '@home/components/debug-config/debug-config-button.component';
+import { DebugSettingsButtonComponent } from '@home/components/debug-settings/debug-settings-button.component';
 
 @NgModule({
   declarations: [
@@ -63,7 +63,7 @@ import { DebugConfigButtonComponent } from '@home/components/debug-config/debug-
     HomeComponentsModule,
     RuleChainRoutingModule,
     DurationLeftPipe,
-    DebugConfigButtonComponent
+    DebugSettingsButtonComponent
   ]
 })
 export class RuleChainModule { }
diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts
index 7c975dec10..5b707d6399 100644
--- a/ui-ngx/src/app/shared/import-export/import-export.service.ts
+++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts
@@ -649,18 +649,20 @@ export class ImportExportService {
     );
   }
 
-  private processOldRuleChainConnections(ruleChainImport: RuleChainImport): Observable<RuleChainImport> {
-    ruleChainImport.ruleChain = this.prepareImport(ruleChainImport.ruleChain);
-    const metadata = ruleChainImport.metadata;
+  private processOldRuleChainConnections({ruleChain, metadata}: RuleChainImport): Observable<RuleChainImport> {
+    ruleChain = this.prepareImport(ruleChain);
+    metadata = {
+      ...metadata,
+      nodes: metadata.nodes.map(({ debugMode, ...node }: RuleNode & { debugMode: boolean }) => {
+        return debugMode ? { ...node, debugSettings: { failuresEnabled: true, allEnabled: true} } : node
+      })
+    };
     if ((metadata as any).ruleChainConnections) {
       const ruleChainNameResolveObservables: Observable<void>[] = [];
       for (const ruleChainConnection of (metadata as any).ruleChainConnections) {
         if (ruleChainConnection.targetRuleChainId && ruleChainConnection.targetRuleChainId.id) {
           const ruleChainNode: RuleNode = {
             name: '',
-            debugFailures: false,
-            debugAllUntil: 0,
-            debugAll: false,
             singletonMode: false,
             type: 'org.thingsboard.rule.engine.flow.TbRuleChainInputNode',
             configuration: {
@@ -688,13 +690,13 @@ export class ImportExportService {
       }
       if (ruleChainNameResolveObservables.length) {
         return forkJoin(ruleChainNameResolveObservables).pipe(
-           map(() => ruleChainImport)
+           map(() => ({ruleChain, metadata}))
         );
       } else {
-        return of(ruleChainImport);
+        return of({ruleChain, metadata});
       }
     } else {
-      return of(ruleChainImport);
+      return of({ruleChain, metadata});
     }
   }
 
diff --git a/ui-ngx/src/app/shared/models/entity.models.ts b/ui-ngx/src/app/shared/models/entity.models.ts
index 50dd227b97..19b0718336 100644
--- a/ui-ngx/src/app/shared/models/entity.models.ts
+++ b/ui-ngx/src/app/shared/models/entity.models.ts
@@ -193,10 +193,14 @@ export interface HasVersion {
   version?: number;
 }
 
-export interface HasDebugConfig {
-  debugAll?: boolean;
-  debugFailures?: boolean;
-  debugAllUntil?: number;
+export interface HasDebugSettings {
+  debugSettings?: DebugSettings;
 }
 
-export type VersionedEntity = EntityInfoData & HasVersion | RuleChainMetaData;
\ No newline at end of file
+export interface DebugSettings {
+  failuresEnabled?: boolean;
+  allEnabled?: boolean;
+  allEnabledUntil?: number;
+}
+
+export type VersionedEntity = EntityInfoData & HasVersion | RuleChainMetaData;
diff --git a/ui-ngx/src/app/shared/models/rule-node.models.ts b/ui-ngx/src/app/shared/models/rule-node.models.ts
index bfc9dff775..ddfad98f11 100644
--- a/ui-ngx/src/app/shared/models/rule-node.models.ts
+++ b/ui-ngx/src/app/shared/models/rule-node.models.ts
@@ -27,13 +27,13 @@ import { AppState } from '@core/core.state';
 import { AbstractControl, UntypedFormGroup } from '@angular/forms';
 import { RuleChainType } from '@shared/models/rule-chain.models';
 import { DebugRuleNodeEventBody } from '@shared/models/event.models';
-import { HasDebugConfig } from '@shared/models/entity.models';
+import { HasDebugSettings } from '@shared/models/entity.models';
 
 export interface RuleNodeConfiguration {
   [key: string]: any;
 }
 
-export interface RuleNode extends BaseData<RuleNodeId>, HasDebugConfig {
+export interface RuleNode extends BaseData<RuleNodeId>, HasDebugSettings {
   ruleChainId?: RuleChainId;
   type: string;
   name: string;
@@ -331,7 +331,7 @@ export interface RuleNodeComponentDescriptor extends ComponentDescriptor {
   configurationDescriptor?: RuleNodeConfigurationDescriptor;
 }
 
-export interface FcRuleNodeType extends FcNode, HasDebugConfig {
+export interface FcRuleNodeType extends FcNode, HasDebugSettings {
   component?: RuleNodeComponentDescriptor;
   singletonMode?: boolean;
   queueName?: string;
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 f19a781b8f..737bb64ebd 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4402,6 +4402,7 @@
         "tenant-profiles": "Tenant profiles",
         "add": "Add tenant profile",
         "add-profile": "Add profile",
+        "debug": "Debug",
         "edit": "Edit tenant profile",
         "tenant-profile-details": "Tenant profile details",
         "no-tenant-profiles-text": "No tenant profiles found",
@@ -4470,7 +4471,6 @@
         "maximum-ota-package-sum-data-size-required": "Maximum total size of OTA package files is required.",
         "maximum-ota-package-sum-data-size-range": "Maximum total size of OTA package files can't be negative",
         "maximum-debug-duration-min": "Maximum debug duration (min)",
-        "maximum-debug-duration-min-required": "Maximum debug duration is required.",
         "maximum-debug-duration-min-range": "Maximum debug duration can't be negative",
         "rest-requests-for-tenant": "REST requests for tenant",
         "transport-tenant-telemetry-msg-rate-limit": "Transport tenant telemetry messages",

From c38639fb771a61c654e2df29c363f61411faeb67 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 29 Nov 2024 15:59:36 +0200
Subject: [PATCH 2/6] refactoring

---
 .../debug-settings-button.component.html      | 19 +++++---------
 .../debug-settings-button.component.ts        | 26 ++++++++++---------
 .../debug-settings-panel.component.html       | 18 ++++++-------
 .../debug-settings-panel.component.ts         |  6 ++---
 4 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
index cd43d56e96..11c396add1 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
@@ -23,17 +23,10 @@
         [disabled]="disabled"
         (click)="openDebugStrategyPanel($event, matButton)">
   <mat-icon [color]="debugSettingsFormGroup.disabled ? 'inherit' : 'primary'">bug_report</mat-icon>
-  @if (failuresEnabled) {
-    @if (isDebugAllActive$ | async) {
-      {{ 'debug-config.all' | translate }}
-    } @else {
-      {{ 'debug-config.failures' | translate }}
-    }
-  } @else {
-    @if (isDebugAllActive$ | async) {
-      {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
-    } @else {
-      {{ 'common.disabled' | translate }}
-    }
-  }
+  <span *ngIf="!failuresEnabled && !(isDebugAllActive$ | async)" translate>common.disabled</span>
+  <span *ngIf="(isDebugAllActive$ | async) && failuresEnabled" translate>debug-config.all</span>
+  <span *ngIf="(isDebugAllActive$ | async) && !failuresEnabled">
+    {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
+  </span>
+  <span *ngIf="!(isDebugAllActive$ | async) && failuresEnabled" translate>debug-config.failures</span>
 </button>
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
index 8f05d7dad0..292f11e6d7 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
@@ -41,7 +41,6 @@ import {
   ControlValueAccessor,
   FormBuilder,
   NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
 } from '@angular/forms';
 
 @Component({
@@ -66,13 +65,18 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   @Input() debugLimitsConfiguration: string;
 
-  debugSettingsFormGroup: UntypedFormGroup;
+  debugSettingsFormGroup = this.fb.group({
+    failuresEnabled: [false],
+    allEnabled: [false],
+    allEnabledUntil: []
+  });
+
   disabled = false;
   isDebugAllActive$ = timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime() || this.allEnabled), shareReplay(1));
 
   readonly maxDebugModeDurationMinutes = getCurrentAuthState(this.store).maxDebugModeDurationMinutes;
 
-  private onChange: (settings: DebugSettings) => void;
+  private propagateChange: (settings: DebugSettings) => void;
 
   constructor(private popoverService: TbPopoverService,
               private renderer: Renderer2,
@@ -81,14 +85,8 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
               private destroyRef: DestroyRef,
               private fb: FormBuilder,
   ) {
-    this.debugSettingsFormGroup = this.fb.group({
-      failuresEnabled: [false],
-      allEnabled: [false],
-      allEnabledUntil: []
-    });
-
     this.debugSettingsFormGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-      this.onChange(value);
+      this.propagateChange(value);
     })
   }
 
@@ -132,7 +130,7 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
   }
 
   registerOnChange(fn: (settings: DebugSettings) => void): void {
-    this.onChange = fn;
+    this.propagateChange = fn;
   }
 
   registerOnTouched(_: () => void): void {}
@@ -143,6 +141,10 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
-    this.debugSettingsFormGroup[isDisabled ? 'disable' : 'enable']({emitEvent: false});
+    if (isDisabled) {
+      this.debugSettingsFormGroup.disable({emitEvent: false});
+    } else {
+      this.debugSettingsFormGroup.enable({emitEvent: false});
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
index 7e4b1fb231..4b0ea8217e 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
@@ -38,16 +38,14 @@
           {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) } }}
         </div>
       </mat-slide-toggle>
-      @if ((isDebugAllActive$ | async) && !allEnabled) {
-        <button mat-icon-button
-                class="tb-mat-20"
-                matTooltip="{{ 'action.reset' | translate }}"
-                matTooltipPosition="above"
-                color="primary"
-                (click)="onReset()">
-          <mat-icon class="material-icons">refresh</mat-icon>
-        </button>
-      }
+      <button mat-icon-button *ngIf="(isDebugAllActive$ | async) && !allEnabled"
+              class="tb-mat-20"
+              matTooltip="{{ 'action.reset' | translate }}"
+              matTooltipPosition="above"
+              color="primary"
+              (click)="onReset()">
+        <mat-icon class="material-icons">refresh</mat-icon>
+      </button>
     </div>
   </div>
   <div class="flex justify-end">
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
index e9e7f084c3..b4c71fab5e 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
@@ -15,6 +15,7 @@
 ///
 
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -33,7 +34,6 @@ import { shareReplay, timer } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DebugSettings } from '@shared/models/entity.models';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
-import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-debug-settings-panel',
@@ -49,8 +49,8 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 export class DebugSettingsPanelComponent extends PageComponent implements OnInit {
 
   @Input() popover: TbPopoverComponent<DebugSettingsPanelComponent>;
-  @Input() @coerceBoolean() failuresEnabled = false;
-  @Input() @coerceBoolean() allEnabled = false;
+  @Input({ transform: booleanAttribute }) failuresEnabled = false;
+  @Input({ transform: booleanAttribute }) allEnabled = false;
   @Input() allEnabledUntil = 0;
   @Input() maxDebugModeDurationMinutes: number;
   @Input() debugLimitsConfiguration: string;

From 0db51da6c07a4182fb352c947e887e7ab81db68b Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 29 Nov 2024 16:11:46 +0200
Subject: [PATCH 3/6] refactoring

---
 .../modules/home/pages/rulechain/rulechain-page.component.ts    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
index 099f034202..35b10a27b3 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
@@ -1009,7 +1009,6 @@ export class RuleChainPageComponent extends PageComponent
             name: outputEdge.label,
             configuration: {},
             additionalInfo: {},
-            debugSettings: {},
             singletonMode: false
           };
           outputNode.additionalInfo.layoutX = Math.round(destNode.x);
@@ -1055,7 +1054,6 @@ export class RuleChainPageComponent extends PageComponent
             configuration: {
               ruleChainId: ruleChain.id.id
             },
-            debugSettings: {},
             singletonMode: false,
             x: Math.round(ruleChainNodeX),
             y: Math.round(ruleChainNodeY),

From 3c59c9b991726377deca0e2dc8870eea4e7952a6 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 29 Nov 2024 19:36:11 +0200
Subject: [PATCH 4/6] disable timer on allEnabled=true

---
 .../debug-settings-button.component.ts        | 17 ++++++++++----
 .../debug-settings-panel.component.ts         | 23 +++++++++++--------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
index 292f11e6d7..b98c87edf9 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
@@ -30,10 +30,10 @@ import { TbPopoverService } from '@shared/components/popover.service';
 import { MatButton } from '@angular/material/button';
 import { DebugSettingsPanelComponent } from './debug-settings-panel.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { shareReplay, timer } from 'rxjs';
+import { of, shareReplay, timer } from 'rxjs';
 import { SECOND } from '@shared/models/time/time.models';
 import { DebugSettings } from '@shared/models/entity.models';
-import { map } from 'rxjs/operators';
+import { map, startWith, switchMap } from 'rxjs/operators';
 import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
@@ -70,9 +70,18 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
     allEnabled: [false],
     allEnabledUntil: []
   });
-
   disabled = false;
-  isDebugAllActive$ = timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime() || this.allEnabled), shareReplay(1));
+  isDebugAllActive$ = this.debugSettingsFormGroup.get('allEnabled').valueChanges.pipe(
+    startWith(this.debugSettingsFormGroup.get('allEnabled').value),
+    switchMap(value => {
+      if (value) {
+        return of(true);
+      } else {
+        return timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime()));
+      }
+    }),
+    shareReplay(1)
+  );
 
   readonly maxDebugModeDurationMinutes = getCurrentAuthState(this.store).maxDebugModeDurationMinutes;
 
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
index b4c71fab5e..ff19a0bddb 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
@@ -30,10 +30,10 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { MINUTE, SECOND } from '@shared/models/time/time.models';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
-import { shareReplay, timer } from 'rxjs';
+import { of, shareReplay, timer } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DebugSettings } from '@shared/models/entity.models';
-import { distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { map, startWith, switchMap, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-debug-settings-panel',
@@ -61,12 +61,15 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
   maxMessagesCount: string;
   maxTimeFrameSec: string;
 
-  isDebugAllActive$ = timer(0, SECOND).pipe(
-    map(() => {
-      this.cd.markForCheck();
-      return this.allEnabledUntil > new Date().getTime() || this.allEnabled;
+  isDebugAllActive$ = this.debugAllControl.valueChanges.pipe(
+    startWith(this.debugAllControl.value),
+    switchMap(value => {
+      if (value) {
+        return of(true);
+      } else {
+        return timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime()));
+      }
     }),
-    distinctUntilChanged(),
     tap(isDebugOn => this.debugAllControl.patchValue(isDebugOn, { emitEvent: false })),
     shareReplay(1),
   );
@@ -91,15 +94,15 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
 
   onApply(): void {
     this.onConfigApplied.emit({
-      allEnabled: this.allEnabled,
+      allEnabled: this.debugAllControl.value,
       failuresEnabled: this.onFailuresControl.value,
       allEnabledUntil: this.allEnabledUntil
     });
   }
 
   onReset(): void {
-    this.allEnabled = true;
-    this.allEnabledUntil = new Date().getTime() + this.maxDebugModeDurationMinutes * MINUTE;
+    this.debugAllControl.patchValue(true);
+    this.allEnabledUntil = 0;
     this.cd.markForCheck();
   }
 

From 008ac7970e971c9e4230a2bad9e1b8b57973cf23 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 2 Dec 2024 11:21:20 +0200
Subject: [PATCH 5/6] UI: Clean up timer memory lick and refactoring debug
 setting components

---
 .../debug-settings-button.component.html      |  2 +-
 .../debug-settings-button.component.ts        | 34 +++++++---------
 .../debug-settings-panel.component.html       |  4 +-
 .../debug-settings-panel.component.ts         | 40 ++++++++++---------
 .../components/event/event-table-config.ts    |  3 +-
 ...enant-profile-configuration.component.html |  2 +-
 .../rule-node-details.component.html          |  2 +-
 7 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
index 11c396add1..b779ae1e4c 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html
@@ -16,7 +16,7 @@
 
 -->
 <button mat-stroked-button
-        class="tb-rounded-btn flex-1 w-36"
+        class="tb-rounded-btn w-36 flex-1"
         color="primary"
         #matButton
         [class.active]="((isDebugAllActive$ | async) || failuresEnabled) && !disabled"
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
index b98c87edf9..4050e4b8ec 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
@@ -14,15 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
-  Component,
-  Input,
-  Renderer2,
-  ViewContainerRef,
-  DestroyRef,
-  ChangeDetectionStrategy,
-  forwardRef
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, Renderer2, ViewContainerRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
@@ -33,15 +25,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { of, shareReplay, timer } from 'rxjs';
 import { SECOND } from '@shared/models/time/time.models';
 import { DebugSettings } from '@shared/models/entity.models';
-import { map, startWith, switchMap } from 'rxjs/operators';
+import { map, startWith, switchMap, takeWhile } from 'rxjs/operators';
 import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
-import {
-  ControlValueAccessor,
-  FormBuilder,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'tb-debug-settings-button',
@@ -70,16 +58,22 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
     allEnabled: [false],
     allEnabledUntil: []
   });
+
   disabled = false;
+
   isDebugAllActive$ = this.debugSettingsFormGroup.get('allEnabled').valueChanges.pipe(
     startWith(this.debugSettingsFormGroup.get('allEnabled').value),
     switchMap(value => {
       if (value) {
         return of(true);
       } else {
-        return timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime()));
+        return timer(0, SECOND).pipe(
+          map(() => this.allEnabledUntil > new Date().getTime()),
+          takeWhile(value => value, true)
+        );
       }
     }),
+    takeUntilDestroyed(),
     shareReplay(1)
   );
 
@@ -91,10 +85,11 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
               private renderer: Renderer2,
               private store: Store<AppState>,
               private viewContainerRef: ViewContainerRef,
-              private destroyRef: DestroyRef,
               private fb: FormBuilder,
   ) {
-    this.debugSettingsFormGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+    this.debugSettingsFormGroup.valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe(value => {
       this.propagateChange(value);
     })
   }
@@ -131,7 +126,7 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
         {},
         {}, {}, true);
       debugStrategyPopover.tbComponentRef.instance.popover = debugStrategyPopover;
-      debugStrategyPopover.tbComponentRef.instance.onConfigApplied.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((settings: DebugSettings) => {
+      debugStrategyPopover.tbComponentRef.instance.onConfigApplied.subscribe((settings: DebugSettings) => {
         this.debugSettingsFormGroup.patchValue(settings);
         debugStrategyPopover.hide();
       });
@@ -146,6 +141,7 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   writeValue(settings: DebugSettings): void {
     this.debugSettingsFormGroup.patchValue(settings, {emitEvent: false});
+    this.debugSettingsFormGroup.get('allEnabled').updateValueAndValidity({onlySelf: true});
   }
 
   setDisabledState(isDisabled: boolean): void {
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
index 4b0ea8217e..5fe0aa2546 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-col gap-3 p-2 max-w-sm">
+<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="hint-container">
     <div class="tb-form-hint tb-primary-fill tb-flex center">
@@ -32,7 +32,7 @@
         {{ 'debug-config.on-failure' | translate }}
       </div>
     </mat-slide-toggle>
-    <div class="flex justify-between align-center">
+    <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 }}">
           {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) } }}
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
index ff19a0bddb..8e6e82d496 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
@@ -25,15 +25,15 @@ import {
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { TbPopoverComponent } from '@shared/components/popover.component';
-import { UntypedFormBuilder } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import { MINUTE, SECOND } from '@shared/models/time/time.models';
+import { 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 { DebugSettings } from '@shared/models/entity.models';
-import { map, startWith, switchMap, tap } from 'rxjs/operators';
+import { distinctUntilChanged, map, startWith, switchMap, takeWhile } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-debug-settings-panel',
@@ -67,19 +67,33 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
       if (value) {
         return of(true);
       } else {
-        return timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime()));
+        return timer(0, SECOND).pipe(
+          map(() => this.allEnabledUntil > new Date().getTime()),
+          takeWhile(value => value, true)
+        );
       }
     }),
-    tap(isDebugOn => this.debugAllControl.patchValue(isDebugOn, { emitEvent: false })),
+    takeUntilDestroyed(),
     shareReplay(1),
   );
 
   onConfigApplied = new EventEmitter<DebugSettings>();
 
-  constructor(private fb: UntypedFormBuilder, private cd: ChangeDetectorRef) {
+  constructor(private fb: FormBuilder,
+              private cd: ChangeDetectorRef) {
     super();
 
-    this.observeDebugAllChange();
+    this.debugAllControl.valueChanges.pipe(
+      takeUntilDestroyed()
+    ).subscribe(value => {
+      this.allEnabled = value;
+      this.cd.markForCheck();
+    });
+
+    this.isDebugAllActive$.pipe(
+      distinctUntilChanged(),
+      takeUntilDestroyed()
+    ).subscribe(isDebugOn => this.debugAllControl.patchValue(isDebugOn, {emitEvent: false}))
   }
 
   ngOnInit(): void {
@@ -95,22 +109,12 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
   onApply(): void {
     this.onConfigApplied.emit({
       allEnabled: this.debugAllControl.value,
-      failuresEnabled: this.onFailuresControl.value,
-      allEnabledUntil: this.allEnabledUntil
+      failuresEnabled: this.onFailuresControl.value
     });
   }
 
   onReset(): void {
     this.debugAllControl.patchValue(true);
-    this.allEnabledUntil = 0;
     this.cd.markForCheck();
   }
-
-  private observeDebugAllChange(): void {
-    this.debugAllControl.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
-      this.allEnabledUntil = value? new Date().getTime() + this.maxDebugModeDurationMinutes * MINUTE : 0;
-      this.allEnabled = value;
-      this.cd.markForCheck();
-    });
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
index 32244e6951..953d1d17c1 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@@ -99,7 +99,8 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
     this.loadDataOnInit = false;
     this.tableTitle = '';
     this.useTimePageLink = true;
-    this.defaultTimewindowInterval = this.maxDebugModeDurationMinutes ? historyInterval(this.maxDebugModeDurationMinutes * MINUTE) : historyInterval(DAY);
+    const defaultInterval = this.maxDebugModeDurationMinutes ? Math.min(this.maxDebugModeDurationMinutes * MINUTE, DAY) : DAY;
+    this.defaultTimewindowInterval = historyInterval(defaultInterval);
     this.detailsPanelEnabled = false;
     this.selectionEnabled = false;
     this.searchEnabled = false;
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 8566eeb47f..44b169d4cc 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -356,7 +356,7 @@
 
   <fieldset class="fields-group">
     <legend class="group-title">
-      {{ 'tenant-profile.debug' | translate }} <span translate>tenant-profile.unlimited</span>
+      {{ 'tenant-profile.debug' | translate }}
     </legend>
     <div class="fields-element flex flex-1 flex-row xs:flex-col gt-xs:gap-4">
       <mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index a9ab128d09..13cc24a7b7 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -34,7 +34,7 @@
         {{ 'rulenode.name-max-length' | translate }}
       </mat-error>
     </mat-form-field>
-    <section class="flex flex-row max-w-xs mb-5">
+    <section class="mb-5 flex max-w-xs flex-row">
       <tb-debug-settings-button
         class="mr-2"
         formControlName="debugSettings"

From 8b170f1a3470b3901c2569f8aeda96b734026750 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Mon, 2 Dec 2024 13:01:02 +0200
Subject: [PATCH 6/6] UI: fixed allEnabled applying and on filures change timer
 reset fix

---
 .../debug-settings-button.component.ts        |  2 +-
 .../debug-settings-panel.component.ts         | 23 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
index 4050e4b8ec..a344e93683 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts
@@ -126,7 +126,7 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
         {},
         {}, {}, true);
       debugStrategyPopover.tbComponentRef.instance.popover = debugStrategyPopover;
-      debugStrategyPopover.tbComponentRef.instance.onConfigApplied.subscribe((settings: DebugSettings) => {
+      debugStrategyPopover.tbComponentRef.instance.onSettingsApplied.subscribe((settings: DebugSettings) => {
         this.debugSettingsFormGroup.patchValue(settings);
         debugStrategyPopover.hide();
       });
diff --git a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
index 8e6e82d496..e52f711583 100644
--- a/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts
@@ -60,6 +60,7 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
 
   maxMessagesCount: string;
   maxTimeFrameSec: string;
+  initialAllEnabled: boolean;
 
   isDebugAllActive$ = this.debugAllControl.valueChanges.pipe(
     startWith(this.debugAllControl.value),
@@ -77,7 +78,7 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
     shareReplay(1),
   );
 
-  onConfigApplied = new EventEmitter<DebugSettings>();
+  onSettingsApplied = new EventEmitter<DebugSettings>();
 
   constructor(private fb: FormBuilder,
               private cd: ChangeDetectorRef) {
@@ -100,6 +101,8 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
     this.maxMessagesCount = this.debugLimitsConfiguration?.split(':')[0];
     this.maxTimeFrameSec = this.debugLimitsConfiguration?.split(':')[1];
     this.onFailuresControl.patchValue(this.failuresEnabled);
+    this.debugAllControl.patchValue(this.allEnabled);
+    this.initialAllEnabled = this.allEnabled || this.allEnabledUntil > new Date().getTime();
   }
 
   onCancel(): void {
@@ -107,14 +110,24 @@ export class DebugSettingsPanelComponent extends PageComponent implements OnInit
   }
 
   onApply(): void {
-    this.onConfigApplied.emit({
-      allEnabled: this.debugAllControl.value,
-      failuresEnabled: this.onFailuresControl.value
-    });
+    const isDebugAllChanged = this.initialAllEnabled !== this.debugAllControl.value || this.initialAllEnabled !== this.allEnabledUntil > new Date().getTime();
+    if (isDebugAllChanged) {
+      this.onSettingsApplied.emit({
+        allEnabled: this.allEnabled,
+        failuresEnabled: this.onFailuresControl.value,
+        allEnabledUntil: 0,
+      });
+    } else {
+      this.onSettingsApplied.emit({
+        allEnabled: false,
+        failuresEnabled: this.onFailuresControl.value,
+      });
+    }
   }
 
   onReset(): void {
     this.debugAllControl.patchValue(true);
+    this.allEnabledUntil = 0;
     this.cd.markForCheck();
   }
 }