Merge branch 'improvement/gateway-dashboard/change' of https://github.com/vvlladd28/thingsboard into improvement/gateway-dashboard/change

Conflicts: application/src/main/data/json/demo/dashboards/gateway_list.json application/src/main/data/json/system/widget_types/gateway_general_statistics.json application/src/main/data/json/system/widget_types/gateway_statistics.json ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
3 years ago · 56e8a4bed5
14 changed files with 373 additions and 336 deletions
--- a/application/src/main/data/json/demo/dashboards/gateway_list.json
+++ b/application/src/main/data/json/demo/dashboards/gateway_list.json
@ -77,15 +77,33 @@
                  "type": "entityField",
                  "label": "Created time",
                  "color": "#2196f3",
-                  "settings": {},
-                  "_hash": 0.4570900758216545
+                  "settings": {
+                    "columnWidth": "140px",
+                    "useCellStyleFunction": false,
+                    "useCellContentFunction": false,
+                    "defaultColumnVisibility": "visible",
+                    "columnSelectionToDisplay": "enabled"
+                  },
+                  "_hash": 0.4570900758216545,
+                  "aggregationType": null,
+                  "units": null,
+                  "decimals": null,
+                  "funcBody": null,
+                  "usePostProcessing": null,
+                  "postFuncBody": null
                },
                {
                  "name": "name",
                  "type": "entityField",
                  "label": "Gateway name",
                  "color": "#4caf50",
-                  "settings": {},
+                  "settings": {
+                    "columnWidth": "20%",
+                    "useCellStyleFunction": false,
+                    "useCellContentFunction": false,
+                    "defaultColumnVisibility": "visible",
+                    "columnSelectionToDisplay": "enabled"
+                  },
                  "_hash": 0.45934623767875316,
                  "aggregationType": null,
                  "units": null,
@ -100,7 +118,7 @@
                  "label": "Status",
                  "color": "#f44336",
                  "settings": {
-                    "columnWidth": "0px",
+                    "columnWidth": "20%",
                    "useCellStyleFunction": false,
                    "useCellContentFunction": true,
                    "cellContentFunction": "var newValue = value == 'true' ? \"Active\" : \"Inactive\";\r\nvar bgColor = value == 'true' ? 'rgba(25,128,56, .06)': 'rgba(203,37,48, .06)',\r\ncolor = value == 'true' ? 'rgb(25,128,56)': 'rgb(203,37,48)';\r\nreturn `<div style=\"text-align: center;\r\n    border-radius: 16px;\r\n    font-weight: 500;\r\n    color: ${color};\r\n    background: ${bgColor};\r\n    width: fit-content;\r\n    padding: 5px 15px;\">${newValue}</div>`",
@ -121,7 +139,7 @@
                  "label": "Active Connectors",
                  "color": "#3f51b5",
                  "settings": {
-                    "columnWidth": "0px",
+                    "columnWidth": "20%",
                    "useCellStyleFunction": false,
                    "useCellContentFunction": true,
                    "cellContentFunction": "return value?JSON.parse(value).length:0;",
@ -141,8 +159,20 @@
                  "type": "attribute",
                  "label": "Version",
                  "color": "#8bc34a",
-                  "settings": {},
-                  "_hash": 0.4705163811361781
+                  "settings": {
+                    "columnWidth": "40%",
+                    "useCellStyleFunction": false,
+                    "useCellContentFunction": false,
+                    "defaultColumnVisibility": "visible",
+                    "columnSelectionToDisplay": "enabled"
+                  },
+                  "_hash": 0.4705163811361781,
+                  "aggregationType": null,
+                  "units": null,
+                  "decimals": null,
+                  "funcBody": null,
+                  "usePostProcessing": null,
+                  "postFuncBody": null
                }
              ]
            }
@ -163,7 +193,7 @@
                "dialogTitle": "Docker commands",
                "dialogHideDashboardToolbar": true,
                "dialogWidth": null,
-                "dialogHeight": 45,
+                "dialogHeight": 55,
                "openInSeparateDialog": true,
                "openInPopover": false,
                "id": "ae2e5995-505f-a241-5fb2-6cbaf08b1b55"
@ -173,18 +203,14 @@
                "icon": "settings",
                "useShowWidgetActionFunction": null,
                "showWidgetActionFunction": "return true;",
-                "type": "openDashboardState",
-                "targetDashboardStateId": "configuration",
-                "setEntityId": true,
-                "stateEntityParamName": null,
-                "openRightLayout": false,
-                "dialogTitle": "Gateway configuration",
-                "dialogHideDashboardToolbar": true,
-                "dialogWidth": null,
-                "dialogHeight": null,
-                "openInSeparateDialog": true,
+                "type": "customPretty",
+                "customHtml": "<mat-toolbar fxLayout=\"row\" color=\"primary\">\n    <h2 translate>gateway.gateway-configuration</h2>\n    <span fxFlex></span>\n    <button mat-icon-button (click)=\"cancel()\" type=\"button\">\n        <mat-icon class=\"material-icons\">close</mat-icon>\n    </button>\n</mat-toolbar>\n<mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\n</mat-progress-bar>\n<div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\n<tb-gateway-configuration\n    class=\"gateway-config\"\n    mat-dialog-content\n    [device]=\"device\"\n    [dialogRef]=\"dialogRef\">\n</tb-gateway-configuration>",
+                "customCss": ".gateway-config {\n    width: 800px !important;\n    padding: 0 !important;\n    min-height: 75vh;\n    max-width: 100%;\n    display: grid !important;\n}\n\n@media screen and (max-width: 599px) {\n    .mat-mdc-dialog-content {\n        max-height: calc(100% - 60px) !important;\n    }\n}",
+                "customFunction": "let $injector = widgetContext.$scope.$injector;\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\n\nopenAddEntityDialog();\n\nfunction openAddEntityDialog() {\n    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();\n}\n\nfunction AddEntityDialogController(instance) {\n    let vm = instance;\n    \n    vm.device = additionalParams.entity.id;\n\n    vm.cancel = function() {\n        vm.dialogRef.close(null);\n    };\n}\n",
+                "customResources": [],
+                "openInSeparateDialog": false,
                "openInPopover": false,
-                "id": "c0c8eb55-48c6-8a4e-ad9a-427507e86916"
+                "id": "a54acd30-5c5f-d709-b892-5fc14f780e34"
              },
              {
                "name": "Connectors",
@ -240,7 +266,13 @@
          "widgetStyle": {},
          "widgetCss": "",
          "pageSize": 1024,
-          "noDataDisplayMessage": ""
+          "noDataDisplayMessage": "",
+          "configMode": "advanced",
+          "titleFont": null,
+          "titleColor": null,
+          "titleIcon": null,
+          "iconColor": null,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -288,7 +320,7 @@
          "showTitle": false,
          "backgroundColor": "#fff",
          "color": "rgba(0, 0, 0, 0.87)",
-          "padding": "8px",
+          "padding": "0px",
          "settings": {},
          "title": "New Gateway configuration",
          "showTitleIcon": false,
@ -305,7 +337,8 @@
          "pageSize": 1024,
          "noDataDisplayMessage": "",
          "showLegend": false,
-          "useDashboardTimewindow": true
+          "useDashboardTimewindow": true,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -360,14 +393,14 @@
            }
          },
          "showTitle": false,
-          "backgroundColor": "#fff",
+          "backgroundColor": "#FFFFFF01",
          "color": "rgba(0, 0, 0, 0.87)",
-          "padding": "8px",
+          "padding": "0px",
          "settings": {},
          "title": "New Gateway connector",
          "showTitleIcon": false,
          "titleTooltip": "",
-          "dropShadow": true,
+          "dropShadow": false,
          "enableFullscreen": false,
          "enableDataExport": false,
          "widgetStyle": {},
@ -549,9 +582,7 @@
          "titleTooltip": "",
          "dropShadow": true,
          "enableFullscreen": false,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
@ -564,6 +595,7 @@
          "noDataDisplayMessage": "",
          "enableDataExport": false,
          "displayTimewindow": true,
+          "borderRadius": "4px",
          "actions": {
            "elementClick": [
              {
@ -725,9 +757,7 @@
          "iconColor": "rgba(0, 0, 0, 0.87)",
          "iconSize": "24px",
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "displayTimewindow": false,
          "actions": {},
          "datasources": [],
@ -740,7 +770,8 @@
            "typeList": [],
            "searchPropagatedAlarms": false
          },
-          "enableDataExport": false
+          "enableDataExport": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -788,11 +819,9 @@
          "settings": {},
          "title": "Logs",
          "showTitleIcon": false,
-          "dropShadow": false,
+          "dropShadow": true,
          "enableFullscreen": true,
-          "widgetStyle": {
-            "border-radius": "10px"
-          },
+          "widgetStyle": {},
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
@ -804,7 +833,8 @@
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
-          }
+          },
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -855,11 +885,9 @@
          },
          "title": "Gateway Logs",
          "showTitleIcon": false,
-          "dropShadow": false,
+          "dropShadow": true,
          "enableFullscreen": true,
-          "widgetStyle": {
-            "border-radius": "10px"
-          },
+          "widgetStyle": {},
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
@ -871,7 +899,8 @@
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
-          }
+          },
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -976,9 +1005,7 @@
          "displayTimewindow": false,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "border-radius": "10px"
-          },
+          "widgetStyle": {},
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
@ -993,7 +1020,8 @@
            "showAvg": true,
            "showTotal": false,
            "showLatest": false
-          }
+          },
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1265,9 +1293,7 @@
          "displayTimewindow": false,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "border-radius": "10px"
-          },
+          "widgetStyle": {},
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
@ -1282,7 +1308,8 @@
            "showAvg": false,
            "showTotal": false,
            "showLatest": false
-          }
+          },
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1394,19 +1421,18 @@
          },
          "useDashboardTimewindow": false,
          "showLegend": false,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "actions": {},
          "showTitleIcon": false,
          "iconColor": "rgba(0, 0, 0, 0.87)",
          "iconSize": "24px",
          "displayTimewindow": true,
          "titleTooltip": "",
-          "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-debug {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-warning {\r\n    color: orange;\r\n    background: rgba(255, 165, 0, 0.1);\r\n  }\r\n\r\n  .status-error {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n\r\n  .status-info {\r\n    color: blue;\r\n    background: rgba(0, 0, 128, 0.1);\r\n  }\r\n  \r\n  .msg-status-exception {\r\n    color: red;\r\n  }",
+          "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n}\r\n\r\n.status-debug {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n}\r\n\r\n.status-warning {\r\n    color: orange;\r\n    background: rgba(255, 165, 0, 0.1);\r\n}\r\n\r\n.status-error {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n}\r\n\r\n.status-info {\r\n    color: blue;\r\n    background: rgba(0, 0, 128, 0.1);\r\n}\r\n\r\n.msg-status-exception {\r\n    color: red;\r\n}",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1462,9 +1488,7 @@
          "title": "New RPC debug terminal",
          "dropShadow": true,
          "enableFullscreen": true,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
@ -1480,7 +1504,8 @@
          "titleTooltip": "",
          "widgetCss": "",
          "pageSize": 1024,
-          "noDataDisplayMessage": ""
+          "noDataDisplayMessage": "",
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1542,9 +1567,7 @@
          "titleTooltip": "",
          "dropShadow": true,
          "enableFullscreen": true,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "widgetCss": "",
          "titleStyle": {
            "fontSize": "16px",
@ -1553,7 +1576,8 @@
          "pageSize": 1024,
          "noDataDisplayMessage": "",
          "enableDataExport": false,
-          "showLegend": false
+          "showLegend": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1582,9 +1606,7 @@
          "titleTooltip": "",
          "dropShadow": true,
          "enableFullscreen": true,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "widgetCss": "",
          "titleStyle": {
            "fontSize": "16px",
@ -1593,7 +1615,8 @@
          "pageSize": 1024,
          "noDataDisplayMessage": "",
          "enableDataExport": false,
-          "showLegend": false
+          "showLegend": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1706,19 +1729,18 @@
          },
          "useDashboardTimewindow": false,
          "showLegend": false,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "actions": {},
          "showTitleIcon": false,
          "iconColor": "rgba(0, 0, 0, 0.87)",
          "iconSize": "24px",
          "displayTimewindow": true,
          "titleTooltip": "",
-          "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n  }\r\n\r\n  .status-debug {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n  }\r\n\r\n  .status-warning {\r\n    color: orange;\r\n    background: rgba(255, 165, 0, 0.1);\r\n  }\r\n\r\n  .status-error {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n  }\r\n\r\n  .status-info {\r\n    color: blue;\r\n    background: rgba(0, 0, 128, 0.1);\r\n  }\r\n  \r\n  .msg-status-exception {\r\n    color: red;\r\n  }",
+          "widgetCss": ".status {\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    padding: 5px 15px;\r\n}\r\n\r\n.status-debug {\r\n    color: green;\r\n    background: rgba(0, 128, 0, 0.1);\r\n}\r\n\r\n.status-warning {\r\n    color: orange;\r\n    background: rgba(255, 165, 0, 0.1);\r\n}\r\n\r\n.status-error {\r\n    color: red;\r\n    background: rgba(255, 0, 0, 0.1);\r\n}\r\n\r\n.status-info {\r\n    color: blue;\r\n    background: rgba(0, 0, 128, 0.1);\r\n}\r\n\r\n.msg-status-exception {\r\n    color: red;\r\n}",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1774,9 +1796,7 @@
          "title": "New RPC debug terminal",
          "dropShadow": true,
          "enableFullscreen": true,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
@ -1792,7 +1812,8 @@
          "titleTooltip": "",
          "widgetCss": "",
          "pageSize": 1024,
-          "noDataDisplayMessage": ""
+          "noDataDisplayMessage": "",
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1843,7 +1864,7 @@
          "padding": "8px",
          "settings": {
            "useMarkdownTextFunction": false,
-            "markdownTextPattern": "<div class=\"action-buttons-container\">\r\n<button mat-raised-button color=\"primary\"\r\n(click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[0], ctx.datasources[0].entity.id)\"\r\n  >Launch command\r\n  </button>\r\n </div>",
+            "markdownTextPattern": "<div class=\"action-buttons-container\">\r\n  <button mat-raised-button color=\"primary\"\r\n     (click)=\"ctx.actionsApi.handleWidgetAction($event, ctx.actionsApi.getActionDescriptors('elementClick')[0], ctx.datasources[0].entity.id)\"\r\n  >Launch command\r\n </button>\r\n</div>",
            "applyDefaultMarkdownStyle": false,
            "markdownCss": ".action-buttons-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: center;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
          },
@ -1854,9 +1875,7 @@
          "titleTooltip": "",
          "dropShadow": true,
          "enableFullscreen": false,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
@ -1878,7 +1897,7 @@
                "dialogTitle": "Launch command",
                "dialogHideDashboardToolbar": true,
                "dialogWidth": null,
-                "dialogHeight": 45,
+                "dialogHeight": 55,
                "openInSeparateDialog": true,
                "openInPopover": false,
                "id": "337c767b-3217-d3d3-b955-7b0bd0858a1d"
@ -1888,7 +1907,8 @@
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -1967,9 +1987,7 @@
          "titleTooltip": "",
          "dropShadow": true,
          "enableFullscreen": false,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
@ -2067,7 +2085,8 @@
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -2133,9 +2152,7 @@
          "titleTooltip": "",
          "dropShadow": true,
          "enableFullscreen": false,
-          "widgetStyle": {
-            "borderRadius": "10px"
-          },
+          "widgetStyle": {},
          "titleStyle": {
            "fontSize": "16px",
            "fontWeight": 400
@ -2146,7 +2163,8 @@
          "widgetCss": "",
          "pageSize": 1024,
          "noDataDisplayMessage": "",
-          "enableDataExport": false
+          "enableDataExport": false,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -2293,13 +2311,12 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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,
+          "borderRadius": ""
        },
        "row": 0,
        "col": 0,
@ -2446,13 +2463,12 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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,
+          "borderRadius": "4px"
        },
        "row": 0,
        "col": 0,
@ -2599,9 +2615,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -2752,9 +2766,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -2905,9 +2917,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3058,9 +3068,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3211,9 +3219,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3364,9 +3370,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3517,9 +3521,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3670,9 +3672,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3823,9 +3823,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -3976,9 +3974,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4129,9 +4125,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4282,9 +4276,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4435,9 +4427,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4588,9 +4578,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4741,9 +4729,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4894,9 +4880,7 @@
          "displayTimewindow": true,
          "showTitleIcon": false,
          "titleTooltip": "",
-          "widgetStyle": {
-            "borderRadius": " 0 0 10px 10px"
-          },
+          "widgetStyle": {},
          "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": "",
@ -4948,7 +4932,7 @@
          "showTitle": false,
          "backgroundColor": "#fff",
          "color": "rgba(0, 0, 0, 0.87)",
-          "padding": "8px",
+          "padding": "0px",
          "settings": {
            "useMarkdownTextFunction": true,
            "markdownTextFunction": "return `<div class=\"action-container\">\n<tb-gateway-command deviceId=\"${data[0].entityId}\"></tb-gateway-command>\n </div>`;",
@ -5015,11 +4999,11 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 48,
-              "margin": 5,
+              "margin": 12,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
-              "mobileAutoFillHeight": false,
+              "mobileAutoFillHeight": true,
              "mobileRowHeight": 70,
              "outerMargin": true
            }
@ -5043,7 +5027,7 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 24,
-              "margin": 0,
+              "margin": 12,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
@ -5070,7 +5054,7 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 24,
-              "margin": 10,
+              "margin": 0,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
@ -5088,7 +5072,7 @@
          "main": {
            "widgets": {
              "79f59106-758f-c428-8b93-4341faea705d": {
-                "sizeX": 41,
+                "sizeX": 40,
                "sizeY": 3,
                "row": 0,
                "col": 0,
@ -5096,29 +5080,29 @@
                "mobileOrder": 2
              },
              "60dcf518-8fc3-3539-8ff8-ce94bda39f3a": {
-                "sizeX": 41,
+                "sizeX": 40,
                "sizeY": 10,
                "row": 12,
                "col": 0
              },
              "fb9df382-6ef3-4aa6-bc13-8bf8e300ba19": {
-                "sizeX": 7,
+                "sizeX": 8,
                "sizeY": 3,
                "row": 0,
-                "col": 41,
+                "col": 40,
                "mobileOrder": 0,
                "mobileHeight": 1
              },
              "61d149e8-b249-5526-e5d7-6ad58413982e": {
-                "sizeX": 7,
+                "sizeX": 8,
                "sizeY": 19,
                "row": 3,
-                "col": 41,
+                "col": 40,
                "mobileOrder": 1,
                "mobileHeight": 3
              },
              "3d661190-7463-ba61-6793-503c85af67ec": {
-                "sizeX": 41,
+                "sizeX": 40,
                "sizeY": 9,
                "row": 3,
                "col": 0
@ -5154,7 +5138,7 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 48,
-              "margin": 10,
+              "margin": 12,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
@ -5181,7 +5165,7 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 24,
-              "margin": 10,
+              "margin": 12,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
@ -5215,7 +5199,7 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 48,
-              "margin": 5,
+              "margin": 12,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
@ -5285,7 +5269,7 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 45,
-              "margin": 5,
+              "margin": 12,
              "backgroundSizeMode": "100%",
              "autoFillHeight": true,
              "backgroundImageUrl": null,
@ -5329,9 +5313,9 @@
            "gridSettings": {
              "backgroundColor": "#eeeeee",
              "columns": 48,
-              "margin": 5,
+              "margin": 12,
              "backgroundSizeMode": "100%",
-              "autoFillHeight": false,
+              "autoFillHeight": true,
              "backgroundImageUrl": null,
              "mobileAutoFillHeight": false,
              "mobileRowHeight": 70,
--- a/application/src/main/data/json/system/widget_types/gateway_configuration2.json
+++ b/application/src/main/data/json/system/widget_types/gateway_configuration2.json
--- a/application/src/main/data/json/system/widget_types/gateway_connector.json
+++ b/application/src/main/data/json/system/widget_types/gateway_connector.json
--- a/application/src/main/data/json/system/widget_types/gateway_general_statistics.json
+++ b/application/src/main/data/json/system/widget_types/gateway_general_statistics.json
--- a/application/src/main/data/json/system/widget_types/gateway_logs.json
+++ b/application/src/main/data/json/system/widget_types/gateway_logs.json
--- a/application/src/main/data/json/system/widget_types/gateway_statistics.json
+++ b/application/src/main/data/json/system/widget_types/gateway_statistics.json
--- a/application/src/main/data/json/system/widget_types/service_rpc.json
+++ b/application/src/main/data/json/system/widget_types/service_rpc.json
--- a/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dialog/custom-dialog.service.ts
@ -17,8 +17,6 @@
 import { Inject, Injectable, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import { TranslateService } from '@ngx-translate/core';
-import { AuthService } from '@core/auth/auth.service';
 import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';
 import { CommonModule } from '@angular/common';
 import { mergeMap, tap } from 'rxjs/operators';
@ -28,7 +26,11 @@ import {
  CustomDialogContainerData
 } from '@home/components/widget/dialog/custom-dialog-container.component';
 import { SHARED_MODULE_TOKEN } from '@shared/components/tokens';
-import { HOME_COMPONENTS_MODULE_TOKEN, SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
+import {
+  HOME_COMPONENTS_MODULE_TOKEN,
+  SHARED_HOME_COMPONENTS_MODULE_TOKEN,
+  WIDGET_COMPONENTS_MODULE_TOKEN
+} from '@home/components/tokens';

@Injectable()
 export class CustomDialogService {
@ -36,12 +38,11 @@ export class CustomDialogService {
  private customModules: Array<Type<any>>;

  constructor(
-    private translate: TranslateService,
-    private authService: AuthService,
    private dynamicComponentFactoryService: DynamicComponentFactoryService,
    @Inject(SHARED_MODULE_TOKEN) private sharedModule: Type<any>,
    @Inject(SHARED_HOME_COMPONENTS_MODULE_TOKEN) private sharedHomeComponentsModule: Type<any>,
    @Inject(HOME_COMPONENTS_MODULE_TOKEN) private homeComponentsModule: Type<any>,
+    @Inject(WIDGET_COMPONENTS_MODULE_TOKEN) private widgetComponentsModule: Type<any>,
    public dialog: MatDialog
  ) {
  }
@ -52,7 +53,8 @@ export class CustomDialogService {

  customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any,
               config?: MatDialogConfig): Observable<any> {
-    const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule];
+    const modules = [this.sharedModule, CommonModule, this.sharedHomeComponentsModule, this.homeComponentsModule,
+      this.widgetComponentsModule];
    if (Array.isArray(this.customModules)) {
      modules.push(...this.customModules);
    }
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
@ -15,7 +15,7 @@
    limitations under the License.

 -->
-<div mat-dialog-content fxLayout="column" style="padding: 0">
+<div mat-dialog-content fxLayout="column" style="padding: 0 8px 8px">
  <div fxLayout="row" fxLayoutAlign="space-between center">
    <span class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</span>
    <div fxFlexAlign="end" class="tb-help" [tb-help]="helpLink"></div>
@ -60,7 +60,8 @@
 </div>

 <ng-template #commandsExample let-command="command">
-  <div class="tb-form-panel no-padding no-border tb-tab-body">
+  <div class="tb-form-panel stroked tb-tab-body">
+    <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
    <tb-markdown usePlainMarkdown containerClass="start-code"
       data="
          ```bash
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss
@ -26,12 +26,44 @@
        overflow: hidden;
        white-space: break-spaces;
        word-break: break-all;
+        background: #F3F6FA;
+        border-color: #305680;
      }

      .code-wrapper {
        padding: 0;
      }
+
+      button.clipboard-btn {
+        right: 0;
+        p {
+          color: #305680;
+        }
+        p, div {
+          background-color: #F3F6FA;
+        }
+        div {
+          img {
+            display: none;
+          }
+
+          &:after {
+            content: "";
+            position: initial;
+            display: block;
+            width: 18px;
+            height: 18px;
+            background: #305680;
+            mask-image: url(/assets/copy-code-icon.svg);
+            mask-repeat: no-repeat;
+          }
+        }
+      }
    }
  }
+
+  .tb-form-panel.tb-tab-body {
+    margin-top: 16px;
+  }
 }

--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
@ -15,17 +15,10 @@
    limitations under the License.

 -->
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" *ngIf="!dialogRef">
  <h2 translate>gateway.gateway-configuration</h2>
-  <span fxFlex></span>
-  <button mat-icon-button
-          type="button"
-          (click)="cancel()"
-          *ngIf="dialogRef">
-    <mat-icon class="material-icons" style="color:#000;">close</mat-icon>
-  </button>
 </mat-toolbar>
-<mat-tab-group style="max-height: calc(100% - 117px); height: 100%;" [formGroup]="gatewayConfigGroup">
+<mat-tab-group class="tab-group-block" [formGroup]="gatewayConfigGroup">
  <mat-tab label="{{ 'gateway.thingsboard-general' | translate }}">
    <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
      <div class="tb-form-panel no-padding-bottom">
@ -713,7 +706,7 @@
    </div>
  </mat-tab>
 </mat-tab-group>
-<div mat-dialog-actions fxLayoutAlign="start center">
+<div class="actions">
  <button mat-button color="primary"
          type="button"
          *ngIf="dialogRef"
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
@ -16,8 +16,8 @@
 :host {
  width: 100%;
  height: 100%;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: min-content minmax(auto, 1fr) min-content;

  .configuration-block {
    display: flex;
@ -26,10 +26,18 @@
  }

  .mat-toolbar {
+    grid-row: 1;
    background: transparent;
    color: rgba(0, 0, 0, .87) !important;
  }

+  .tab-group-block {
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+    grid-row: 2;
+  }
+
  .toggle-group {
    margin-right: auto;
  }
@ -53,6 +61,15 @@
      width: 100%;
    }
  }
+
+  .actions {
+    grid-row: 3;
+    padding: 8px;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    flex: 1;
+  }
 }

 :host ::ng-deep {
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
@ -16,7 +16,7 @@

 -->
 <div class="connector-container tb-form-panel no-border">
-  <section class="table-container tb-form-panel stroked no-padding flex">
+  <section class="table-section tb-form-panel no-padding flex section-container">
    <mat-toolbar class="mat-mdc-table-toolbar">
      <h2>{{ 'gateway.connectors' | translate }}</h2>
      <span fxFlex></span>
@ -28,89 +28,64 @@
        <mat-icon>add</mat-icon>
      </button>
    </mat-toolbar>
-    <table mat-table [dataSource]="dataSource"
-           matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
-           matSortDisableClear>
-      <ng-container matColumnDef="enabled" sticky>
-        <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">
-          {{ 'gateway.connectors-table-enabled' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let attribute">
-          <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
-                            (click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle>
-        </mat-cell>
-      </ng-container>
-      <ng-container matColumnDef="key">
-        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
-          {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
-        <mat-cell *matCellDef="let attribute">
-          {{ attribute.key }}
-        </mat-cell>
-      </ng-container>
-      <ng-container matColumnDef="type">
-        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-          {{ 'gateway.connectors-table-type' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-          {{ returnType(attribute) }}
-        </mat-cell>
-      </ng-container>
-      <ng-container matColumnDef="syncStatus">
-        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-          {{ 'gateway.configuration' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-            <div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'">
-              {{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }}
-            </div>
-        </mat-cell>
-      </ng-container>
-      <ng-container matColumnDef="errors">
-        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-          {{ 'gateway.connectors-table-status' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-          <span class="dot"
-                matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}"
-                matTooltipPosition="above"
-                [class]="{'hasErrors': +getErrorsCount(attribute) > 0,
-                          'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span>
-        </mat-cell>
-      </ng-container>
-      <ng-container matColumnDef="actions" stickyEnd>
-        <mat-header-cell *matHeaderCellDef
-                         [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-          {{ 'gateway.connectors-table-actions' | translate }}
-        </mat-header-cell>
-        <mat-cell *matCellDef="let attribute"
-                  [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-          <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-            <button mat-icon-button
-                    matTooltip="RPC"
-                    matTooltipPosition="above"
-                    (click)="connectorRpc(attribute, $event)">
-              <mat-icon>private_connectivity</mat-icon>
-            </button>
-            <button mat-icon-button
-                    matTooltip="Logs"
-                    matTooltipPosition="above"
-                    (click)="connectorLogs(attribute, $event)">
-              <mat-icon>list</mat-icon>
-            </button>
-            <button mat-icon-button
-                    matTooltip="Delete connector"
-                    matTooltipPosition="above"
-                    (click)="deleteConnector(attribute, $event)">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-          <div fxHide fxShow.lt-lg>
-            <button mat-icon-button
-                    (click)="$event.stopPropagation()"
-                    [matMenuTriggerFor]="cellActionsMenu">
-              <mat-icon class="material-icons">more_vert</mat-icon>
-            </button>
-            <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+    <div class="table-container">
+      <table mat-table [dataSource]="dataSource"
+             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
+             matSortDisableClear>
+        <ng-container matColumnDef="enabled" sticky>
+          <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">
+            {{ 'gateway.connectors-table-enabled' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let attribute">
+            <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
+                              (click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle>
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="key">
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
+            {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
+          <mat-cell *matCellDef="let attribute">
+            {{ attribute.key }}
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="type">
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+            {{ 'gateway.connectors-table-type' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
+            {{ returnType(attribute) }}
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="syncStatus">
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+            {{ 'gateway.configuration' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
+              <div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'">
+                {{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }}
+              </div>
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="errors">
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+            {{ 'gateway.connectors-table-status' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
+            <span class="dot"
+                  matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}"
+                  matTooltipPosition="above"
+                  [class]="{'hasErrors': +getErrorsCount(attribute) > 0,
+                            'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span>
+          </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="actions" stickyEnd>
+          <mat-header-cell *matHeaderCellDef
+                           [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
+            {{ 'gateway.connectors-table-actions' | translate }}
+          </mat-header-cell>
+          <mat-cell *matCellDef="let attribute"
+                    [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
+            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
              <button mat-icon-button
                      matTooltip="RPC"
                      matTooltipPosition="above"
@ -118,7 +93,7 @@
                <mat-icon>private_connectivity</mat-icon>
              </button>
              <button mat-icon-button
-                      matTooltip="Delete connector"
+                      matTooltip="Logs"
                      matTooltipPosition="above"
                      (click)="connectorLogs(attribute, $event)">
                <mat-icon>list</mat-icon>
@ -129,55 +104,84 @@
                      (click)="deleteConnector(attribute, $event)">
                <mat-icon>delete</mat-icon>
              </button>
-            </mat-menu>
-          </div>
-        </mat-cell>
-      </ng-container>
-      <mat-header-row class="mat-row-select"
-                      *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-      <mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}"
-               *matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row>
-    </table>
+            </div>
+            <div fxHide fxShow.lt-lg>
+              <button mat-icon-button
+                      (click)="$event.stopPropagation()"
+                      [matMenuTriggerFor]="cellActionsMenu">
+                <mat-icon class="material-icons">more_vert</mat-icon>
+              </button>
+              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                <button mat-icon-button
+                        matTooltip="RPC"
+                        matTooltipPosition="above"
+                        (click)="connectorRpc(attribute, $event)">
+                  <mat-icon>private_connectivity</mat-icon>
+                </button>
+                <button mat-icon-button
+                        matTooltip="Delete connector"
+                        matTooltipPosition="above"
+                        (click)="connectorLogs(attribute, $event)">
+                  <mat-icon>list</mat-icon>
+                </button>
+                <button mat-icon-button
+                        matTooltip="Delete connector"
+                        matTooltipPosition="above"
+                        (click)="deleteConnector(attribute, $event)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </mat-menu>
+            </div>
+          </mat-cell>
+        </ng-container>
+        <mat-header-row class="mat-row-select"
+                        *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}"
+                 *matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row>
+      </table>
+    </div>
  </section>
  <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex">
-    <section class="tb-form-row tb-not-inline-field same-padding input-container">
-      <mat-form-field class="flex" subscriptSizing="dynamic">
-        <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
-        <input matInput formControlName="name" #nameInput/>
-      </mat-form-field>
-      <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
-        <mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label>
-        <mat-select formControlName="type">
-          <mat-option style="text-transform: uppercase"
-                      *ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic">
-        <mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label>
-        <input matInput formControlName="key"/>
-      </mat-form-field>
-      <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic">
-        <mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label>
-        <input matInput formControlName="class"/>
-      </mat-form-field>
-      <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
-        <mat-label translate>gateway.remote-logging-level</mat-label>
-        <mat-select formControlName="logLevel">
-          <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
-        </mat-select>
-      </mat-form-field>
+    <section class="tb-form-panel input-container section-container">
+      <section class="tb-form-row tb-not-inline-field no-padding no-border column-lt-md input-container">
+        <mat-form-field class="flex" subscriptSizing="dynamic">
+          <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
+          <input matInput formControlName="name" #nameInput/>
+        </mat-form-field>
+        <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
+          <mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label>
+          <mat-select formControlName="type">
+            <mat-option style="text-transform: uppercase"
+                        *ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic">
+          <mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label>
+          <input matInput formControlName="key"/>
+        </mat-form-field>
+        <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic">
+          <mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label>
+          <input matInput formControlName="class"/>
+        </mat-form-field>
+        <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
+          <mat-label translate>gateway.remote-logging-level</mat-label>
+          <mat-select formControlName="logLevel">
+            <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </section>
    </section>
-    <section class="tb-form-panel stroked flex">
+    <section class="tb-form-panel flex section-container">
      <tb-json-object-edit
+        fillHeight="true"
        class="flex"
        fxLayout="column"
        required
        label="{{ 'gateway.configuration' | translate }}"
        formControlName="configurationJson">
      </tb-json-object-edit>
-      <div fxLayoutAlign="start center">
+      <div fxLayoutAlign="end center">
        <button mat-raised-button color="primary"
-                class="action-button"
                type="button"
                [disabled]="!connectorForm.dirty || connectorForm.invalid"
                (click)="saveConnector()">
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
@ -30,9 +30,13 @@
      flex-direction: column;
    }

-    .table-container {
-      overflow: auto;
+    .table-section {
      min-height: 35vh;
+      overflow: hidden;
+
+      .table-container {
+        overflow: auto;
+      }
    }

    .flex {
@ -42,6 +46,10 @@
    .input-container {
      height: auto;
    }
+
+    .section-container {
+      background-color: #fff;
+    }
  }

  .mat-toolbar {
@ -69,10 +77,6 @@
    }
  }

-  .action-button {
-    margin: 0 15px;
-  }
-
  mat-row {
    cursor: pointer;
  }