From 652501faf3dd0f10d97ae29829aa2ae8db70528a Mon Sep 17 00:00:00 2001
From: dudnikmaksim <dudnikmaksim@gmail.com>
Date: Wed, 22 Nov 2023 11:37:04 +0200
Subject: [PATCH] PROD-2636, PROD-2634, PROD-2633

---
 .../data/json/demo/dashboards/gateway.json    | 314 ++++++++++++++++--
 .../gateway-service-rpc.component.html        |   8 +-
 .../gateway-service-rpc.component.scss        |  22 ++
 .../gateway/gateway-service-rpc.component.ts  |  11 +-
 .../assets/locale/locale.constant-en_US.json  |   2 +-
 5 files changed, 329 insertions(+), 28 deletions(-)

diff --git a/application/src/main/data/json/demo/dashboards/gateway.json b/application/src/main/data/json/demo/dashboards/gateway.json
index b35b480ef2..fc5c651a33 100644
--- a/application/src/main/data/json/demo/dashboards/gateway.json
+++ b/application/src/main/data/json/demo/dashboards/gateway.json
@@ -250,9 +250,9 @@
                 "useShowWidgetActionFunction": null,
                 "showWidgetActionFunction": "return true;",
                 "type": "customPretty",
-                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\r\n      (ngSubmit)=\"save()\" class=\"add-entity-form\">\r\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\r\n        <h2>Add gateway</h2>\r\n        <span fxFlex></span>\r\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\r\n            <mat-icon class=\"material-icons\">close</mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\r\n    </mat-progress-bar>\r\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\r\n    <div mat-dialog-content fxLayout=\"column\">\r\n        <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayout.xs=\"column\"  fxLayoutGap.xs=\"0\">\r\n            <mat-form-field fxFlex class=\"mat-block\">\r\n                <mat-label>Name</mat-label>\r\n                <input matInput formControlName=\"entityName\" required>\r\n                <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\r\n                    Gateway name is required.\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayout.xs=\"column\"  fxLayoutGap.xs=\"0\">\r\n            <tb-entity-subtype-autocomplete\r\n                    fxFlex\r\n                    class=\"mat-block\"\r\n                    formControlName=\"type\"\r\n                    [required]=\"true\"\r\n                    [entityType]=\"'DEVICE'\"\r\n            ></tb-entity-subtype-autocomplete>\r\n        </div>\r\n    </div>\r\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\r\n        <button mat-button color=\"primary\"\r\n                type=\"button\"\r\n                [disabled]=\"(isLoading$ | async)\"\r\n                (click)=\"cancel()\" cdkFocusInitial>\r\n            Cancel\r\n        </button>\r\n        <button mat-button mat-raised-button color=\"primary\"\r\n                type=\"submit\"\r\n                [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\r\n            Create\r\n        </button>\r\n    </div>\r\n</form>\r\n",
+                "customHtml": "<form #addEntityForm=\"ngForm\" [formGroup]=\"addEntityFormGroup\"\r\n      (ngSubmit)=\"save($event)\" class=\"add-entity-form\">\r\n    <mat-toolbar fxLayout=\"row\" color=\"primary\">\r\n        <h2>Add gateway</h2>\r\n        <span fxFlex></span>\r\n        <button mat-icon-button (click)=\"cancel()\" type=\"button\">\r\n            <mat-icon class=\"material-icons\">close</mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\r\n    </mat-progress-bar>\r\n    <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\r\n    <div mat-dialog-content fxLayout=\"column\">\r\n        <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayout.xs=\"column\"  fxLayoutGap.xs=\"0\">\r\n            <mat-form-field fxFlex class=\"mat-block\">\r\n                <mat-label>Name</mat-label>\r\n                <input matInput formControlName=\"entityName\" required>\r\n                <mat-error *ngIf=\"addEntityFormGroup.get('entityName').hasError('required')\">\r\n                    Gateway name is required.\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n        <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayout.xs=\"column\"  fxLayoutGap.xs=\"0\">\r\n            <tb-entity-subtype-autocomplete\r\n                    fxFlex\r\n                    class=\"mat-block\"\r\n                    formControlName=\"type\"\r\n                    [required]=\"true\"\r\n                    [entityType]=\"'DEVICE'\"\r\n            ></tb-entity-subtype-autocomplete>\r\n        </div>\r\n    </div>\r\n    <div mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end center\">\r\n        <button mat-button color=\"primary\"\r\n                type=\"button\"\r\n                [disabled]=\"(isLoading$ | async)\"\r\n                (click)=\"cancel()\" cdkFocusInitial>\r\n            Cancel\r\n        </button>\r\n        <button mat-button mat-raised-button color=\"primary\"\r\n                type=\"submit\"\r\n                [disabled]=\"(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty\">\r\n            Create\r\n        </button>\r\n    </div>\r\n</form>\r\n",
                 "customCss": ".add-entity-form {\r\n    min-width: 400px !important;\r\n}\r\n\r\n.add-entity-form .boolean-value-input {\r\n    padding-left: 5px;\r\n}\r\n\r\n.add-entity-form .boolean-value-input .checkbox-label {\r\n    margin-bottom: 8px;\r\n    color: rgba(0,0,0,0.54);\r\n    font-size: 12px;\r\n}\r\n\r\n.relations-list .header {\r\n    padding-right: 5px;\r\n    padding-bottom: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .header .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: rgba(0, 0, 0, .54);\r\n    white-space: nowrap;\r\n}\r\n\r\n.relations-list .mat-form-field-infix {\r\n    width: auto !important;\r\n}\r\n\r\n.relations-list .body {\r\n    padding-right: 5px;\r\n    padding-bottom: 15px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .row {\r\n    padding-top: 5px;\r\n}\r\n\r\n.relations-list .body .cell {\r\n    padding-right: 5px;\r\n    padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .md-button {\r\n    margin: 0;\r\n}\r\n\r\n",
-                "customFunction": "let $injector = widgetContext.$scope.$injector;\r\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\r\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\r\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\r\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\r\nlet entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));\r\nlet userSettingsService = $injector.get(widgetContext.servicesMap.get('userSettingsService'));\r\n\r\nopenAddEntityDialog();\r\n\r\nfunction openAddEntityDialog() {\r\n    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();\r\n}\r\n\r\nfunction AddEntityDialogController(instance) {\r\n    let vm = instance;\r\n    let userSettings;\r\n    userSettingsService.loadUserSettings().subscribe(settings=> {\r\n        userSettings = settings;\r\n        if (!userSettings.createdGatewaysCount) userSettings.createdGatewaysCount = 0;\r\n    });\r\n    \r\n\r\n    vm.addEntityFormGroup = vm.fb.group({\r\n     entityName: ['', [vm.validators.required]],\r\n     entityType: ['DEVICE'],\r\n     entityLabel: [''],\r\n     type: ['', [vm.validators.required]],\r\n    });\r\n\r\n    vm.cancel = function() {\r\n        vm.dialogRef.close(null);\r\n    };\r\n\r\n\r\n    vm.save = function() {\r\n        vm.addEntityFormGroup.markAsPristine();\r\n        saveEntityObservable().subscribe(\r\n            function (device) {\r\n                widgetContext.updateAliases();\r\n                userSettingsService.putUserSettings({ createdGatewaysCount: ++userSettings.createdGatewaysCount }).subscribe(_=>{\r\n                });\r\n                vm.dialogRef.close(null);\r\n                goToConfigState(device);\r\n            }\r\n        );\r\n    };\r\n    \r\n    function goToConfigState(device) {\r\n        const stateParams = {};\r\n        stateParams.entityId = device.id;\r\n        stateParams.entityName = device.name;\r\n        const newStateParams = {\r\n            targetEntityParamName: 'default',\r\n            new_gateway: {\r\n                entityId: device.id,\r\n                entityName: device.name\r\n            }\r\n        }\r\n        const params = {...stateParams, ...newStateParams};\r\n        widgetContext.stateController.openState('gateway_details', params, false);\r\n    }\r\n\r\n    function saveEntityObservable() {\r\n        const formValues = vm.addEntityFormGroup.value;\r\n        let entity = {\r\n            name: formValues.entityName,\r\n            type: formValues.type,\r\n            label: formValues.entityLabel,\r\n            additionalInfo: {\r\n                gateway: true\r\n            }\r\n        };\r\n        return deviceService.saveDevice(entity);\r\n    }\r\n}\r\n",
+                "customFunction": "let $injector = widgetContext.$scope.$injector;\r\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\r\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\r\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\r\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\r\nlet entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));\r\nlet userSettingsService = $injector.get(widgetContext.servicesMap.get('userSettingsService'));\r\n\r\nopenAddEntityDialog();\r\n\r\nfunction openAddEntityDialog() {\r\n    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();\r\n}\r\n\r\nfunction AddEntityDialogController(instance) {\r\n    let vm = instance;\r\n    let userSettings;\r\n    userSettingsService.loadUserSettings().subscribe(settings=> {\r\n        userSettings = settings;\r\n        if (!userSettings.createdGatewaysCount) userSettings.createdGatewaysCount = 0;\r\n    });\r\n    \r\n\r\n    vm.addEntityFormGroup = vm.fb.group({\r\n     entityName: ['', [vm.validators.required]],\r\n     entityType: ['DEVICE'],\r\n     entityLabel: [''],\r\n     type: ['', [vm.validators.required]],\r\n    });\r\n\r\n    vm.cancel = function() {\r\n        vm.dialogRef.close(null);\r\n    };\r\n\r\n\r\n    vm.save = function($event) {\r\n        vm.addEntityFormGroup.markAsPristine();\r\n        saveEntityObservable().subscribe(\r\n            function (device) {\r\n                widgetContext.updateAliases();\r\n                userSettingsService.putUserSettings({ createdGatewaysCount: ++userSettings.createdGatewaysCount }).subscribe(_=>{\r\n                });\r\n                vm.dialogRef.close(null);\r\n                openCommandDialog(device, $event);\r\n            }\r\n        );\r\n    };\r\n    \r\n    function openCommandDialog(device, $event) {\r\n        vm.device = device;\r\n        let openCommandAction = widgetContext.actionsApi.getActionDescriptors(\"actionCellButton\").find(action => action.name == \"Docker commands\");\r\n        widgetContext.actionsApi.handleWidgetAction($event, openCommandAction, device.id, device.name, {newDevice: true});\r\n        setTimeout(function() {\r\n            document.querySelector(\".dashboard-state-dialog .mat-mdc-button-touch-target\").addEventListener('click', goToConfigState);\r\n            document.querySelector(\".dashboard-state-dialog .mat-mdc-button.mat-primary\").addEventListener('click', goToConfigState);\r\n        }, 500);\r\n    }\r\n\r\n    \r\n    function goToConfigState() {\r\n        document.querySelector(\".dashboard-state-dialog .mat-mdc-button-touch-target\").removeEventListener('click', goToConfigState);\r\n        document.querySelector(\".dashboard-state-dialog .mat-mdc-button.mat-primary\").removeEventListener('click', goToConfigState);\r\n        const stateParams = {};\r\n        stateParams.entityId = vm.device.id;\r\n        stateParams.entityName = vm.device.name;\r\n        const newStateParams = {\r\n            targetEntityParamName: 'default',\r\n            new_gateway: {\r\n                entityId: vm.device.id,\r\n                entityName: vm.device.name\r\n            }\r\n        }\r\n        const params = {...stateParams, ...newStateParams};\r\n        widgetContext.stateController.openState('gateway_details', params, false);\r\n    }\r\n\r\n    function saveEntityObservable() {\r\n        const formValues = vm.addEntityFormGroup.value;\r\n        let entity = {\r\n            name: formValues.entityName,\r\n            type: formValues.type,\r\n            label: formValues.entityLabel,\r\n            additionalInfo: {\r\n                gateway: true\r\n            }\r\n        };\r\n        return deviceService.saveDevice(entity);\r\n    }\r\n}\r\n",
                 "customResources": [],
                 "openInSeparateDialog": false,
                 "openInPopover": false,
@@ -2142,7 +2142,7 @@
           "settings": {
             "useMarkdownTextFunction": false,
             "markdownTextPattern": "<div style=\"width: 100%; height: 100%; padding: 0;\" fxFlex fxLayout=\"column\">\r\n  <mat-tab-group [(selectedIndex)]=\"selectedTabIndex\">\r\n    <mat-tab label=\"All\" value=\"gateway_devices_0\"></mat-tab>\r\n    <mat-tab label=\"MQTT\" value=\"gateway_devices_1\"></mat-tab>\r\n    <mat-tab label=\"MODBUS\" value=\"gateway_devices_2\"></mat-tab>\r\n    <mat-tab label=\"GRPC\" value=\"gateway_devices_3\"></mat-tab>\r\n    <mat-tab label=\"OPCUA\" value=\"gateway_devices_4\"> </mat-tab>\r\n    <mat-tab label=\"OPCUA ASYNCIO\" value=\"gateway_devices_5\"></mat-tab>\r\n    <mat-tab label=\"BLE\" value=\"gateway_devices_6\"></mat-tab>\r\n    <mat-tab label=\"REQUEST\" value=\"gateway_devices_7\"></mat-tab>\r\n    <mat-tab label=\"CAN\" value=\"gateway_devices_8\"></mat-tab>\r\n    <mat-tab label=\"BACNET\" value=\"gateway_devices_9\"></mat-tab>\r\n    <mat-tab label=\"ODBC\" value=\"gateway_devices_10\"></mat-tab>\r\n    <mat-tab label=\"REST\" value=\"gateway_devices_11\"></mat-tab>\r\n    <mat-tab label=\"SNMP\" value=\"gateway_devices_12\"></mat-tab>\r\n    <mat-tab label=\"FTP\" value=\"gateway_devices_13\"></mat-tab>\r\n    <mat-tab label=\"SOCKET\" value=\"gateway_devices_14\"></mat-tab>\r\n    <mat-tab label=\"XMPP\" value=\"gateway_devices_15\"></mat-tab>\r\n    <mat-tab label=\"OCCP\" value=\"gateway_devices_16\"></mat-tab>\r\n    <mat-tab label=\"CUSTOM\" value=\"gateway_devices_17\"></mat-tab>\r\n  </mat-tab-group><tb-dashboard-state *ngIf=\"selectedTabIndex == 1\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_1\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 2\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_2\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 3\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_3\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 4\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_4\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 5\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_5\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 6\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_6\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 7\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_7\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 8\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_8\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 9\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_9\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 10\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_10\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 11\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_11\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 12\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_12\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 13\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_13\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 14\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_14\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 15\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_15\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 16\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_16\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"selectedTabIndex == 17\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_17\"></tb-dashboard-state>\r\n   <tb-dashboard-state *ngIf=\"!selectedTabIndex\" [ctx]=\"ctx\" fxFlex syncParentStateParams=\"true\" stateId=\"gateway_devices_0\"></tb-dashboard-state>\r\n</div>\r\n",
-            "applyDefaultMarkdownStyle": true,
+            "applyDefaultMarkdownStyle": false,
             "markdownCss": ".mat-mdc-form-field-subscript-wrapper {\n    display: none !important;\n}"
           },
           "title": "New Markdown/HTML Card",
@@ -2316,7 +2316,22 @@
           "pageSize": 1024,
           "noDataDisplayMessage": "",
           "enableDataExport": false,
-          "borderRadius": ""
+          "borderRadius": "",
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "45e4507d-3adc-bb31-8b2b-1ba09bbd56ac"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -2468,7 +2483,22 @@
           "pageSize": 1024,
           "noDataDisplayMessage": "",
           "enableDataExport": false,
-          "borderRadius": "4px"
+          "borderRadius": "4px",
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "852eccce-98eb-24db-c783-bdd62566f906"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -2619,7 +2649,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "3c31ba62-e760-2bea-4c8d-d32784a86c24"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -2770,7 +2815,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "4b55ea81-93bf-4206-9166-3e0bdc1dd9f3"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -2921,7 +2981,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "babf88d0-a118-e2b5-f10e-3a5970c8a65b"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3072,7 +3147,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "94de7690-f91d-b032-6771-85af99abd749"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3223,7 +3313,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "18414f44-1c65-536a-14de-eaf21a7d56bd"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3374,7 +3479,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "794974da-c9d2-a9f7-be47-c9eb642094e8"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3525,7 +3645,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "2add705b-3e53-8559-8126-380cac686fb0"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3676,7 +3811,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "7e1ba820-9992-d52a-579b-20485abb3926"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3827,7 +3977,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "91af27c1-b37c-2276-6022-a332e41b2b33"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -3978,7 +4143,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "26cf8696-054b-13ec-7984-6fc5df20e6f1"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -4129,7 +4309,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "1dcfaf24-32be-cd19-62d6-86d12cc6a7ef"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -4280,7 +4475,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "ad2bc817-f3c4-150c-4672-8fe0c38aee8d"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -4431,7 +4641,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "d1ad84cd-bd9c-4dca-e4a0-f444ae8598bd"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -4582,7 +4807,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "bf80eef9-b879-9a08-40a4-488dbdefa125"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -4733,7 +4973,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "b5a406b3-cc0a-8a09-9aec-3f8befae5fb8"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -4884,7 +5139,22 @@
           "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-active {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-inactive {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n",
           "pageSize": 1024,
           "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "actions": {
+            "actionCellButton": [
+              {
+                "name": "Show Device Info",
+                "icon": "info",
+                "useShowWidgetActionFunction": null,
+                "showWidgetActionFunction": "return true;",
+                "type": "custom",
+                "customFunction": "const url = `${window.location.origin}/entities/devices/${entityId.id}`;\nwindow.open(url, '_blank');",
+                "openInSeparateDialog": false,
+                "openInPopover": false,
+                "id": "ec1dfba3-4b43-2491-8948-f602337f8a3b"
+              }
+            ]
+          }
         },
         "row": 0,
         "col": 0,
@@ -6596,4 +6866,4 @@
   },
   "externalId": null,
   "name": "Gateway"
-}
+}
\ No newline at end of file
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
index 4aec0fd467..8a96f1849b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
@@ -36,7 +36,7 @@
   <ng-template #connectorForm>
     <mat-form-field>
       <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
-      <input matInput formControlName="command" />
+      <input matInput formControlName="command"/>
     </mat-form-field>
     <mat-form-field fxFlex>
       <mat-label>{{ 'widget-config.datasource-parameters' | translate }}</mat-label>
@@ -56,8 +56,10 @@
   </button>
 </div>
 <section class="result-block" [formGroup]="commandForm">
-  <span>{{ 'gateway.rpc-command-result' | translate }}</span>
-  <mat-divider></mat-divider>
+  <span>{{ 'gateway.rpc-command-result' | translate }}
+    <div *ngIf="resultTime" class="result-time" fxFlex fxLayout="row" fxLayoutAlign="center center"> <mat-icon
+      class="material-icons">schedule</mat-icon>
+      <span>{{ resultTime | date: 'yyyy/MM/dd HH:mm:ss' }}</span> </div></span>
   <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>
 </section>
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
index 345688d451..5dab1d91c1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
@@ -24,6 +24,7 @@
   .command-form {
     flex-wrap: nowrap;
     padding: 0 5px 5px;
+
     & > button {
       margin-top: 10px;
     }
@@ -34,9 +35,30 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+
     & > span {
       font-weight: 600;
+      position: relative;
+      font-size: 14px;
+      margin-bottom: 10px;
+
+
+      .result-time {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 32px;
+        position: absolute;
+        left: 0;
+        top: 25px;
+        z-index: 5;
+        color: rgba(0, 0, 0, 0.54);
+
+        span {
+          padding-left: 10px;
+        }
+      }
     }
+
     tb-json-content {
       flex: 1;
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
index a8ad61e1ec..d19624e257 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
@@ -37,6 +37,8 @@ export class GatewayServiceRPCComponent implements AfterViewInit {
 
   contentTypes = ContentType;
 
+  resultTime: number | null;
+
   @Input()
   dialogRef: MatDialogRef<any>;
 
@@ -76,12 +78,17 @@ export class GatewayServiceRPCComponent implements AfterViewInit {
   }
 
   sendCommand() {
+    this.resultTime = null;
     const formValues = this.commandForm.value;
     const commandPrefix = this.isConnector ? `${this.connectorType}_` : 'gateway_';
     this.ctx.controlApi.sendTwoWayCommand(commandPrefix+formValues.command.toLowerCase(), formValues.params,formValues.time).subscribe({
-      next: resp => this.commandForm.get('result').setValue(JSON.stringify(resp)),
+      next: resp => {
+        this.resultTime  = new Date().getTime();
+        this.commandForm.get('result').setValue(JSON.stringify(resp))
+      },
       error: error => {
-        console.log(error);
+        this.resultTime  = new Date().getTime();
+        console.error(error);
         this.commandForm.get('result').setValue(JSON.stringify(error.error));
       }
     });
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 ef660731bf..fcf42dc0e2 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2682,7 +2682,7 @@
         "connectors-table-key": "Key",
         "connectors-table-class": "Class",
         "rpc-command-send": "Send",
-        "rpc-command-result": "Result",
+        "rpc-command-result": "Response",
         "rpc-command-edit-params": "Edit parameters",
         "gateway-configuration": "General Configuration",
         "docker-label": "In order to run ThingsBoard IoT gateway in docker with credentials for this device you can use the following commands.",