added debug events modal to rule chain elements

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

@@ -0,0 +1,47 @@
+<!--
+
+    Copyright © 2016-2025 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.
+
+-->
+<div class="debug-dialog-container flex flex-col xs:h-full">
+  <mat-toolbar color="primary">
+    <h2>{{ 'rulenode.events' | translate}}</h2>
+    <span class="flex-1"></span>
+    <button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content xs:flex-1">
+    <tb-event-table
+      [debugEventTypes]="[debugEventTypes.DEBUG_RULE_NODE]"
+      [defaultEventType]="debugEventTypes.DEBUG_RULE_NODE"
+      [active]="data.isActive"
+      [tenantId]="data.tenantId.id"
+      [entityId]="data.ruleNodeId"
+      [functionTestButtonLabel]="data.ruleNodeTestButtonLabel"
+      (debugEventSelected)="data.onDebugEventSelected"
+    />
+  </div>
+  <div mat-dialog-actions class="justify-end">
+    <button mat-button color="primary"
+            type="button"
+            cdkFocusInitial
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+  </div>
+</div>

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-debug-dialog.component.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright © 2016-2025 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 {
+  .debug-dialog-container {
+    width: 1080px;
+    max-width: 100%;
+
+    .debug-dialog-content {
+      height: 65vh;
+      border-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+///
+/// Copyright © 2016-2025 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.
+///
+
+import { AfterViewInit, Component, Inject, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { EventTableComponent } from '@home/components/event/event-table.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { Router } from '@angular/router';
+import { DebugEventType, EventType } from '@shared/models/event.models';
+import { TenantId } from '@shared/models/id/tenant-id';
+import { EntityId } from '@shared/models/id/entity-id';
+
+export interface RuleNodeDebugDialogData {
+  isActive: boolean;
+  tenantId: TenantId;
+  ruleNodeId: EntityId;
+  ruleNodeTestButtonLabel: string;
+  onDebugEventSelected: ()=> void;
+}
+
+@Component({
+  selector: 'tb-rule-node-debug-dialog',
+  templateUrl: './rule-node-debug-dialog.component.html',
+  styleUrl: './rule-node-debug-dialog.component.scss'
+})
+export class RuleNodeDebugDialogComponent extends DialogComponent<RuleNodeDebugDialogComponent, string> implements AfterViewInit{
+
+  @ViewChild(EventTableComponent, {static: true}) eventsTable: EventTableComponent;
+
+  readonly DebugEventType = DebugEventType;
+  readonly debugEventTypes = DebugEventType;
+  readonly EventType = EventType;
+
+  dialogTitle: string;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              @Inject(MAT_DIALOG_DATA) public data: RuleNodeDebugDialogData,
+              protected dialogRef: MatDialogRef<RuleNodeDebugDialogComponent, string>) {
+    super(store, router, dialogRef);
+  }
+
+ ngAfterViewInit() {
+   this.eventsTable.entitiesTable.updateData();
+ }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+}

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

@@ -36,6 +36,7 @@
     </mat-form-field>
     <section class="mb-5 flex max-w-xs flex-row">
       <tb-entity-debug-settings-button
+        [additionalActionConfig]="additionalActionConfig"
         class="mr-2"
         formControlName="debugSettings"
         [entityType]="entityType.RULE_NODE"

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

@@ -37,6 +37,7 @@ 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 { AdditionalDebugActionConfig } from '@home/components/entity/debug/entity-debug-settings.model';
 
 @Component({
   selector: 'tb-rule-node',
@@ -64,6 +65,9 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
   @coerceBoolean()
   isAdd = false;
 
+  @Input()
+  additionalActionConfig: AdditionalDebugActionConfig;
+
   @Output()
   initRuleNode = new EventEmitter<void>();
 

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html

@@ -106,6 +106,7 @@
             <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill tb-rulenode-details flex-1" [(selectedIndex)]="selectedRuleNodeTabIndex">
               <mat-tab label="{{ 'rulenode.details' | translate }}">
                 <tb-rule-node #tbRuleNode
+                              [additionalActionConfig]="additionalActionConfig"
                               [ruleNode]="editingRuleNode"
                               [ruleChainId]="ruleChain.id?.id"
                               [ruleChainType]="ruleChainType"

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts

@@ -99,6 +99,8 @@ import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 import { EntityDebugSettings } from '@shared/models/entity.models';
 import Timeout = NodeJS.Timeout;
 import { DomSanitizer } from '@angular/platform-browser';
+import { AdditionalDebugActionConfig } from '@home/components/entity/debug/entity-debug-settings.model';
+import { RuleNodeDebugDialogComponent } from '@home/pages/rulechain/rule-node-debug-dialog.component';
 
 @Component({
   selector: 'tb-rulechain-page',
@@ -1366,7 +1368,7 @@ export class RuleChainPageComponent extends PageComponent
           details = this.sanitizer.sanitize(SecurityContext.HTML, node.additionalInfo.description);
         }
       }
-      
+
       name = this.sanitizer.sanitize(SecurityContext.HTML, name);
       desc = this.sanitizer.sanitize(SecurityContext.HTML, desc);
 
@@ -1656,6 +1658,37 @@ export class RuleChainPageComponent extends PageComponent
     }
   }
 
+  get additionalActionConfig (): AdditionalDebugActionConfig {
+    return {
+      title: this.translate.instant('rulenode.rule-node-events'),
+      action: this.switchToEventsTab.bind(this)
+    }
+  }
+
+  private switchToEventsTab() {
+    if(!this.ruleNodeComponent.ruleNodeFormGroup.dirty) {
+      this.selectedRuleNodeTabIndex = 1;
+    } else {
+      this.openDebugEventsDialog();
+    }
+  }
+
+  private openDebugEventsDialog(): void {
+    this.dialog.open<RuleNodeDebugDialogComponent>(RuleNodeDebugDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        active: true,
+        tenantId: this.ruleChain.tenantId,
+        ruleNodeId: this.editingRuleNode.ruleNodeId,
+        functionTestButtonLabel: this.ruleNodeTestButtonLabel,
+        debugEventSelected: this.onDebugEventSelected.bind(this)
+      }
+    })
+      .afterClosed()
+      .subscribe();
+  }
+
   private updateNodeErrorTooltip(node: FcRuleNode) {
     if (node.error) {
       const element = $('#' + node.id);

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.module.ts

@@ -33,6 +33,7 @@ import { RuleNodeDetailsComponent } from '@home/pages/rulechain/rule-node-detail
 import { RuleNodeConfigComponent } from '@home/pages/rulechain/rule-node-config.component';
 import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
 import { RuleNodeLinkComponent } from '@home/pages/rulechain/rule-node-link.component';
+import { RuleNodeDebugDialogComponent } from '@home/pages/rulechain/rule-node-debug-dialog.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { RuleNodeLinkComponent } from '@home/pages/rulechain/rule-node-link.comp
     RuleNodeConfigComponent,
     AddRuleNodeLinkDialogComponent,
     AddRuleNodeDialogComponent,
-    CreateNestedRuleChainDialogComponent
+    CreateNestedRuleChainDialogComponent,
+    RuleNodeDebugDialogComponent
   ],
   imports: [
     CommonModule,