From 5a4716cf67d7790641e917043f8d9cd2a86ef408 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 2 Aug 2022 15:22:57 +0300
Subject: [PATCH] UI: Added new column and copy buttons for entityId/messageId
 in rule node debug events table

---
 .../components/event/event-table-config.ts    | 46 +++++++++++++++----
 .../assets/locale/locale.constant-en_US.json  |  2 +
 2 files changed, 39 insertions(+), 9 deletions(-)

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 997e4db414..19c49638ff 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
@@ -15,6 +15,7 @@
 ///
 
 import {
+  CellActionDescriptorType,
   DateEntityTableColumn,
   EntityActionTableColumn,
   EntityTableColumn,
@@ -225,7 +226,9 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
         );
         break;
       case DebugEventType.DEBUG_RULE_NODE:
-        this.columns[0].width = '100px';
+        this.columns[0].width = '80px';
+        (this.columns[1] as EntityTableColumn<Event>).headerCellStyleFunction = () => ({padding: '0 12px 0 0'});
+        (this.columns[1] as EntityTableColumn<Event>).cellStyleFunction = () => ({padding: '0 12px 0 0'});
         this.columns.push(
           new EntityTableColumn<Event>('type', 'event.type', '40px',
             (entity) => entity.body.type, entity => ({
@@ -233,20 +236,45 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
             }), false, key => ({
               padding: '0 12px 0 0'
             })),
-          new EntityTableColumn<Event>('entityType', 'event.entity-type', '100px',
+          new EntityTableColumn<Event>('entityType', 'event.entity-type', '75px',
             (entity) => entity.body.entityType, entity => ({
               padding: '0 12px 0 0',
             }), false, key => ({
               padding: '0 12px 0 0'
             })),
-          new EntityTableColumn<Event>('msgId', 'event.message-id', '100px',
-            (entity) => entity.body.msgId, entity => ({
-              whiteSpace: 'nowrap',
+          new EntityTableColumn<Event>('entityId', 'event.entity-id', '85px',
+            (entity) => `${entity.body.entityId.substring(0, 6)}…`, () => ({
               padding: '0 12px 0 0'
-            }), false, key => ({
+            }), false, () => ({
               padding: '0 12px 0 0'
             }),
-            entity => entity.body.msgId),
+            () => undefined, false, {
+              name: this.translate.instant('event.copy-entity-id'),
+              icon: 'content_paste',
+              style: {
+                'font-size': '16px',
+                color: 'rgba(0,0,0,.87)'
+              },
+              isEnabled: () => true,
+              onAction: ($event, entity) => entity.body.entityId,
+              type: CellActionDescriptorType.COPY_BUTTON
+            }),
+          new EntityTableColumn<Event>('msgId', 'event.message-id', '85px',
+            (entity) => `${entity.body.msgId.substring(0, 6)}…`, () => ({
+              padding: '0 12px 0 0'
+            }), false, () => ({
+              padding: '0 12px 0 0'
+            }), () => undefined, false, {
+              name: this.translate.instant('event.copy-message-id'),
+              icon: 'content_paste',
+              style: {
+                'font-size': '16px',
+                color: 'rgba(0,0,0,.87)'
+              },
+              isEnabled: () => true,
+              onAction: ($event, entity) => entity.body.msgId,
+              type: CellActionDescriptorType.COPY_BUTTON
+            }),
           new EntityTableColumn<Event>('msgType', 'event.message-type', '100px',
             (entity) => entity.body.msgType, entity => ({
               whiteSpace: 'nowrap',
@@ -255,8 +283,8 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
               padding: '0 12px 0 0'
             }),
             entity => entity.body.msgType),
-          new EntityTableColumn<Event>('relationType', 'event.relation-type', '100px',
-            (entity) => entity.body.relationType, entity => ({padding: '0 12px 0 0', }), false, key => ({
+          new EntityTableColumn<Event>('relationType', 'event.relation-type', '70px',
+            (entity) => entity.body.relationType, () => ({padding: '0 12px 0 0'}), false, () => ({
               padding: '0 12px 0 0'
             })),
           new EntityActionTableColumn<Event>('data', 'event.data',
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 6a7226860d..475455319b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2014,6 +2014,7 @@
         "type": "Type",
         "message": "Message",
         "message-id": "Message Id",
+        "copy-message-id": "Copy message Id",
         "message-type": "Message Type",
         "data-type": "Data Type",
         "relation-type": "Relation Type",
@@ -2033,6 +2034,7 @@
         "all-events": "All",
         "has-error": "Has error",
         "entity-id": "Entity Id",
+        "copy-entity-id": "Copy entity Id",
         "entity-type": "Entity type",
         "clear-filter": "Clear Filter",
         "clear-request-title": "Clear all events",