UI: Clean up timer memory lick and refactoring debug setting components

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"

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 {

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 }) } }}

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();
-    });
-  }
 }

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;

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">

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"