diff --git a/application/src/main/data/json/system/widget_bundles/gateway_widgets.json b/application/src/main/data/json/system/widget_bundles/gateway_widgets.json
index 77dcfac936..6bc8dc73ef 100644
--- a/application/src/main/data/json/system/widget_bundles/gateway_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/gateway_widgets.json
@@ -13,13 +13,13 @@
         "sizeX": 8,
         "sizeY": 6.5,
         "resources": [],
-        "templateHtml": "<tb-gateway-form\n    form-id=\"formId\"\n    ctx=\"ctx\">\n</tb-gateway-form>\n",
+        "templateHtml": "<tb-gateway-form\n    [ctx]=\"ctx\">\n</tb-gateway-form>\n",
         "templateCss": "",
-        "controllerScript": "self.onInit = function() {\n    var scope = self.ctx.$scope;\n    var id = self.ctx.$scope.$injector.get('utils').guid();\n    scope.formId = \"form-\"+id;\n    scope.ctx = self.ctx;\n}\n\nself.onResize = function() {\n    self.ctx.$scope.$broadcast('gateway-form-resize', self.ctx.$scope.formId);\n}\n",
+        "controllerScript": "self.onInit = function() {\n}\n",
         "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"widgetTitle\": {\n                \"title\": \"Widget title\",\n                \"type\": \"string\",\n                \"default\": \"Gateway Configuration\"\n            },\n            \"archiveFileName\": {\n                \"title\": \"Default archive file name\",\n                \"type\": \"string\",\n                \"default\": \"gatewayConfiguration\"\n            },\n            \"gatewayType\": {\n                \"title\": \"Device type for new gateway\",\n                \"type\": \"string\",\n                \"default\": \"Gateway\"\n            },\n            \"successfulSave\": {\n                \"title\": \"Text message about successfully saved gateway configuration\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"gatewayNameExists\": {\n                \"title\": \"Text message when device with entered name is already exists\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        [\n            \"widgetTitle\",\n            \"archiveFileName\",\n            \"gatewayType\"\n        ],\n        [\n            \"successfulSave\",\n            \"gatewayNameExists\"\n        ]\n    ],\n    \"groupInfoes\": [{\n        \"formIndex\": 0,\n        \"GroupTitle\": \"General settings\"\n    }, {\n        \"formIndex\": 1,\n        \"GroupTitle\": \"Messages settings\"\n    }]\n}",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"widgetTitle\":\"Gateway Configuration\",\"archiveFileName\":\"configurationGateway\"},\"title\":\"Gateway Configuration\",\"dropShadow\":true,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"displayTimewindow\":true,\"showLegend\":false,\"actions\":{}}"
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/application/src/main/data/upgrade/2.4.3/schema_update_psql_drop_partitions.sql b/application/src/main/data/upgrade/2.4.3/schema_update_psql_drop_partitions.sql
new file mode 100644
index 0000000000..0916c241a1
--- /dev/null
+++ b/application/src/main/data/upgrade/2.4.3/schema_update_psql_drop_partitions.sql
@@ -0,0 +1,123 @@
+--
+-- Copyright © 2016-2020 The Thingsboard Authors
+--
+-- Licensed under the Apache License, Version 2.0 (the "License");
+-- you may not use this file except in compliance with the License.
+-- You may obtain a copy of the License at
+--
+--     http://www.apache.org/licenses/LICENSE-2.0
+--
+-- Unless required by applicable law or agreed to in writing, software
+-- distributed under the License is distributed on an "AS IS" BASIS,
+-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+-- See the License for the specific language governing permissions and
+-- limitations under the License.
+--
+
+CREATE OR REPLACE PROCEDURE drop_partitions_by_max_ttl(IN partition_type varchar, IN system_ttl bigint, INOUT deleted bigint)
+    LANGUAGE plpgsql AS
+$$
+DECLARE
+    max_tenant_ttl            bigint;
+    max_customer_ttl          bigint;
+    max_ttl                   bigint;
+    date                      timestamp;
+    partition_by_max_ttl_date varchar;
+    partition_month           varchar;
+    partition_day             varchar;
+    partition_year            varchar;
+    partition                 varchar;
+    partition_to_delete       varchar;
+
+
+BEGIN
+    SELECT max(attribute_kv.long_v)
+    FROM tenant
+             INNER JOIN attribute_kv ON tenant.id = attribute_kv.entity_id
+    WHERE attribute_kv.attribute_key = 'TTL'
+    into max_tenant_ttl;
+    SELECT max(attribute_kv.long_v)
+    FROM customer
+             INNER JOIN attribute_kv ON customer.id = attribute_kv.entity_id
+    WHERE attribute_kv.attribute_key = 'TTL'
+    into max_customer_ttl;
+    max_ttl := GREATEST(system_ttl, max_customer_ttl, max_tenant_ttl);
+    if max_ttl IS NOT NULL AND max_ttl > 0 THEN
+        date := to_timestamp(EXTRACT(EPOCH FROM current_timestamp) - (max_ttl / 1000));
+        partition_by_max_ttl_date := get_partition_by_max_ttl_date(partition_type, date);
+        RAISE NOTICE 'Partition by max ttl: %', partition_by_max_ttl_date;
+        IF partition_by_max_ttl_date IS NOT NULL THEN
+            CASE
+                WHEN partition_type = 'DAYS' THEN
+                    partition_year := SPLIT_PART(partition_by_max_ttl_date, '_', 3);
+                    partition_month := SPLIT_PART(partition_by_max_ttl_date, '_', 4);
+                    partition_day := SPLIT_PART(partition_by_max_ttl_date, '_', 5);
+                WHEN partition_type = 'MONTHS' THEN
+                    partition_year := SPLIT_PART(partition_by_max_ttl_date, '_', 3);
+                    partition_month := SPLIT_PART(partition_by_max_ttl_date, '_', 4);
+                ELSE
+                    partition_year := SPLIT_PART(partition_by_max_ttl_date, '_', 3);
+                END CASE;
+            FOR partition IN SELECT tablename
+                             FROM pg_tables
+                             WHERE schemaname = 'public'
+                               AND tablename like 'ts_kv_' || '%'
+                               AND tablename != 'ts_kv_latest'
+                               AND tablename != 'ts_kv_dictionary'
+                LOOP
+                    IF partition != partition_by_max_ttl_date THEN
+                        IF partition_year IS NOT NULL THEN
+                            IF SPLIT_PART(partition, '_', 3)::integer < partition_year::integer THEN
+                                partition_to_delete := partition;
+                            ELSE
+                                IF partition_month IS NOT NULL THEN
+                                    IF SPLIT_PART(partition, '_', 4)::integer < partition_month::integer THEN
+                                        partition_to_delete := partition;
+                                    ELSE
+                                        IF partition_day IS NOT NULL THEN
+                                            IF SPLIT_PART(partition, '_', 5)::integer < partition_day::integer THEN
+                                                partition_to_delete := partition;
+                                            END IF;
+                                        END IF;
+                                    END IF;
+                                END IF;
+                            END IF;
+                        END IF;
+                    END IF;
+                    IF partition_to_delete IS NOT NULL THEN
+                        RAISE NOTICE 'Partition to delete by max ttl: %', partition_to_delete;
+                        EXECUTE format('DROP TABLE %I', partition_to_delete);
+                        deleted := deleted + 1;
+                    END IF;
+                END LOOP;
+        END IF;
+    END IF;
+END
+$$;
+
+CREATE OR REPLACE FUNCTION get_partition_by_max_ttl_date(IN partition_type varchar, IN date timestamp, OUT partition varchar) AS
+$$
+BEGIN
+    CASE
+        WHEN partition_type = 'DAYS' THEN
+            partition := 'ts_kv_' || to_char(date, 'yyyy') || '_' || to_char(date, 'MM') || '_' || to_char(date, 'dd');
+        WHEN partition_type = 'MONTHS' THEN
+            partition := 'ts_kv_' || to_char(date, 'yyyy') || '_' || to_char(date, 'MM');
+        WHEN partition_type = 'YEARS' THEN
+            partition := 'ts_kv_' || to_char(date, 'yyyy');
+        WHEN partition_type = 'INDEFINITE' THEN
+            partition := NULL;
+        ELSE
+            partition := NULL;
+        END CASE;
+    IF partition IS NOT NULL THEN
+        IF NOT EXISTS(SELECT
+                      FROM pg_tables
+                      WHERE schemaname = 'public'
+                        AND tablename = partition) THEN
+            partition := NULL;
+            RAISE NOTICE 'Failed to found partition by ttl';
+        END IF;
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
diff --git a/application/src/main/data/upgrade/2.4.3/schema_update_ttl.sql b/application/src/main/data/upgrade/2.4.3/schema_update_ttl.sql
new file mode 100644
index 0000000000..ff1fb5129b
--- /dev/null
+++ b/application/src/main/data/upgrade/2.4.3/schema_update_ttl.sql
@@ -0,0 +1,125 @@
+--
+-- Copyright © 2016-2020 The Thingsboard Authors
+--
+-- Licensed under the Apache License, Version 2.0 (the "License");
+-- you may not use this file except in compliance with the License.
+-- You may obtain a copy of the License at
+--
+--     http://www.apache.org/licenses/LICENSE-2.0
+--
+-- Unless required by applicable law or agreed to in writing, software
+-- distributed under the License is distributed on an "AS IS" BASIS,
+-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+-- See the License for the specific language governing permissions and
+-- limitations under the License.
+--
+
+CREATE OR REPLACE FUNCTION to_uuid(IN entity_id varchar, OUT uuid_id uuid) AS
+$$
+BEGIN
+    uuid_id := substring(entity_id, 8, 8) || '-' || substring(entity_id, 4, 4) || '-1' || substring(entity_id, 1, 3) ||
+               '-' || substring(entity_id, 16, 4) || '-' || substring(entity_id, 20, 12);
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_device_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                            OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(device.id) as entity_id FROM device WHERE tenant_id = %L and customer_id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_asset_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                           OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(asset.id) as entity_id FROM asset WHERE tenant_id = %L and customer_id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_customer_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                              OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(customer.id) as entity_id FROM customer WHERE tenant_id = %L and id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE PROCEDURE cleanup_timeseries_by_ttl(IN null_uuid varchar(31),
+                                                      IN system_ttl bigint, INOUT deleted bigint)
+    LANGUAGE plpgsql AS
+$$
+DECLARE
+    tenant_cursor CURSOR FOR select tenant.id as tenant_id
+                             from tenant;
+    tenant_id_record     varchar;
+    customer_id_record   varchar;
+    tenant_ttl           bigint;
+    customer_ttl         bigint;
+    deleted_for_entities bigint;
+    tenant_ttl_ts        bigint;
+    customer_ttl_ts      bigint;
+BEGIN
+    OPEN tenant_cursor;
+    FETCH tenant_cursor INTO tenant_id_record;
+    WHILE FOUND
+        LOOP
+            EXECUTE format(
+                    'select attribute_kv.long_v from attribute_kv where attribute_kv.entity_id = %L and attribute_kv.attribute_key = %L',
+                    tenant_id_record, 'TTL') INTO tenant_ttl;
+            if tenant_ttl IS NULL THEN
+                tenant_ttl := system_ttl;
+            END IF;
+            IF tenant_ttl > 0 THEN
+                tenant_ttl_ts := (EXTRACT(EPOCH FROM current_timestamp) * 1000 - tenant_ttl::bigint * 1000)::bigint;
+                deleted_for_entities := delete_device_records_from_ts_kv(tenant_id_record, null_uuid, tenant_ttl_ts);
+                deleted := deleted + deleted_for_entities;
+                RAISE NOTICE '% telemetry removed for devices where tenant_id = %', deleted_for_entities, tenant_id_record;
+                deleted_for_entities := delete_asset_records_from_ts_kv(tenant_id_record, null_uuid, tenant_ttl_ts);
+                deleted := deleted + deleted_for_entities;
+                RAISE NOTICE '% telemetry removed for assets where tenant_id = %', deleted_for_entities, tenant_id_record;
+            END IF;
+            FOR customer_id_record IN
+                SELECT customer.id AS customer_id FROM customer WHERE customer.tenant_id = tenant_id_record
+                LOOP
+                    EXECUTE format(
+                            'select attribute_kv.long_v from attribute_kv where attribute_kv.entity_id = %L and attribute_kv.attribute_key = %L',
+                            customer_id_record, 'TTL') INTO customer_ttl;
+                    IF customer_ttl IS NULL THEN
+                        customer_ttl_ts := tenant_ttl_ts;
+                    ELSE
+                        IF customer_ttl > 0 THEN
+                            customer_ttl_ts :=
+                                    (EXTRACT(EPOCH FROM current_timestamp) * 1000 -
+                                     customer_ttl::bigint * 1000)::bigint;
+                        END IF;
+                    END IF;
+                    IF customer_ttl_ts IS NOT NULL AND customer_ttl_ts > 0 THEN
+                        deleted_for_entities :=
+                                delete_customer_records_from_ts_kv(tenant_id_record, customer_id_record,
+                                                                   customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for customer with id = % where tenant_id = %', deleted_for_entities, customer_id_record, tenant_id_record;
+                        deleted_for_entities :=
+                                delete_device_records_from_ts_kv(tenant_id_record, customer_id_record,
+                                                                 customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for devices where tenant_id = % and customer_id = %', deleted_for_entities, tenant_id_record, customer_id_record;
+                        deleted_for_entities := delete_asset_records_from_ts_kv(tenant_id_record,
+                                                                                customer_id_record,
+                                                                                customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for assets where tenant_id = % and customer_id = %', deleted_for_entities, tenant_id_record, customer_id_record;
+                    END IF;
+                END LOOP;
+            FETCH tenant_cursor INTO tenant_id_record;
+        END LOOP;
+END
+$$;
diff --git a/application/src/main/java/org/thingsboard/server/config/ThingsboardSecurityConfiguration.java b/application/src/main/java/org/thingsboard/server/config/ThingsboardSecurityConfiguration.java
index 92a371b1e4..fee10133d7 100644
--- a/application/src/main/java/org/thingsboard/server/config/ThingsboardSecurityConfiguration.java
+++ b/application/src/main/java/org/thingsboard/server/config/ThingsboardSecurityConfiguration.java
@@ -107,7 +107,6 @@ public class ThingsboardSecurityConfiguration extends WebSecurityConfigurerAdapt
         return filter;
     }
 
-    @Bean
     protected JwtTokenAuthenticationProcessingFilter buildJwtTokenAuthenticationProcessingFilter() throws Exception {
         List<String> pathsToSkip = new ArrayList(Arrays.asList(NON_TOKEN_BASED_AUTH_ENTRY_POINTS));
         pathsToSkip.addAll(Arrays.asList(WS_TOKEN_BASED_AUTH_ENTRY_POINT, TOKEN_REFRESH_ENTRY_POINT, FORM_BASED_LOGIN_ENTRY_POINT,
diff --git a/application/src/main/java/org/thingsboard/server/controller/AlarmController.java b/application/src/main/java/org/thingsboard/server/controller/AlarmController.java
index 8fa39aa8b3..9999ab6709 100644
--- a/application/src/main/java/org/thingsboard/server/controller/AlarmController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/AlarmController.java
@@ -120,7 +120,9 @@ public class AlarmController extends BaseController {
         try {
             AlarmId alarmId = new AlarmId(toUUID(strAlarmId));
             Alarm alarm = checkAlarmId(alarmId, Operation.WRITE);
-            alarmService.ackAlarm(getCurrentUser().getTenantId(), alarmId, System.currentTimeMillis()).get();
+            long ackTs = System.currentTimeMillis();
+            alarmService.ackAlarm(getCurrentUser().getTenantId(), alarmId, ackTs).get();
+            alarm.setAckTs(ackTs);
             logEntityAction(alarmId, alarm, getCurrentUser().getCustomerId(), ActionType.ALARM_ACK, null);
         } catch (Exception e) {
             throw handleException(e);
@@ -135,7 +137,9 @@ public class AlarmController extends BaseController {
         try {
             AlarmId alarmId = new AlarmId(toUUID(strAlarmId));
             Alarm alarm = checkAlarmId(alarmId, Operation.WRITE);
-            alarmService.clearAlarm(getCurrentUser().getTenantId(), alarmId, null, System.currentTimeMillis()).get();
+            long clearTs = System.currentTimeMillis();
+            alarmService.clearAlarm(getCurrentUser().getTenantId(), alarmId, null, clearTs).get();
+            alarm.setClearTs(clearTs);
             logEntityAction(alarmId, alarm, getCurrentUser().getCustomerId(), ActionType.ALARM_CLEAR, null);
         } catch (Exception e) {
             throw handleException(e);
diff --git a/application/src/main/java/org/thingsboard/server/controller/AuthController.java b/application/src/main/java/org/thingsboard/server/controller/AuthController.java
index 0cb9b29501..44449eb3d6 100644
--- a/application/src/main/java/org/thingsboard/server/controller/AuthController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/AuthController.java
@@ -199,6 +199,7 @@ public class AuthController extends BaseController {
     @ResponseBody
     public JsonNode activateUser(
             @RequestBody JsonNode activateRequest,
+            @RequestParam(required = false, defaultValue = "true") boolean sendActivationMail,
             HttpServletRequest request) throws ThingsboardException {
         try {
             String activateToken = activateRequest.get("activateToken").asText();
@@ -213,10 +214,12 @@ public class AuthController extends BaseController {
             String loginUrl = String.format("%s/login", baseUrl);
             String email = user.getEmail();
 
-            try {
-                mailService.sendAccountActivatedEmail(loginUrl, email);
-            } catch (Exception e) {
-                log.info("Unable to send account activation email [{}]", e.getMessage());
+            if (sendActivationMail) {
+                try {
+                    mailService.sendAccountActivatedEmail(loginUrl, email);
+                } catch (Exception e) {
+                    log.info("Unable to send account activation email [{}]", e.getMessage());
+                }
             }
 
             JwtToken accessToken = tokenFactory.createAccessJwtToken(securityUser);
diff --git a/application/src/main/java/org/thingsboard/server/controller/EntityRelationController.java b/application/src/main/java/org/thingsboard/server/controller/EntityRelationController.java
index ea87f86781..8058cca685 100644
--- a/application/src/main/java/org/thingsboard/server/controller/EntityRelationController.java
+++ b/application/src/main/java/org/thingsboard/server/controller/EntityRelationController.java
@@ -24,13 +24,11 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.bind.annotation.RestController;
-import org.thingsboard.server.common.data.alarm.Alarm;
 import org.thingsboard.server.common.data.audit.ActionType;
 import org.thingsboard.server.common.data.exception.ThingsboardErrorCode;
 import org.thingsboard.server.common.data.exception.ThingsboardException;
 import org.thingsboard.server.common.data.id.EntityId;
 import org.thingsboard.server.common.data.id.EntityIdFactory;
-import org.thingsboard.server.common.data.id.UUIDBased;
 import org.thingsboard.server.common.data.relation.EntityRelation;
 import org.thingsboard.server.common.data.relation.EntityRelationInfo;
 import org.thingsboard.server.common.data.relation.EntityRelationsQuery;
@@ -38,6 +36,7 @@ import org.thingsboard.server.common.data.relation.RelationTypeGroup;
 import org.thingsboard.server.service.security.permission.Operation;
 
 import java.util.List;
+import java.util.stream.Collectors;
 
 
 @RestController
@@ -167,7 +166,7 @@ public class EntityRelationController extends BaseController {
         checkEntityId(entityId, Operation.READ);
         RelationTypeGroup typeGroup = parseRelationTypeGroup(strRelationTypeGroup, RelationTypeGroup.COMMON);
         try {
-            return checkNotNull(relationService.findByFrom(getTenantId(), entityId, typeGroup));
+            return checkNotNull(filterRelationsByReadPermission(relationService.findByFrom(getTenantId(), entityId, typeGroup)));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -185,7 +184,7 @@ public class EntityRelationController extends BaseController {
         checkEntityId(entityId, Operation.READ);
         RelationTypeGroup typeGroup = parseRelationTypeGroup(strRelationTypeGroup, RelationTypeGroup.COMMON);
         try {
-            return checkNotNull(relationService.findInfoByFrom(getTenantId(), entityId, typeGroup).get());
+            return checkNotNull(filterRelationsByReadPermission(relationService.findInfoByFrom(getTenantId(), entityId, typeGroup).get()));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -205,7 +204,7 @@ public class EntityRelationController extends BaseController {
         checkEntityId(entityId, Operation.READ);
         RelationTypeGroup typeGroup = parseRelationTypeGroup(strRelationTypeGroup, RelationTypeGroup.COMMON);
         try {
-            return checkNotNull(relationService.findByFromAndType(getTenantId(), entityId, strRelationType, typeGroup));
+            return checkNotNull(filterRelationsByReadPermission(relationService.findByFromAndType(getTenantId(), entityId, strRelationType, typeGroup)));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -223,7 +222,7 @@ public class EntityRelationController extends BaseController {
         checkEntityId(entityId, Operation.READ);
         RelationTypeGroup typeGroup = parseRelationTypeGroup(strRelationTypeGroup, RelationTypeGroup.COMMON);
         try {
-            return checkNotNull(relationService.findByTo(getTenantId(), entityId, typeGroup));
+            return checkNotNull(filterRelationsByReadPermission(relationService.findByTo(getTenantId(), entityId, typeGroup)));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -241,7 +240,7 @@ public class EntityRelationController extends BaseController {
         checkEntityId(entityId, Operation.READ);
         RelationTypeGroup typeGroup = parseRelationTypeGroup(strRelationTypeGroup, RelationTypeGroup.COMMON);
         try {
-            return checkNotNull(relationService.findInfoByTo(getTenantId(), entityId, typeGroup).get());
+            return checkNotNull(filterRelationsByReadPermission(relationService.findInfoByTo(getTenantId(), entityId, typeGroup).get()));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -261,7 +260,7 @@ public class EntityRelationController extends BaseController {
         checkEntityId(entityId, Operation.READ);
         RelationTypeGroup typeGroup = parseRelationTypeGroup(strRelationTypeGroup, RelationTypeGroup.COMMON);
         try {
-            return checkNotNull(relationService.findByToAndType(getTenantId(), entityId, strRelationType, typeGroup));
+            return checkNotNull(filterRelationsByReadPermission(relationService.findByToAndType(getTenantId(), entityId, strRelationType, typeGroup)));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -276,7 +275,7 @@ public class EntityRelationController extends BaseController {
         checkNotNull(query.getFilters());
         checkEntityId(query.getParameters().getEntityId(), Operation.READ);
         try {
-            return checkNotNull(relationService.findByQuery(getTenantId(), query).get());
+            return checkNotNull(filterRelationsByReadPermission(relationService.findByQuery(getTenantId(), query).get()));
         } catch (Exception e) {
             throw handleException(e);
         }
@@ -291,12 +290,28 @@ public class EntityRelationController extends BaseController {
         checkNotNull(query.getFilters());
         checkEntityId(query.getParameters().getEntityId(), Operation.READ);
         try {
-            return checkNotNull(relationService.findInfoByQuery(getTenantId(), query).get());
+            return checkNotNull(filterRelationsByReadPermission(relationService.findInfoByQuery(getTenantId(), query).get()));
         } catch (Exception e) {
             throw handleException(e);
         }
     }
 
+    private <T extends EntityRelation> List<T> filterRelationsByReadPermission(List<T> relationsByQuery) {
+        return relationsByQuery.stream().filter(relationByQuery -> {
+            try {
+                checkEntityId(relationByQuery.getTo(), Operation.READ);
+            } catch (ThingsboardException e) {
+                return false;
+            }
+            try {
+                checkEntityId(relationByQuery.getFrom(), Operation.READ);
+            } catch (ThingsboardException e) {
+                return false;
+            }
+            return true;
+        }).collect(Collectors.toList());
+    }
+
     private RelationTypeGroup parseRelationTypeGroup(String strRelationTypeGroup, RelationTypeGroup defaultValue) {
         RelationTypeGroup result = defaultValue;
         if (strRelationTypeGroup != null && strRelationTypeGroup.trim().length() > 0) {
diff --git a/application/src/main/java/org/thingsboard/server/service/install/AbstractSqlTsDatabaseUpgradeService.java b/application/src/main/java/org/thingsboard/server/service/install/AbstractSqlTsDatabaseUpgradeService.java
index 70e56f9489..ab03ca23ab 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/AbstractSqlTsDatabaseUpgradeService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/AbstractSqlTsDatabaseUpgradeService.java
@@ -47,7 +47,7 @@ public abstract class AbstractSqlTsDatabaseUpgradeService {
     @Autowired
     protected InstallScripts installScripts;
 
-    protected abstract void loadSql(Connection conn);
+    protected abstract void loadSql(Connection conn, String fileName);
 
     protected void loadFunctions(Path sqlFile, Connection conn) throws Exception {
         String sql = new String(Files.readAllBytes(sqlFile), StandardCharsets.UTF_8);
@@ -70,6 +70,26 @@ public abstract class AbstractSqlTsDatabaseUpgradeService {
         return versionValid;
     }
 
+    protected boolean isOldSchema(Connection conn, long fromVersion) {
+        boolean isOldSchema = true;
+        try {
+            Statement statement = conn.createStatement();
+            statement.execute("CREATE TABLE IF NOT EXISTS tb_schema_settings ( schema_version bigint NOT NULL, CONSTRAINT tb_schema_settings_pkey PRIMARY KEY (schema_version));");
+            Thread.sleep(1000);
+            ResultSet resultSet = statement.executeQuery("SELECT schema_version FROM tb_schema_settings;");
+            if (resultSet.next()) {
+                isOldSchema = resultSet.getLong(1) <= fromVersion;
+            } else {
+                resultSet.close();
+                statement.execute("INSERT INTO tb_schema_settings (schema_version) VALUES (" + fromVersion + ")");
+            }
+            statement.close();
+        } catch (InterruptedException | SQLException e) {
+            log.info("Failed to check current PostgreSQL schema due to: {}", e.getMessage());
+        }
+        return isOldSchema;
+    }
+
     protected void executeQuery(Connection conn, String query) {
         try {
             Statement statement = conn.createStatement();
@@ -83,7 +103,7 @@ public abstract class AbstractSqlTsDatabaseUpgradeService {
                     nextWarning = nextWarning.getNextWarning();
                 }
             }
-            Thread.sleep(5000);
+            Thread.sleep(2000);
             log.info("Successfully executed query: {}", query);
         } catch (InterruptedException | SQLException e) {
             log.info("Failed to execute query: {} due to: {}", query, e.getMessage());
diff --git a/application/src/main/java/org/thingsboard/server/service/install/PsqlTsDatabaseUpgradeService.java b/application/src/main/java/org/thingsboard/server/service/install/PsqlTsDatabaseUpgradeService.java
index a630540981..5f97a6eaa5 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/PsqlTsDatabaseUpgradeService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/PsqlTsDatabaseUpgradeService.java
@@ -34,6 +34,8 @@ import java.sql.DriverManager;
 public class PsqlTsDatabaseUpgradeService extends AbstractSqlTsDatabaseUpgradeService implements DatabaseTsUpgradeService {
 
     private static final String LOAD_FUNCTIONS_SQL = "schema_update_psql_ts.sql";
+    private static final String LOAD_TTL_FUNCTIONS_SQL = "schema_update_ttl.sql";
+    private static final String LOAD_DROP_PARTITIONS_FUNCTIONS_SQL = "schema_update_psql_drop_partitions.sql";
 
     private static final String TS_KV_OLD = "ts_kv_old;";
     private static final String TS_KV_LATEST_OLD = "ts_kv_latest_old;";
@@ -76,30 +78,39 @@ public class PsqlTsDatabaseUpgradeService extends AbstractSqlTsDatabaseUpgradeSe
                         throw new RuntimeException("PostgreSQL version should be at least more than 11, please upgrade your PostgreSQL and restart the script!");
                     } else {
                         log.info("PostgreSQL version is valid!");
-                        log.info("Load upgrade functions ...");
-                        loadSql(conn);
-                        log.info("Updating timeseries schema ...");
-                        executeQuery(conn, CALL_CREATE_PARTITION_TS_KV_TABLE);
-                        executeQuery(conn, CALL_CREATE_PARTITIONS);
-                        executeQuery(conn, CALL_CREATE_TS_KV_DICTIONARY_TABLE);
-                        executeQuery(conn, CALL_INSERT_INTO_DICTIONARY);
-                        executeQuery(conn, CALL_INSERT_INTO_TS_KV);
-                        executeQuery(conn, CALL_CREATE_NEW_TS_KV_LATEST_TABLE);
-                        executeQuery(conn, CALL_INSERT_INTO_TS_KV_LATEST);
-
-                        executeQuery(conn, DROP_TABLE_TS_KV_OLD);
-                        executeQuery(conn, DROP_TABLE_TS_KV_LATEST_OLD);
-
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_PARTITION_TS_KV_TABLE);
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_PARTITIONS);
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_TS_KV_DICTIONARY_TABLE);
-                        executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_DICTIONARY);
-                        executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TS_KV);
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_NEW_TS_KV_LATEST_TABLE);
-                        executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TS_KV_LATEST);
-
-                        executeQuery(conn, "ALTER TABLE ts_kv ADD COLUMN json_v json;");
-                        executeQuery(conn, "ALTER TABLE ts_kv_latest ADD COLUMN json_v json;");
+                        if (isOldSchema(conn, 2004003)) {
+                            log.info("Load upgrade functions ...");
+                            loadSql(conn, LOAD_FUNCTIONS_SQL);
+                            log.info("Updating timeseries schema ...");
+                            executeQuery(conn, CALL_CREATE_PARTITION_TS_KV_TABLE);
+                            executeQuery(conn, CALL_CREATE_PARTITIONS);
+                            executeQuery(conn, CALL_CREATE_TS_KV_DICTIONARY_TABLE);
+                            executeQuery(conn, CALL_INSERT_INTO_DICTIONARY);
+                            executeQuery(conn, CALL_INSERT_INTO_TS_KV);
+                            executeQuery(conn, CALL_CREATE_NEW_TS_KV_LATEST_TABLE);
+                            executeQuery(conn, CALL_INSERT_INTO_TS_KV_LATEST);
+
+                            executeQuery(conn, DROP_TABLE_TS_KV_OLD);
+                            executeQuery(conn, DROP_TABLE_TS_KV_LATEST_OLD);
+
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_PARTITION_TS_KV_TABLE);
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_PARTITIONS);
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_TS_KV_DICTIONARY_TABLE);
+                            executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_DICTIONARY);
+                            executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TS_KV);
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_NEW_TS_KV_LATEST_TABLE);
+                            executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TS_KV_LATEST);
+
+                            executeQuery(conn, "ALTER TABLE ts_kv ADD COLUMN IF NOT EXISTS json_v json;");
+                            executeQuery(conn, "ALTER TABLE ts_kv_latest ADD COLUMN IF NOT EXISTS json_v json;");
+                        }
+
+                        log.info("Load TTL functions ...");
+                        loadSql(conn, LOAD_TTL_FUNCTIONS_SQL);
+                        log.info("Load Drop Partitions functions ...");
+                        loadSql(conn, LOAD_DROP_PARTITIONS_FUNCTIONS_SQL);
+
+                        executeQuery(conn, "UPDATE tb_schema_settings SET schema_version = 2005000");
 
                         log.info("schema timeseries updated!");
                     }
@@ -110,11 +121,12 @@ public class PsqlTsDatabaseUpgradeService extends AbstractSqlTsDatabaseUpgradeSe
         }
     }
 
-    protected void loadSql(Connection conn) {
-        Path schemaUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", "2.4.3", LOAD_FUNCTIONS_SQL);
+    @Override
+    protected void loadSql(Connection conn, String fileName) {
+        Path schemaUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", "2.4.3", fileName);
         try {
             loadFunctions(schemaUpdateFile, conn);
-            log.info("Upgrade functions successfully loaded!");
+            log.info("Functions successfully loaded!");
         } catch (Exception e) {
             log.info("Failed to load PostgreSQL upgrade functions due to: {}", e.getMessage());
         }
diff --git a/application/src/main/java/org/thingsboard/server/service/install/TimescaleTsDatabaseUpgradeService.java b/application/src/main/java/org/thingsboard/server/service/install/TimescaleTsDatabaseUpgradeService.java
index 99afd59a50..21bdb500d9 100644
--- a/application/src/main/java/org/thingsboard/server/service/install/TimescaleTsDatabaseUpgradeService.java
+++ b/application/src/main/java/org/thingsboard/server/service/install/TimescaleTsDatabaseUpgradeService.java
@@ -39,6 +39,7 @@ public class TimescaleTsDatabaseUpgradeService extends AbstractSqlTsDatabaseUpgr
     private long chunkTimeInterval;
 
     private static final String LOAD_FUNCTIONS_SQL = "schema_update_timescale_ts.sql";
+    private static final String LOAD_TTL_FUNCTIONS_SQL = "schema_update_ttl.sql";
 
     private static final String TENANT_TS_KV_OLD_TABLE = "tenant_ts_kv_old;";
 
@@ -79,31 +80,37 @@ public class TimescaleTsDatabaseUpgradeService extends AbstractSqlTsDatabaseUpgr
                         throw new RuntimeException("PostgreSQL version should be at least more than 11, please upgrade your PostgreSQL and restart the script!");
                     } else {
                         log.info("PostgreSQL version is valid!");
-                        log.info("Load upgrade functions ...");
-                        loadSql(conn);
-                        log.info("Updating timescale schema ...");
-                        executeQuery(conn, CALL_CREATE_TS_KV_LATEST_TABLE);
-                        executeQuery(conn, CALL_CREATE_NEW_TENANT_TS_KV_TABLE);
+                        if (isOldSchema(conn, 2004003)) {
+                            log.info("Load upgrade functions ...");
+                            loadSql(conn, LOAD_FUNCTIONS_SQL);
+                            log.info("Updating timescale schema ...");
+                            executeQuery(conn, CALL_CREATE_TS_KV_LATEST_TABLE);
+                            executeQuery(conn, CALL_CREATE_NEW_TENANT_TS_KV_TABLE);
 
-                        executeQuery(conn, "SELECT create_hypertable('ts_kv', 'ts', chunk_time_interval => " + chunkTimeInterval + ", if_not_exists => true);");
+                            executeQuery(conn, "SELECT create_hypertable('ts_kv', 'ts', chunk_time_interval => " + chunkTimeInterval + ", if_not_exists => true);");
 
-                        executeQuery(conn, CALL_CREATE_TS_KV_DICTIONARY_TABLE);
-                        executeQuery(conn, CALL_INSERT_INTO_DICTIONARY);
-                        executeQuery(conn, CALL_INSERT_INTO_TS_KV);
-                        executeQuery(conn, CALL_INSERT_INTO_TS_KV_LATEST);
+                            executeQuery(conn, CALL_CREATE_TS_KV_DICTIONARY_TABLE);
+                            executeQuery(conn, CALL_INSERT_INTO_DICTIONARY);
+                            executeQuery(conn, CALL_INSERT_INTO_TS_KV);
+                            executeQuery(conn, CALL_INSERT_INTO_TS_KV_LATEST);
 
-                        executeQuery(conn, DROP_OLD_TENANT_TS_KV_TABLE);
+                            executeQuery(conn, DROP_OLD_TENANT_TS_KV_TABLE);
 
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_TS_KV_LATEST_TABLE);
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_TENANT_TS_KV_TABLE_COPY);
-                        executeQuery(conn, DROP_PROCEDURE_CREATE_TS_KV_DICTIONARY_TABLE);
-                        executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_DICTIONARY);
-                        executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TENANT_TS_KV);
-                        executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TS_KV_LATEST);
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_TS_KV_LATEST_TABLE);
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_TENANT_TS_KV_TABLE_COPY);
+                            executeQuery(conn, DROP_PROCEDURE_CREATE_TS_KV_DICTIONARY_TABLE);
+                            executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_DICTIONARY);
+                            executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TENANT_TS_KV);
+                            executeQuery(conn, DROP_PROCEDURE_INSERT_INTO_TS_KV_LATEST);
 
-                        executeQuery(conn, "ALTER TABLE ts_kv ADD COLUMN json_v json;");
-                        executeQuery(conn, "ALTER TABLE ts_kv_latest ADD COLUMN json_v json;");
+                            executeQuery(conn, "ALTER TABLE ts_kv ADD COLUMN IF NOT EXISTS json_v json;");
+                            executeQuery(conn, "ALTER TABLE ts_kv_latest ADD COLUMN IF NOT EXISTS json_v json;");
+                        }
 
+                        log.info("Load TTL functions ...");
+                        loadSql(conn, LOAD_TTL_FUNCTIONS_SQL);
+
+                        executeQuery(conn, "UPDATE tb_schema_settings SET schema_version = 2005000");
                         log.info("schema timescale updated!");
                     }
                 }
@@ -113,13 +120,14 @@ public class TimescaleTsDatabaseUpgradeService extends AbstractSqlTsDatabaseUpgr
         }
     }
 
-    protected void loadSql(Connection conn) {
-        Path schemaUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", "2.4.3", LOAD_FUNCTIONS_SQL);
+    @Override
+    protected void loadSql(Connection conn, String fileName) {
+        Path schemaUpdateFile = Paths.get(installScripts.getDataDir(), "upgrade", "2.4.3", fileName);
         try {
             loadFunctions(schemaUpdateFile, conn);
-            log.info("Upgrade functions successfully loaded!");
+            log.info("Functions successfully loaded!");
         } catch (Exception e) {
-            log.info("Failed to load Timescale upgrade functions due to: {}", e.getMessage());
+            log.info("Failed to load PostgreSQL upgrade functions due to: {}", e.getMessage());
         }
     }
 }
\ No newline at end of file
diff --git a/application/src/main/java/org/thingsboard/server/service/ttl/AbstractTimeseriesCleanUpService.java b/application/src/main/java/org/thingsboard/server/service/ttl/AbstractTimeseriesCleanUpService.java
new file mode 100644
index 0000000000..2399450d86
--- /dev/null
+++ b/application/src/main/java/org/thingsboard/server/service/ttl/AbstractTimeseriesCleanUpService.java
@@ -0,0 +1,89 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.ttl;
+
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.thingsboard.server.dao.util.PsqlTsAnyDao;
+
+import java.sql.Connection;
+import java.sql.DriverManager;
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.sql.SQLWarning;
+import java.sql.Statement;
+
+@PsqlTsAnyDao
+@Slf4j
+public abstract class AbstractTimeseriesCleanUpService {
+
+    @Value("${sql.ttl.ts_key_value_ttl}")
+    protected long systemTtl;
+
+    @Value("${sql.ttl.enabled}")
+    private boolean ttlTaskExecutionEnabled;
+
+    @Value("${spring.datasource.url}")
+    private String dbUrl;
+
+    @Value("${spring.datasource.username}")
+    private String dbUserName;
+
+    @Value("${spring.datasource.password}")
+    private String dbPassword;
+
+    @Scheduled(initialDelayString = "${sql.ttl.execution_interval_ms}", fixedDelayString = "${sql.ttl.execution_interval_ms}")
+    public void cleanUp() {
+        if (ttlTaskExecutionEnabled) {
+            try (Connection conn = DriverManager.getConnection(dbUrl, dbUserName, dbPassword)) {
+                doCleanUp(conn);
+            } catch (SQLException e) {
+                log.error("SQLException occurred during TTL task execution ", e);
+            }
+        }
+    }
+
+    protected abstract void doCleanUp(Connection connection);
+
+    protected long executeQuery(Connection conn, String query) {
+        long removed = 0L;
+        try {
+            Statement statement = conn.createStatement();
+            ResultSet resultSet = statement.executeQuery(query);
+            getWarnings(statement);
+            resultSet.next();
+            removed = resultSet.getLong(1);
+            log.debug("Successfully executed query: {}", query);
+        } catch (SQLException e) {
+            log.debug("Failed to execute query: {} due to: {}", query, e.getMessage());
+        }
+        return removed;
+    }
+
+    private void getWarnings(Statement statement) throws SQLException {
+        SQLWarning warnings = statement.getWarnings();
+        if (warnings != null) {
+            log.debug("{}", warnings.getMessage());
+            SQLWarning nextWarning = warnings.getNextWarning();
+            while (nextWarning != null) {
+                log.debug("{}", nextWarning.getMessage());
+                nextWarning = nextWarning.getNextWarning();
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/application/src/main/java/org/thingsboard/server/service/ttl/PsqlTimeseriesCleanUpService.java b/application/src/main/java/org/thingsboard/server/service/ttl/PsqlTimeseriesCleanUpService.java
new file mode 100644
index 0000000000..ab344dc518
--- /dev/null
+++ b/application/src/main/java/org/thingsboard/server/service/ttl/PsqlTimeseriesCleanUpService.java
@@ -0,0 +1,41 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.ttl;
+
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import org.thingsboard.server.dao.model.ModelConstants;
+import org.thingsboard.server.dao.util.PsqlTsDao;
+
+import java.sql.Connection;
+
+@PsqlTsDao
+@Service
+@Slf4j
+public class PsqlTimeseriesCleanUpService extends AbstractTimeseriesCleanUpService {
+
+    @Value("${sql.postgres.ts_key_value_partitioning}")
+    private String partitionType;
+
+    @Override
+    protected void doCleanUp(Connection connection) {
+            long totalPartitionsRemoved = executeQuery(connection, "call drop_partitions_by_max_ttl('" + partitionType + "'," + systemTtl + ", 0);");
+            log.info("Total partitions removed by TTL: [{}]", totalPartitionsRemoved);
+            long totalEntitiesTelemetryRemoved = executeQuery(connection, "call cleanup_timeseries_by_ttl('" + ModelConstants.NULL_UUID_STR + "'," + systemTtl + ", 0);");
+            log.info("Total telemetry removed stats by TTL for entities: [{}]", totalEntitiesTelemetryRemoved);
+    }
+}
\ No newline at end of file
diff --git a/application/src/main/java/org/thingsboard/server/service/ttl/TimescaleTimeseriesCleanUpService.java b/application/src/main/java/org/thingsboard/server/service/ttl/TimescaleTimeseriesCleanUpService.java
new file mode 100644
index 0000000000..1dbdb4ad55
--- /dev/null
+++ b/application/src/main/java/org/thingsboard/server/service/ttl/TimescaleTimeseriesCleanUpService.java
@@ -0,0 +1,35 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.service.ttl;
+
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import org.thingsboard.server.dao.model.ModelConstants;
+import org.thingsboard.server.dao.util.TimescaleDBTsDao;
+
+import java.sql.Connection;
+
+@TimescaleDBTsDao
+@Service
+@Slf4j
+public class TimescaleTimeseriesCleanUpService extends AbstractTimeseriesCleanUpService {
+
+    @Override
+    protected void doCleanUp(Connection connection) {
+        long totalEntitiesTelemetryRemoved = executeQuery(connection, "call cleanup_timeseries_by_ttl('" + ModelConstants.NULL_UUID_STR + "'," + systemTtl + ", 0);");
+        log.info("Total telemetry removed stats by TTL for entities: [{}]", totalEntitiesTelemetryRemoved);
+    }
+}
\ No newline at end of file
diff --git a/application/src/main/resources/thingsboard.yml b/application/src/main/resources/thingsboard.yml
index 2d33b559ab..8dc7089bbe 100644
--- a/application/src/main/resources/thingsboard.yml
+++ b/application/src/main/resources/thingsboard.yml
@@ -214,6 +214,10 @@ sql:
     timescale:
       # Specify Interval size for new data chunks storage.
       chunk_time_interval: "${SQL_TIMESCALE_CHUNK_TIME_INTERVAL:604800000}"
+    ttl:
+      enabled: "${SQL_TTL_ENABLED:true}"
+      execution_interval_ms: "${SQL_TTL_EXECUTION_INTERVAL:86400000}" # Number of miliseconds
+      ts_key_value_ttl: "${SQL_TTL_TS_KEY_VALUE_TTL:0}" # Number of seconds
 
 # Actor system parameters
 actors:
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/alarm/AlarmService.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/alarm/AlarmService.java
index a62b7eabdc..bf5a494afb 100644
--- a/common/dao-api/src/main/java/org/thingsboard/server/dao/alarm/AlarmService.java
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/alarm/AlarmService.java
@@ -39,7 +39,7 @@ public interface AlarmService {
 
     ListenableFuture<Boolean> ackAlarm(TenantId tenantId, AlarmId alarmId, long ackTs);
 
-    ListenableFuture<Boolean> clearAlarm(TenantId tenantId, AlarmId alarmId, JsonNode details, long ackTs);
+    ListenableFuture<Boolean> clearAlarm(TenantId tenantId, AlarmId alarmId, JsonNode details, long clearTs);
 
     ListenableFuture<Alarm> findAlarmByIdAsync(TenantId tenantId, AlarmId alarmId);
 
diff --git a/common/dao-api/src/main/java/org/thingsboard/server/dao/util/PsqlTsDao.java b/common/dao-api/src/main/java/org/thingsboard/server/dao/util/PsqlTsDao.java
new file mode 100644
index 0000000000..cc0d9051e5
--- /dev/null
+++ b/common/dao-api/src/main/java/org/thingsboard/server/dao/util/PsqlTsDao.java
@@ -0,0 +1,21 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.thingsboard.server.dao.util;
+
+import org.springframework.boot.autoconfigure.condition.ConditionalOnExpression;
+
+@ConditionalOnExpression("'${database.ts.type}'=='sql' && '${spring.jpa.database-platform}'=='org.hibernate.dialect.PostgreSQLDialect'")
+public @interface PsqlTsDao { }
\ No newline at end of file
diff --git a/dao/src/main/resources/sql/schema-timescale.sql b/dao/src/main/resources/sql/schema-timescale.sql
index b95c8b86ba..32e2a78620 100644
--- a/dao/src/main/resources/sql/schema-timescale.sql
+++ b/dao/src/main/resources/sql/schema-timescale.sql
@@ -44,4 +44,122 @@ CREATE TABLE IF NOT EXISTS ts_kv_latest (
     dbl_v double precision,
     json_v json,
     CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key)
-);
\ No newline at end of file
+);
+
+CREATE TABLE IF NOT EXISTS tb_schema_settings
+(
+    schema_version bigint NOT NULL,
+    CONSTRAINT tb_schema_settings_pkey PRIMARY KEY (schema_version)
+);
+
+INSERT INTO tb_schema_settings (schema_version) VALUES (2005000);
+
+CREATE OR REPLACE FUNCTION to_uuid(IN entity_id varchar, OUT uuid_id uuid) AS
+$$
+BEGIN
+    uuid_id := substring(entity_id, 8, 8) || '-' || substring(entity_id, 4, 4) || '-1' || substring(entity_id, 1, 3) ||
+               '-' || substring(entity_id, 16, 4) || '-' || substring(entity_id, 20, 12);
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_device_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                            OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(device.id) as entity_id FROM device WHERE tenant_id = %L and customer_id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_asset_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                           OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(asset.id) as entity_id FROM asset WHERE tenant_id = %L and customer_id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_customer_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                              OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(customer.id) as entity_id FROM customer WHERE tenant_id = %L and id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE PROCEDURE cleanup_timeseries_by_ttl(IN null_uuid varchar(31),
+                                                      IN system_ttl bigint, INOUT deleted bigint)
+    LANGUAGE plpgsql AS
+$$
+DECLARE
+    tenant_cursor CURSOR FOR select tenant.id as tenant_id
+                             from tenant;
+    tenant_id_record     varchar;
+    customer_id_record   varchar;
+    tenant_ttl           bigint;
+    customer_ttl         bigint;
+    deleted_for_entities bigint;
+    tenant_ttl_ts        bigint;
+    customer_ttl_ts      bigint;
+BEGIN
+    OPEN tenant_cursor;
+    FETCH tenant_cursor INTO tenant_id_record;
+    WHILE FOUND
+        LOOP
+            EXECUTE format(
+                    'select attribute_kv.long_v from attribute_kv where attribute_kv.entity_id = %L and attribute_kv.attribute_key = %L',
+                    tenant_id_record, 'TTL') INTO tenant_ttl;
+            if tenant_ttl IS NULL THEN
+                tenant_ttl := system_ttl;
+            END IF;
+            IF tenant_ttl > 0 THEN
+                tenant_ttl_ts := (EXTRACT(EPOCH FROM current_timestamp) * 1000 - tenant_ttl::bigint * 1000)::bigint;
+                deleted_for_entities := delete_device_records_from_ts_kv(tenant_id_record, null_uuid, tenant_ttl_ts);
+                deleted := deleted + deleted_for_entities;
+                RAISE NOTICE '% telemetry removed for devices where tenant_id = %', deleted_for_entities, tenant_id_record;
+                deleted_for_entities := delete_asset_records_from_ts_kv(tenant_id_record, null_uuid, tenant_ttl_ts);
+                deleted := deleted + deleted_for_entities;
+                RAISE NOTICE '% telemetry removed for assets where tenant_id = %', deleted_for_entities, tenant_id_record;
+            END IF;
+            FOR customer_id_record IN
+                SELECT customer.id AS customer_id FROM customer WHERE customer.tenant_id = tenant_id_record
+                LOOP
+                    EXECUTE format(
+                            'select attribute_kv.long_v from attribute_kv where attribute_kv.entity_id = %L and attribute_kv.attribute_key = %L',
+                            customer_id_record, 'TTL') INTO customer_ttl;
+                    IF customer_ttl IS NULL THEN
+                        customer_ttl_ts := tenant_ttl_ts;
+                    ELSE
+                        IF customer_ttl > 0 THEN
+                            customer_ttl_ts :=
+                                    (EXTRACT(EPOCH FROM current_timestamp) * 1000 -
+                                     customer_ttl::bigint * 1000)::bigint;
+                        END IF;
+                    END IF;
+                    IF customer_ttl_ts IS NOT NULL AND customer_ttl_ts > 0 THEN
+                        deleted_for_entities :=
+                                delete_customer_records_from_ts_kv(tenant_id_record, customer_id_record,
+                                                                   customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for customer with id = % where tenant_id = %', deleted_for_entities, customer_id_record, tenant_id_record;
+                        deleted_for_entities :=
+                                delete_device_records_from_ts_kv(tenant_id_record, customer_id_record,
+                                                                 customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for devices where tenant_id = % and customer_id = %', deleted_for_entities, tenant_id_record, customer_id_record;
+                        deleted_for_entities := delete_asset_records_from_ts_kv(tenant_id_record,
+                                                                                customer_id_record,
+                                                                                customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for assets where tenant_id = % and customer_id = %', deleted_for_entities, tenant_id_record, customer_id_record;
+                    END IF;
+                END LOOP;
+            FETCH tenant_cursor INTO tenant_id_record;
+        END LOOP;
+END
+$$;
diff --git a/dao/src/main/resources/sql/schema-ts-psql.sql b/dao/src/main/resources/sql/schema-ts-psql.sql
index 32b6762c8e..3789444106 100644
--- a/dao/src/main/resources/sql/schema-ts-psql.sql
+++ b/dao/src/main/resources/sql/schema-ts-psql.sql
@@ -14,31 +14,260 @@
 -- limitations under the License.
 --
 
-CREATE TABLE IF NOT EXISTS ts_kv (
-    entity_id uuid NOT NULL,
-    key int NOT NULL,
-    ts bigint NOT NULL,
-    bool_v boolean,
-    str_v varchar(10000000),
-    long_v bigint,
-    dbl_v double precision,
-    json_v json
+CREATE TABLE IF NOT EXISTS ts_kv
+(
+    entity_id uuid   NOT NULL,
+    key       int    NOT NULL,
+    ts        bigint NOT NULL,
+    bool_v    boolean,
+    str_v     varchar(10000000),
+    long_v    bigint,
+    dbl_v     double precision,
+    json_v    json
 ) PARTITION BY RANGE (ts);
 
-CREATE TABLE IF NOT EXISTS ts_kv_latest (
-    entity_id uuid NOT NULL,
-    key int NOT NULL,
-    ts bigint NOT NULL,
-    bool_v boolean,
-    str_v varchar(10000000),
-    long_v bigint,
-    dbl_v double precision,
-    json_v json,
+CREATE TABLE IF NOT EXISTS ts_kv_latest
+(
+    entity_id uuid   NOT NULL,
+    key       int    NOT NULL,
+    ts        bigint NOT NULL,
+    bool_v    boolean,
+    str_v     varchar(10000000),
+    long_v    bigint,
+    dbl_v     double precision,
+    json_v    json,
     CONSTRAINT ts_kv_latest_pkey PRIMARY KEY (entity_id, key)
 );
 
-CREATE TABLE IF NOT EXISTS ts_kv_dictionary (
-    key varchar(255) NOT NULL,
+CREATE TABLE IF NOT EXISTS ts_kv_dictionary
+(
+    key    varchar(255) NOT NULL,
     key_id serial UNIQUE,
     CONSTRAINT ts_key_id_pkey PRIMARY KEY (key)
-);
\ No newline at end of file
+);
+
+CREATE TABLE IF NOT EXISTS tb_schema_settings
+(
+    schema_version bigint NOT NULL,
+    CONSTRAINT tb_schema_settings_pkey PRIMARY KEY (schema_version)
+);
+
+INSERT INTO tb_schema_settings (schema_version) VALUES (2005000);
+
+CREATE OR REPLACE PROCEDURE drop_partitions_by_max_ttl(IN partition_type varchar, IN system_ttl bigint, INOUT deleted bigint)
+    LANGUAGE plpgsql AS
+$$
+DECLARE
+    max_tenant_ttl            bigint;
+    max_customer_ttl          bigint;
+    max_ttl                   bigint;
+    date                      timestamp;
+    partition_by_max_ttl_date varchar;
+    partition_month           varchar;
+    partition_day             varchar;
+    partition_year            varchar;
+    partition                 varchar;
+    partition_to_delete       varchar;
+
+
+BEGIN
+    SELECT max(attribute_kv.long_v)
+    FROM tenant
+             INNER JOIN attribute_kv ON tenant.id = attribute_kv.entity_id
+    WHERE attribute_kv.attribute_key = 'TTL'
+    into max_tenant_ttl;
+    SELECT max(attribute_kv.long_v)
+    FROM customer
+             INNER JOIN attribute_kv ON customer.id = attribute_kv.entity_id
+    WHERE attribute_kv.attribute_key = 'TTL'
+    into max_customer_ttl;
+    max_ttl := GREATEST(system_ttl, max_customer_ttl, max_tenant_ttl);
+    if max_ttl IS NOT NULL AND max_ttl > 0 THEN
+        date := to_timestamp(EXTRACT(EPOCH FROM current_timestamp) - (max_ttl / 1000));
+        partition_by_max_ttl_date := get_partition_by_max_ttl_date(partition_type, date);
+        RAISE NOTICE 'Partition by max ttl: %', partition_by_max_ttl_date;
+        IF partition_by_max_ttl_date IS NOT NULL THEN
+            CASE
+                WHEN partition_type = 'DAYS' THEN
+                    partition_year := SPLIT_PART(partition_by_max_ttl_date, '_', 3);
+                    partition_month := SPLIT_PART(partition_by_max_ttl_date, '_', 4);
+                    partition_day := SPLIT_PART(partition_by_max_ttl_date, '_', 5);
+                WHEN partition_type = 'MONTHS' THEN
+                    partition_year := SPLIT_PART(partition_by_max_ttl_date, '_', 3);
+                    partition_month := SPLIT_PART(partition_by_max_ttl_date, '_', 4);
+                ELSE
+                    partition_year := SPLIT_PART(partition_by_max_ttl_date, '_', 3);
+                END CASE;
+            FOR partition IN SELECT tablename
+                             FROM pg_tables
+                             WHERE schemaname = 'public'
+                               AND tablename like 'ts_kv_' || '%'
+                               AND tablename != 'ts_kv_latest'
+                               AND tablename != 'ts_kv_dictionary'
+                LOOP
+                    IF partition != partition_by_max_ttl_date THEN
+                        IF partition_year IS NOT NULL THEN
+                            IF SPLIT_PART(partition, '_', 3)::integer < partition_year::integer THEN
+                                partition_to_delete := partition;
+                            ELSE
+                                IF partition_month IS NOT NULL THEN
+                                    IF SPLIT_PART(partition, '_', 4)::integer < partition_month::integer THEN
+                                        partition_to_delete := partition;
+                                    ELSE
+                                        IF partition_day IS NOT NULL THEN
+                                            IF SPLIT_PART(partition, '_', 5)::integer < partition_day::integer THEN
+                                                partition_to_delete := partition;
+                                            END IF;
+                                        END IF;
+                                    END IF;
+                                END IF;
+                            END IF;
+                        END IF;
+                    END IF;
+                    IF partition_to_delete IS NOT NULL THEN
+                        RAISE NOTICE 'Partition to delete by max ttl: %', partition_to_delete;
+                        EXECUTE format('DROP TABLE %I', partition_to_delete);
+                        deleted := deleted + 1;
+                    END IF;
+                END LOOP;
+        END IF;
+    END IF;
+END
+$$;
+
+CREATE OR REPLACE FUNCTION get_partition_by_max_ttl_date(IN partition_type varchar, IN date timestamp, OUT partition varchar) AS
+$$
+BEGIN
+    CASE
+        WHEN partition_type = 'DAYS' THEN
+            partition := 'ts_kv_' || to_char(date, 'yyyy') || '_' || to_char(date, 'MM') || '_' || to_char(date, 'dd');
+        WHEN partition_type = 'MONTHS' THEN
+            partition := 'ts_kv_' || to_char(date, 'yyyy') || '_' || to_char(date, 'MM');
+        WHEN partition_type = 'YEARS' THEN
+            partition := 'ts_kv_' || to_char(date, 'yyyy');
+        WHEN partition_type = 'INDEFINITE' THEN
+            partition := NULL;
+        ELSE
+            partition := NULL;
+        END CASE;
+    IF partition IS NOT NULL THEN
+        IF NOT EXISTS(SELECT
+                      FROM pg_tables
+                      WHERE schemaname = 'public'
+                        AND tablename = partition) THEN
+            partition := NULL;
+            RAISE NOTICE 'Failed to found partition by ttl';
+        END IF;
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION to_uuid(IN entity_id varchar, OUT uuid_id uuid) AS
+$$
+BEGIN
+    uuid_id := substring(entity_id, 8, 8) || '-' || substring(entity_id, 4, 4) || '-1' || substring(entity_id, 1, 3) ||
+               '-' || substring(entity_id, 16, 4) || '-' || substring(entity_id, 20, 12);
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_device_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                            OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(device.id) as entity_id FROM device WHERE tenant_id = %L and customer_id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_asset_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                           OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(asset.id) as entity_id FROM asset WHERE tenant_id = %L and customer_id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION delete_customer_records_from_ts_kv(tenant_id varchar, customer_id varchar, ttl bigint,
+                                                              OUT deleted bigint) AS
+$$
+BEGIN
+    EXECUTE format(
+            'WITH deleted AS (DELETE FROM ts_kv WHERE entity_id IN (SELECT to_uuid(customer.id) as entity_id FROM customer WHERE tenant_id = %L and id = %L) AND ts < %L::bigint RETURNING *) SELECT count(*) FROM deleted',
+            tenant_id, customer_id, ttl) into deleted;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE PROCEDURE cleanup_timeseries_by_ttl(IN null_uuid varchar(31),
+                                                      IN system_ttl bigint, INOUT deleted bigint)
+    LANGUAGE plpgsql AS
+$$
+DECLARE
+    tenant_cursor CURSOR FOR select tenant.id as tenant_id
+                             from tenant;
+    tenant_id_record     varchar;
+    customer_id_record   varchar;
+    tenant_ttl           bigint;
+    customer_ttl         bigint;
+    deleted_for_entities bigint;
+    tenant_ttl_ts        bigint;
+    customer_ttl_ts      bigint;
+BEGIN
+    OPEN tenant_cursor;
+    FETCH tenant_cursor INTO tenant_id_record;
+    WHILE FOUND
+        LOOP
+            EXECUTE format(
+                    'select attribute_kv.long_v from attribute_kv where attribute_kv.entity_id = %L and attribute_kv.attribute_key = %L',
+                    tenant_id_record, 'TTL') INTO tenant_ttl;
+            if tenant_ttl IS NULL THEN
+                tenant_ttl := system_ttl;
+            END IF;
+            IF tenant_ttl > 0 THEN
+                tenant_ttl_ts := (EXTRACT(EPOCH FROM current_timestamp) * 1000 - tenant_ttl::bigint * 1000)::bigint;
+                deleted_for_entities := delete_device_records_from_ts_kv(tenant_id_record, null_uuid, tenant_ttl_ts);
+                deleted := deleted + deleted_for_entities;
+                RAISE NOTICE '% telemetry removed for devices where tenant_id = %', deleted_for_entities, tenant_id_record;
+                deleted_for_entities := delete_asset_records_from_ts_kv(tenant_id_record, null_uuid, tenant_ttl_ts);
+                deleted := deleted + deleted_for_entities;
+                RAISE NOTICE '% telemetry removed for assets where tenant_id = %', deleted_for_entities, tenant_id_record;
+            END IF;
+            FOR customer_id_record IN
+                SELECT customer.id AS customer_id FROM customer WHERE customer.tenant_id = tenant_id_record
+                LOOP
+                    EXECUTE format(
+                            'select attribute_kv.long_v from attribute_kv where attribute_kv.entity_id = %L and attribute_kv.attribute_key = %L',
+                            customer_id_record, 'TTL') INTO customer_ttl;
+                    IF customer_ttl IS NULL THEN
+                        customer_ttl_ts := tenant_ttl_ts;
+                    ELSE
+                        IF customer_ttl > 0 THEN
+                            customer_ttl_ts :=
+                                    (EXTRACT(EPOCH FROM current_timestamp) * 1000 -
+                                     customer_ttl::bigint * 1000)::bigint;
+                        END IF;
+                    END IF;
+                    IF customer_ttl_ts IS NOT NULL AND customer_ttl_ts > 0 THEN
+                        deleted_for_entities :=
+                                delete_customer_records_from_ts_kv(tenant_id_record, customer_id_record,
+                                                                   customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for customer with id = % where tenant_id = %', deleted_for_entities, customer_id_record, tenant_id_record;
+                        deleted_for_entities :=
+                                delete_device_records_from_ts_kv(tenant_id_record, customer_id_record,
+                                                                 customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for devices where tenant_id = % and customer_id = %', deleted_for_entities, tenant_id_record, customer_id_record;
+                        deleted_for_entities := delete_asset_records_from_ts_kv(tenant_id_record,
+                                                                                customer_id_record,
+                                                                                customer_ttl_ts);
+                        deleted := deleted + deleted_for_entities;
+                        RAISE NOTICE '% telemetry removed for assets where tenant_id = % and customer_id = %', deleted_for_entities, tenant_id_record, customer_id_record;
+                    END IF;
+                END LOOP;
+            FETCH tenant_cursor INTO tenant_id_record;
+        END LOOP;
+END
+$$;
diff --git a/netty-mqtt/src/main/java/org/thingsboard/mqtt/MqttClientImpl.java b/netty-mqtt/src/main/java/org/thingsboard/mqtt/MqttClientImpl.java
index 169779b530..aef2cad684 100644
--- a/netty-mqtt/src/main/java/org/thingsboard/mqtt/MqttClientImpl.java
+++ b/netty-mqtt/src/main/java/org/thingsboard/mqtt/MqttClientImpl.java
@@ -407,8 +407,12 @@ final class MqttClientImpl implements MqttClient {
     }
 
     private MqttMessageIdVariableHeader getNewMessageId() {
-        this.nextMessageId.compareAndSet(0xffff, 1);
-        return MqttMessageIdVariableHeader.from(this.nextMessageId.getAndIncrement());
+        int messageId;
+        synchronized (this.nextMessageId) {
+            this.nextMessageId.compareAndSet(0xffff, 1);
+            messageId = this.nextMessageId.getAndIncrement();
+        }
+        return MqttMessageIdVariableHeader.from(messageId);
     }
 
     private Future<Void> createSubscription(String topic, MqttHandler handler, boolean once, MqttQoS qos) {
diff --git a/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js b/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
index e821549e09..196f9a12e6 100644
--- a/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
+++ b/rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
@@ -12,5 +12,5 @@
 
     See the Apache Version 2.0 License for specific language governing permissions
     and limitations under the License.
-    ***************************************************************************** */var g=function(e,t){return(g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function y(e,t){function r(){this.constructor=e}g(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}function b(e,t,r,n){var a,o=arguments.length,i=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(i=(o<3?a(i):o>3?a(t,r,i):a(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i}function h(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function C(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}}var v,F=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.emptyConfigForm},r.prototype.onConfigurationSet=function(e){this.emptyConfigForm=this.fb.group({})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-node-empty-config",template:"<div></div>"}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),T=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.attributeScopes=Object.keys(a.AttributeScope),n.telemetryTypeTranslationsMap=a.telemetryTypeTranslations,n}return y(r,e),r.prototype.configForm=function(){return this.attributesConfigForm},r.prototype.onConfigurationSet=function(e){this.attributesConfigForm=this.fb.group({scope:[e?e.scope:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-attributes-config",template:'<section [formGroup]="attributesConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>attribute.attributes-scope</mat-label>\n    <mat-select formControlName="scope" required>\n      <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n        {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),x=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.timeseriesConfigForm},r.prototype.onConfigurationSet=function(e){this.timeseriesConfigForm=this.fb.group({defaultTTL:[e?e.defaultTTL:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-timeseries-config",template:'<section [formGroup]="timeseriesConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.default-ttl</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="defaultTTL" required>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'required\')">\n      {{ \'tb.rulenode.default-ttl-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-default-ttl-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),q=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.rpcRequestConfigForm},r.prototype.onConfigurationSet=function(e){this.rpcRequestConfigForm=this.fb.group({timeoutInSeconds:[e?e.timeoutInSeconds:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rpc-request-config",template:'<section [formGroup]="rpcRequestConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.timeout-sec</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="timeoutInSeconds" required>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.timeout-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-timeout-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),S=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.logConfigForm},r.prototype.onConfigurationSet=function(e){this.logConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.logConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"string",this.translate.instant("tb.rulenode.to-string"),"ToString",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.logConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-log-config",template:'<section [formGroup]="logConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.to-string</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="ToString"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-to-string-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),I=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.assignCustomerConfigForm},r.prototype.onConfigurationSet=function(e){this.assignCustomerConfigForm=this.fb.group({customerNamePattern:[e?e.customerNamePattern:null,[i.Validators.required]],createCustomerIfNotExists:[!!e&&e.createCustomerIfNotExists,[]],customerCacheExpiration:[e?e.customerCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-assign-to-customer-config",template:'<section [formGroup]="assignCustomerConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n    <input required matInput formControlName="customerNamePattern">\n    <mat-error *ngIf="assignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-name-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-checkbox fxFlex formControlName="createCustomerIfNotExists" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.create-customer-if-not-exists\' | translate }}\n  </mat-checkbox>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="customerCacheExpiration">\n    <mat-error *ngIf="assignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="assignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.customer-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),k=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.clearAlarmConfigForm},r.prototype.onConfigurationSet=function(e){this.clearAlarmConfigForm=this.fb.group({alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[i.Validators.required]],alarmType:[e?e.alarmType:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.clearAlarmConfigForm.get("alarmDetailsBuildJs").value;this.nodeScriptTestService.testNodeScript(t,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.clearAlarmConfigForm.get("alarmDetailsBuildJs").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-clear-alarm-config",template:'<section [formGroup]="clearAlarmConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.alarm-details-builder</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="alarmDetailsBuildJs"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-details-function\' | translate }}\n    </button>\n  </div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.alarm-type</mat-label>\n    <input required matInput formControlName="alarmType">\n    <mat-error *ngIf="clearAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n      {{ \'tb.rulenode.alarm-type-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.entity-type-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),N=function(e){function r(t,r,n,o){var i=e.call(this,t)||this;return i.store=t,i.fb=r,i.nodeScriptTestService=n,i.translate=o,i.alarmSeverities=Object.keys(a.AlarmSeverity),i.alarmSeverityTranslationMap=a.alarmSeverityTranslations,i.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],i}return y(r,e),r.prototype.configForm=function(){return this.createAlarmConfigForm},r.prototype.onConfigurationSet=function(e){this.createAlarmConfigForm=this.fb.group({alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[i.Validators.required]],useMessageAlarmData:[!!e&&e.useMessageAlarmData,[]],alarmType:[e?e.alarmType:null,[]],severity:[e?e.severity:null,[]],propagate:[!!e&&e.propagate,[]],relationTypes:[e?e.relationTypes:null,[]]})},r.prototype.validatorTriggers=function(){return["useMessageAlarmData"]},r.prototype.updateValidators=function(e){this.createAlarmConfigForm.get("useMessageAlarmData").value?(this.createAlarmConfigForm.get("alarmType").setValidators([]),this.createAlarmConfigForm.get("severity").setValidators([])):(this.createAlarmConfigForm.get("alarmType").setValidators([i.Validators.required]),this.createAlarmConfigForm.get("severity").setValidators([i.Validators.required])),this.createAlarmConfigForm.get("alarmType").updateValueAndValidity({emitEvent:e}),this.createAlarmConfigForm.get("severity").updateValueAndValidity({emitEvent:e})},r.prototype.testScript=function(){var e=this,t=this.createAlarmConfigForm.get("alarmDetailsBuildJs").value;this.nodeScriptTestService.testNodeScript(t,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.createAlarmConfigForm.get("alarmDetailsBuildJs").setValue(t)}))},r.prototype.removeKey=function(e,t){var r=this.createAlarmConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.createAlarmConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.createAlarmConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.createAlarmConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-create-alarm-config",template:'<section [formGroup]="createAlarmConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.alarm-details-builder</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="alarmDetailsBuildJs"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-details-function\' | translate }}\n    </button>\n  </div>\n  <mat-checkbox formControlName="useMessageAlarmData" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-message-alarm-data\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === false">\n    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex class="mat-block" style="padding-bottom: 16px;">\n        <mat-label translate>tb.rulenode.alarm-type</mat-label>\n        <input required matInput formControlName="alarmType">\n        <mat-error *ngIf="createAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n          {{ \'tb.rulenode.alarm-type-required\' | translate }}\n        </mat-error>\n        <mat-hint innerHTML="{{ \'tb.rulenode.entity-type-pattern-hint\' | translate }}"></mat-hint>\n      </mat-form-field>\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.alarm-severity</mat-label>\n        <mat-select formControlName="severity" required>\n          <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">\n            {{ alarmSeverityTranslationMap.get(severity) | translate }}\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="createAlarmConfigForm.get(\'severity\').hasError(\'required\')">\n          {{ \'tb.rulenode.alarm-severity-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </section>\n    <mat-checkbox formControlName="propagate" style="padding-bottom: 16px;">\n      {{ \'tb.rulenode.propagate\' | translate }}\n    </mat-checkbox>\n    <section *ngIf="createAlarmConfigForm.get(\'propagate\').value === true">\n      <mat-form-field floatLabel="always" class="mat-block">\n        <mat-label translate>tb.rulenode.relation-types-list</mat-label>\n        <mat-chip-list #relationTypesChipList>\n          <mat-chip\n            *ngFor="let key of createAlarmConfigForm.get(\'relationTypes\').value;"\n            (removed)="removeKey(key, \'relationTypes\')">\n            {{key}}\n            <mat-icon matChipRemove>close</mat-icon>\n          </mat-chip>\n          <input matInput type="text" placeholder="{{\'tb.rulenode.relation-types-list\' | translate}}"\n                 style="max-width: 200px;"\n                 [matChipInputFor]="relationTypesChipList"\n                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n                 (matChipInputTokenEnd)="addKey($event, \'relationTypes\')"\n                 [matChipInputAddOnBlur]="true">\n        </mat-chip-list>\n        <mat-hint innerHTML="{{ \'tb.rulenode.relation-types-list-hint\' | translate }}"></mat-hint>\n      </mat-form-field>\n    </section>\n  </section>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),V=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.entityType=a.EntityType,n}return y(r,e),r.prototype.configForm=function(){return this.createRelationConfigForm},r.prototype.onConfigurationSet=function(e){this.createRelationConfigForm=this.fb.group({direction:[e?e.direction:null,[i.Validators.required]],entityType:[e?e.entityType:null,[i.Validators.required]],entityNamePattern:[e?e.entityNamePattern:null,[]],entityTypePattern:[e?e.entityTypePattern:null,[]],relationType:[e?e.relationType:null,[i.Validators.required]],createEntityIfNotExists:[!!e&&e.createEntityIfNotExists,[]],removeCurrentRelations:[!!e&&e.removeCurrentRelations,[]],changeOriginatorToRelatedEntity:[!!e&&e.changeOriginatorToRelatedEntity,[]],entityCacheExpiration:[e?e.entityCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.prototype.validatorTriggers=function(){return["entityType"]},r.prototype.updateValidators=function(e){var t=this.createRelationConfigForm.get("entityType").value;t?this.createRelationConfigForm.get("entityNamePattern").setValidators([i.Validators.required]):this.createRelationConfigForm.get("entityNamePattern").setValidators([]),!t||t!==a.EntityType.DEVICE&&t!==a.EntityType.ASSET?this.createRelationConfigForm.get("entityTypePattern").setValidators([]):this.createRelationConfigForm.get("entityTypePattern").setValidators([i.Validators.required]),this.createRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e}),this.createRelationConfigForm.get("entityTypePattern").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-create-relation-config",template:'<section [formGroup]="createRelationConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="min-width: 100px;">\n    <mat-label translate>relation.direction</mat-label>\n    <mat-select required matInput formControlName="direction">\n      <mat-option *ngFor="let type of directionTypes" [value]="type">\n        {{ directionTypeTranslations.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout="row" fxLayoutGap="8px">\n    <tb-entity-type-select\n      showLabel\n      style="min-width: 100px;"\n      required\n      formControlName="entityType">\n    </tb-entity-type-select>\n    <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value" fxFlex class="mat-block" style="padding-bottom: 32px;">\n      <mat-label translate>tb.rulenode.entity-name-pattern</mat-label>\n      <input required matInput formControlName="entityNamePattern">\n      <mat-error *ngIf="createRelationConfigForm.get(\'entityNamePattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.entity-name-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.entity-name-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n    <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                           createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"\n                    fxFlex class="mat-block" style="padding-bottom: 32px;">\n      <mat-label translate>tb.rulenode.entity-type-pattern</mat-label>\n      <input required matInput formControlName="entityTypePattern">\n      <mat-error *ngIf="createRelationConfigForm.get(\'entityTypePattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.entity-type-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.entity-type-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.relation-type-pattern</mat-label>\n    <input required matInput formControlName="relationType">\n    <mat-error *ngIf="createRelationConfigForm.get(\'relationType\').hasError(\'required\')">\n      {{ \'tb.rulenode.relation-type-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.relation-type-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <section *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.CUSTOMER ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.ASSET">\n    <mat-checkbox formControlName="createEntityIfNotExists">\n      {{ \'tb.rulenode.create-entity-if-not-exists\' | translate }}\n    </mat-checkbox>\n    <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.create-entity-if-not-exists-hint</div>\n  </section>\n  <mat-checkbox formControlName="removeCurrentRelations">\n    {{ \'tb.rulenode.remove-current-relations\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.remove-current-relations-hint</div>\n  <mat-checkbox formControlName="changeOriginatorToRelatedEntity">\n    {{ \'tb.rulenode.change-originator-to-related-entity\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.change-originator-to-related-entity-hint</div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.entity-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="entityCacheExpiration">\n    <mat-error *ngIf="createRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.entity-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="createRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.entity-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.entity-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),E=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.msgDelayConfigForm},r.prototype.onConfigurationSet=function(e){this.msgDelayConfigForm=this.fb.group({useMetadataPeriodInSecondsPatterns:[!!e&&e.useMetadataPeriodInSecondsPatterns,[]],periodInSeconds:[e?e.periodInSeconds:null,[]],periodInSecondsPattern:[e?e.periodInSecondsPattern:null,[]],maxPendingMsgs:[e?e.maxPendingMsgs:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(1e5)]]})},r.prototype.validatorTriggers=function(){return["useMetadataPeriodInSecondsPatterns"]},r.prototype.updateValidators=function(e){this.msgDelayConfigForm.get("useMetadataPeriodInSecondsPatterns").value?(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([i.Validators.required]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([])):(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([i.Validators.required,i.Validators.min(0)])),this.msgDelayConfigForm.get("periodInSecondsPattern").updateValueAndValidity({emitEvent:e}),this.msgDelayConfigForm.get("periodInSeconds").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-msg-delay-config",template:'<section [formGroup]="msgDelayConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useMetadataPeriodInSecondsPatterns">\n    {{ \'tb.rulenode.use-metadata-period-in-seconds-patterns\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.use-metadata-period-in-seconds-patterns-hint</div>\n  <mat-form-field *ngIf="msgDelayConfigForm.get(\'useMetadataPeriodInSecondsPatterns\').value !== true; else periodInSecondsPattern"\n                  class="mat-block">\n    <mat-label translate>tb.rulenode.period-seconds</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.period-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-period-0-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <ng-template #periodInSecondsPattern>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.period-in-seconds-pattern</mat-label>\n      <input required matInput formControlName="periodInSecondsPattern">\n      <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSecondsPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.period-in-seconds-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.period-in-seconds-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </ng-template>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.max-pending-messages</mat-label>\n    <input required type="number" min="1" max="100000" step="1" matInput formControlName="maxPendingMsgs">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'required\')">\n      {{ \'tb.rulenode.max-pending-messages-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'min\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),A=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.entityType=a.EntityType,n}return y(r,e),r.prototype.configForm=function(){return this.deleteRelationConfigForm},r.prototype.onConfigurationSet=function(e){this.deleteRelationConfigForm=this.fb.group({deleteForSingleEntity:[!!e&&e.deleteForSingleEntity,[]],direction:[e?e.direction:null,[i.Validators.required]],entityType:[e?e.entityType:null,[]],entityNamePattern:[e?e.entityNamePattern:null,[]],relationType:[e?e.relationType:null,[i.Validators.required]],entityCacheExpiration:[e?e.entityCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.prototype.validatorTriggers=function(){return["deleteForSingleEntity","entityType"]},r.prototype.updateValidators=function(e){var t=this.deleteRelationConfigForm.get("deleteForSingleEntity").value,r=this.deleteRelationConfigForm.get("entityType").value;t?this.deleteRelationConfigForm.get("entityType").setValidators([i.Validators.required]):this.deleteRelationConfigForm.get("entityType").setValidators([]),t&&r?this.deleteRelationConfigForm.get("entityNamePattern").setValidators([i.Validators.required]):this.deleteRelationConfigForm.get("entityNamePattern").setValidators([]),this.deleteRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:!1}),this.deleteRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-delete-relation-config",template:'<section [formGroup]="deleteRelationConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="deleteForSingleEntity">\n    {{ \'tb.rulenode.delete-relation-to-specific-entity\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.delete-relation-hint</div>\n  <mat-form-field class="mat-block" style="min-width: 100px;">\n    <mat-label translate>relation.direction</mat-label>\n    <mat-select required matInput formControlName="direction">\n      <mat-option *ngFor="let type of directionTypes" [value]="type">\n        {{ directionTypeTranslations.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div *ngIf="deleteRelationConfigForm.get(\'deleteForSingleEntity\').value" fxLayout="row" fxLayoutGap="8px">\n    <tb-entity-type-select\n      showLabel\n      style="min-width: 100px;"\n      required\n      formControlName="entityType">\n    </tb-entity-type-select>\n    <mat-form-field *ngIf="deleteRelationConfigForm.get(\'entityType\').value" fxFlex class="mat-block" style="padding-bottom: 32px;">\n      <mat-label translate>tb.rulenode.entity-name-pattern</mat-label>\n      <input required matInput formControlName="entityNamePattern">\n      <mat-error *ngIf="deleteRelationConfigForm.get(\'entityNamePattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.entity-name-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.entity-name-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.relation-type-pattern</mat-label>\n    <input required matInput formControlName="relationType">\n    <mat-error *ngIf="deleteRelationConfigForm.get(\'relationType\').hasError(\'required\')">\n      {{ \'tb.rulenode.relation-type-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.relation-type-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.entity-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="entityCacheExpiration">\n    <mat-error *ngIf="deleteRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.entity-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="deleteRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.entity-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.entity-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),L=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.generatorConfigForm},r.prototype.onConfigurationSet=function(e){this.generatorConfigForm=this.fb.group({msgCount:[e?e.msgCount:null,[i.Validators.required,i.Validators.min(0)]],periodInSeconds:[e?e.periodInSeconds:null,[i.Validators.required,i.Validators.min(1)]],originator:[e?e.originator:null,[]],jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.prepareInputConfig=function(e){return e&&(e.originatorId&&e.originatorType?e.originator={id:e.originatorId,entityType:e.originatorType}:e.originator=null,delete e.originatorId,delete e.originatorType),e},r.prototype.prepareOutputConfig=function(e){return e.originator?(e.originatorId=e.originator.id,e.originatorType=e.originator.entityType):(e.originatorId=null,e.originatorType=null),delete e.originator,e},r.prototype.testScript=function(){var e=this,t=this.generatorConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"generate",this.translate.instant("tb.rulenode.generator"),"Generate",["prevMsg","prevMetadata","prevMsgType"],this.ruleNodeId).subscribe((function(t){t&&e.generatorConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-generator-config",template:'<section [formGroup]="generatorConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.message-count</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="msgCount">\n    <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'required\')">\n      {{ \'tb.rulenode.message-count-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-message-count-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.period-seconds</mat-label>\n    <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">\n    <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.period-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-period-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div fxLayout="column">\n    <label class="tb-small">{{ \'tb.rulenode.originator\' | translate }}</label>\n    <tb-entity-select\n      required="false"\n      formControlName="originator">\n    </tb-entity-select>\n  </div>\n  <label translate class="tb-title no-padding">tb.rulenode.generate</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Generate"\n              [functionArgs]="[\'prevMsg\', \'prevMetadata\', \'prevMsgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-generator-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent);!function(e){e.CUSTOMER="CUSTOMER",e.TENANT="TENANT",e.RELATED="RELATED",e.ALARM_ORIGINATOR="ALARM_ORIGINATOR"}(v||(v={}));var M,P=new Map([[v.CUSTOMER,"tb.rulenode.originator-customer"],[v.TENANT,"tb.rulenode.originator-tenant"],[v.RELATED,"tb.rulenode.originator-related"],[v.ALARM_ORIGINATOR,"tb.rulenode.originator-alarm-originator"]]);!function(e){e.CIRCLE="CIRCLE",e.POLYGON="POLYGON"}(M||(M={}));var R,w=new Map([[M.CIRCLE,"tb.rulenode.perimeter-circle"],[M.POLYGON,"tb.rulenode.perimeter-polygon"]]);!function(e){e.MILLISECONDS="MILLISECONDS",e.SECONDS="SECONDS",e.MINUTES="MINUTES",e.HOURS="HOURS",e.DAYS="DAYS"}(R||(R={}));var D,O=new Map([[R.MILLISECONDS,"tb.rulenode.time-unit-milliseconds"],[R.SECONDS,"tb.rulenode.time-unit-seconds"],[R.MINUTES,"tb.rulenode.time-unit-minutes"],[R.HOURS,"tb.rulenode.time-unit-hours"],[R.DAYS,"tb.rulenode.time-unit-days"]]);!function(e){e.METER="METER",e.KILOMETER="KILOMETER",e.FOOT="FOOT",e.MILE="MILE",e.NAUTICAL_MILE="NAUTICAL_MILE"}(D||(D={}));var K,B=new Map([[D.METER,"tb.rulenode.range-unit-meter"],[D.KILOMETER,"tb.rulenode.range-unit-kilometer"],[D.FOOT,"tb.rulenode.range-unit-foot"],[D.MILE,"tb.rulenode.range-unit-mile"],[D.NAUTICAL_MILE,"tb.rulenode.range-unit-nautical-mile"]]);!function(e){e.TITLE="TITLE",e.COUNTRY="COUNTRY",e.STATE="STATE",e.ZIP="ZIP",e.ADDRESS="ADDRESS",e.ADDRESS2="ADDRESS2",e.PHONE="PHONE",e.EMAIL="EMAIL",e.ADDITIONAL_INFO="ADDITIONAL_INFO"}(K||(K={}));var j,U,G,H=new Map([[K.TITLE,"tb.rulenode.entity-details-title"],[K.COUNTRY,"tb.rulenode.entity-details-country"],[K.STATE,"tb.rulenode.entity-details-state"],[K.ZIP,"tb.rulenode.entity-details-zip"],[K.ADDRESS,"tb.rulenode.entity-details-address"],[K.ADDRESS2,"tb.rulenode.entity-details-address2"],[K.PHONE,"tb.rulenode.entity-details-phone"],[K.EMAIL,"tb.rulenode.entity-details-email"],[K.ADDITIONAL_INFO,"tb.rulenode.entity-details-additional_info"]]);!function(e){e.FIRST="FIRST",e.LAST="LAST",e.ALL="ALL"}(j||(j={})),function(e){e.ASC="ASC",e.DESC="DESC"}(U||(U={})),function(e){e.STANDARD="STANDARD",e.FIFO="FIFO"}(G||(G={}));var Q,z=new Map([[G.STANDARD,"tb.rulenode.sqs-queue-standard"],[G.FIFO,"tb.rulenode.sqs-queue-fifo"]]),$=["anonymous","basic","cert.PEM"],_=new Map([["anonymous","tb.rulenode.credentials-anonymous"],["basic","tb.rulenode.credentials-basic"],["cert.PEM","tb.rulenode.credentials-pem"]]);!function(e){e.GET="GET",e.POST="POST",e.PUT="PUT",e.DELETE="DELETE"}(Q||(Q={}));var W=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.perimeterType=M,n.perimeterTypes=Object.keys(M),n.perimeterTypeTranslationMap=w,n.rangeUnits=Object.keys(D),n.rangeUnitTranslationMap=B,n.timeUnits=Object.keys(R),n.timeUnitsTranslationMap=O,n}return y(r,e),r.prototype.configForm=function(){return this.geoActionConfigForm},r.prototype.onConfigurationSet=function(e){this.geoActionConfigForm=this.fb.group({latitudeKeyName:[e?e.latitudeKeyName:null,[i.Validators.required]],longitudeKeyName:[e?e.longitudeKeyName:null,[i.Validators.required]],fetchPerimeterInfoFromMessageMetadata:[!!e&&e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterType:[e?e.perimeterType:null,[]],centerLatitude:[e?e.centerLatitude:null,[]],centerLongitude:[e?e.centerLatitude:null,[]],range:[e?e.range:null,[]],rangeUnit:[e?e.rangeUnit:null,[]],polygonsDefinition:[e?e.polygonsDefinition:null,[]],minInsideDuration:[e?e.minInsideDuration:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]],minInsideDurationTimeUnit:[e?e.minInsideDurationTimeUnit:null,[i.Validators.required]],minOutsideDuration:[e?e.minOutsideDuration:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]],minOutsideDurationTimeUnit:[e?e.minOutsideDurationTimeUnit:null,[i.Validators.required]]})},r.prototype.validatorTriggers=function(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]},r.prototype.updateValidators=function(e){var t=this.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,r=this.geoActionConfigForm.get("perimeterType").value;t?this.geoActionConfigForm.get("perimeterType").setValidators([]):this.geoActionConfigForm.get("perimeterType").setValidators([i.Validators.required]),t||r!==M.CIRCLE?(this.geoActionConfigForm.get("centerLatitude").setValidators([]),this.geoActionConfigForm.get("centerLongitude").setValidators([]),this.geoActionConfigForm.get("range").setValidators([]),this.geoActionConfigForm.get("rangeUnit").setValidators([])):(this.geoActionConfigForm.get("centerLatitude").setValidators([i.Validators.required,i.Validators.min(-90),i.Validators.max(90)]),this.geoActionConfigForm.get("centerLongitude").setValidators([i.Validators.required,i.Validators.min(-180),i.Validators.max(180)]),this.geoActionConfigForm.get("range").setValidators([i.Validators.required,i.Validators.min(0)]),this.geoActionConfigForm.get("rangeUnit").setValidators([i.Validators.required])),t||r!==M.POLYGON?this.geoActionConfigForm.get("polygonsDefinition").setValidators([]):this.geoActionConfigForm.get("polygonsDefinition").setValidators([i.Validators.required]),this.geoActionConfigForm.get("perimeterType").updateValueAndValidity({emitEvent:!1}),this.geoActionConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-gps-geofencing-config",template:'<section [formGroup]="geoActionConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.latitude-key-name</mat-label>\n    <input matInput formControlName="latitudeKeyName" required>\n    <mat-error *ngIf="geoActionConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.latitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.longitude-key-name</mat-label>\n    <input matInput formControlName="longitudeKeyName" required>\n    <mat-error *ngIf="geoActionConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.longitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-checkbox fxFlex formControlName="fetchPerimeterInfoFromMessageMetadata" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.fetch-perimeter-info-from-message-metadata\' | translate }}\n  </mat-checkbox>\n  <div fxLayout="row" *ngIf="!geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.perimeter-type</mat-label>\n      <mat-select formControlName="perimeterType" required>\n        <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n          {{ perimeterTypeTranslationMap.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column"\n       *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n       !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-latitude</mat-label>\n        <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-longitude</mat-label>\n        <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range</mat-label>\n        <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'range\').hasError(\'required\')">\n          {{ \'tb.rulenode.range-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range-units</mat-label>\n        <mat-select formControlName="rangeUnit" required>\n          <mat-option *ngFor="let type of rangeUnits" [value]="type">\n            {{ rangeUnitTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div fxLayout="column" *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                             !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <mat-form-field class="mat-block" hintLabel="{{\'tb.rulenode.polygon-definition-hint\' | translate}}" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.polygon-definition</mat-label>\n      <input matInput formControlName="polygonsDefinition" required>\n      <mat-error *ngIf="geoActionConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n        {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-inside-duration</mat-label>\n      <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'required\')">\n        {{ \'tb.rulenode.min-inside-duration-value-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'min\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'max\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-inside-duration-time-unit</mat-label>\n      <mat-select formControlName="minInsideDurationTimeUnit" required>\n        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-outside-duration</mat-label>\n      <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'required\')">\n        {{ \'tb.rulenode.min-outside-duration-value-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'min\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'max\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-outside-duration-time-unit</mat-label>\n      <mat-select formControlName="minOutsideDurationTimeUnit" required>\n        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),J=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.msgCountConfigForm},r.prototype.onConfigurationSet=function(e){this.msgCountConfigForm=this.fb.group({interval:[e?e.interval:null,[i.Validators.required,i.Validators.min(1)]],telemetryPrefix:[e?e.telemetryPrefix:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-msg-count-config",template:'<section [formGroup]="msgCountConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.interval-seconds</mat-label>\n    <input required type="number" min="1" step="1" matInput formControlName="interval">\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'required\')">\n      {{ \'tb.rulenode.interval-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-interval-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.output-timeseries-key-prefix</mat-label>\n    <input required matInput formControlName="telemetryPrefix">\n    <mat-error *ngIf="msgCountConfigForm.get(\'telemetryPrefix\').hasError(\'required\')">\n      {{ \'tb.rulenode.output-timeseries-key-prefix-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Y=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.rpcReplyConfigForm},r.prototype.onConfigurationSet=function(e){this.rpcReplyConfigForm=this.fb.group({requestIdMetaDataAttribute:[e?e.requestIdMetaDataAttribute:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rpc-reply-config",template:'<section [formGroup]="rpcReplyConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.request-id-metadata-attribute</mat-label>\n    <input matInput formControlName="requestIdMetaDataAttribute">\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Z=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.saveToCustomTableConfigForm},r.prototype.onConfigurationSet=function(e){this.saveToCustomTableConfigForm=this.fb.group({tableName:[e?e.tableName:null,[i.Validators.required]],fieldsMapping:[e?e.fieldsMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-custom-table-config",template:'<section [formGroup]="saveToCustomTableConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.custom-table-name</mat-label>\n    <input required matInput formControlName="tableName">\n    <mat-error *ngIf="saveToCustomTableConfigForm.get(\'tableName\').hasError(\'required\')">\n      {{ \'tb.rulenode.custom-table-name-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.custom-table-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title tb-required">tb.rulenode.fields-mapping</label>\n  <tb-kv-map-config\n    required\n    formControlName="fieldsMapping"\n    requiredText="tb.rulenode.fields-mapping-required"\n    keyText="tb.rulenode.message-field"\n    keyRequiredText="tb.rulenode.message-field-required"\n    valText="tb.rulenode.table-col"\n    valRequiredText="tb.rulenode.table-col-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),X=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.translate=r,o.injector=n,o.fb=a,o.propagateChange=null,o.valueChangeSubscription=null,o}var a;return y(r,e),a=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.ngOnInit=function(){this.ngControl=this.injector.get(i.NgControl),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.kvListFormGroup=this.fb.group({}),this.kvListFormGroup.addControl("keyVals",this.fb.array([]))},r.prototype.keyValsFormArray=function(){return this.kvListFormGroup.get("keyVals")},r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.kvListFormGroup.disable({emitEvent:!1}):this.kvListFormGroup.enable({emitEvent:!1})},r.prototype.writeValue=function(e){var t,r,n=this;this.valueChangeSubscription&&this.valueChangeSubscription.unsubscribe();var a=[];if(e)try{for(var o=C(Object.keys(e)),l=o.next();!l.done;l=o.next()){var s=l.value;Object.prototype.hasOwnProperty.call(e,s)&&a.push(this.fb.group({key:[s,[i.Validators.required]],value:[e[s],[i.Validators.required]]}))}}catch(e){t={error:e}}finally{try{l&&!l.done&&(r=o.return)&&r.call(o)}finally{if(t)throw t.error}}this.kvListFormGroup.setControl("keyVals",this.fb.array(a)),this.valueChangeSubscription=this.kvListFormGroup.valueChanges.subscribe((function(){n.updateModel()}))},r.prototype.removeKeyVal=function(e){this.kvListFormGroup.get("keyVals").removeAt(e)},r.prototype.addKeyVal=function(){this.kvListFormGroup.get("keyVals").push(this.fb.group({key:["",[i.Validators.required]],value:["",[i.Validators.required]]}))},r.prototype.validate=function(e){return!this.kvListFormGroup.get("keyVals").value.length&&this.required?{kvMapRequired:!0}:this.kvListFormGroup.valid?null:{kvFieldsRequired:!0}},r.prototype.updateModel=function(){var e=this.kvListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.kvListFormGroup.valid)this.propagateChange(null);else{var t={};e.forEach((function(e){t[e.key]=e.value})),this.propagateChange(t)}},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:t.Injector},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.Input(),h("design:type",String)],r.prototype,"requiredText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"keyText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"keyRequiredText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"valText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"valRequiredText",void 0),b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),r=a=b([t.Component({selector:"tb-kv-map-config",template:'<section fxLayout="column" class="tb-kv-map-config" [formGroup]="kvListFormGroup">\n  <div class="header" fxFlex fxLayout="row" fxLayoutGap="8px">\n    <span class="cell" fxFlex translate>{{ keyText }}</span>\n    <span class="cell" fxFlex translate>{{ valText }}</span>\n    <span [fxShow]="!disabled" style="width: 52px;" innerHTML="&nbsp"></span>\n  </div>\n  <div class="body">\n    <div class="row" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"\n         formArrayName="keyVals"\n         *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">\n      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="cell mat-block">\n        <mat-label></mat-label>\n        <input [formControl]="keyValControl.get(\'key\')" matInput required\n               placeholder="{{ keyText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'key\').hasError(\'required\')">\n          {{ keyRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="cell mat-block">\n        <mat-label></mat-label>\n        <input [formControl]="keyValControl.get(\'value\')" matInput required\n               placeholder="{{ valText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'value\').hasError(\'required\')">\n          {{ valRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <button mat-button mat-icon-button color="primary"\n              [fxShow]="!disabled"\n              type="button"\n              (click)="removeKeyVal($index)"\n              [disabled]="isLoading$ | async"\n              matTooltip="{{ \'tb.key-val.remove-entry\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <tb-error [error]="ngControl.hasError(\'kvMapRequired\')\n                  ? translate.instant(requiredText) : \'\'"></tb-error>\n  <div style="margin-top: 8px;">\n    <button mat-button mat-raised-button color="primary"\n            [fxShow]="!disabled"\n            [disabled]="isLoading$ | async"\n            (click)="addKeyVal()"\n            type="button"\n            matTooltip="{{ \'tb.key-val.add-entry\' | translate }}"\n            matTooltipPosition="above">\n      <mat-icon>add</mat-icon>\n      {{ \'action.add\' | translate }}\n    </button>\n  </div>\n</section>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return a})),multi:!0},{provide:i.NG_VALIDATORS,useExisting:t.forwardRef((function(){return a})),multi:!0}],styles:[":host .tb-kv-map-config{margin-bottom:16px}:host .tb-kv-map-config .header{padding-left:5px;padding-right:5px;padding-bottom:5px}:host .tb-kv-map-config .header .cell{padding-left:5px;padding-right:5px;color:rgba(0,0,0,.54);font-size:12px;font-weight:700;white-space:nowrap}:host .tb-kv-map-config .body{padding-left:5px;padding-right:5px;padding-bottom:20px;max-height:300px;overflow:auto}:host .tb-kv-map-config .body .row{padding-top:5px;max-height:40px}:host .tb-kv-map-config .body .cell{padding-left:5px;padding-right:5px}:host ::ng-deep .tb-kv-map-config .body mat-form-field.cell{margin:0;max-height:40px}:host ::ng-deep .tb-kv-map-config .body mat-form-field.cell .mat-form-field-infix{border-top:0}:host ::ng-deep .tb-kv-map-config .body button.mat-button{margin:0}"]}),h("design:paramtypes",[o.Store,n.TranslateService,t.Injector,i.FormBuilder])],r)}(a.PageComponent),ee=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.entityType=a.EntityType,n.propagateChange=null,n}var n;return y(r,e),n=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.ngOnInit=function(){var e=this;this.deviceRelationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[i.Validators.required]],maxLevel:[null,[]],relationType:[null],deviceTypes:[null,[i.Validators.required]]}),this.deviceRelationsQueryFormGroup.valueChanges.subscribe((function(t){e.deviceRelationsQueryFormGroup.valid?e.propagateChange(t):e.propagateChange(null)}))},r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.deviceRelationsQueryFormGroup.disable({emitEvent:!1}):this.deviceRelationsQueryFormGroup.enable({emitEvent:!1})},r.prototype.writeValue=function(e){this.deviceRelationsQueryFormGroup.reset(e,{emitEvent:!1})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),r=n=b([t.Component({selector:"tb-device-relations-query-config",template:'<section fxLayout="column" [formGroup]="deviceRelationsQueryFormGroup">\n  <mat-checkbox formControlName="fetchLastLevelOnly" style="padding-bottom: 16px;">\n    {{ \'relation.last-level-relation\' | translate }}\n  </mat-checkbox>\n  <div fxLayoutGap="8px" fxLayout="row">\n    <mat-form-field class="mat-block" style="min-width: 100px;">\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required matInput formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n    </mat-form-field>\n  </div>\n  <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>\n  <tb-relation-type-autocomplete\n    fxFlex\n    formControlName="relationType">\n  </tb-relation-type-autocomplete>\n  <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>device.device-types</div>\n  <tb-entity-subtype-list\n    required\n    [entityType]="entityType.DEVICE"\n    formControlName="deviceTypes">\n  </tb-entity-subtype-list>\n</section>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return n})),multi:!0}]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.PageComponent),te=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.propagateChange=null,n}var n;return y(r,e),n=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.ngOnInit=function(){var e=this;this.relationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[i.Validators.required]],maxLevel:[null,[]],filters:[null]}),this.relationsQueryFormGroup.valueChanges.subscribe((function(t){e.relationsQueryFormGroup.valid?e.propagateChange(t):e.propagateChange(null)}))},r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.relationsQueryFormGroup.disable({emitEvent:!1}):this.relationsQueryFormGroup.enable({emitEvent:!1})},r.prototype.writeValue=function(e){this.relationsQueryFormGroup.reset(e,{emitEvent:!1})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),r=n=b([t.Component({selector:"tb-relations-query-config",template:'<section fxLayout="column" [formGroup]="relationsQueryFormGroup">\n  <mat-checkbox formControlName="fetchLastLevelOnly" style="padding-bottom: 16px;">\n    {{ \'relation.last-level-relation\' | translate }}\n  </mat-checkbox>\n  <div fxLayoutGap="8px" fxLayout="row">\n    <mat-form-field class="mat-block" style="min-width: 100px;">\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required matInput formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n    </mat-form-field>\n  </div>\n  <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-filters</div>\n  <tb-relation-filters\n    formControlName="filters"\n  ></tb-relation-filters>\n</section>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return n})),multi:!0}]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.PageComponent),re=function(e){function r(t,r,n,o){var i,l,m=e.call(this,t)||this;m.store=t,m.translate=r,m.truncate=n,m.fb=o,m.placeholder="tb.rulenode.message-type",m.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],m.messageTypes=[],m.messageTypesList=[],m.searchText="",m.propagateChange=function(e){},m.messageTypeConfigForm=m.fb.group({messageType:[null]});try{for(var u=C(Object.keys(a.MessageType)),d=u.next();!d.done;d=u.next()){var p=d.value;m.messageTypesList.push({name:a.messageTypeNames.get(a.MessageType[p]),value:p})}}catch(e){i={error:e}}finally{try{d&&!d.done&&(l=u.return)&&l.call(u)}finally{if(i)throw i.error}}return m}var l;return y(r,e),l=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.ngOnInit=function(){var e=this;this.filteredMessageTypes=this.messageTypeConfigForm.get("messageType").valueChanges.pipe(f.startWith(""),f.map((function(e){return e||""})),f.mergeMap((function(t){return e.fetchMessageTypes(t)})),f.share())},r.prototype.ngAfterViewInit=function(){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.messageTypeConfigForm.disable({emitEvent:!1}):this.messageTypeConfigForm.enable({emitEvent:!1})},r.prototype.writeValue=function(e){var t=this;this.searchText="",this.messageTypes.length=0,e&&e.forEach((function(e){var r=t.messageTypesList.find((function(t){return t.value===e}));r?t.messageTypes.push({name:r.name,value:r.value}):t.messageTypes.push({name:e,value:e})}))},r.prototype.displayMessageTypeFn=function(e){return e?e.name:void 0},r.prototype.textIsNotEmpty=function(e){return!!(e&&null!=e&&e.length>0)},r.prototype.createMessageType=function(e,t){e.preventDefault(),this.transformMessageType(t)},r.prototype.add=function(e){this.transformMessageType(e.value)},r.prototype.fetchMessageTypes=function(e){if(this.searchText=e,this.searchText&&this.searchText.length){var t=this.searchText.toUpperCase();return c.of(this.messageTypesList.filter((function(e){return e.name.toUpperCase().includes(t)})))}return c.of(this.messageTypesList)},r.prototype.transformMessageType=function(e){if((e||"").trim()){var t=null,r=e.trim(),n=this.messageTypesList.find((function(e){return e.name===r}));(t=n?{name:n.name,value:n.value}:{name:r,value:r})&&this.addMessageType(t)}this.clear("")},r.prototype.remove=function(e){var t=this.messageTypes.indexOf(e);t>=0&&(this.messageTypes.splice(t,1),this.updateModel())},r.prototype.selected=function(e){this.addMessageType(e.option.value),this.clear("")},r.prototype.addMessageType=function(e){-1===this.messageTypes.findIndex((function(t){return t.value===e.value}))&&(this.messageTypes.push(e),this.updateModel())},r.prototype.onFocus=function(){this.messageTypeConfigForm.get("messageType").updateValueAndValidity({onlySelf:!0,emitEvent:!0})},r.prototype.clear=function(e){var t=this;void 0===e&&(e=""),this.messageTypeInput.nativeElement.value=e,this.messageTypeConfigForm.get("messageType").patchValue(null,{emitEvent:!0}),setTimeout((function(){t.messageTypeInput.nativeElement.blur(),t.messageTypeInput.nativeElement.focus()}),0)},r.prototype.updateModel=function(){var e=this.messageTypes.map((function(e){return e.value}));this.required?(this.chipList.errorState=!e.length,this.propagateChange(e.length>0?e:null)):(this.chipList.errorState=!1,this.propagateChange(e))},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:a.TruncatePipe},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),b([t.Input(),h("design:type",String)],r.prototype,"label",void 0),b([t.Input(),h("design:type",Object)],r.prototype,"placeholder",void 0),b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.ViewChild("chipList",{static:!1}),h("design:type",d.MatChipList)],r.prototype,"chipList",void 0),b([t.ViewChild("messageTypeAutocomplete",{static:!1}),h("design:type",p.MatAutocomplete)],r.prototype,"matAutocomplete",void 0),b([t.ViewChild("messageTypeInput",{static:!1}),h("design:type",t.ElementRef)],r.prototype,"messageTypeInput",void 0),r=l=b([t.Component({selector:"tb-message-types-config",template:'<mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;">\n  <mat-label *ngIf="label" translate>{{ label }}</mat-label>\n  <mat-chip-list #chipList [required]="required">\n    <mat-chip\n      *ngFor="let messageType of messageTypes"\n      [selectable]="true"\n      [removable]="true"\n      (removed)="remove(messageType)">\n      {{messageType.name}}\n      <mat-icon matChipRemove>close</mat-icon>\n    </mat-chip>\n    <input matInput type="text" placeholder="{{ placeholder | translate }}"\n           style="max-width: 200px;"\n           #messageTypeInput\n           (focusin)="onFocus()"\n           formControlName="messageType"\n           matAutocompleteOrigin\n           #origin="matAutocompleteOrigin"\n           [matAutocompleteConnectedTo]="origin"\n           [matAutocomplete]="messageTypeAutocomplete"\n           [matChipInputFor]="chipList"\n           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n           (matChipInputTokenEnd)="add($event)">\n  </mat-chip-list>\n  <mat-autocomplete #messageTypeAutocomplete="matAutocomplete"\n                    class="tb-autocomplete"\n                    (optionSelected)="selected($event)"\n                    [displayWith]="displayMessageTypeFn">\n    <mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType">\n      <span [innerHTML]="messageType.name | highlight:searchText"></span>\n    </mat-option>\n    <mat-option *ngIf="(filteredMessageTypes | async)?.length === 0" [value]="null" class="tb-not-found">\n      <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">\n          <span translate>tb.rulenode.no-message-types-found</span>\n        </div>\n        <ng-template #searchNotEmpty>\n                <span>\n                  {{ translate.get(\'tb.rulenode.no-message-type-matching\',\n                  {messageType: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}\n                </span>\n        </ng-template>\n        <span>\n          <a translate (click)="createMessageType($event, searchText)">tb.rulenode.create-new-message-type</a>\n        </span>\n      </div>\n    </mat-option>\n  </mat-autocomplete>\n  <mat-error *ngIf="chipList.errorState">\n    {{ \'tb.rulenode.message-types-required\' | translate }}\n  </mat-error>\n</mat-form-field>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return l})),multi:!0}]}),h("design:paramtypes",[o.Store,n.TranslateService,a.TruncatePipe,i.FormBuilder])],r)}(a.PageComponent),ne=function(){function e(){}return e=b([t.NgModule({declarations:[X,ee,te,re],imports:[r.CommonModule,a.SharedModule,m.HomeComponentsModule],exports:[X,ee,te,re]})],e)}(),ae=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.unassignCustomerConfigForm},r.prototype.onConfigurationSet=function(e){this.unassignCustomerConfigForm=this.fb.group({customerNamePattern:[e?e.customerNamePattern:null,[i.Validators.required]],customerCacheExpiration:[e?e.customerCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-un-assign-to-customer-config",template:'<section [formGroup]="unassignCustomerConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n    <input required matInput formControlName="customerNamePattern">\n    <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-name-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="customerCacheExpiration">\n    <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.customer-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),oe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.snsConfigForm},r.prototype.onConfigurationSet=function(e){this.snsConfigForm=this.fb.group({topicArnPattern:[e?e.topicArnPattern:null,[i.Validators.required]],accessKeyId:[e?e.accessKeyId:null,[i.Validators.required]],secretAccessKey:[e?e.secretAccessKey:null,[i.Validators.required]],region:[e?e.region:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-sns-config",template:'<section [formGroup]="snsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.topic-arn-pattern</mat-label>\n    <input required matInput formControlName="topicArnPattern">\n    <mat-error *ngIf="snsConfigForm.get(\'topicArnPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-arn-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.topic-arn-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="snsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="snsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="snsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ie=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.sqsQueueType=G,n.sqsQueueTypes=Object.keys(G),n.sqsQueueTypeTranslationsMap=z,n}return y(r,e),r.prototype.configForm=function(){return this.sqsConfigForm},r.prototype.onConfigurationSet=function(e){this.sqsConfigForm=this.fb.group({queueType:[e?e.queueType:null,[i.Validators.required]],queueUrlPattern:[e?e.queueUrlPattern:null,[i.Validators.required]],delaySeconds:[e?e.delaySeconds:null,[i.Validators.min(0),i.Validators.max(900)]],messageAttributes:[e?e.messageAttributes:null,[]],accessKeyId:[e?e.accessKeyId:null,[i.Validators.required]],secretAccessKey:[e?e.secretAccessKey:null,[i.Validators.required]],region:[e?e.region:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-sqs-config",template:'<section [formGroup]="sqsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.queue-type</mat-label>\n    <mat-select formControlName="queueType" required>\n      <mat-option *ngFor="let type of sqsQueueTypes" [value]="type">\n        {{ sqsQueueTypeTranslationsMap.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.queue-url-pattern</mat-label>\n    <input required matInput formControlName="queueUrlPattern">\n    <mat-error *ngIf="sqsConfigForm.get(\'queueUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.queue-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.queue-url-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field *ngIf="sqsConfigForm.get(\'queueType\').value === sqsQueueType.STANDARD" class="mat-block">\n    <mat-label translate>tb.rulenode.delay-seconds</mat-label>\n    <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-delay-seconds-message\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-delay-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" translate>tb.rulenode.message-attributes-hint</div>\n  <tb-kv-map-config\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="sqsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="sqsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="sqsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),le=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.pubSubConfigForm},r.prototype.onConfigurationSet=function(e){this.pubSubConfigForm=this.fb.group({projectId:[e?e.projectId:null,[i.Validators.required]],topicName:[e?e.topicName:null,[i.Validators.required]],serviceAccountKey:[e?e.serviceAccountKey:null,[i.Validators.required]],serviceAccountKeyFileName:[e?e.serviceAccountKeyFileName:null,[i.Validators.required]],messageAttributes:[e?e.messageAttributes:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-pub-sub-config",template:'<section [formGroup]="pubSubConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.gcp-project-id</mat-label>\n    <input required matInput formControlName="projectId">\n    <mat-error *ngIf="pubSubConfigForm.get(\'projectId\').hasError(\'required\')">\n      {{ \'tb.rulenode.gcp-project-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.pubsub-topic-name</mat-label>\n    <input required matInput formControlName="topicName">\n    <mat-error *ngIf="pubSubConfigForm.get(\'topicName\').hasError(\'required\')">\n      {{ \'tb.rulenode.pubsub-topic-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <tb-file-input style="padding-bottom: 24px;"\n                 formControlName="serviceAccountKey"\n                 [existingFileName]="pubSubConfigForm.get(\'serviceAccountKeyFileName\').value"\n                 (fileNameChanged)="pubSubConfigForm.get(\'serviceAccountKeyFileName\').setValue($event)"\n                 required\n                 requiredAsError\n                 label="{{\'tb.rulenode.gcp-service-account-key\' | translate}}"\n                 noFileText="tb.rulenode.no-file"\n                 dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n  </tb-file-input>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" translate>tb.rulenode.message-attributes-hint</div>\n  <tb-kv-map-config\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),se=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.ackValues=["all","-1","0","1"],n}return y(r,e),r.prototype.configForm=function(){return this.kafkaConfigForm},r.prototype.onConfigurationSet=function(e){this.kafkaConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[i.Validators.required]],bootstrapServers:[e?e.bootstrapServers:null,[i.Validators.required]],retries:[e?e.retries:null,[i.Validators.min(0)]],batchSize:[e?e.batchSize:null,[i.Validators.min(0)]],linger:[e?e.linger:null,[i.Validators.min(0)]],bufferMemory:[e?e.bufferMemory:null,[i.Validators.min(0)]],acks:[e?e.acks:null,[i.Validators.required]],keySerializer:[e?e.keySerializer:null,[i.Validators.required]],valueSerializer:[e?e.valueSerializer:null,[i.Validators.required]],otherProperties:[e?e.otherProperties:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-kafka-config",template:'<section [formGroup]="kafkaConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="kafkaConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.bootstrap-servers</mat-label>\n    <input required matInput formControlName="bootstrapServers">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bootstrapServers\').hasError(\'required\')">\n      {{ \'tb.rulenode.bootstrap-servers-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.retries</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="retries">\n    <mat-error *ngIf="kafkaConfigForm.get(\'retries\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-retries-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.batch-size-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="batchSize">\n    <mat-error *ngIf="kafkaConfigForm.get(\'batchSize\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-batch-size-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.linger-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="linger">\n    <mat-error *ngIf="kafkaConfigForm.get(\'linger\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-linger-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.buffer-memory-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="bufferMemory">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bufferMemory\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-buffer-memory-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.acks</mat-label>\n    <mat-select formControlName="acks" required>\n      <mat-option *ngFor="let ackValue of ackValues" [value]="ackValue">\n        {{ ackValue }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.key-serializer</mat-label>\n    <input required matInput formControlName="keySerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'keySerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.key-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.value-serializer</mat-label>\n    <input required matInput formControlName="valueSerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'valueSerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.value-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.other-properties</label>\n  <tb-kv-map-config\n    required="false"\n    formControlName="otherProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),me=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.allMqttCredentialsTypes=$,n.mqttCredentialsTypeTranslationsMap=_,n}return y(r,e),r.prototype.configForm=function(){return this.mqttConfigForm},r.prototype.onConfigurationSet=function(e){this.mqttConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[i.Validators.required]],host:[e?e.host:null,[i.Validators.required]],port:[e?e.port:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(65535)]],connectTimeoutSec:[e?e.connectTimeoutSec:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(200)]],clientId:[e?e.clientId:null,[]],cleanSession:[!!e&&e.cleanSession,[]],ssl:[!!e&&e.ssl,[]],credentials:this.fb.group({type:[e&&e.credentials?e.credentials.type:null,[i.Validators.required]],username:[e&&e.credentials?e.credentials.username:null,[]],password:[e&&e.credentials?e.credentials.password:null,[]],caCert:[e&&e.credentials?e.credentials.caCert:null,[]],caCertFileName:[e&&e.credentials?e.credentials.caCertFileName:null,[]],privateKey:[e&&e.credentials?e.credentials.privateKey:null,[]],privateKeyFileName:[e&&e.credentials?e.credentials.privateKeyFileName:null,[]],cert:[e&&e.credentials?e.credentials.cert:null,[]],certFileName:[e&&e.credentials?e.credentials.certFileName:null,[]]})})},r.prototype.prepareOutputConfig=function(e){var t=e.credentials.type;switch(t){case"anonymous":e.credentials={type:t};break;case"basic":e.credentials={type:t,username:e.credentials.username,password:e.credentials.password};break;case"cert.PEM":delete e.credentials.username}return e},r.prototype.validatorTriggers=function(){return["credentials.type"]},r.prototype.updateValidators=function(e){var t=this.mqttConfigForm.get("credentials"),r=t.get("type").value;switch(e&&t.reset({type:r},{emitEvent:!1}),t.get("username").setValidators([]),t.get("password").setValidators([]),t.get("caCert").setValidators([]),t.get("caCertFileName").setValidators([]),t.get("privateKey").setValidators([]),t.get("privateKeyFileName").setValidators([]),t.get("cert").setValidators([]),t.get("certFileName").setValidators([]),r){case"anonymous":break;case"basic":t.get("username").setValidators([i.Validators.required]),t.get("password").setValidators([i.Validators.required]);break;case"cert.PEM":t.get("caCert").setValidators([i.Validators.required]),t.get("caCertFileName").setValidators([i.Validators.required]),t.get("privateKey").setValidators([i.Validators.required]),t.get("privateKeyFileName").setValidators([i.Validators.required]),t.get("cert").setValidators([i.Validators.required]),t.get("certFileName").setValidators([i.Validators.required])}t.get("username").updateValueAndValidity({emitEvent:e}),t.get("password").updateValueAndValidity({emitEvent:e}),t.get("caCert").updateValueAndValidity({emitEvent:e}),t.get("caCertFileName").updateValueAndValidity({emitEvent:e}),t.get("privateKey").updateValueAndValidity({emitEvent:e}),t.get("privateKeyFileName").updateValueAndValidity({emitEvent:e}),t.get("cert").updateValueAndValidity({emitEvent:e}),t.get("certFileName").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-mqtt-config",template:'<section [formGroup]="mqttConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="mqttConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mqtt-topic-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <div fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="mqttConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.connect-timeout</mat-label>\n      <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'required\')">\n        {{ \'tb.rulenode.connect-timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'min\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'max\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.client-id</mat-label>\n    <input matInput formControlName="clientId">\n  </mat-form-field>\n  <mat-checkbox formControlName="cleanSession" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.clean-session\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="ssl" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.enable-ssl\' | translate }}\n  </mat-checkbox>\n  <mat-expansion-panel class="tb-mqtt-credentials-panel-group">\n    <mat-expansion-panel-header>\n      <mat-panel-title translate>tb.rulenode.credentials</mat-panel-title>\n      <mat-panel-description>\n        {{ mqttCredentialsTypeTranslationsMap.get(mqttConfigForm.get(\'credentials\').get(\'type\').value) | translate }}\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <section formGroupName="credentials" fxLayout="column">\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.credentials-type</mat-label>\n        <mat-select formControlName="type" required>\n          <mat-option *ngFor="let credentialsType of allMqttCredentialsTypes" [value]="credentialsType">\n            {{ mqttCredentialsTypeTranslationsMap.get(credentialsType) | translate }}\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="mqttConfigForm.get(\'credentials\').get(\'type\').hasError(\'required\')">\n          {{ \'tb.rulenode.credentials-type-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <section fxLayout="column" [ngSwitch]="mqttConfigForm.get(\'credentials\').get(\'type\').value">\n        <ng-template ngSwitchCase="anonymous">\n        </ng-template>\n        <ng-template ngSwitchCase="basic">\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.username</mat-label>\n            <input required matInput formControlName="username">\n            <mat-error *ngIf="mqttConfigForm.get(\'credentials\').get(\'username\').hasError(\'required\')">\n              {{ \'tb.rulenode.username-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.password</mat-label>\n            <input type="password" required matInput formControlName="password">\n            <mat-error *ngIf="mqttConfigForm.get(\'credentials\').get(\'password\').hasError(\'required\')">\n              {{ \'tb.rulenode.password-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </ng-template>\n        <ng-template ngSwitchCase="cert.PEM">\n          <tb-file-input formControlName="caCert"\n                         inputId="caCertSelect"\n                         [existingFileName]="mqttConfigForm.get(\'credentials\').get(\'caCertFileName\').value"\n                         (fileNameChanged)="mqttConfigForm.get(\'credentials\').get(\'caCertFileName\').setValue($event)"\n                         required\n                         requiredAsError\n                         label="{{\'tb.rulenode.ca-cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input formControlName="cert"\n                         inputId="CertSelect"\n                         [existingFileName]="mqttConfigForm.get(\'credentials\').get(\'certFileName\').value"\n                         (fileNameChanged)="mqttConfigForm.get(\'credentials\').get(\'certFileName\').setValue($event)"\n                         required\n                         requiredAsError\n                         label="{{\'tb.rulenode.cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input style="padding-bottom: 8px;"\n                         formControlName="privateKey"\n                         inputId="privateKeySelect"\n                         [existingFileName]="mqttConfigForm.get(\'credentials\').get(\'privateKeyFileName\').value"\n                         (fileNameChanged)="mqttConfigForm.get(\'credentials\').get(\'privateKeyFileName\').setValue($event)"\n                         required\n                         requiredAsError\n                         label="{{\'tb.rulenode.private-key\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.private-key-password</mat-label>\n            <input type="password" matInput formControlName="password">\n          </mat-form-field>\n        </ng-template>\n      </section>\n    </section>\n  </mat-expansion-panel>\n</section>\n',styles:[":host .tb-mqtt-credentials-panel-group{margin:0 6px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ue=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.messageProperties=[null,"BASIC","TEXT_PLAIN","MINIMAL_BASIC","MINIMAL_PERSISTENT_BASIC","PERSISTENT_BASIC","PERSISTENT_TEXT_PLAIN"],n}return y(r,e),r.prototype.configForm=function(){return this.rabbitMqConfigForm},r.prototype.onConfigurationSet=function(e){this.rabbitMqConfigForm=this.fb.group({exchangeNamePattern:[e?e.exchangeNamePattern:null,[]],routingKeyPattern:[e?e.routingKeyPattern:null,[]],messageProperties:[e?e.messageProperties:null,[]],host:[e?e.host:null,[i.Validators.required]],port:[e?e.port:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(65535)]],virtualHost:[e?e.virtualHost:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]],automaticRecoveryEnabled:[!!e&&e.automaticRecoveryEnabled,[]],connectionTimeout:[e?e.connectionTimeout:null,[i.Validators.min(0)]],handshakeTimeout:[e?e.handshakeTimeout:null,[i.Validators.min(0)]],clientProperties:[e?e.clientProperties:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rabbit-mq-config",template:'<section [formGroup]="rabbitMqConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.exchange-name-pattern</mat-label>\n    <input matInput formControlName="exchangeNamePattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.routing-key-pattern</mat-label>\n    <input matInput formControlName="routingKeyPattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.message-properties</mat-label>\n    <mat-select formControlName="messageProperties">\n      <mat-option *ngFor="let property of messageProperties" [value]="property">\n        {{ property }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.virtual-host</mat-label>\n    <input matInput formControlName="virtualHost">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.username</mat-label>\n    <input matInput formControlName="username">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.password</mat-label>\n    <input type="password" matInput formControlName="password">\n  </mat-form-field>\n  <mat-checkbox formControlName="automaticRecoveryEnabled" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.automatic-recovery\' | translate }}\n  </mat-checkbox>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.connection-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="connectionTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'connectionTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-connection-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.handshake-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="handshakeTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'handshakeTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-handshake-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.client-properties</label>\n  <tb-kv-map-config\n    required="false"\n    formControlName="clientProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),de=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.httpRequestTypes=Object.keys(Q),n}return y(r,e),r.prototype.configForm=function(){return this.restApiCallConfigForm},r.prototype.onConfigurationSet=function(e){this.restApiCallConfigForm=this.fb.group({restEndpointUrlPattern:[e?e.restEndpointUrlPattern:null,[i.Validators.required]],requestMethod:[e?e.requestMethod:null,[i.Validators.required]],useSimpleClientHttpFactory:[!!e&&e.useSimpleClientHttpFactory,[]],readTimeoutMs:[e?e.readTimeoutMs:null,[]],maxParallelRequestsCount:[e?e.maxParallelRequestsCount:null,[i.Validators.min(0)]],headers:[e?e.headers:null,[]],useRedisQueueForMsgPersistence:[!!e&&e.useRedisQueueForMsgPersistence,[]],trimQueue:[!!e&&e.trimQueue,[]],maxQueueSize:[e?e.maxQueueSize:null,[]]})},r.prototype.validatorTriggers=function(){return["useSimpleClientHttpFactory","useRedisQueueForMsgPersistence"]},r.prototype.updateValidators=function(e){var t=this.restApiCallConfigForm.get("useSimpleClientHttpFactory").value,r=this.restApiCallConfigForm.get("useRedisQueueForMsgPersistence").value;t?this.restApiCallConfigForm.get("readTimeoutMs").setValidators([]):this.restApiCallConfigForm.get("readTimeoutMs").setValidators([i.Validators.min(0)]),r?this.restApiCallConfigForm.get("maxQueueSize").setValidators([i.Validators.min(0)]):this.restApiCallConfigForm.get("maxQueueSize").setValidators([]),this.restApiCallConfigForm.get("readTimeoutMs").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("maxQueueSize").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rest-api-call-config",template:'<section [formGroup]="restApiCallConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.endpoint-url-pattern</mat-label>\n    <input required matInput formControlName="restEndpointUrlPattern">\n    <mat-error *ngIf="restApiCallConfigForm.get(\'restEndpointUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.endpoint-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.endpoint-url-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.request-method</mat-label>\n    <mat-select formControlName="requestMethod">\n      <mat-option *ngFor="let requestType of httpRequestTypes" [value]="requestType">\n        {{ requestType }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-checkbox formControlName="useSimpleClientHttpFactory" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-simple-client-http-factory\' | translate }}\n  </mat-checkbox>\n  <mat-form-field *ngIf="restApiCallConfigForm.get(\'useSimpleClientHttpFactory\').value === false" class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.read-timeout</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="readTimeoutMs">\n    <mat-hint innerHTML="{{ \'tb.rulenode.read-timeout-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.max-parallel-requests-count</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="maxParallelRequestsCount">\n    <mat-hint innerHTML="{{ \'tb.rulenode.max-parallel-requests-count-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.headers</label>\n  <div class="tb-hint" translate>tb.rulenode.headers-hint</div>\n  <tb-kv-map-config\n    required="false"\n    formControlName="headers"\n    keyText="tb.rulenode.header"\n    keyRequiredText="tb.rulenode.header-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n  <mat-checkbox formControlName="useRedisQueueForMsgPersistence" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-redis-queue\' | translate }}\n  </mat-checkbox>\n  <div fxLayout="column" *ngIf="restApiCallConfigForm.get(\'useRedisQueueForMsgPersistence\').value === true">\n    <mat-checkbox formControlName="trimQueue" style="padding-bottom: 16px;">\n      {{ \'tb.rulenode.trim-redis-queue\' | translate }}\n    </mat-checkbox>\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.redis-queue-max-size</mat-label>\n      <input type="number" step="1" min="0" matInput formControlName="maxQueueSize">\n    </mat-form-field>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),pe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.smtpProtocols=["smtp","smtps"],n.tlsVersions=["TLSv1","TLSv1.1","TLSv1.2","TLSv1.3"],n}return y(r,e),r.prototype.configForm=function(){return this.sendEmailConfigForm},r.prototype.onConfigurationSet=function(e){this.sendEmailConfigForm=this.fb.group({useSystemSmtpSettings:[!!e&&e.useSystemSmtpSettings,[]],smtpProtocol:[e?e.smtpProtocol:null,[]],smtpHost:[e?e.smtpHost:null,[]],smtpPort:[e?e.smtpPort:null,[]],timeout:[e?e.timeout:null,[]],enableTls:[!!e&&e.enableTls,[]],tlsVersion:[e?e.tlsVersion:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]]})},r.prototype.validatorTriggers=function(){return["useSystemSmtpSettings"]},r.prototype.updateValidators=function(e){this.sendEmailConfigForm.get("useSystemSmtpSettings").value?(this.sendEmailConfigForm.get("smtpProtocol").setValidators([]),this.sendEmailConfigForm.get("smtpHost").setValidators([]),this.sendEmailConfigForm.get("smtpPort").setValidators([]),this.sendEmailConfigForm.get("timeout").setValidators([])):(this.sendEmailConfigForm.get("smtpProtocol").setValidators([i.Validators.required]),this.sendEmailConfigForm.get("smtpHost").setValidators([i.Validators.required]),this.sendEmailConfigForm.get("smtpPort").setValidators([i.Validators.required,i.Validators.min(1),i.Validators.max(65535)]),this.sendEmailConfigForm.get("timeout").setValidators([i.Validators.required,i.Validators.min(0)])),this.sendEmailConfigForm.get("smtpProtocol").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpHost").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpPort").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("timeout").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-send-email-config",template:'<section [formGroup]="sendEmailConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useSystemSmtpSettings" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-system-smtp-settings\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="sendEmailConfigForm.get(\'useSystemSmtpSettings\').value === false">\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.smtp-protocol</mat-label>\n      <mat-select formControlName="smtpProtocol">\n        <mat-option *ngFor="let smtpProtocol of smtpProtocols" [value]="smtpProtocol">\n          {{ smtpProtocol.toUpperCase() }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-host</mat-label>\n        <input required matInput formControlName="smtpHost">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpHost\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-host-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-port</mat-label>\n        <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-port-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'min\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'max\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.timeout-msec</mat-label>\n      <input required type="number" step="1" min="0" matInput formControlName="timeout">\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'required\')">\n        {{ \'tb.rulenode.timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'min\')">\n        {{ \'tb.rulenode.min-timeout-msec-message\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-checkbox formControlName="enableTls" style="padding-bottom: 16px;">\n      {{ \'tb.rulenode.enable-tls\' | translate }}\n    </mat-checkbox>\n    <mat-form-field class="mat-block" *ngIf="sendEmailConfigForm.get(\'enableTls\').value === true">\n      <mat-label translate>tb.rulenode.tls-version</mat-label>\n      <mat-select formControlName="tlsVersion">\n        <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">\n          {{ tlsVersion }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.username</mat-label>\n      <input matInput placeholder="{{ \'tb.rulenode.enter-username\' | translate }}" formControlName="username">\n    </mat-form-field>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.password</mat-label>\n      <input matInput type="password" placeholder="{{ \'tb.rulenode.enter-password\' | translate }}" formControlName="password">\n    </mat-form-field>\n  </section>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ce=function(){function e(){}return e=b([t.NgModule({declarations:[T,x,q,S,I,k,N,V,E,A,L,W,J,Y,Z,ae,oe,ie,le,se,me,ue,de,pe],imports:[r.CommonModule,a.SharedModule,ne],exports:[T,x,q,S,I,k,N,V,E,A,L,W,J,Y,Z,ae,oe,ie,le,se,me,ue,de,pe]})],e)}(),fe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n}return y(r,e),r.prototype.configForm=function(){return this.checkMessageConfigForm},r.prototype.onConfigurationSet=function(e){this.checkMessageConfigForm=this.fb.group({messageNames:[e?e.messageNames:null,[]],metadataNames:[e?e.metadataNames:null,[]],checkAllKeys:[!!e&&e.checkAllKeys,[]]})},r.prototype.validateConfig=function(){var e=this.checkMessageConfigForm.get("messageNames").value,t=this.checkMessageConfigForm.get("metadataNames").value;return e.length>0||t.length>0},r.prototype.removeMessageName=function(e){var t=this.checkMessageConfigForm.get("messageNames").value,r=t.indexOf(e);r>=0&&(t.splice(r,1),this.checkMessageConfigForm.get("messageNames").setValue(t,{emitEvent:!0}))},r.prototype.removeMetadataName=function(e){var t=this.checkMessageConfigForm.get("metadataNames").value,r=t.indexOf(e);r>=0&&(t.splice(r,1),this.checkMessageConfigForm.get("metadataNames").setValue(t,{emitEvent:!0}))},r.prototype.addMessageName=function(e){var t=e.input,r=e.value;if((r||"").trim()){r=r.trim();var n=this.checkMessageConfigForm.get("messageNames").value;n&&-1!==n.indexOf(r)||(n||(n=[]),n.push(r),this.checkMessageConfigForm.get("messageNames").setValue(n,{emitEvent:!0}))}t&&(t.value="")},r.prototype.addMetadataName=function(e){var t=e.input,r=e.value;if((r||"").trim()){r=r.trim();var n=this.checkMessageConfigForm.get("metadataNames").value;n&&-1!==n.indexOf(r)||(n||(n=[]),n.push(r),this.checkMessageConfigForm.get("metadataNames").setValue(n,{emitEvent:!0}))}t&&(t.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-check-message-config",template:'<section [formGroup]="checkMessageConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding tb-required">tb.rulenode.data-keys</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #messageNamesChipList>\n      <mat-chip\n        *ngFor="let messageName of checkMessageConfigForm.get(\'messageNames\').value;"\n        (removed)="removeMessageName(messageName)">\n        {{messageName}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.data-keys\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="messageNamesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addMessageName($event)"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <div class="tb-hint" translate>tb.rulenode.separator-hint</div>\n  <label translate class="tb-title no-padding tb-required">tb.rulenode.metadata-keys</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #metadataNamesChipList>\n      <mat-chip\n        *ngFor="let metadataName of checkMessageConfigForm.get(\'metadataNames\').value;"\n        (removed)="removeMetadataName(metadataName)">\n        {{metadataName}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.metadata-keys\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="metadataNamesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addMetadataName($event)"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <div class="tb-hint" translate>tb.rulenode.separator-hint</div>\n  <mat-checkbox fxFlex formControlName="checkAllKeys" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.check-all-keys\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.check-all-keys-hint</div>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ge=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.entitySearchDirection=Object.keys(a.EntitySearchDirection),n.entitySearchDirectionTranslationsMap=a.entitySearchDirectionTranslations,n}return y(r,e),r.prototype.configForm=function(){return this.checkRelationConfigForm},r.prototype.onConfigurationSet=function(e){this.checkRelationConfigForm=this.fb.group({checkForSingleEntity:[!!e&&e.checkForSingleEntity,[]],direction:[e?e.direction:null,[]],entityType:[e?e.entityType:null,e&&e.checkForSingleEntity?[i.Validators.required]:[]],entityId:[e?e.entityId:null,e&&e.checkForSingleEntity?[i.Validators.required]:[]],relationType:[e?e.relationType:null,[i.Validators.required]]})},r.prototype.validatorTriggers=function(){return["checkForSingleEntity"]},r.prototype.updateValidators=function(e){var t=this.checkRelationConfigForm.get("checkForSingleEntity").value;this.checkRelationConfigForm.get("entityType").setValidators(t?[i.Validators.required]:[]),this.checkRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:e}),this.checkRelationConfigForm.get("entityId").setValidators(t?[i.Validators.required]:[]),this.checkRelationConfigForm.get("entityId").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-check-relation-config",template:'<section [formGroup]="checkRelationConfigForm" fxLayout="column">\n  <mat-checkbox fxFlex formControlName="checkForSingleEntity" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.check-relation-to-specific-entity\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.check-relation-hint</div>\n  <mat-form-field class="mat-block" style="min-width: 100px;">\n    <mat-label translate>relation.direction</mat-label>\n    <mat-select formControlName="direction" required>\n      <mat-option *ngFor="let direction of entitySearchDirection" [value]="direction">\n        {{ entitySearchDirectionTranslationsMap.get(direction) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout="row" *ngIf="checkRelationConfigForm.get(\'checkForSingleEntity\').value" style="padding-top: 20px">\n    <tb-entity-type-select\n      style="min-width: 100px; padding-bottom: 20px; padding-right: 8px;"\n      showLabel\n      required\n      formControlName="entityType">\n    </tb-entity-type-select>\n    <tb-entity-autocomplete\n      fxFlex\n      required\n      *ngIf="checkRelationConfigForm.get(\'entityType\').value"\n      [entityType]="checkRelationConfigForm.get(\'entityType\').value"\n      formControlName="entityId">\n    </tb-entity-autocomplete>\n  </div>\n  <tb-relation-type-autocomplete\n    required\n    formControlName="relationType">\n  </tb-relation-type-autocomplete>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ye=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.perimeterType=M,n.perimeterTypes=Object.keys(M),n.perimeterTypeTranslationMap=w,n.rangeUnits=Object.keys(D),n.rangeUnitTranslationMap=B,n}return y(r,e),r.prototype.configForm=function(){return this.geoFilterConfigForm},r.prototype.onConfigurationSet=function(e){this.geoFilterConfigForm=this.fb.group({latitudeKeyName:[e?e.latitudeKeyName:null,[i.Validators.required]],longitudeKeyName:[e?e.longitudeKeyName:null,[i.Validators.required]],fetchPerimeterInfoFromMessageMetadata:[!!e&&e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterType:[e?e.perimeterType:null,[]],centerLatitude:[e?e.centerLatitude:null,[]],centerLongitude:[e?e.centerLatitude:null,[]],range:[e?e.range:null,[]],rangeUnit:[e?e.rangeUnit:null,[]],polygonsDefinition:[e?e.polygonsDefinition:null,[]]})},r.prototype.validatorTriggers=function(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]},r.prototype.updateValidators=function(e){var t=this.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,r=this.geoFilterConfigForm.get("perimeterType").value;t?this.geoFilterConfigForm.get("perimeterType").setValidators([]):this.geoFilterConfigForm.get("perimeterType").setValidators([i.Validators.required]),t||r!==M.CIRCLE?(this.geoFilterConfigForm.get("centerLatitude").setValidators([]),this.geoFilterConfigForm.get("centerLongitude").setValidators([]),this.geoFilterConfigForm.get("range").setValidators([]),this.geoFilterConfigForm.get("rangeUnit").setValidators([])):(this.geoFilterConfigForm.get("centerLatitude").setValidators([i.Validators.required,i.Validators.min(-90),i.Validators.max(90)]),this.geoFilterConfigForm.get("centerLongitude").setValidators([i.Validators.required,i.Validators.min(-180),i.Validators.max(180)]),this.geoFilterConfigForm.get("range").setValidators([i.Validators.required,i.Validators.min(0)]),this.geoFilterConfigForm.get("rangeUnit").setValidators([i.Validators.required])),t||r!==M.POLYGON?this.geoFilterConfigForm.get("polygonsDefinition").setValidators([]):this.geoFilterConfigForm.get("polygonsDefinition").setValidators([i.Validators.required]),this.geoFilterConfigForm.get("perimeterType").updateValueAndValidity({emitEvent:!1}),this.geoFilterConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-gps-geofencing-config",template:'<section [formGroup]="geoFilterConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.latitude-key-name</mat-label>\n    <input matInput formControlName="latitudeKeyName" required>\n    <mat-error *ngIf="geoFilterConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.latitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.longitude-key-name</mat-label>\n    <input matInput formControlName="longitudeKeyName" required>\n    <mat-error *ngIf="geoFilterConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.longitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-checkbox fxFlex formControlName="fetchPerimeterInfoFromMessageMetadata" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.fetch-perimeter-info-from-message-metadata\' | translate }}\n  </mat-checkbox>\n  <div fxLayout="row" *ngIf="!geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.perimeter-type</mat-label>\n      <mat-select formControlName="perimeterType" required>\n        <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n          {{ perimeterTypeTranslationMap.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column"\n       *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n       !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-latitude</mat-label>\n        <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-longitude</mat-label>\n        <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range</mat-label>\n        <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'range\').hasError(\'required\')">\n          {{ \'tb.rulenode.range-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range-units</mat-label>\n        <mat-select formControlName="rangeUnit" required>\n          <mat-option *ngFor="let type of rangeUnits" [value]="type">\n            {{ rangeUnitTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div fxLayout="row" *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                             !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <div fxLayout="column" fxFlex="100">\n      <mat-form-field class="mat-block" hintLabel="{{\'tb.rulenode.polygon-definition-hint\' | translate}}">\n        <mat-label translate>tb.rulenode.polygon-definition</mat-label>\n        <input matInput formControlName="polygonsDefinition" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n          {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),be=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.messageTypeConfigForm},r.prototype.onConfigurationSet=function(e){this.messageTypeConfigForm=this.fb.group({messageTypes:[e?e.messageTypes:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-message-type-config",template:'<section [formGroup]="messageTypeConfigForm" fxLayout="column">\n  <tb-message-types-config\n    required\n    label="tb.rulenode.message-types-filter"\n    formControlName="messageTypes"\n  ></tb-message-types-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),he=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.allowedEntityTypes=[a.EntityType.DEVICE,a.EntityType.ASSET,a.EntityType.ENTITY_VIEW,a.EntityType.TENANT,a.EntityType.CUSTOMER,a.EntityType.USER,a.EntityType.DASHBOARD,a.EntityType.RULE_CHAIN,a.EntityType.RULE_NODE],n}return y(r,e),r.prototype.configForm=function(){return this.originatorTypeConfigForm},r.prototype.onConfigurationSet=function(e){this.originatorTypeConfigForm=this.fb.group({originatorTypes:[e?e.originatorTypes:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-originator-type-config",template:'<section [formGroup]="originatorTypeConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding tb-required">tb.rulenode.originator-types-filter</label>\n  <tb-entity-type-list fxFlex\n                       formControlName="originatorTypes"\n                       [allowedEntityTypes]="allowedEntityTypes"\n                       [ignoreAuthorityFilter]="true"\n                       required>\n  </tb-entity-type-list>\n</section>\n',styles:[":host ::ng-deep tb-entity-type-list .mat-form-field-flex{padding-top:0}:host ::ng-deep tb-entity-type-list .mat-form-field-infix{border-top:0}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ce=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.scriptConfigForm},r.prototype.onConfigurationSet=function(e){this.scriptConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.scriptConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"filter",this.translate.instant("tb.rulenode.filter"),"Filter",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.scriptConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-filter-node-script-config",template:'<section [formGroup]="scriptConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.filter</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Filter"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-filter-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),ve=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.switchConfigForm},r.prototype.onConfigurationSet=function(e){this.switchConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.switchConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"switch",this.translate.instant("tb.rulenode.switch"),"Switch",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.switchConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-filter-node-switch-config",template:'<section [formGroup]="switchConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.switch</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Switch"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-switch-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),Fe=function(e){function r(t,r,n){var o,l,s=e.call(this,t)||this;s.store=t,s.translate=r,s.fb=n,s.alarmStatusTranslationsMap=a.alarmStatusTranslations,s.alarmStatusList=[],s.searchText="",s.displayStatusFn=s.displayStatus.bind(s);try{for(var m=C(Object.keys(a.AlarmStatus)),u=m.next();!u.done;u=m.next()){var d=u.value;s.alarmStatusList.push(a.AlarmStatus[d])}}catch(e){o={error:e}}finally{try{u&&!u.done&&(l=m.return)&&l.call(m)}finally{if(o)throw o.error}}return s.statusFormControl=new i.FormControl(""),s.filteredAlarmStatus=s.statusFormControl.valueChanges.pipe(f.startWith(""),f.map((function(e){return e||""})),f.mergeMap((function(e){return s.fetchAlarmStatus(e)})),f.share()),s}return y(r,e),r.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},r.prototype.configForm=function(){return this.alarmStatusConfigForm},r.prototype.prepareInputConfig=function(e){return this.searchText="",this.statusFormControl.patchValue("",{emitEvent:!0}),e},r.prototype.onConfigurationSet=function(e){this.alarmStatusConfigForm=this.fb.group({alarmStatusList:[e?e.alarmStatusList:null,[i.Validators.required]]})},r.prototype.displayStatus=function(e){return e?this.translate.instant(a.alarmStatusTranslations.get(e)):void 0},r.prototype.fetchAlarmStatus=function(e){var t=this,r=this.getAlarmStatusList();if(this.searchText=e,this.searchText&&this.searchText.length){var n=this.searchText.toUpperCase();return c.of(r.filter((function(e){return t.translate.instant(a.alarmStatusTranslations.get(a.AlarmStatus[e])).toUpperCase().includes(n)})))}return c.of(r)},r.prototype.alarmStatusSelected=function(e){this.addAlarmStatus(e.option.value),this.clear("")},r.prototype.removeAlarmStatus=function(e){var t=this.alarmStatusConfigForm.get("alarmStatusList").value;if(t){var r=t.indexOf(e);r>=0&&(t.splice(r,1),this.alarmStatusConfigForm.get("alarmStatusList").setValue(t))}},r.prototype.addAlarmStatus=function(e){var t=this.alarmStatusConfigForm.get("alarmStatusList").value;t||(t=[]),-1===t.indexOf(e)&&(t.push(e),this.alarmStatusConfigForm.get("alarmStatusList").setValue(t))},r.prototype.getAlarmStatusList=function(){var e=this;return this.alarmStatusList.filter((function(t){return-1===e.alarmStatusConfigForm.get("alarmStatusList").value.indexOf(t)}))},r.prototype.onAlarmStatusInputFocus=function(){this.statusFormControl.updateValueAndValidity({onlySelf:!0,emitEvent:!0})},r.prototype.clear=function(e){var t=this;void 0===e&&(e=""),this.alarmStatusInput.nativeElement.value=e,this.statusFormControl.patchValue(null,{emitEvent:!0}),setTimeout((function(){t.alarmStatusInput.nativeElement.blur(),t.alarmStatusInput.nativeElement.focus()}),0)},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:i.FormBuilder}]},b([t.ViewChild("alarmStatusInput",{static:!1}),h("design:type",t.ElementRef)],r.prototype,"alarmStatusInput",void 0),r=b([t.Component({selector:"tb-filter-node-check-alarm-status-config",template:'<section [formGroup]="alarmStatusConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" class="alarm-status-list">\n  <mat-label translate>tb.rulenode.alarm-status-filter</mat-label>\n  <mat-chip-list #alarmStatusChipList required>\n    <mat-chip\n      *ngFor="let alarmStatus of alarmStatusConfigForm.get(\'alarmStatusList\').value;"\n      (removed)="removeAlarmStatus(alarmStatus)">\n        <span>\n          <strong>{{alarmStatusTranslationsMap.get(alarmStatus) | translate}}</strong>\n        </span>\n      <mat-icon matChipRemove>close</mat-icon>\n    </mat-chip>\n    <input matInput type="text"\n           style="max-width: 200px;"\n           #alarmStatusInput\n           (focusin)="onAlarmStatusInputFocus()"\n           [formControl]="statusFormControl"\n           matAutocompleteOrigin\n           #origin="matAutocompleteOrigin"\n           [matAutocompleteConnectedTo]="origin"\n           [matAutocomplete]="alarmStatusAutocomplete"\n           [matChipInputFor]="alarmStatusChipList">\n  </mat-chip-list>\n  <mat-autocomplete #alarmStatusAutocomplete="matAutocomplete"\n                    class="tb-autocomplete"\n                    (optionSelected)="alarmStatusSelected($event)"\n                    [displayWith]="displayStatusFn">\n    <mat-option *ngFor="let status of filteredAlarmStatus | async" [value]="status">\n      <span [innerHTML]="alarmStatusTranslationsMap.get(status) | translate | highlight:searchText"></span>\n    </mat-option>\n    <mat-option *ngIf="(filteredAlarmStatus | async)?.length === 0" [value]="null" class="tb-not-found">\n      <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n        <div>\n          <span translate>tb.rulenode.no-alarm-status-matching</span>\n        </div>\n      </div>\n    </mat-option>\n  </mat-autocomplete>\n  </mat-form-field>\n  <tb-error [error]="(statusFormControl.touched &&\n                     alarmStatusConfigForm.get(\'alarmStatusList\').hasError(\'required\'))\n                  ? translate.instant(\'tb.rulenode.alarm-status-list-empty\') : \'\'"></tb-error>\n  </section>\n\n\n\n'}),h("design:paramtypes",[o.Store,n.TranslateService,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Te=function(){function e(){}return e=b([t.NgModule({declarations:[fe,ge,ye,be,he,Ce,ve,Fe],imports:[r.CommonModule,a.SharedModule,ne],exports:[fe,ge,ye,be,he,Ce,ve,Fe]})],e)}(),xe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.customerAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.customerAttributesConfigForm=this.fb.group({telemetry:[!!e&&e.telemetry,[]],attrMapping:[e?e.attrMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-customer-attributes-config",template:'<section [formGroup]="customerAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.attr-mapping</label>\n  <mat-checkbox fxFlex formControlName="telemetry" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.latest-telemetry\' | translate }}\n  </mat-checkbox>\n  <tb-kv-map-config\n    required\n    formControlName="attrMapping"\n    requiredText="tb.rulenode.attr-mapping-required"\n    keyText="{{ customerAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry\' : \'tb.rulenode.source-attribute\' }}"\n    keyRequiredText="{{ customerAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry-required\' : \'tb.rulenode.source-attribute-required\' }}"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),qe=function(e){function r(t,r,n){var a,o,l=e.call(this,t)||this;l.store=t,l.translate=r,l.fb=n,l.entityDetailsTranslationsMap=H,l.entityDetailsList=[],l.searchText="",l.displayDetailsFn=l.displayDetails.bind(l);try{for(var s=C(Object.keys(K)),m=s.next();!m.done;m=s.next()){var u=m.value;l.entityDetailsList.push(K[u])}}catch(e){a={error:e}}finally{try{m&&!m.done&&(o=s.return)&&o.call(s)}finally{if(a)throw a.error}}return l.detailsFormControl=new i.FormControl(""),l.filteredEntityDetails=l.detailsFormControl.valueChanges.pipe(f.startWith(""),f.map((function(e){return e||""})),f.mergeMap((function(e){return l.fetchEntityDetails(e)})),f.share()),l}return y(r,e),r.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},r.prototype.configForm=function(){return this.entityDetailsConfigForm},r.prototype.prepareInputConfig=function(e){return this.searchText="",this.detailsFormControl.patchValue("",{emitEvent:!0}),e},r.prototype.onConfigurationSet=function(e){this.entityDetailsConfigForm=this.fb.group({detailsList:[e?e.detailsList:null,[i.Validators.required]],addToMetadata:[!!e&&e.addToMetadata,[]]})},r.prototype.displayDetails=function(e){return e?this.translate.instant(H.get(e)):void 0},r.prototype.fetchEntityDetails=function(e){var t=this;if(this.searchText=e,this.searchText&&this.searchText.length){var r=this.searchText.toUpperCase();return c.of(this.entityDetailsList.filter((function(e){return t.translate.instant(H.get(K[e])).toUpperCase().includes(r)})))}return c.of(this.entityDetailsList)},r.prototype.detailsFieldSelected=function(e){this.addDetailsField(e.option.value),this.clear("")},r.prototype.removeDetailsField=function(e){var t=this.entityDetailsConfigForm.get("detailsList").value;if(t){var r=t.indexOf(e);r>=0&&(t.splice(r,1),this.entityDetailsConfigForm.get("detailsList").setValue(t))}},r.prototype.addDetailsField=function(e){var t=this.entityDetailsConfigForm.get("detailsList").value;t||(t=[]),-1===t.indexOf(e)&&(t.push(e),this.entityDetailsConfigForm.get("detailsList").setValue(t))},r.prototype.onEntityDetailsInputFocus=function(){this.detailsFormControl.updateValueAndValidity({onlySelf:!0,emitEvent:!0})},r.prototype.clear=function(e){var t=this;void 0===e&&(e=""),this.detailsInput.nativeElement.value=e,this.detailsFormControl.patchValue(null,{emitEvent:!0}),setTimeout((function(){t.detailsInput.nativeElement.blur(),t.detailsInput.nativeElement.focus()}),0)},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:i.FormBuilder}]},b([t.ViewChild("detailsInput",{static:!1}),h("design:type",t.ElementRef)],r.prototype,"detailsInput",void 0),r=b([t.Component({selector:"tb-enrichment-node-entity-details-config",template:'<section [formGroup]="entityDetailsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" class="entity-fields-list">\n    <mat-label translate>tb.rulenode.entity-details</mat-label>\n    <mat-chip-list #detailsChipList required>\n      <mat-chip\n        *ngFor="let details of entityDetailsConfigForm.get(\'detailsList\').value;"\n        (removed)="removeDetailsField(details)">\n        <span>\n          <strong>{{entityDetailsTranslationsMap.get(details) | translate}}</strong>\n        </span>\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text"\n             style="max-width: 200px;"\n             #detailsInput\n             (focusin)="onEntityDetailsInputFocus()"\n             [formControl]="detailsFormControl"\n             matAutocompleteOrigin\n             #origin="matAutocompleteOrigin"\n             [matAutocompleteConnectedTo]="origin"\n             [matAutocomplete]="detailsAutocomplete"\n             [matChipInputFor]="detailsChipList">\n    </mat-chip-list>\n    <mat-autocomplete #detailsAutocomplete="matAutocomplete"\n                      class="tb-autocomplete"\n                      (optionSelected)="detailsFieldSelected($event)"\n                      [displayWith]="displayDetailsFn">\n      <mat-option *ngFor="let details of filteredEntityDetails | async" [value]="details">\n        <span [innerHTML]="entityDetailsTranslationsMap.get(details) | translate | highlight:searchText"></span>\n      </mat-option>\n      <mat-option *ngIf="(filteredEntityDetails | async)?.length === 0" [value]="null" class="tb-not-found">\n        <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n          <div>\n            <span translate>tb.rulenode.no-entity-details-matching</span>\n          </div>\n        </div>\n      </mat-option>\n    </mat-autocomplete>\n  </mat-form-field>\n  <tb-error [error]="(detailsFormControl.touched &&\n                     entityDetailsConfigForm.get(\'detailsList\').hasError(\'required\'))\n                  ? translate.instant(\'tb.rulenode.entity-details-list-empty\') : \'\'"></tb-error>\n  <mat-checkbox fxFlex formControlName="addToMetadata" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.add-to-metadata\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.add-to-metadata-hint</div>\n</section>\n',styles:[":host ::ng-deep mat-form-field.entity-fields-list .mat-form-field-wrapper{margin-bottom:-1.25em}"]}),h("design:paramtypes",[o.Store,n.TranslateService,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Se=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n}return y(r,e),r.prototype.configForm=function(){return this.deviceAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.deviceAttributesConfigForm=this.fb.group({deviceRelationsQuery:[e?e.deviceRelationsQuery:null,[i.Validators.required]],tellFailureIfAbsent:[!!e&&e.tellFailureIfAbsent,[]],clientAttributeNames:[e?e.clientAttributeNames:null,[]],sharedAttributeNames:[e?e.sharedAttributeNames:null,[]],serverAttributeNames:[e?e.serverAttributeNames:null,[]],latestTsKeyNames:[e?e.latestTsKeyNames:null,[]],getLatestValueWithTs:[!!e&&e.getLatestValueWithTs,[]]})},r.prototype.removeKey=function(e,t){var r=this.deviceAttributesConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.deviceAttributesConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.deviceAttributesConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.deviceAttributesConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-device-attributes-config",template:'<section [formGroup]="deviceAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.device-relations-query</label>\n  <tb-device-relations-query-config\n    required\n    formControlName="deviceRelationsQuery"\n    style="padding-bottom: 15px;">\n  </tb-device-relations-query-config>\n  <mat-checkbox fxFlex formControlName="tellFailureIfAbsent" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.tell-failure-if-absent\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.tell-failure-if-absent-hint</div>\n  <label translate class="tb-title no-padding">tb.rulenode.client-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #clientAttributesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'clientAttributeNames\').value;"\n        (removed)="removeKey(key, \'clientAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.client-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="clientAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'clientAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.shared-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #sharedAttributesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'sharedAttributeNames\').value;"\n        (removed)="removeKey(key, \'sharedAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.shared-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="sharedAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'sharedAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.server-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #serverAttributesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'serverAttributeNames\').value;"\n        (removed)="removeKey(key, \'serverAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.server-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="serverAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'serverAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.latest-timeseries</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #latestTimeseriesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'latestTsKeyNames\').value;"\n        (removed)="removeKey(key, \'latestTsKeyNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.latest-timeseries\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="latestTimeseriesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'latestTsKeyNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <mat-checkbox formControlName="getLatestValueWithTs" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.get-latest-value-with-ts\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" innerHTML="{{ \'tb.rulenode.get-latest-value-with-ts-hint\' | translate }}"></div>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ie=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n}return y(r,e),r.prototype.configForm=function(){return this.originatorAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.originatorAttributesConfigForm=this.fb.group({tellFailureIfAbsent:[!!e&&e.tellFailureIfAbsent,[]],clientAttributeNames:[e?e.clientAttributeNames:null,[]],sharedAttributeNames:[e?e.sharedAttributeNames:null,[]],serverAttributeNames:[e?e.serverAttributeNames:null,[]],latestTsKeyNames:[e?e.latestTsKeyNames:null,[]],getLatestValueWithTs:[!!e&&e.getLatestValueWithTs,[]]})},r.prototype.removeKey=function(e,t){var r=this.originatorAttributesConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.originatorAttributesConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.originatorAttributesConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.originatorAttributesConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-originator-attributes-config",template:'<section [formGroup]="originatorAttributesConfigForm" fxLayout="column">\n  <mat-checkbox fxFlex formControlName="tellFailureIfAbsent" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.tell-failure-if-absent\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.tell-failure-if-absent-hint</div>\n  <label translate class="tb-title no-padding">tb.rulenode.client-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #clientAttributesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'clientAttributeNames\').value;"\n        (removed)="removeKey(key, \'clientAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.client-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="clientAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'clientAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.shared-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #sharedAttributesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'sharedAttributeNames\').value;"\n        (removed)="removeKey(key, \'sharedAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.shared-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="sharedAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'sharedAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.server-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #serverAttributesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'serverAttributeNames\').value;"\n        (removed)="removeKey(key, \'serverAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.server-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="serverAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'serverAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.latest-timeseries</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #latestTimeseriesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'latestTsKeyNames\').value;"\n        (removed)="removeKey(key, \'latestTsKeyNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.latest-timeseries\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="latestTimeseriesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'latestTsKeyNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <mat-checkbox formControlName="getLatestValueWithTs" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.get-latest-value-with-ts\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" innerHTML="{{ \'tb.rulenode.get-latest-value-with-ts-hint\' | translate }}"></div>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ke=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.originatorFieldsConfigForm},r.prototype.onConfigurationSet=function(e){this.originatorFieldsConfigForm=this.fb.group({fieldsMapping:[e?e.fieldsMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-originator-fields-config",template:'<section [formGroup]="originatorFieldsConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.fields-mapping</label>\n  <tb-kv-map-config\n    required\n    formControlName="fieldsMapping"\n    requiredText="tb.rulenode.fields-mapping-required"\n    keyText="tb.rulenode.source-field"\n    keyRequiredText="tb.rulenode.source-field-required"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ne=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n.fetchMode=j,n.fetchModes=Object.keys(j),n.samplingOrders=Object.keys(U),n.timeUnits=Object.keys(R),n.timeUnitsTranslationMap=O,n}return y(r,e),r.prototype.configForm=function(){return this.getTelemetryFromDatabaseConfigForm},r.prototype.onConfigurationSet=function(e){this.getTelemetryFromDatabaseConfigForm=this.fb.group({latestTsKeyNames:[e?e.latestTsKeyNames:null,[]],fetchMode:[e?e.fetchMode:null,[i.Validators.required]],orderBy:[e?e.orderBy:null,[]],limit:[e?e.limit:null,[]],useMetadataIntervalPatterns:[!!e&&e.useMetadataIntervalPatterns,[]],startInterval:[e?e.startInterval:null,[]],startIntervalTimeUnit:[e?e.startIntervalTimeUnit:null,[]],endInterval:[e?e.endInterval:null,[]],endIntervalTimeUnit:[e?e.endIntervalTimeUnit:null,[]],startIntervalPattern:[e?e.startIntervalPattern:null,[]],endIntervalPattern:[e?e.endIntervalPattern:null,[]]})},r.prototype.validatorTriggers=function(){return["fetchMode","useMetadataIntervalPatterns"]},r.prototype.updateValidators=function(e){var t=this.getTelemetryFromDatabaseConfigForm.get("fetchMode").value,r=this.getTelemetryFromDatabaseConfigForm.get("useMetadataIntervalPatterns").value;t&&t===j.ALL?(this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([i.Validators.required,i.Validators.min(2),i.Validators.max(1e3)])):(this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([])),r?(this.getTelemetryFromDatabaseConfigForm.get("startInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([i.Validators.required])):(this.getTelemetryFromDatabaseConfigForm.get("startInterval").setValidators([i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalTimeUnit").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("endInterval").setValidators([i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalTimeUnit").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([])),this.getTelemetryFromDatabaseConfigForm.get("orderBy").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("limit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").updateValueAndValidity({emitEvent:e})},r.prototype.removeKey=function(e,t){var r=this.getTelemetryFromDatabaseConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.getTelemetryFromDatabaseConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-get-telemetry-from-database",template:'<section [formGroup]="getTelemetryFromDatabaseConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.latest-timeseries</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #latestTimeseriesChipList>\n      <mat-chip\n        *ngFor="let key of getTelemetryFromDatabaseConfigForm.get(\'latestTsKeyNames\').value;"\n        (removed)="removeKey(key, \'latestTsKeyNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.latest-timeseries\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="latestTimeseriesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'latestTsKeyNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.fetch-mode</mat-label>\n    <mat-select formControlName="fetchMode" required>\n      <mat-option *ngFor="let mode of fetchModes" [value]="mode">\n        {{ mode }}\n      </mat-option>\n    </mat-select>\n    <mat-hint translate>tb.rulenode.fetch-mode-hint</mat-hint>\n  </mat-form-field>\n  <div fxLayout="column" *ngIf="getTelemetryFromDatabaseConfigForm.get(\'fetchMode\').value === fetchMode.ALL">\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.order-by</mat-label>\n      <mat-select formControlName="orderBy" required>\n        <mat-option *ngFor="let order of samplingOrders" [value]="order">\n          {{ order }}\n        </mat-option>\n      </mat-select>\n      <mat-hint translate>tb.rulenode.order-by-hint</mat-hint>\n    </mat-form-field>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.limit</mat-label>\n      <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>\n      <mat-hint translate>tb.rulenode.limit-hint</mat-hint>\n    </mat-form-field>\n  </div>\n  <mat-checkbox formControlName="useMetadataIntervalPatterns">\n    {{ \'tb.rulenode.use-metadata-interval-patterns\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.use-metadata-interval-patterns-hint</div>\n  <div fxLayout="column" *ngIf="getTelemetryFromDatabaseConfigForm.get(\'useMetadataIntervalPatterns\').value === false; else intervalPattern">\n    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.start-interval</mat-label>\n        <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startInterval\').hasError(\'required\')">\n          {{ \'tb.rulenode.start-interval-value-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startInterval\').hasError(\'min\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startInterval\').hasError(\'max\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.start-interval-time-unit</mat-label>\n        <mat-select formControlName="startIntervalTimeUnit" required>\n          <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.end-interval</mat-label>\n        <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endInterval\').hasError(\'required\')">\n          {{ \'tb.rulenode.end-interval-value-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endInterval\').hasError(\'min\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endInterval\').hasError(\'max\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.end-interval-time-unit</mat-label>\n        <mat-select formControlName="endIntervalTimeUnit" required>\n          <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <ng-template #intervalPattern>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.start-interval-pattern</mat-label>\n      <input matInput formControlName="startIntervalPattern" required>\n      <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startIntervalPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.start-interval-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.start-interval-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.end-interval-pattern</mat-label>\n      <input matInput formControlName="endIntervalPattern" required>\n      <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endIntervalPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.end-interval-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.end-interval-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </ng-template>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ve=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.relatedAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.relatedAttributesConfigForm=this.fb.group({relationsQuery:[e?e.relationsQuery:null,[i.Validators.required]],telemetry:[!!e&&e.telemetry,[]],attrMapping:[e?e.attrMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-related-attributes-config",template:'<section [formGroup]="relatedAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.relations-query</label>\n  <tb-relations-query-config\n    required\n    formControlName="relationsQuery"\n    style="padding-bottom: 15px;">\n  </tb-relations-query-config>\n  <label translate class="tb-title tb-required">tb.rulenode.attr-mapping</label>\n  <mat-checkbox fxFlex formControlName="telemetry" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.latest-telemetry\' | translate }}\n  </mat-checkbox>\n  <tb-kv-map-config\n    required\n    formControlName="attrMapping"\n    requiredText="tb.rulenode.attr-mapping-required"\n    keyText="{{ relatedAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry\' : \'tb.rulenode.source-attribute\' }}"\n    keyRequiredText="{{ relatedAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry-required\' : \'tb.rulenode.source-attribute-required\' }}"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ee=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.tenantAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.tenantAttributesConfigForm=this.fb.group({telemetry:[!!e&&e.telemetry,[]],attrMapping:[e?e.attrMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-tenant-attributes-config",template:'<section [formGroup]="tenantAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.attr-mapping</label>\n  <mat-checkbox fxFlex formControlName="telemetry" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.latest-telemetry\' | translate }}\n  </mat-checkbox>\n  <tb-kv-map-config\n    required\n    formControlName="attrMapping"\n    requiredText="tb.rulenode.attr-mapping-required"\n    keyText="{{ tenantAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry\' : \'tb.rulenode.source-attribute\' }}"\n    keyRequiredText="{{ tenantAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry-required\' : \'tb.rulenode.source-attribute-required\' }}"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ae=function(){function e(){}return e=b([t.NgModule({declarations:[xe,qe,Se,Ie,ke,Ne,Ve,Ee],imports:[r.CommonModule,a.SharedModule,ne],exports:[xe,qe,Se,Ie,ke,Ne,Ve,Ee]})],e)}(),Le=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.originatorSource=v,n.originatorSources=Object.keys(v),n.originatorSourceTranslationMap=P,n}return y(r,e),r.prototype.configForm=function(){return this.changeOriginatorConfigForm},r.prototype.onConfigurationSet=function(e){this.changeOriginatorConfigForm=this.fb.group({originatorSource:[e?e.originatorSource:null,[i.Validators.required]],relationsQuery:[e?e.relationsQuery:null,[]]})},r.prototype.validatorTriggers=function(){return["originatorSource"]},r.prototype.updateValidators=function(e){var t=this.changeOriginatorConfigForm.get("originatorSource").value;t&&t===v.RELATED?this.changeOriginatorConfigForm.get("relationsQuery").setValidators([i.Validators.required]):this.changeOriginatorConfigForm.get("relationsQuery").setValidators([]),this.changeOriginatorConfigForm.get("relationsQuery").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-transformation-node-change-originator-config",template:'<section [formGroup]="changeOriginatorConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.originator-source</mat-label>\n    <mat-select formControlName="originatorSource" required>\n      <mat-option *ngFor="let source of originatorSources" [value]="source">\n        {{ originatorSourceTranslationMap.get(source) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <section fxLayout="column" *ngIf="changeOriginatorConfigForm.get(\'originatorSource\').value === originatorSource.RELATED">\n    <label translate class="tb-title tb-required">tb.rulenode.relations-query</label>\n    <tb-relations-query-config\n      required\n      formControlName="relationsQuery"\n      style="padding-bottom: 15px;">\n    </tb-relations-query-config>\n  </section>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Me=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.scriptConfigForm},r.prototype.onConfigurationSet=function(e){this.scriptConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.scriptConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"update",this.translate.instant("tb.rulenode.transformer"),"Transform",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.scriptConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-transformation-node-script-config",template:'<section [formGroup]="scriptConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.transform</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Transform"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-transformer-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),Pe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.toEmailConfigForm},r.prototype.onConfigurationSet=function(e){this.toEmailConfigForm=this.fb.group({fromTemplate:[e?e.fromTemplate:null,[i.Validators.required]],toTemplate:[e?e.toTemplate:null,[i.Validators.required]],ccTemplate:[e?e.ccTemplate:null,[]],bccTemplate:[e?e.bccTemplate:null,[]],subjectTemplate:[e?e.subjectTemplate:null,[i.Validators.required]],bodyTemplate:[e?e.bodyTemplate:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-transformation-node-to-email-config",template:'<section [formGroup]="toEmailConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.from-template</mat-label>\n    <textarea required matInput formControlName="fromTemplate" rows="2"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'fromTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.from-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.from-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.to-template</mat-label>\n    <textarea required matInput formControlName="toTemplate" rows="2"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'toTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.to-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mail-address-list-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.cc-template</mat-label>\n    <textarea matInput formControlName="ccTemplate" rows="2"></textarea>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mail-address-list-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.bcc-template</mat-label>\n    <textarea matInput formControlName="bccTemplate" rows="2"></textarea>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mail-address-list-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.subject-template</mat-label>\n    <textarea required matInput formControlName="subjectTemplate" rows="2"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'subjectTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.subject-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.subject-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.body-template</mat-label>\n    <textarea required matInput formControlName="bodyTemplate" rows="6"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'bodyTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.body-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.body-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Re=function(){function e(){}return e=b([t.NgModule({declarations:[Le,Me,Pe],imports:[r.CommonModule,a.SharedModule,ne],exports:[Le,Me,Pe]})],e)}(),we=function(){function e(e){!function(e){e.setTranslation("en_US",{tb:{rulenode:{"create-entity-if-not-exists":"Create new entity if not exists","create-entity-if-not-exists-hint":"Create a new entity set above if it does not exist.","entity-name-pattern":"Name pattern","entity-name-pattern-required":"Name pattern is required","entity-name-pattern-hint":"Name pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","entity-type-pattern":"Type pattern","entity-type-pattern-required":"Type pattern is required","entity-type-pattern-hint":"Type pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","entity-cache-expiration":"Entities cache expiration time (sec)","entity-cache-expiration-hint":"Specifies maximum time interval allowed to store found entity records. 0 value means that records will never expire.","entity-cache-expiration-required":"Entities cache expiration time is required.","entity-cache-expiration-range":"Entities cache expiration time should be greater than or equal to 0.","customer-name-pattern":"Customer name pattern","customer-name-pattern-required":"Customer name pattern is required","create-customer-if-not-exists":"Create new customer if not exists","customer-cache-expiration":"Customers cache expiration time (sec)","customer-name-pattern-hint":"Customer name pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","customer-cache-expiration-hint":"Specifies maximum time interval allowed to store found customer records. 0 value means that records will never expire.","customer-cache-expiration-required":"Customers cache expiration time is required.","customer-cache-expiration-range":"Customers cache expiration time should be greater than or equal to 0.","start-interval":"Start Interval","end-interval":"End Interval","start-interval-time-unit":"Start Interval Time Unit","end-interval-time-unit":"End Interval Time Unit","fetch-mode":"Fetch mode","fetch-mode-hint":"If selected fetch mode 'ALL'  you able to choose telemetry sampling order.","order-by":"Order by","order-by-hint":"Select to choose telemetry sampling order.",limit:"Limit","limit-hint":"Min limit value is 2, max - 1000. In case you want to fetch a single entry, select fetch mode 'FIRST' or 'LAST'.","time-unit-milliseconds":"Milliseconds","time-unit-seconds":"Seconds","time-unit-minutes":"Minutes","time-unit-hours":"Hours","time-unit-days":"Days","time-value-range":"Time value should be in a range from 1 to 2147483647.","start-interval-value-required":"Start interval value is required.","end-interval-value-required":"End interval value is required.",filter:"Filter",switch:"Switch","message-type":"Message type","message-type-required":"Message type is required.","message-types-filter":"Message types filter","no-message-types-found":"No message types found","no-message-type-matching":"'{{messageType}}' not found.","create-new-message-type":"Create a new one!","message-types-required":"Message types are required.","client-attributes":"Client attributes","shared-attributes":"Shared attributes","server-attributes":"Server attributes","latest-timeseries":"Latest timeseries","data-keys":"Message data","metadata-keys":"Message metadata","relations-query":"Relations query","device-relations-query":"Device relations query","max-relation-level":"Max relation level","relation-type-pattern":"Relation type pattern","relation-type-pattern-hint":"Relation type pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","relation-type-pattern-required":"Relation type pattern is required","relation-types-list":"Relation types to propagate","relation-types-list-hint":"If Propagate relation types are not selected, alarms will be propagated without filtering by relation type.","unlimited-level":"Unlimited level","latest-telemetry":"Latest telemetry","attr-mapping":"Attributes mapping","source-attribute":"Source attribute","source-attribute-required":"Source attribute is required.","source-telemetry":"Source telemetry","source-telemetry-required":"Source telemetry is required.","target-attribute":"Target attribute","target-attribute-required":"Target attribute is required.","attr-mapping-required":"At least one attribute mapping should be specified.","fields-mapping":"Fields mapping","fields-mapping-required":"At least one field mapping should be specified.","source-field":"Source field","source-field-required":"Source field is required.","originator-source":"Originator source","originator-customer":"Customer","originator-tenant":"Tenant","originator-related":"Related","originator-alarm-originator":"Alarm Originator","clone-message":"Clone message",transform:"Transform","default-ttl":"Default TTL in seconds","default-ttl-required":"Default TTL is required.","min-default-ttl-message":"Only 0 minimum TTL is allowed.","message-count":"Message count (0 - unlimited)","message-count-required":"Message count is required.","min-message-count-message":"Only 0 minimum message count is allowed.","period-seconds":"Period in seconds","period-seconds-required":"Period is required.","use-metadata-period-in-seconds-patterns":"Use metadata period in seconds pattern","use-metadata-period-in-seconds-patterns-hint":"If selected, rule node use period in seconds interval pattern from message metadata assuming that intervals are in the seconds.","period-in-seconds-pattern":"Period in seconds metadata pattern","period-in-seconds-pattern-required":"Period in seconds pattern is required","period-in-seconds-pattern-hint":"Period in seconds pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","min-period-seconds-message":"Only 1 second minimum period is allowed.",originator:"Originator","message-body":"Message body","message-metadata":"Message metadata",generate:"Generate","test-generator-function":"Test generator function",generator:"Generator","test-filter-function":"Test filter function","test-switch-function":"Test switch function","test-transformer-function":"Test transformer function",transformer:"Transformer","alarm-create-condition":"Alarm create condition","test-condition-function":"Test condition function","alarm-clear-condition":"Alarm clear condition","alarm-details-builder":"Alarm details builder","test-details-function":"Test details function","alarm-type":"Alarm type","alarm-type-required":"Alarm type is required.","alarm-severity":"Alarm severity","alarm-severity-required":"Alarm severity is required","alarm-status-filter":"Alarm status filter","alarm-status-list-empty":"Alarm status list is empty","no-alarm-status-matching":"No alarm status matching were found.",propagate:"Propagate",condition:"Condition",details:"Details","to-string":"To string","test-to-string-function":"Test to string function","from-template":"From Template","from-template-required":"From Template is required","from-template-hint":"From address template, use <code>${metaKeyName}</code> to substitute variables from metadata","to-template":"To Template","to-template-required":"To Template is required","mail-address-list-template-hint":"Comma separated address list, use <code>${metaKeyName}</code> to substitute variables from metadata","cc-template":"Cc Template","bcc-template":"Bcc Template","subject-template":"Subject Template","subject-template-required":"Subject Template is required","subject-template-hint":"Mail subject template, use <code>${metaKeyName}</code> to substitute variables from metadata","body-template":"Body Template","body-template-required":"Body Template is required","body-template-hint":"Mail body template, use <code>${metaKeyName}</code> to substitute variables from metadata","request-id-metadata-attribute":"Request Id Metadata attribute name","timeout-sec":"Timeout in seconds","timeout-required":"Timeout is required","min-timeout-message":"Only 0 minimum timeout value is allowed.","endpoint-url-pattern":"Endpoint URL pattern","endpoint-url-pattern-required":"Endpoint URL pattern is required","endpoint-url-pattern-hint":"HTTP URL address pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","request-method":"Request method","use-simple-client-http-factory":"Use simple client HTTP factory","read-timeout":"Read timeout in millis","read-timeout-hint":"The value of 0 means an infinite timeout","max-parallel-requests-count":"Max number of parallel requests","max-parallel-requests-count-hint":"The value of 0 specifies no limit in parallel processing",headers:"Headers","headers-hint":"Use <code>${metaKeyName}</code> in header/value fields to substitute variables from metadata",header:"Header","header-required":"Header is required",value:"Value","value-required":"Value is required","topic-pattern":"Topic pattern","topic-pattern-required":"Topic pattern is required","mqtt-topic-pattern-hint":"MQTT topic pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","bootstrap-servers":"Bootstrap servers","bootstrap-servers-required":"Bootstrap servers value is required","other-properties":"Other properties",key:"Key","key-required":"Key is required",retries:"Automatically retry times if fails","min-retries-message":"Only 0 minimum retries is allowed.","batch-size-bytes":"Produces batch size in bytes","min-batch-size-bytes-message":"Only 0 minimum batch size is allowed.","linger-ms":"Time to buffer locally (ms)","min-linger-ms-message":"Only 0 ms minimum value is allowed.","buffer-memory-bytes":"Client buffer max size in bytes","min-buffer-memory-message":"Only 0 minimum buffer size is allowed.",acks:"Number of acknowledgments","key-serializer":"Key serializer","key-serializer-required":"Key serializer is required","value-serializer":"Value serializer","value-serializer-required":"Value serializer is required","topic-arn-pattern":"Topic ARN pattern","topic-arn-pattern-required":"Topic ARN pattern is required","topic-arn-pattern-hint":"Topic ARN pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","aws-access-key-id":"AWS Access Key ID","aws-access-key-id-required":"AWS Access Key ID is required","aws-secret-access-key":"AWS Secret Access Key","aws-secret-access-key-required":"AWS Secret Access Key is required","aws-region":"AWS Region","aws-region-required":"AWS Region is required","exchange-name-pattern":"Exchange name pattern","routing-key-pattern":"Routing key pattern","message-properties":"Message properties",host:"Host","host-required":"Host is required",port:"Port","port-required":"Port is required","port-range":"Port should be in a range from 1 to 65535.","virtual-host":"Virtual host",username:"Username",password:"Password","automatic-recovery":"Automatic recovery","connection-timeout-ms":"Connection timeout (ms)","min-connection-timeout-ms-message":"Only 0 ms minimum value is allowed.","handshake-timeout-ms":"Handshake timeout (ms)","min-handshake-timeout-ms-message":"Only 0 ms minimum value is allowed.","client-properties":"Client properties","queue-url-pattern":"Queue URL pattern","queue-url-pattern-required":"Queue URL pattern is required","queue-url-pattern-hint":"Queue URL pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","delay-seconds":"Delay (seconds)","min-delay-seconds-message":"Only 0 seconds minimum value is allowed.","max-delay-seconds-message":"Only 900 seconds maximum value is allowed.",name:"Name","name-required":"Name is required","queue-type":"Queue type","sqs-queue-standard":"Standard","sqs-queue-fifo":"FIFO","gcp-project-id":"GCP project ID","gcp-project-id-required":"GCP project ID is required","gcp-service-account-key":"GCP service account key file","gcp-service-account-key-required":"GCP service account key file is required","pubsub-topic-name":"Topic name","pubsub-topic-name-required":"Topic name is required","message-attributes":"Message attributes","message-attributes-hint":"Use <code>${metaKeyName}</code> in name/value fields to substitute variables from metadata","connect-timeout":"Connection timeout (sec)","connect-timeout-required":"Connection timeout is required.","connect-timeout-range":"Connection timeout should be in a range from 1 to 200.","client-id":"Client ID","clean-session":"Clean session","enable-ssl":"Enable SSL",credentials:"Credentials","credentials-type":"Credentials type","credentials-type-required":"Credentials type is required.","credentials-anonymous":"Anonymous","credentials-basic":"Basic","credentials-pem":"PEM","username-required":"Username is required.","password-required":"Password is required.","ca-cert":"CA certificate file *","private-key":"Private key file *",cert:"Certificate file *","no-file":"No file selected.","drop-file":"Drop a file or click to select a file to upload.","private-key-password":"Private key password","use-system-smtp-settings":"Use system SMTP settings","use-metadata-interval-patterns":"Use metadata interval patterns","use-metadata-interval-patterns-hint":"If selected, rule node use start and end interval patterns from message metadata assuming that intervals are in the milliseconds.","use-message-alarm-data":"Use message alarm data","check-all-keys":"Check that all selected keys are present","check-all-keys-hint":"If selected, checks that all specified keys are present in the message data and metadata.","check-relation-to-specific-entity":"Check relation to specific entity","check-relation-hint":"Checks existence of relation to specific entity or to any entity based on direction and relation type.","delete-relation-to-specific-entity":"Delete relation to specific entity","delete-relation-hint":"Deletes relation from the originator of the incoming message to the specified entity or list of entities based on direction and type.","remove-current-relations":"Remove current relations","remove-current-relations-hint":"Removes current relations from the originator of the incoming message based on direction and type.","change-originator-to-related-entity":"Change originator to related entity","change-originator-to-related-entity-hint":"Used to process submitted message as a message from another entity.","start-interval-pattern":"Start interval pattern","end-interval-pattern":"End interval pattern","start-interval-pattern-required":"Start interval pattern is required","end-interval-pattern-required":"End interval pattern is required","start-interval-pattern-hint":"Start interval pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","end-interval-pattern-hint":"End interval pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","smtp-protocol":"Protocol","smtp-host":"SMTP host","smtp-host-required":"SMTP host is required.","smtp-port":"SMTP port","smtp-port-required":"You must supply a smtp port.","smtp-port-range":"SMTP port should be in a range from 1 to 65535.","timeout-msec":"Timeout ms","min-timeout-msec-message":"Only 0 ms minimum value is allowed.","enter-username":"Enter username","enter-password":"Enter password","enable-tls":"Enable TLS","tls-version":"TLS version","min-period-0-seconds-message":"Only 0 second minimum period is allowed.","max-pending-messages":"Maximum pending messages","max-pending-messages-required":"Maximum pending messages is required.","max-pending-messages-range":"Maximum pending messages should be in a range from 1 to 100000.","originator-types-filter":"Originator types filter","interval-seconds":"Interval in seconds","interval-seconds-required":"Interval is required.","min-interval-seconds-message":"Only 1 second minimum interval is allowed.","output-timeseries-key-prefix":"Output timeseries key prefix","output-timeseries-key-prefix-required":"Output timeseries key prefix required.","separator-hint":'You should press "enter" to complete field input.',"entity-details":"Select entity details:","entity-details-title":"Title","entity-details-country":"Country","entity-details-state":"State","entity-details-zip":"Zip","entity-details-address":"Address","entity-details-address2":"Address2","entity-details-additional_info":"Additional Info","entity-details-phone":"Phone","entity-details-email":"Email","add-to-metadata":"Add selected details to message metadata","add-to-metadata-hint":"If selected, adds the selected details keys to the message metadata instead of message data.","entity-details-list-empty":"No entity details selected.","no-entity-details-matching":"No entity details matching were found.","custom-table-name":"Custom table name","custom-table-name-required":"Table Name is required","custom-table-hint":"You should enter the table name without prefix 'cs_tb_'.","message-field":"Message field","message-field-required":"Message field is required.","table-col":"Table column","table-col-required":"Table column is required.","latitude-key-name":"Latitude key name","longitude-key-name":"Longitude key name","latitude-key-name-required":"Latitude key name is required.","longitude-key-name-required":"Longitude key name is required.","fetch-perimeter-info-from-message-metadata":"Fetch perimeter information from message metadata","perimeter-circle":"Circle","perimeter-polygon":"Polygon","perimeter-type":"Perimeter type","circle-center-latitude":"Center latitude","circle-center-latitude-required":"Center latitude is required.","circle-center-longitude":"Center longitude","circle-center-longitude-required":"Center longitude is required.","range-unit-meter":"Meter","range-unit-kilometer":"Kilometer","range-unit-foot":"Foot","range-unit-mile":"Mile","range-unit-nautical-mile":"Nautical mile","range-units":"Range units",range:"Range","range-required":"Range is required.","polygon-definition":"Polygon definition","polygon-definition-required":"Polygon definition is required.","polygon-definition-hint":"Please, use the following format for manual definition of polygon: [[lat1,lon1],[lat2,lon2], ... ,[latN,lonN]].","min-inside-duration":"Minimal inside duration","min-inside-duration-value-required":"Minimal inside duration is required","min-inside-duration-time-unit":"Minimal inside duration time unit","min-outside-duration":"Minimal outside duration","min-outside-duration-value-required":"Minimal outside duration is required","min-outside-duration-time-unit":"Minimal outside duration time unit","tell-failure-if-absent":"Tell Failure","tell-failure-if-absent-hint":'If at least one selected key doesn\'t exist the outbound message will report "Failure".',"get-latest-value-with-ts":"Fetch Latest telemetry with Timestamp","get-latest-value-with-ts-hint":'If selected, latest telemetry values will be added to the outbound message metadata with timestamp, e.g: "temp": "&lcub;\\"ts\\":1574329385897,\\"value\\":42&rcub;"',"use-redis-queue":"Use redis queue for message persistence","trim-redis-queue":"Trim redis queue","redis-queue-max-size":"Redis queue max size"},"key-val":{key:"Key",value:"Value","remove-entry":"Remove entry","add-entry":"Add entry"}}},!0)}(e)}return e.ctorParameters=function(){return[{type:n.TranslateService}]},e=b([t.NgModule({declarations:[F],imports:[r.CommonModule,a.SharedModule],exports:[ce,Te,Ae,Re,F]}),h("design:paramtypes",[n.TranslateService])],e)}();e.RuleNodeCoreConfigModule=we,e.ɵa=F,e.ɵb=ce,e.ɵba=ne,e.ɵbb=X,e.ɵbc=ee,e.ɵbd=te,e.ɵbe=re,e.ɵbf=Te,e.ɵbg=fe,e.ɵbh=ge,e.ɵbi=ye,e.ɵbj=be,e.ɵbk=he,e.ɵbl=Ce,e.ɵbm=ve,e.ɵbn=Fe,e.ɵbo=Ae,e.ɵbp=xe,e.ɵbq=qe,e.ɵbr=Se,e.ɵbs=Ie,e.ɵbt=ke,e.ɵbu=Ne,e.ɵbv=Ve,e.ɵbw=Ee,e.ɵbx=Re,e.ɵby=Le,e.ɵbz=Me,e.ɵc=T,e.ɵca=Pe,e.ɵd=x,e.ɵe=q,e.ɵf=S,e.ɵg=I,e.ɵh=k,e.ɵi=N,e.ɵj=V,e.ɵk=E,e.ɵl=A,e.ɵm=L,e.ɵn=W,e.ɵo=J,e.ɵp=Y,e.ɵq=Z,e.ɵr=ae,e.ɵs=oe,e.ɵt=ie,e.ɵu=le,e.ɵv=se,e.ɵw=me,e.ɵx=ue,e.ɵy=de,e.ɵz=pe,Object.defineProperty(e,"__esModule",{value:!0})}));
-//# sourceMappingURL=rulenode-core-config.umd.min.js.map
+    ***************************************************************************** */var g=function(e,t){return(g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function y(e,t){function r(){this.constructor=e}g(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}function b(e,t,r,n){var a,o=arguments.length,i=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(i=(o<3?a(i):o>3?a(t,r,i):a(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i}function h(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function C(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}var v,F=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.emptyConfigForm},r.prototype.onConfigurationSet=function(e){this.emptyConfigForm=this.fb.group({})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-node-empty-config",template:"<div></div>"}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),T=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.attributeScopes=Object.keys(a.AttributeScope),n.telemetryTypeTranslationsMap=a.telemetryTypeTranslations,n}return y(r,e),r.prototype.configForm=function(){return this.attributesConfigForm},r.prototype.onConfigurationSet=function(e){this.attributesConfigForm=this.fb.group({scope:[e?e.scope:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-attributes-config",template:'<section [formGroup]="attributesConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>attribute.attributes-scope</mat-label>\n    <mat-select formControlName="scope" required>\n      <mat-option *ngFor="let scope of attributeScopes" [value]="scope">\n        {{ telemetryTypeTranslationsMap.get(scope) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),x=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.timeseriesConfigForm},r.prototype.onConfigurationSet=function(e){this.timeseriesConfigForm=this.fb.group({defaultTTL:[e?e.defaultTTL:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-timeseries-config",template:'<section [formGroup]="timeseriesConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.default-ttl</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="defaultTTL" required>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'required\')">\n      {{ \'tb.rulenode.default-ttl-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="timeseriesConfigForm.get(\'defaultTTL\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-default-ttl-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),q=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.rpcRequestConfigForm},r.prototype.onConfigurationSet=function(e){this.rpcRequestConfigForm=this.fb.group({timeoutInSeconds:[e?e.timeoutInSeconds:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rpc-request-config",template:'<section [formGroup]="rpcRequestConfigForm" fxLayout="column">\n  <mat-form-field fxFlex class="mat-block">\n    <mat-label translate>tb.rulenode.timeout-sec</mat-label>\n    <input type="number" min="0" step="1" matInput formControlName="timeoutInSeconds" required>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.timeout-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="rpcRequestConfigForm.get(\'timeoutInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-timeout-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),S=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.logConfigForm},r.prototype.onConfigurationSet=function(e){this.logConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.logConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"string",this.translate.instant("tb.rulenode.to-string"),"ToString",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.logConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-log-config",template:'<section [formGroup]="logConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.to-string</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="ToString"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-to-string-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),I=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.assignCustomerConfigForm},r.prototype.onConfigurationSet=function(e){this.assignCustomerConfigForm=this.fb.group({customerNamePattern:[e?e.customerNamePattern:null,[i.Validators.required]],createCustomerIfNotExists:[!!e&&e.createCustomerIfNotExists,[]],customerCacheExpiration:[e?e.customerCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-assign-to-customer-config",template:'<section [formGroup]="assignCustomerConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n    <input required matInput formControlName="customerNamePattern">\n    <mat-error *ngIf="assignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-name-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-checkbox fxFlex formControlName="createCustomerIfNotExists" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.create-customer-if-not-exists\' | translate }}\n  </mat-checkbox>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="customerCacheExpiration">\n    <mat-error *ngIf="assignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="assignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.customer-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),k=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.clearAlarmConfigForm},r.prototype.onConfigurationSet=function(e){this.clearAlarmConfigForm=this.fb.group({alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[i.Validators.required]],alarmType:[e?e.alarmType:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.clearAlarmConfigForm.get("alarmDetailsBuildJs").value;this.nodeScriptTestService.testNodeScript(t,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.clearAlarmConfigForm.get("alarmDetailsBuildJs").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-clear-alarm-config",template:'<section [formGroup]="clearAlarmConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.alarm-details-builder</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="alarmDetailsBuildJs"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-details-function\' | translate }}\n    </button>\n  </div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.alarm-type</mat-label>\n    <input required matInput formControlName="alarmType">\n    <mat-error *ngIf="clearAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n      {{ \'tb.rulenode.alarm-type-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.entity-type-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),N=function(e){function r(t,r,n,o){var i=e.call(this,t)||this;return i.store=t,i.fb=r,i.nodeScriptTestService=n,i.translate=o,i.alarmSeverities=Object.keys(a.AlarmSeverity),i.alarmSeverityTranslationMap=a.alarmSeverityTranslations,i.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],i}return y(r,e),r.prototype.configForm=function(){return this.createAlarmConfigForm},r.prototype.onConfigurationSet=function(e){this.createAlarmConfigForm=this.fb.group({alarmDetailsBuildJs:[e?e.alarmDetailsBuildJs:null,[i.Validators.required]],useMessageAlarmData:[!!e&&e.useMessageAlarmData,[]],alarmType:[e?e.alarmType:null,[]],severity:[e?e.severity:null,[]],propagate:[!!e&&e.propagate,[]],relationTypes:[e?e.relationTypes:null,[]]})},r.prototype.validatorTriggers=function(){return["useMessageAlarmData"]},r.prototype.updateValidators=function(e){this.createAlarmConfigForm.get("useMessageAlarmData").value?(this.createAlarmConfigForm.get("alarmType").setValidators([]),this.createAlarmConfigForm.get("severity").setValidators([])):(this.createAlarmConfigForm.get("alarmType").setValidators([i.Validators.required]),this.createAlarmConfigForm.get("severity").setValidators([i.Validators.required])),this.createAlarmConfigForm.get("alarmType").updateValueAndValidity({emitEvent:e}),this.createAlarmConfigForm.get("severity").updateValueAndValidity({emitEvent:e})},r.prototype.testScript=function(){var e=this,t=this.createAlarmConfigForm.get("alarmDetailsBuildJs").value;this.nodeScriptTestService.testNodeScript(t,"json",this.translate.instant("tb.rulenode.details"),"Details",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.createAlarmConfigForm.get("alarmDetailsBuildJs").setValue(t)}))},r.prototype.removeKey=function(e,t){var r=this.createAlarmConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.createAlarmConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.createAlarmConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.createAlarmConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-create-alarm-config",template:'<section [formGroup]="createAlarmConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.alarm-details-builder</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="alarmDetailsBuildJs"\n              functionName="Details"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-details-function\' | translate }}\n    </button>\n  </div>\n  <mat-checkbox formControlName="useMessageAlarmData" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-message-alarm-data\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="createAlarmConfigForm.get(\'useMessageAlarmData\').value === false">\n    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex class="mat-block" style="padding-bottom: 16px;">\n        <mat-label translate>tb.rulenode.alarm-type</mat-label>\n        <input required matInput formControlName="alarmType">\n        <mat-error *ngIf="createAlarmConfigForm.get(\'alarmType\').hasError(\'required\')">\n          {{ \'tb.rulenode.alarm-type-required\' | translate }}\n        </mat-error>\n        <mat-hint innerHTML="{{ \'tb.rulenode.entity-type-pattern-hint\' | translate }}"></mat-hint>\n      </mat-form-field>\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.alarm-severity</mat-label>\n        <mat-select formControlName="severity" required>\n          <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">\n            {{ alarmSeverityTranslationMap.get(severity) | translate }}\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="createAlarmConfigForm.get(\'severity\').hasError(\'required\')">\n          {{ \'tb.rulenode.alarm-severity-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </section>\n    <mat-checkbox formControlName="propagate" style="padding-bottom: 16px;">\n      {{ \'tb.rulenode.propagate\' | translate }}\n    </mat-checkbox>\n    <section *ngIf="createAlarmConfigForm.get(\'propagate\').value === true">\n      <mat-form-field floatLabel="always" class="mat-block">\n        <mat-label translate>tb.rulenode.relation-types-list</mat-label>\n        <mat-chip-list #relationTypesChipList>\n          <mat-chip\n            *ngFor="let key of createAlarmConfigForm.get(\'relationTypes\').value;"\n            (removed)="removeKey(key, \'relationTypes\')">\n            {{key}}\n            <mat-icon matChipRemove>close</mat-icon>\n          </mat-chip>\n          <input matInput type="text" placeholder="{{\'tb.rulenode.relation-types-list\' | translate}}"\n                 style="max-width: 200px;"\n                 [matChipInputFor]="relationTypesChipList"\n                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n                 (matChipInputTokenEnd)="addKey($event, \'relationTypes\')"\n                 [matChipInputAddOnBlur]="true">\n        </mat-chip-list>\n        <mat-hint innerHTML="{{ \'tb.rulenode.relation-types-list-hint\' | translate }}"></mat-hint>\n      </mat-form-field>\n    </section>\n  </section>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),V=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.entityType=a.EntityType,n}return y(r,e),r.prototype.configForm=function(){return this.createRelationConfigForm},r.prototype.onConfigurationSet=function(e){this.createRelationConfigForm=this.fb.group({direction:[e?e.direction:null,[i.Validators.required]],entityType:[e?e.entityType:null,[i.Validators.required]],entityNamePattern:[e?e.entityNamePattern:null,[]],entityTypePattern:[e?e.entityTypePattern:null,[]],relationType:[e?e.relationType:null,[i.Validators.required]],createEntityIfNotExists:[!!e&&e.createEntityIfNotExists,[]],removeCurrentRelations:[!!e&&e.removeCurrentRelations,[]],changeOriginatorToRelatedEntity:[!!e&&e.changeOriginatorToRelatedEntity,[]],entityCacheExpiration:[e?e.entityCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.prototype.validatorTriggers=function(){return["entityType"]},r.prototype.updateValidators=function(e){var t=this.createRelationConfigForm.get("entityType").value;t?this.createRelationConfigForm.get("entityNamePattern").setValidators([i.Validators.required]):this.createRelationConfigForm.get("entityNamePattern").setValidators([]),!t||t!==a.EntityType.DEVICE&&t!==a.EntityType.ASSET?this.createRelationConfigForm.get("entityTypePattern").setValidators([]):this.createRelationConfigForm.get("entityTypePattern").setValidators([i.Validators.required]),this.createRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e}),this.createRelationConfigForm.get("entityTypePattern").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-create-relation-config",template:'<section [formGroup]="createRelationConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="min-width: 100px;">\n    <mat-label translate>relation.direction</mat-label>\n    <mat-select required matInput formControlName="direction">\n      <mat-option *ngFor="let type of directionTypes" [value]="type">\n        {{ directionTypeTranslations.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout="row" fxLayoutGap="8px">\n    <tb-entity-type-select\n      showLabel\n      style="min-width: 100px;"\n      required\n      formControlName="entityType">\n    </tb-entity-type-select>\n    <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value" fxFlex class="mat-block" style="padding-bottom: 32px;">\n      <mat-label translate>tb.rulenode.entity-name-pattern</mat-label>\n      <input required matInput formControlName="entityNamePattern">\n      <mat-error *ngIf="createRelationConfigForm.get(\'entityNamePattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.entity-name-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.entity-name-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n    <mat-form-field *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                           createRelationConfigForm.get(\'entityType\').value === entityType.ASSET"\n                    fxFlex class="mat-block" style="padding-bottom: 32px;">\n      <mat-label translate>tb.rulenode.entity-type-pattern</mat-label>\n      <input required matInput formControlName="entityTypePattern">\n      <mat-error *ngIf="createRelationConfigForm.get(\'entityTypePattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.entity-type-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.entity-type-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.relation-type-pattern</mat-label>\n    <input required matInput formControlName="relationType">\n    <mat-error *ngIf="createRelationConfigForm.get(\'relationType\').hasError(\'required\')">\n      {{ \'tb.rulenode.relation-type-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.relation-type-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <section *ngIf="createRelationConfigForm.get(\'entityType\').value === entityType.CUSTOMER ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.DEVICE ||\n                  createRelationConfigForm.get(\'entityType\').value === entityType.ASSET">\n    <mat-checkbox formControlName="createEntityIfNotExists">\n      {{ \'tb.rulenode.create-entity-if-not-exists\' | translate }}\n    </mat-checkbox>\n    <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.create-entity-if-not-exists-hint</div>\n  </section>\n  <mat-checkbox formControlName="removeCurrentRelations">\n    {{ \'tb.rulenode.remove-current-relations\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.remove-current-relations-hint</div>\n  <mat-checkbox formControlName="changeOriginatorToRelatedEntity">\n    {{ \'tb.rulenode.change-originator-to-related-entity\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.change-originator-to-related-entity-hint</div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.entity-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="entityCacheExpiration">\n    <mat-error *ngIf="createRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.entity-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="createRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.entity-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.entity-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),E=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.msgDelayConfigForm},r.prototype.onConfigurationSet=function(e){this.msgDelayConfigForm=this.fb.group({useMetadataPeriodInSecondsPatterns:[!!e&&e.useMetadataPeriodInSecondsPatterns,[]],periodInSeconds:[e?e.periodInSeconds:null,[]],periodInSecondsPattern:[e?e.periodInSecondsPattern:null,[]],maxPendingMsgs:[e?e.maxPendingMsgs:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(1e5)]]})},r.prototype.validatorTriggers=function(){return["useMetadataPeriodInSecondsPatterns"]},r.prototype.updateValidators=function(e){this.msgDelayConfigForm.get("useMetadataPeriodInSecondsPatterns").value?(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([i.Validators.required]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([])):(this.msgDelayConfigForm.get("periodInSecondsPattern").setValidators([]),this.msgDelayConfigForm.get("periodInSeconds").setValidators([i.Validators.required,i.Validators.min(0)])),this.msgDelayConfigForm.get("periodInSecondsPattern").updateValueAndValidity({emitEvent:e}),this.msgDelayConfigForm.get("periodInSeconds").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-msg-delay-config",template:'<section [formGroup]="msgDelayConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useMetadataPeriodInSecondsPatterns">\n    {{ \'tb.rulenode.use-metadata-period-in-seconds-patterns\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.use-metadata-period-in-seconds-patterns-hint</div>\n  <mat-form-field *ngIf="msgDelayConfigForm.get(\'useMetadataPeriodInSecondsPatterns\').value !== true; else periodInSecondsPattern"\n                  class="mat-block">\n    <mat-label translate>tb.rulenode.period-seconds</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="periodInSeconds">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.period-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-period-0-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <ng-template #periodInSecondsPattern>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.period-in-seconds-pattern</mat-label>\n      <input required matInput formControlName="periodInSecondsPattern">\n      <mat-error *ngIf="msgDelayConfigForm.get(\'periodInSecondsPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.period-in-seconds-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.period-in-seconds-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </ng-template>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.max-pending-messages</mat-label>\n    <input required type="number" min="1" max="100000" step="1" matInput formControlName="maxPendingMsgs">\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'required\')">\n      {{ \'tb.rulenode.max-pending-messages-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'min\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgDelayConfigForm.get(\'maxPendingMsgs\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-pending-messages-range\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),A=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.entityType=a.EntityType,n}return y(r,e),r.prototype.configForm=function(){return this.deleteRelationConfigForm},r.prototype.onConfigurationSet=function(e){this.deleteRelationConfigForm=this.fb.group({deleteForSingleEntity:[!!e&&e.deleteForSingleEntity,[]],direction:[e?e.direction:null,[i.Validators.required]],entityType:[e?e.entityType:null,[]],entityNamePattern:[e?e.entityNamePattern:null,[]],relationType:[e?e.relationType:null,[i.Validators.required]],entityCacheExpiration:[e?e.entityCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.prototype.validatorTriggers=function(){return["deleteForSingleEntity","entityType"]},r.prototype.updateValidators=function(e){var t=this.deleteRelationConfigForm.get("deleteForSingleEntity").value,r=this.deleteRelationConfigForm.get("entityType").value;t?this.deleteRelationConfigForm.get("entityType").setValidators([i.Validators.required]):this.deleteRelationConfigForm.get("entityType").setValidators([]),t&&r?this.deleteRelationConfigForm.get("entityNamePattern").setValidators([i.Validators.required]):this.deleteRelationConfigForm.get("entityNamePattern").setValidators([]),this.deleteRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:!1}),this.deleteRelationConfigForm.get("entityNamePattern").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-delete-relation-config",template:'<section [formGroup]="deleteRelationConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="deleteForSingleEntity">\n    {{ \'tb.rulenode.delete-relation-to-specific-entity\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.delete-relation-hint</div>\n  <mat-form-field class="mat-block" style="min-width: 100px;">\n    <mat-label translate>relation.direction</mat-label>\n    <mat-select required matInput formControlName="direction">\n      <mat-option *ngFor="let type of directionTypes" [value]="type">\n        {{ directionTypeTranslations.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div *ngIf="deleteRelationConfigForm.get(\'deleteForSingleEntity\').value" fxLayout="row" fxLayoutGap="8px">\n    <tb-entity-type-select\n      showLabel\n      style="min-width: 100px;"\n      required\n      formControlName="entityType">\n    </tb-entity-type-select>\n    <mat-form-field *ngIf="deleteRelationConfigForm.get(\'entityType\').value" fxFlex class="mat-block" style="padding-bottom: 32px;">\n      <mat-label translate>tb.rulenode.entity-name-pattern</mat-label>\n      <input required matInput formControlName="entityNamePattern">\n      <mat-error *ngIf="deleteRelationConfigForm.get(\'entityNamePattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.entity-name-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.entity-name-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.relation-type-pattern</mat-label>\n    <input required matInput formControlName="relationType">\n    <mat-error *ngIf="deleteRelationConfigForm.get(\'relationType\').hasError(\'required\')">\n      {{ \'tb.rulenode.relation-type-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.relation-type-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.entity-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="entityCacheExpiration">\n    <mat-error *ngIf="deleteRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.entity-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="deleteRelationConfigForm.get(\'entityCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.entity-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.entity-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),L=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.generatorConfigForm},r.prototype.onConfigurationSet=function(e){this.generatorConfigForm=this.fb.group({msgCount:[e?e.msgCount:null,[i.Validators.required,i.Validators.min(0)]],periodInSeconds:[e?e.periodInSeconds:null,[i.Validators.required,i.Validators.min(1)]],originator:[e?e.originator:null,[]],jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.prepareInputConfig=function(e){return e&&(e.originatorId&&e.originatorType?e.originator={id:e.originatorId,entityType:e.originatorType}:e.originator=null,delete e.originatorId,delete e.originatorType),e},r.prototype.prepareOutputConfig=function(e){return e.originator?(e.originatorId=e.originator.id,e.originatorType=e.originator.entityType):(e.originatorId=null,e.originatorType=null),delete e.originator,e},r.prototype.testScript=function(){var e=this,t=this.generatorConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"generate",this.translate.instant("tb.rulenode.generator"),"Generate",["prevMsg","prevMetadata","prevMsgType"],this.ruleNodeId).subscribe((function(t){t&&e.generatorConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-action-node-generator-config",template:'<section [formGroup]="generatorConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.message-count</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="msgCount">\n    <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'required\')">\n      {{ \'tb.rulenode.message-count-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="generatorConfigForm.get(\'msgCount\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-message-count-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.period-seconds</mat-label>\n    <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">\n    <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'required\')">\n      {{ \'tb.rulenode.period-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="generatorConfigForm.get(\'periodInSeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-period-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <div fxLayout="column">\n    <label class="tb-small">{{ \'tb.rulenode.originator\' | translate }}</label>\n    <tb-entity-select\n      required="false"\n      formControlName="originator">\n    </tb-entity-select>\n  </div>\n  <label translate class="tb-title no-padding">tb.rulenode.generate</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Generate"\n              [functionArgs]="[\'prevMsg\', \'prevMetadata\', \'prevMsgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row" style="padding-bottom: 16px;">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-generator-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent);!function(e){e.CUSTOMER="CUSTOMER",e.TENANT="TENANT",e.RELATED="RELATED",e.ALARM_ORIGINATOR="ALARM_ORIGINATOR"}(v||(v={}));var M,P=new Map([[v.CUSTOMER,"tb.rulenode.originator-customer"],[v.TENANT,"tb.rulenode.originator-tenant"],[v.RELATED,"tb.rulenode.originator-related"],[v.ALARM_ORIGINATOR,"tb.rulenode.originator-alarm-originator"]]);!function(e){e.CIRCLE="CIRCLE",e.POLYGON="POLYGON"}(M||(M={}));var R,w=new Map([[M.CIRCLE,"tb.rulenode.perimeter-circle"],[M.POLYGON,"tb.rulenode.perimeter-polygon"]]);!function(e){e.MILLISECONDS="MILLISECONDS",e.SECONDS="SECONDS",e.MINUTES="MINUTES",e.HOURS="HOURS",e.DAYS="DAYS"}(R||(R={}));var D,O=new Map([[R.MILLISECONDS,"tb.rulenode.time-unit-milliseconds"],[R.SECONDS,"tb.rulenode.time-unit-seconds"],[R.MINUTES,"tb.rulenode.time-unit-minutes"],[R.HOURS,"tb.rulenode.time-unit-hours"],[R.DAYS,"tb.rulenode.time-unit-days"]]);!function(e){e.METER="METER",e.KILOMETER="KILOMETER",e.FOOT="FOOT",e.MILE="MILE",e.NAUTICAL_MILE="NAUTICAL_MILE"}(D||(D={}));var K,B=new Map([[D.METER,"tb.rulenode.range-unit-meter"],[D.KILOMETER,"tb.rulenode.range-unit-kilometer"],[D.FOOT,"tb.rulenode.range-unit-foot"],[D.MILE,"tb.rulenode.range-unit-mile"],[D.NAUTICAL_MILE,"tb.rulenode.range-unit-nautical-mile"]]);!function(e){e.TITLE="TITLE",e.COUNTRY="COUNTRY",e.STATE="STATE",e.ZIP="ZIP",e.ADDRESS="ADDRESS",e.ADDRESS2="ADDRESS2",e.PHONE="PHONE",e.EMAIL="EMAIL",e.ADDITIONAL_INFO="ADDITIONAL_INFO"}(K||(K={}));var j,U,G,H=new Map([[K.TITLE,"tb.rulenode.entity-details-title"],[K.COUNTRY,"tb.rulenode.entity-details-country"],[K.STATE,"tb.rulenode.entity-details-state"],[K.ZIP,"tb.rulenode.entity-details-zip"],[K.ADDRESS,"tb.rulenode.entity-details-address"],[K.ADDRESS2,"tb.rulenode.entity-details-address2"],[K.PHONE,"tb.rulenode.entity-details-phone"],[K.EMAIL,"tb.rulenode.entity-details-email"],[K.ADDITIONAL_INFO,"tb.rulenode.entity-details-additional_info"]]);!function(e){e.FIRST="FIRST",e.LAST="LAST",e.ALL="ALL"}(j||(j={})),function(e){e.ASC="ASC",e.DESC="DESC"}(U||(U={})),function(e){e.STANDARD="STANDARD",e.FIFO="FIFO"}(G||(G={}));var Q,z=new Map([[G.STANDARD,"tb.rulenode.sqs-queue-standard"],[G.FIFO,"tb.rulenode.sqs-queue-fifo"]]),$=["anonymous","basic","cert.PEM"],_=new Map([["anonymous","tb.rulenode.credentials-anonymous"],["basic","tb.rulenode.credentials-basic"],["cert.PEM","tb.rulenode.credentials-pem"]]);!function(e){e.GET="GET",e.POST="POST",e.PUT="PUT",e.DELETE="DELETE"}(Q||(Q={}));var W=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.perimeterType=M,n.perimeterTypes=Object.keys(M),n.perimeterTypeTranslationMap=w,n.rangeUnits=Object.keys(D),n.rangeUnitTranslationMap=B,n.timeUnits=Object.keys(R),n.timeUnitsTranslationMap=O,n}return y(r,e),r.prototype.configForm=function(){return this.geoActionConfigForm},r.prototype.onConfigurationSet=function(e){this.geoActionConfigForm=this.fb.group({latitudeKeyName:[e?e.latitudeKeyName:null,[i.Validators.required]],longitudeKeyName:[e?e.longitudeKeyName:null,[i.Validators.required]],fetchPerimeterInfoFromMessageMetadata:[!!e&&e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterType:[e?e.perimeterType:null,[]],centerLatitude:[e?e.centerLatitude:null,[]],centerLongitude:[e?e.centerLatitude:null,[]],range:[e?e.range:null,[]],rangeUnit:[e?e.rangeUnit:null,[]],polygonsDefinition:[e?e.polygonsDefinition:null,[]],minInsideDuration:[e?e.minInsideDuration:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]],minInsideDurationTimeUnit:[e?e.minInsideDurationTimeUnit:null,[i.Validators.required]],minOutsideDuration:[e?e.minOutsideDuration:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]],minOutsideDurationTimeUnit:[e?e.minOutsideDurationTimeUnit:null,[i.Validators.required]]})},r.prototype.validatorTriggers=function(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]},r.prototype.updateValidators=function(e){var t=this.geoActionConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,r=this.geoActionConfigForm.get("perimeterType").value;t?this.geoActionConfigForm.get("perimeterType").setValidators([]):this.geoActionConfigForm.get("perimeterType").setValidators([i.Validators.required]),t||r!==M.CIRCLE?(this.geoActionConfigForm.get("centerLatitude").setValidators([]),this.geoActionConfigForm.get("centerLongitude").setValidators([]),this.geoActionConfigForm.get("range").setValidators([]),this.geoActionConfigForm.get("rangeUnit").setValidators([])):(this.geoActionConfigForm.get("centerLatitude").setValidators([i.Validators.required,i.Validators.min(-90),i.Validators.max(90)]),this.geoActionConfigForm.get("centerLongitude").setValidators([i.Validators.required,i.Validators.min(-180),i.Validators.max(180)]),this.geoActionConfigForm.get("range").setValidators([i.Validators.required,i.Validators.min(0)]),this.geoActionConfigForm.get("rangeUnit").setValidators([i.Validators.required])),t||r!==M.POLYGON?this.geoActionConfigForm.get("polygonsDefinition").setValidators([]):this.geoActionConfigForm.get("polygonsDefinition").setValidators([i.Validators.required]),this.geoActionConfigForm.get("perimeterType").updateValueAndValidity({emitEvent:!1}),this.geoActionConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoActionConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-gps-geofencing-config",template:'<section [formGroup]="geoActionConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.latitude-key-name</mat-label>\n    <input matInput formControlName="latitudeKeyName" required>\n    <mat-error *ngIf="geoActionConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.latitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.longitude-key-name</mat-label>\n    <input matInput formControlName="longitudeKeyName" required>\n    <mat-error *ngIf="geoActionConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.longitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-checkbox fxFlex formControlName="fetchPerimeterInfoFromMessageMetadata" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.fetch-perimeter-info-from-message-metadata\' | translate }}\n  </mat-checkbox>\n  <div fxLayout="row" *ngIf="!geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.perimeter-type</mat-label>\n      <mat-select formControlName="perimeterType" required>\n        <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n          {{ perimeterTypeTranslationMap.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column"\n       *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n       !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-latitude</mat-label>\n        <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-longitude</mat-label>\n        <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range</mat-label>\n        <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n        <mat-error *ngIf="geoActionConfigForm.get(\'range\').hasError(\'required\')">\n          {{ \'tb.rulenode.range-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range-units</mat-label>\n        <mat-select formControlName="rangeUnit" required>\n          <mat-option *ngFor="let type of rangeUnits" [value]="type">\n            {{ rangeUnitTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div fxLayout="column" *ngIf="geoActionConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                             !geoActionConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <mat-form-field class="mat-block" hintLabel="{{\'tb.rulenode.polygon-definition-hint\' | translate}}" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.polygon-definition</mat-label>\n      <input matInput formControlName="polygonsDefinition" required>\n      <mat-error *ngIf="geoActionConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n        {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-inside-duration</mat-label>\n      <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minInsideDuration" required>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'required\')">\n        {{ \'tb.rulenode.min-inside-duration-value-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'min\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minInsideDuration\').hasError(\'max\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-inside-duration-time-unit</mat-label>\n      <mat-select formControlName="minInsideDurationTimeUnit" required>\n        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-outside-duration</mat-label>\n      <input type="number" step="1" min="1" max="2147483647" matInput formControlName="minOutsideDuration" required>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'required\')">\n        {{ \'tb.rulenode.min-outside-duration-value-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'min\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="geoActionConfigForm.get(\'minOutsideDuration\').hasError(\'max\')">\n        {{ \'tb.rulenode.time-value-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.min-outside-duration-time-unit</mat-label>\n      <mat-select formControlName="minOutsideDurationTimeUnit" required>\n        <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n          {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),J=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.msgCountConfigForm},r.prototype.onConfigurationSet=function(e){this.msgCountConfigForm=this.fb.group({interval:[e?e.interval:null,[i.Validators.required,i.Validators.min(1)]],telemetryPrefix:[e?e.telemetryPrefix:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-msg-count-config",template:'<section [formGroup]="msgCountConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.interval-seconds</mat-label>\n    <input required type="number" min="1" step="1" matInput formControlName="interval">\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'required\')">\n      {{ \'tb.rulenode.interval-seconds-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="msgCountConfigForm.get(\'interval\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-interval-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.output-timeseries-key-prefix</mat-label>\n    <input required matInput formControlName="telemetryPrefix">\n    <mat-error *ngIf="msgCountConfigForm.get(\'telemetryPrefix\').hasError(\'required\')">\n      {{ \'tb.rulenode.output-timeseries-key-prefix-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Y=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.rpcReplyConfigForm},r.prototype.onConfigurationSet=function(e){this.rpcReplyConfigForm=this.fb.group({requestIdMetaDataAttribute:[e?e.requestIdMetaDataAttribute:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rpc-reply-config",template:'<section [formGroup]="rpcReplyConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.request-id-metadata-attribute</mat-label>\n    <input matInput formControlName="requestIdMetaDataAttribute">\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Z=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.saveToCustomTableConfigForm},r.prototype.onConfigurationSet=function(e){this.saveToCustomTableConfigForm=this.fb.group({tableName:[e?e.tableName:null,[i.Validators.required]],fieldsMapping:[e?e.fieldsMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-custom-table-config",template:'<section [formGroup]="saveToCustomTableConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.custom-table-name</mat-label>\n    <input required matInput formControlName="tableName">\n    <mat-error *ngIf="saveToCustomTableConfigForm.get(\'tableName\').hasError(\'required\')">\n      {{ \'tb.rulenode.custom-table-name-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.custom-table-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title tb-required">tb.rulenode.fields-mapping</label>\n  <tb-kv-map-config\n    required\n    formControlName="fieldsMapping"\n    requiredText="tb.rulenode.fields-mapping-required"\n    keyText="tb.rulenode.message-field"\n    keyRequiredText="tb.rulenode.message-field-required"\n    valText="tb.rulenode.table-col"\n    valRequiredText="tb.rulenode.table-col-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),X=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.translate=r,o.injector=n,o.fb=a,o.propagateChange=null,o.valueChangeSubscription=null,o}var a;return y(r,e),a=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.ngOnInit=function(){this.ngControl=this.injector.get(i.NgControl),null!=this.ngControl&&(this.ngControl.valueAccessor=this),this.kvListFormGroup=this.fb.group({}),this.kvListFormGroup.addControl("keyVals",this.fb.array([]))},r.prototype.keyValsFormArray=function(){return this.kvListFormGroup.get("keyVals")},r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.kvListFormGroup.disable({emitEvent:!1}):this.kvListFormGroup.enable({emitEvent:!1})},r.prototype.writeValue=function(e){var t,r,n=this;this.valueChangeSubscription&&this.valueChangeSubscription.unsubscribe();var a=[];if(e)try{for(var o=C(Object.keys(e)),l=o.next();!l.done;l=o.next()){var s=l.value;Object.prototype.hasOwnProperty.call(e,s)&&a.push(this.fb.group({key:[s,[i.Validators.required]],value:[e[s],[i.Validators.required]]}))}}catch(e){t={error:e}}finally{try{l&&!l.done&&(r=o.return)&&r.call(o)}finally{if(t)throw t.error}}this.kvListFormGroup.setControl("keyVals",this.fb.array(a)),this.valueChangeSubscription=this.kvListFormGroup.valueChanges.subscribe((function(){n.updateModel()}))},r.prototype.removeKeyVal=function(e){this.kvListFormGroup.get("keyVals").removeAt(e)},r.prototype.addKeyVal=function(){this.kvListFormGroup.get("keyVals").push(this.fb.group({key:["",[i.Validators.required]],value:["",[i.Validators.required]]}))},r.prototype.validate=function(e){return!this.kvListFormGroup.get("keyVals").value.length&&this.required?{kvMapRequired:!0}:this.kvListFormGroup.valid?null:{kvFieldsRequired:!0}},r.prototype.updateModel=function(){var e=this.kvListFormGroup.get("keyVals").value;if(this.required&&!e.length||!this.kvListFormGroup.valid)this.propagateChange(null);else{var t={};e.forEach((function(e){t[e.key]=e.value})),this.propagateChange(t)}},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:t.Injector},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.Input(),h("design:type",String)],r.prototype,"requiredText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"keyText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"keyRequiredText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"valText",void 0),b([t.Input(),h("design:type",String)],r.prototype,"valRequiredText",void 0),b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),r=a=b([t.Component({selector:"tb-kv-map-config",template:'<section fxLayout="column" class="tb-kv-map-config" [formGroup]="kvListFormGroup">\n  <div class="header" fxFlex fxLayout="row" fxLayoutGap="8px">\n    <span class="cell" fxFlex translate>{{ keyText }}</span>\n    <span class="cell" fxFlex translate>{{ valText }}</span>\n    <span [fxShow]="!disabled" style="width: 52px;" innerHTML="&nbsp"></span>\n  </div>\n  <div class="body">\n    <div class="row" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"\n         formArrayName="keyVals"\n         *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">\n      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="cell mat-block">\n        <mat-label></mat-label>\n        <input [formControl]="keyValControl.get(\'key\')" matInput required\n               placeholder="{{ keyText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'key\').hasError(\'required\')">\n          {{ keyRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="cell mat-block">\n        <mat-label></mat-label>\n        <input [formControl]="keyValControl.get(\'value\')" matInput required\n               placeholder="{{ valText | translate }}"/>\n        <mat-error *ngIf="keyValControl.get(\'value\').hasError(\'required\')">\n          {{ valRequiredText | translate }}\n        </mat-error>\n      </mat-form-field>\n      <button mat-button mat-icon-button color="primary"\n              [fxShow]="!disabled"\n              type="button"\n              (click)="removeKeyVal($index)"\n              [disabled]="isLoading$ | async"\n              matTooltip="{{ \'tb.key-val.remove-entry\' | translate }}"\n              matTooltipPosition="above">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <tb-error [error]="ngControl.hasError(\'kvMapRequired\')\n                  ? translate.instant(requiredText) : \'\'"></tb-error>\n  <div style="margin-top: 8px;">\n    <button mat-button mat-raised-button color="primary"\n            [fxShow]="!disabled"\n            [disabled]="isLoading$ | async"\n            (click)="addKeyVal()"\n            type="button"\n            matTooltip="{{ \'tb.key-val.add-entry\' | translate }}"\n            matTooltipPosition="above">\n      <mat-icon>add</mat-icon>\n      {{ \'action.add\' | translate }}\n    </button>\n  </div>\n</section>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return a})),multi:!0},{provide:i.NG_VALIDATORS,useExisting:t.forwardRef((function(){return a})),multi:!0}],styles:[":host .tb-kv-map-config{margin-bottom:16px}:host .tb-kv-map-config .header{padding-left:5px;padding-right:5px;padding-bottom:5px}:host .tb-kv-map-config .header .cell{padding-left:5px;padding-right:5px;color:rgba(0,0,0,.54);font-size:12px;font-weight:700;white-space:nowrap}:host .tb-kv-map-config .body{padding-left:5px;padding-right:5px;padding-bottom:20px;max-height:300px;overflow:auto}:host .tb-kv-map-config .body .row{padding-top:5px;max-height:40px}:host .tb-kv-map-config .body .cell{padding-left:5px;padding-right:5px}:host ::ng-deep .tb-kv-map-config .body mat-form-field.cell{margin:0;max-height:40px}:host ::ng-deep .tb-kv-map-config .body mat-form-field.cell .mat-form-field-infix{border-top:0}:host ::ng-deep .tb-kv-map-config .body button.mat-button{margin:0}"]}),h("design:paramtypes",[o.Store,n.TranslateService,t.Injector,i.FormBuilder])],r)}(a.PageComponent),ee=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.entityType=a.EntityType,n.propagateChange=null,n}var n;return y(r,e),n=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.ngOnInit=function(){var e=this;this.deviceRelationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[i.Validators.required]],maxLevel:[null,[]],relationType:[null],deviceTypes:[null,[i.Validators.required]]}),this.deviceRelationsQueryFormGroup.valueChanges.subscribe((function(t){e.deviceRelationsQueryFormGroup.valid?e.propagateChange(t):e.propagateChange(null)}))},r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.deviceRelationsQueryFormGroup.disable({emitEvent:!1}):this.deviceRelationsQueryFormGroup.enable({emitEvent:!1})},r.prototype.writeValue=function(e){this.deviceRelationsQueryFormGroup.reset(e,{emitEvent:!1})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),r=n=b([t.Component({selector:"tb-device-relations-query-config",template:'<section fxLayout="column" [formGroup]="deviceRelationsQueryFormGroup">\n  <mat-checkbox formControlName="fetchLastLevelOnly" style="padding-bottom: 16px;">\n    {{ \'relation.last-level-relation\' | translate }}\n  </mat-checkbox>\n  <div fxLayoutGap="8px" fxLayout="row">\n    <mat-form-field class="mat-block" style="min-width: 100px;">\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required matInput formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n    </mat-form-field>\n  </div>\n  <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-type</div>\n  <tb-relation-type-autocomplete\n    fxFlex\n    formControlName="relationType">\n  </tb-relation-type-autocomplete>\n  <div class="mat-caption tb-required" style="color: rgba(0,0,0,0.57);" translate>device.device-types</div>\n  <tb-entity-subtype-list\n    required\n    [entityType]="entityType.DEVICE"\n    formControlName="deviceTypes">\n  </tb-entity-subtype-list>\n</section>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return n})),multi:!0}]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.PageComponent),te=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.directionTypes=Object.keys(a.EntitySearchDirection),n.directionTypeTranslations=a.entitySearchDirectionTranslations,n.propagateChange=null,n}var n;return y(r,e),n=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.ngOnInit=function(){var e=this;this.relationsQueryFormGroup=this.fb.group({fetchLastLevelOnly:[!1,[]],direction:[null,[i.Validators.required]],maxLevel:[null,[]],filters:[null]}),this.relationsQueryFormGroup.valueChanges.subscribe((function(t){e.relationsQueryFormGroup.valid?e.propagateChange(t):e.propagateChange(null)}))},r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.relationsQueryFormGroup.disable({emitEvent:!1}):this.relationsQueryFormGroup.enable({emitEvent:!1})},r.prototype.writeValue=function(e){this.relationsQueryFormGroup.reset(e,{emitEvent:!1})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),r=n=b([t.Component({selector:"tb-relations-query-config",template:'<section fxLayout="column" [formGroup]="relationsQueryFormGroup">\n  <mat-checkbox formControlName="fetchLastLevelOnly" style="padding-bottom: 16px;">\n    {{ \'relation.last-level-relation\' | translate }}\n  </mat-checkbox>\n  <div fxLayoutGap="8px" fxLayout="row">\n    <mat-form-field class="mat-block" style="min-width: 100px;">\n      <mat-label translate>relation.direction</mat-label>\n      <mat-select required matInput formControlName="direction">\n        <mat-option *ngFor="let type of directionTypes" [value]="type">\n          {{ directionTypeTranslations.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field fxFlex floatLabel="always" class="mat-block">\n      <mat-label translate>tb.rulenode.max-relation-level</mat-label>\n      <input matInput\n             type="number"\n             min="1"\n             step="1"\n             placeholder="{{ \'tb.rulenode.unlimited-level\' | translate }}"\n             formControlName="maxLevel">\n    </mat-form-field>\n  </div>\n  <div class="mat-caption" style="color: rgba(0,0,0,0.57);" translate>relation.relation-filters</div>\n  <tb-relation-filters\n    formControlName="filters"\n  ></tb-relation-filters>\n</section>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return n})),multi:!0}]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.PageComponent),re=function(e){function r(t,r,n,o){var i,l,m=e.call(this,t)||this;m.store=t,m.translate=r,m.truncate=n,m.fb=o,m.placeholder="tb.rulenode.message-type",m.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],m.messageTypes=[],m.messageTypesList=[],m.searchText="",m.propagateChange=function(e){},m.messageTypeConfigForm=m.fb.group({messageType:[null]});try{for(var u=C(Object.keys(a.MessageType)),d=u.next();!d.done;d=u.next()){var p=d.value;m.messageTypesList.push({name:a.messageTypeNames.get(a.MessageType[p]),value:p})}}catch(e){i={error:e}}finally{try{d&&!d.done&&(l=u.return)&&l.call(u)}finally{if(i)throw i.error}}return m}var l;return y(r,e),l=r,Object.defineProperty(r.prototype,"required",{get:function(){return this.requiredValue},set:function(e){this.requiredValue=u.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),r.prototype.registerOnChange=function(e){this.propagateChange=e},r.prototype.registerOnTouched=function(e){},r.prototype.ngOnInit=function(){var e=this;this.filteredMessageTypes=this.messageTypeConfigForm.get("messageType").valueChanges.pipe(f.startWith(""),f.map((function(e){return e||""})),f.mergeMap((function(t){return e.fetchMessageTypes(t)})),f.share())},r.prototype.ngAfterViewInit=function(){},r.prototype.setDisabledState=function(e){this.disabled=e,this.disabled?this.messageTypeConfigForm.disable({emitEvent:!1}):this.messageTypeConfigForm.enable({emitEvent:!1})},r.prototype.writeValue=function(e){var t=this;this.searchText="",this.messageTypes.length=0,e&&e.forEach((function(e){var r=t.messageTypesList.find((function(t){return t.value===e}));r?t.messageTypes.push({name:r.name,value:r.value}):t.messageTypes.push({name:e,value:e})}))},r.prototype.displayMessageTypeFn=function(e){return e?e.name:void 0},r.prototype.textIsNotEmpty=function(e){return!!(e&&null!=e&&e.length>0)},r.prototype.createMessageType=function(e,t){e.preventDefault(),this.transformMessageType(t)},r.prototype.add=function(e){this.transformMessageType(e.value)},r.prototype.fetchMessageTypes=function(e){if(this.searchText=e,this.searchText&&this.searchText.length){var t=this.searchText.toUpperCase();return c.of(this.messageTypesList.filter((function(e){return e.name.toUpperCase().includes(t)})))}return c.of(this.messageTypesList)},r.prototype.transformMessageType=function(e){if((e||"").trim()){var t=null,r=e.trim(),n=this.messageTypesList.find((function(e){return e.name===r}));(t=n?{name:n.name,value:n.value}:{name:r,value:r})&&this.addMessageType(t)}this.clear("")},r.prototype.remove=function(e){var t=this.messageTypes.indexOf(e);t>=0&&(this.messageTypes.splice(t,1),this.updateModel())},r.prototype.selected=function(e){this.addMessageType(e.option.value),this.clear("")},r.prototype.addMessageType=function(e){-1===this.messageTypes.findIndex((function(t){return t.value===e.value}))&&(this.messageTypes.push(e),this.updateModel())},r.prototype.onFocus=function(){this.messageTypeConfigForm.get("messageType").updateValueAndValidity({onlySelf:!0,emitEvent:!0})},r.prototype.clear=function(e){var t=this;void 0===e&&(e=""),this.messageTypeInput.nativeElement.value=e,this.messageTypeConfigForm.get("messageType").patchValue(null,{emitEvent:!0}),setTimeout((function(){t.messageTypeInput.nativeElement.blur(),t.messageTypeInput.nativeElement.focus()}),0)},r.prototype.updateModel=function(){var e=this.messageTypes.map((function(e){return e.value}));this.required?(this.chipList.errorState=!e.length,this.propagateChange(e.length>0?e:null)):(this.chipList.errorState=!1,this.propagateChange(e))},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:a.TruncatePipe},{type:i.FormBuilder}]},b([t.Input(),h("design:type",Boolean),h("design:paramtypes",[Boolean])],r.prototype,"required",null),b([t.Input(),h("design:type",String)],r.prototype,"label",void 0),b([t.Input(),h("design:type",Object)],r.prototype,"placeholder",void 0),b([t.Input(),h("design:type",Boolean)],r.prototype,"disabled",void 0),b([t.ViewChild("chipList",{static:!1}),h("design:type",d.MatChipList)],r.prototype,"chipList",void 0),b([t.ViewChild("messageTypeAutocomplete",{static:!1}),h("design:type",p.MatAutocomplete)],r.prototype,"matAutocomplete",void 0),b([t.ViewChild("messageTypeInput",{static:!1}),h("design:type",t.ElementRef)],r.prototype,"messageTypeInput",void 0),r=l=b([t.Component({selector:"tb-message-types-config",template:'<mat-form-field [formGroup]="messageTypeConfigForm" style="width: 100%;">\n  <mat-label *ngIf="label" translate>{{ label }}</mat-label>\n  <mat-chip-list #chipList [required]="required">\n    <mat-chip\n      *ngFor="let messageType of messageTypes"\n      [selectable]="true"\n      [removable]="true"\n      (removed)="remove(messageType)">\n      {{messageType.name}}\n      <mat-icon matChipRemove>close</mat-icon>\n    </mat-chip>\n    <input matInput type="text" placeholder="{{ placeholder | translate }}"\n           style="max-width: 200px;"\n           #messageTypeInput\n           (focusin)="onFocus()"\n           formControlName="messageType"\n           matAutocompleteOrigin\n           #origin="matAutocompleteOrigin"\n           [matAutocompleteConnectedTo]="origin"\n           [matAutocomplete]="messageTypeAutocomplete"\n           [matChipInputFor]="chipList"\n           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n           (matChipInputTokenEnd)="add($event)">\n  </mat-chip-list>\n  <mat-autocomplete #messageTypeAutocomplete="matAutocomplete"\n                    class="tb-autocomplete"\n                    (optionSelected)="selected($event)"\n                    [displayWith]="displayMessageTypeFn">\n    <mat-option *ngFor="let messageType of filteredMessageTypes | async" [value]="messageType">\n      <span [innerHTML]="messageType.name | highlight:searchText"></span>\n    </mat-option>\n    <mat-option *ngIf="(filteredMessageTypes | async)?.length === 0" [value]="null" class="tb-not-found">\n      <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">\n          <span translate>tb.rulenode.no-message-types-found</span>\n        </div>\n        <ng-template #searchNotEmpty>\n                <span>\n                  {{ translate.get(\'tb.rulenode.no-message-type-matching\',\n                  {messageType: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}\n                </span>\n        </ng-template>\n        <span>\n          <a translate (click)="createMessageType($event, searchText)">tb.rulenode.create-new-message-type</a>\n        </span>\n      </div>\n    </mat-option>\n  </mat-autocomplete>\n  <mat-error *ngIf="chipList.errorState">\n    {{ \'tb.rulenode.message-types-required\' | translate }}\n  </mat-error>\n</mat-form-field>\n',providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return l})),multi:!0}]}),h("design:paramtypes",[o.Store,n.TranslateService,a.TruncatePipe,i.FormBuilder])],r)}(a.PageComponent),ne=function(){function e(){}return e=b([t.NgModule({declarations:[X,ee,te,re],imports:[r.CommonModule,a.SharedModule,m.HomeComponentsModule],exports:[X,ee,te,re]})],e)}(),ae=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.unassignCustomerConfigForm},r.prototype.onConfigurationSet=function(e){this.unassignCustomerConfigForm=this.fb.group({customerNamePattern:[e?e.customerNamePattern:null,[i.Validators.required]],customerCacheExpiration:[e?e.customerCacheExpiration:null,[i.Validators.required,i.Validators.min(0)]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-un-assign-to-customer-config",template:'<section [formGroup]="unassignCustomerConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-name-pattern</mat-label>\n    <input required matInput formControlName="customerNamePattern">\n    <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerNamePattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-name-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-name-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.customer-cache-expiration</mat-label>\n    <input required type="number" min="0" step="1" matInput formControlName="customerCacheExpiration">\n    <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'required\')">\n      {{ \'tb.rulenode.customer-cache-expiration-required\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="unassignCustomerConfigForm.get(\'customerCacheExpiration\').hasError(\'min\')">\n      {{ \'tb.rulenode.customer-cache-expiration-range\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.customer-cache-expiration-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),oe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.snsConfigForm},r.prototype.onConfigurationSet=function(e){this.snsConfigForm=this.fb.group({topicArnPattern:[e?e.topicArnPattern:null,[i.Validators.required]],accessKeyId:[e?e.accessKeyId:null,[i.Validators.required]],secretAccessKey:[e?e.secretAccessKey:null,[i.Validators.required]],region:[e?e.region:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-sns-config",template:'<section [formGroup]="snsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.topic-arn-pattern</mat-label>\n    <input required matInput formControlName="topicArnPattern">\n    <mat-error *ngIf="snsConfigForm.get(\'topicArnPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-arn-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.topic-arn-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="snsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="snsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="snsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ie=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.sqsQueueType=G,n.sqsQueueTypes=Object.keys(G),n.sqsQueueTypeTranslationsMap=z,n}return y(r,e),r.prototype.configForm=function(){return this.sqsConfigForm},r.prototype.onConfigurationSet=function(e){this.sqsConfigForm=this.fb.group({queueType:[e?e.queueType:null,[i.Validators.required]],queueUrlPattern:[e?e.queueUrlPattern:null,[i.Validators.required]],delaySeconds:[e?e.delaySeconds:null,[i.Validators.min(0),i.Validators.max(900)]],messageAttributes:[e?e.messageAttributes:null,[]],accessKeyId:[e?e.accessKeyId:null,[i.Validators.required]],secretAccessKey:[e?e.secretAccessKey:null,[i.Validators.required]],region:[e?e.region:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-sqs-config",template:'<section [formGroup]="sqsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.queue-type</mat-label>\n    <mat-select formControlName="queueType" required>\n      <mat-option *ngFor="let type of sqsQueueTypes" [value]="type">\n        {{ sqsQueueTypeTranslationsMap.get(type) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.queue-url-pattern</mat-label>\n    <input required matInput formControlName="queueUrlPattern">\n    <mat-error *ngIf="sqsConfigForm.get(\'queueUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.queue-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.queue-url-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field *ngIf="sqsConfigForm.get(\'queueType\').value === sqsQueueType.STANDARD" class="mat-block">\n    <mat-label translate>tb.rulenode.delay-seconds</mat-label>\n    <input required type="number" min="0" max="900" step="1" matInput formControlName="delaySeconds">\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-delay-seconds-message\' | translate }}\n    </mat-error>\n    <mat-error *ngIf="sqsConfigForm.get(\'delaySeconds\').hasError(\'max\')">\n      {{ \'tb.rulenode.max-delay-seconds-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" translate>tb.rulenode.message-attributes-hint</div>\n  <tb-kv-map-config\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-access-key-id</mat-label>\n    <input required matInput formControlName="accessKeyId">\n    <mat-error *ngIf="sqsConfigForm.get(\'accessKeyId\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-access-key-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-secret-access-key</mat-label>\n    <input required matInput formControlName="secretAccessKey">\n    <mat-error *ngIf="sqsConfigForm.get(\'secretAccessKey\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-secret-access-key-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.aws-region</mat-label>\n    <input required matInput formControlName="region">\n    <mat-error *ngIf="sqsConfigForm.get(\'region\').hasError(\'required\')">\n      {{ \'tb.rulenode.aws-region-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),le=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.pubSubConfigForm},r.prototype.onConfigurationSet=function(e){this.pubSubConfigForm=this.fb.group({projectId:[e?e.projectId:null,[i.Validators.required]],topicName:[e?e.topicName:null,[i.Validators.required]],serviceAccountKey:[e?e.serviceAccountKey:null,[i.Validators.required]],serviceAccountKeyFileName:[e?e.serviceAccountKeyFileName:null,[i.Validators.required]],messageAttributes:[e?e.messageAttributes:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-pub-sub-config",template:'<section [formGroup]="pubSubConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.gcp-project-id</mat-label>\n    <input required matInput formControlName="projectId">\n    <mat-error *ngIf="pubSubConfigForm.get(\'projectId\').hasError(\'required\')">\n      {{ \'tb.rulenode.gcp-project-id-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.pubsub-topic-name</mat-label>\n    <input required matInput formControlName="topicName">\n    <mat-error *ngIf="pubSubConfigForm.get(\'topicName\').hasError(\'required\')">\n      {{ \'tb.rulenode.pubsub-topic-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <tb-file-input style="padding-bottom: 24px;"\n                 formControlName="serviceAccountKey"\n                 [existingFileName]="pubSubConfigForm.get(\'serviceAccountKeyFileName\').value"\n                 (fileNameChanged)="pubSubConfigForm.get(\'serviceAccountKeyFileName\').setValue($event)"\n                 required\n                 requiredAsError\n                 label="{{\'tb.rulenode.gcp-service-account-key\' | translate}}"\n                 noFileText="tb.rulenode.no-file"\n                 dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n  </tb-file-input>\n  <label translate class="tb-title">tb.rulenode.message-attributes</label>\n  <div class="tb-hint" translate>tb.rulenode.message-attributes-hint</div>\n  <tb-kv-map-config\n    required="false"\n    formControlName="messageAttributes"\n    keyText="tb.rulenode.name"\n    keyRequiredText="tb.rulenode.name-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),se=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.ackValues=["all","-1","0","1"],n}return y(r,e),r.prototype.configForm=function(){return this.kafkaConfigForm},r.prototype.onConfigurationSet=function(e){this.kafkaConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[i.Validators.required]],bootstrapServers:[e?e.bootstrapServers:null,[i.Validators.required]],retries:[e?e.retries:null,[i.Validators.min(0)]],batchSize:[e?e.batchSize:null,[i.Validators.min(0)]],linger:[e?e.linger:null,[i.Validators.min(0)]],bufferMemory:[e?e.bufferMemory:null,[i.Validators.min(0)]],acks:[e?e.acks:null,[i.Validators.required]],keySerializer:[e?e.keySerializer:null,[i.Validators.required]],valueSerializer:[e?e.valueSerializer:null,[i.Validators.required]],otherProperties:[e?e.otherProperties:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-kafka-config",template:'<section [formGroup]="kafkaConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="kafkaConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.bootstrap-servers</mat-label>\n    <input required matInput formControlName="bootstrapServers">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bootstrapServers\').hasError(\'required\')">\n      {{ \'tb.rulenode.bootstrap-servers-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.retries</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="retries">\n    <mat-error *ngIf="kafkaConfigForm.get(\'retries\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-retries-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.batch-size-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="batchSize">\n    <mat-error *ngIf="kafkaConfigForm.get(\'batchSize\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-batch-size-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.linger-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="linger">\n    <mat-error *ngIf="kafkaConfigForm.get(\'linger\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-linger-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.buffer-memory-bytes</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="bufferMemory">\n    <mat-error *ngIf="kafkaConfigForm.get(\'bufferMemory\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-buffer-memory-bytes-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.acks</mat-label>\n    <mat-select formControlName="acks" required>\n      <mat-option *ngFor="let ackValue of ackValues" [value]="ackValue">\n        {{ ackValue }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.key-serializer</mat-label>\n    <input required matInput formControlName="keySerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'keySerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.key-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.value-serializer</mat-label>\n    <input required matInput formControlName="valueSerializer">\n    <mat-error *ngIf="kafkaConfigForm.get(\'valueSerializer\').hasError(\'required\')">\n      {{ \'tb.rulenode.value-serializer-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.other-properties</label>\n  <tb-kv-map-config\n    required="false"\n    formControlName="otherProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),me=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.allMqttCredentialsTypes=$,n.mqttCredentialsTypeTranslationsMap=_,n}return y(r,e),r.prototype.configForm=function(){return this.mqttConfigForm},r.prototype.onConfigurationSet=function(e){this.mqttConfigForm=this.fb.group({topicPattern:[e?e.topicPattern:null,[i.Validators.required]],host:[e?e.host:null,[i.Validators.required]],port:[e?e.port:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(65535)]],connectTimeoutSec:[e?e.connectTimeoutSec:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(200)]],clientId:[e?e.clientId:null,[]],cleanSession:[!!e&&e.cleanSession,[]],ssl:[!!e&&e.ssl,[]],credentials:this.fb.group({type:[e&&e.credentials?e.credentials.type:null,[i.Validators.required]],username:[e&&e.credentials?e.credentials.username:null,[]],password:[e&&e.credentials?e.credentials.password:null,[]],caCert:[e&&e.credentials?e.credentials.caCert:null,[]],caCertFileName:[e&&e.credentials?e.credentials.caCertFileName:null,[]],privateKey:[e&&e.credentials?e.credentials.privateKey:null,[]],privateKeyFileName:[e&&e.credentials?e.credentials.privateKeyFileName:null,[]],cert:[e&&e.credentials?e.credentials.cert:null,[]],certFileName:[e&&e.credentials?e.credentials.certFileName:null,[]]})})},r.prototype.prepareOutputConfig=function(e){var t=e.credentials.type;switch(t){case"anonymous":e.credentials={type:t};break;case"basic":e.credentials={type:t,username:e.credentials.username,password:e.credentials.password};break;case"cert.PEM":delete e.credentials.username}return e},r.prototype.validatorTriggers=function(){return["credentials.type"]},r.prototype.updateValidators=function(e){var t=this.mqttConfigForm.get("credentials"),r=t.get("type").value;switch(e&&t.reset({type:r},{emitEvent:!1}),t.get("username").setValidators([]),t.get("password").setValidators([]),t.get("caCert").setValidators([]),t.get("caCertFileName").setValidators([]),t.get("privateKey").setValidators([]),t.get("privateKeyFileName").setValidators([]),t.get("cert").setValidators([]),t.get("certFileName").setValidators([]),r){case"anonymous":break;case"basic":t.get("username").setValidators([i.Validators.required]),t.get("password").setValidators([i.Validators.required]);break;case"cert.PEM":t.get("caCert").setValidators([i.Validators.required]),t.get("caCertFileName").setValidators([i.Validators.required]),t.get("privateKey").setValidators([i.Validators.required]),t.get("privateKeyFileName").setValidators([i.Validators.required]),t.get("cert").setValidators([i.Validators.required]),t.get("certFileName").setValidators([i.Validators.required])}t.get("username").updateValueAndValidity({emitEvent:e}),t.get("password").updateValueAndValidity({emitEvent:e}),t.get("caCert").updateValueAndValidity({emitEvent:e}),t.get("caCertFileName").updateValueAndValidity({emitEvent:e}),t.get("privateKey").updateValueAndValidity({emitEvent:e}),t.get("privateKeyFileName").updateValueAndValidity({emitEvent:e}),t.get("cert").updateValueAndValidity({emitEvent:e}),t.get("certFileName").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-mqtt-config",template:'<section [formGroup]="mqttConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.topic-pattern</mat-label>\n    <input required matInput formControlName="topicPattern">\n    <mat-error *ngIf="mqttConfigForm.get(\'topicPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.topic-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mqtt-topic-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <div fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="mqttConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="40" class="mat-block">\n      <mat-label translate>tb.rulenode.connect-timeout</mat-label>\n      <input required type="number" step="1" min="1" max="200" matInput formControlName="connectTimeoutSec">\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'required\')">\n        {{ \'tb.rulenode.connect-timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'min\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="mqttConfigForm.get(\'connectTimeoutSec\').hasError(\'max\')">\n        {{ \'tb.rulenode.connect-timeout-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.client-id</mat-label>\n    <input matInput formControlName="clientId">\n  </mat-form-field>\n  <mat-checkbox formControlName="cleanSession" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.clean-session\' | translate }}\n  </mat-checkbox>\n  <mat-checkbox formControlName="ssl" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.enable-ssl\' | translate }}\n  </mat-checkbox>\n  <mat-expansion-panel class="tb-mqtt-credentials-panel-group">\n    <mat-expansion-panel-header>\n      <mat-panel-title translate>tb.rulenode.credentials</mat-panel-title>\n      <mat-panel-description>\n        {{ mqttCredentialsTypeTranslationsMap.get(mqttConfigForm.get(\'credentials\').get(\'type\').value) | translate }}\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <section formGroupName="credentials" fxLayout="column">\n      <mat-form-field class="mat-block">\n        <mat-label translate>tb.rulenode.credentials-type</mat-label>\n        <mat-select formControlName="type" required>\n          <mat-option *ngFor="let credentialsType of allMqttCredentialsTypes" [value]="credentialsType">\n            {{ mqttCredentialsTypeTranslationsMap.get(credentialsType) | translate }}\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf="mqttConfigForm.get(\'credentials\').get(\'type\').hasError(\'required\')">\n          {{ \'tb.rulenode.credentials-type-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <section fxLayout="column" [ngSwitch]="mqttConfigForm.get(\'credentials\').get(\'type\').value">\n        <ng-template ngSwitchCase="anonymous">\n        </ng-template>\n        <ng-template ngSwitchCase="basic">\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.username</mat-label>\n            <input required matInput formControlName="username">\n            <mat-error *ngIf="mqttConfigForm.get(\'credentials\').get(\'username\').hasError(\'required\')">\n              {{ \'tb.rulenode.username-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.password</mat-label>\n            <input type="password" required matInput formControlName="password">\n            <mat-error *ngIf="mqttConfigForm.get(\'credentials\').get(\'password\').hasError(\'required\')">\n              {{ \'tb.rulenode.password-required\' | translate }}\n            </mat-error>\n          </mat-form-field>\n        </ng-template>\n        <ng-template ngSwitchCase="cert.PEM">\n          <tb-file-input formControlName="caCert"\n                         inputId="caCertSelect"\n                         [existingFileName]="mqttConfigForm.get(\'credentials\').get(\'caCertFileName\').value"\n                         (fileNameChanged)="mqttConfigForm.get(\'credentials\').get(\'caCertFileName\').setValue($event)"\n                         required\n                         requiredAsError\n                         label="{{\'tb.rulenode.ca-cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input formControlName="cert"\n                         inputId="CertSelect"\n                         [existingFileName]="mqttConfigForm.get(\'credentials\').get(\'certFileName\').value"\n                         (fileNameChanged)="mqttConfigForm.get(\'credentials\').get(\'certFileName\').setValue($event)"\n                         required\n                         requiredAsError\n                         label="{{\'tb.rulenode.cert\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <tb-file-input style="padding-bottom: 8px;"\n                         formControlName="privateKey"\n                         inputId="privateKeySelect"\n                         [existingFileName]="mqttConfigForm.get(\'credentials\').get(\'privateKeyFileName\').value"\n                         (fileNameChanged)="mqttConfigForm.get(\'credentials\').get(\'privateKeyFileName\').setValue($event)"\n                         required\n                         requiredAsError\n                         label="{{\'tb.rulenode.private-key\' | translate}}"\n                         noFileText="tb.rulenode.no-file"\n                         dropLabel="{{\'tb.rulenode.drop-file\' | translate}}">\n          </tb-file-input>\n          <mat-form-field class="mat-block">\n            <mat-label translate>tb.rulenode.private-key-password</mat-label>\n            <input type="password" matInput formControlName="password">\n          </mat-form-field>\n        </ng-template>\n      </section>\n    </section>\n  </mat-expansion-panel>\n</section>\n',styles:[":host .tb-mqtt-credentials-panel-group{margin:0 6px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ue=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.messageProperties=[null,"BASIC","TEXT_PLAIN","MINIMAL_BASIC","MINIMAL_PERSISTENT_BASIC","PERSISTENT_BASIC","PERSISTENT_TEXT_PLAIN"],n}return y(r,e),r.prototype.configForm=function(){return this.rabbitMqConfigForm},r.prototype.onConfigurationSet=function(e){this.rabbitMqConfigForm=this.fb.group({exchangeNamePattern:[e?e.exchangeNamePattern:null,[]],routingKeyPattern:[e?e.routingKeyPattern:null,[]],messageProperties:[e?e.messageProperties:null,[]],host:[e?e.host:null,[i.Validators.required]],port:[e?e.port:null,[i.Validators.required,i.Validators.min(1),i.Validators.max(65535)]],virtualHost:[e?e.virtualHost:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]],automaticRecoveryEnabled:[!!e&&e.automaticRecoveryEnabled,[]],connectionTimeout:[e?e.connectionTimeout:null,[i.Validators.min(0)]],handshakeTimeout:[e?e.handshakeTimeout:null,[i.Validators.min(0)]],clientProperties:[e?e.clientProperties:null,[]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rabbit-mq-config",template:'<section [formGroup]="rabbitMqConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.exchange-name-pattern</mat-label>\n    <input matInput formControlName="exchangeNamePattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.routing-key-pattern</mat-label>\n    <input matInput formControlName="routingKeyPattern">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.message-properties</mat-label>\n    <mat-select formControlName="messageProperties">\n      <mat-option *ngFor="let property of messageProperties" [value]="property">\n        {{ property }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n      <mat-label translate>tb.rulenode.host</mat-label>\n      <input required matInput formControlName="host">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'host\').hasError(\'required\')">\n        {{ \'tb.rulenode.host-required\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n      <mat-label translate>tb.rulenode.port</mat-label>\n      <input required type="number" step="1" min="1" max="65535" matInput formControlName="port">\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'required\')">\n        {{ \'tb.rulenode.port-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'min\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="rabbitMqConfigForm.get(\'port\').hasError(\'max\')">\n        {{ \'tb.rulenode.port-range\' | translate }}\n      </mat-error>\n    </mat-form-field>\n  </div>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.virtual-host</mat-label>\n    <input matInput formControlName="virtualHost">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.username</mat-label>\n    <input matInput formControlName="username">\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.password</mat-label>\n    <input type="password" matInput formControlName="password">\n  </mat-form-field>\n  <mat-checkbox formControlName="automaticRecoveryEnabled" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.automatic-recovery\' | translate }}\n  </mat-checkbox>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.connection-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="connectionTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'connectionTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-connection-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.handshake-timeout-ms</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="handshakeTimeout">\n    <mat-error *ngIf="rabbitMqConfigForm.get(\'handshakeTimeout\').hasError(\'min\')">\n      {{ \'tb.rulenode.min-handshake-timeout-ms-message\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.client-properties</label>\n  <tb-kv-map-config\n    required="false"\n    formControlName="clientProperties"\n    keyText="tb.rulenode.key"\n    keyRequiredText="tb.rulenode.key-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),de=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.httpRequestTypes=Object.keys(Q),n}return y(r,e),r.prototype.configForm=function(){return this.restApiCallConfigForm},r.prototype.onConfigurationSet=function(e){this.restApiCallConfigForm=this.fb.group({restEndpointUrlPattern:[e?e.restEndpointUrlPattern:null,[i.Validators.required]],requestMethod:[e?e.requestMethod:null,[i.Validators.required]],useSimpleClientHttpFactory:[!!e&&e.useSimpleClientHttpFactory,[]],readTimeoutMs:[e?e.readTimeoutMs:null,[]],maxParallelRequestsCount:[e?e.maxParallelRequestsCount:null,[i.Validators.min(0)]],headers:[e?e.headers:null,[]],useRedisQueueForMsgPersistence:[!!e&&e.useRedisQueueForMsgPersistence,[]],trimQueue:[!!e&&e.trimQueue,[]],maxQueueSize:[e?e.maxQueueSize:null,[]]})},r.prototype.validatorTriggers=function(){return["useSimpleClientHttpFactory","useRedisQueueForMsgPersistence"]},r.prototype.updateValidators=function(e){var t=this.restApiCallConfigForm.get("useSimpleClientHttpFactory").value,r=this.restApiCallConfigForm.get("useRedisQueueForMsgPersistence").value;t?this.restApiCallConfigForm.get("readTimeoutMs").setValidators([]):this.restApiCallConfigForm.get("readTimeoutMs").setValidators([i.Validators.min(0)]),r?this.restApiCallConfigForm.get("maxQueueSize").setValidators([i.Validators.min(0)]):this.restApiCallConfigForm.get("maxQueueSize").setValidators([]),this.restApiCallConfigForm.get("readTimeoutMs").updateValueAndValidity({emitEvent:e}),this.restApiCallConfigForm.get("maxQueueSize").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-rest-api-call-config",template:'<section [formGroup]="restApiCallConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.endpoint-url-pattern</mat-label>\n    <input required matInput formControlName="restEndpointUrlPattern">\n    <mat-error *ngIf="restApiCallConfigForm.get(\'restEndpointUrlPattern\').hasError(\'required\')">\n      {{ \'tb.rulenode.endpoint-url-pattern-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.endpoint-url-pattern-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.request-method</mat-label>\n    <mat-select formControlName="requestMethod">\n      <mat-option *ngFor="let requestType of httpRequestTypes" [value]="requestType">\n        {{ requestType }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-checkbox formControlName="useSimpleClientHttpFactory" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-simple-client-http-factory\' | translate }}\n  </mat-checkbox>\n  <mat-form-field *ngIf="restApiCallConfigForm.get(\'useSimpleClientHttpFactory\').value === false" class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.read-timeout</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="readTimeoutMs">\n    <mat-hint innerHTML="{{ \'tb.rulenode.read-timeout-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.max-parallel-requests-count</mat-label>\n    <input type="number" step="1" min="0" matInput formControlName="maxParallelRequestsCount">\n    <mat-hint innerHTML="{{ \'tb.rulenode.max-parallel-requests-count-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <label translate class="tb-title">tb.rulenode.headers</label>\n  <div class="tb-hint" translate>tb.rulenode.headers-hint</div>\n  <tb-kv-map-config\n    required="false"\n    formControlName="headers"\n    keyText="tb.rulenode.header"\n    keyRequiredText="tb.rulenode.header-required"\n    valText="tb.rulenode.value"\n    valRequiredText="tb.rulenode.value-required">\n  </tb-kv-map-config>\n  <mat-checkbox formControlName="useRedisQueueForMsgPersistence" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-redis-queue\' | translate }}\n  </mat-checkbox>\n  <div fxLayout="column" *ngIf="restApiCallConfigForm.get(\'useRedisQueueForMsgPersistence\').value === true">\n    <mat-checkbox formControlName="trimQueue" style="padding-bottom: 16px;">\n      {{ \'tb.rulenode.trim-redis-queue\' | translate }}\n    </mat-checkbox>\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.redis-queue-max-size</mat-label>\n      <input type="number" step="1" min="0" matInput formControlName="maxQueueSize">\n    </mat-form-field>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),pe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.smtpProtocols=["smtp","smtps"],n.tlsVersions=["TLSv1","TLSv1.1","TLSv1.2","TLSv1.3"],n}return y(r,e),r.prototype.configForm=function(){return this.sendEmailConfigForm},r.prototype.onConfigurationSet=function(e){this.sendEmailConfigForm=this.fb.group({useSystemSmtpSettings:[!!e&&e.useSystemSmtpSettings,[]],smtpProtocol:[e?e.smtpProtocol:null,[]],smtpHost:[e?e.smtpHost:null,[]],smtpPort:[e?e.smtpPort:null,[]],timeout:[e?e.timeout:null,[]],enableTls:[!!e&&e.enableTls,[]],tlsVersion:[e?e.tlsVersion:null,[]],username:[e?e.username:null,[]],password:[e?e.password:null,[]]})},r.prototype.validatorTriggers=function(){return["useSystemSmtpSettings"]},r.prototype.updateValidators=function(e){this.sendEmailConfigForm.get("useSystemSmtpSettings").value?(this.sendEmailConfigForm.get("smtpProtocol").setValidators([]),this.sendEmailConfigForm.get("smtpHost").setValidators([]),this.sendEmailConfigForm.get("smtpPort").setValidators([]),this.sendEmailConfigForm.get("timeout").setValidators([])):(this.sendEmailConfigForm.get("smtpProtocol").setValidators([i.Validators.required]),this.sendEmailConfigForm.get("smtpHost").setValidators([i.Validators.required]),this.sendEmailConfigForm.get("smtpPort").setValidators([i.Validators.required,i.Validators.min(1),i.Validators.max(65535)]),this.sendEmailConfigForm.get("timeout").setValidators([i.Validators.required,i.Validators.min(0)])),this.sendEmailConfigForm.get("smtpProtocol").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpHost").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("smtpPort").updateValueAndValidity({emitEvent:e}),this.sendEmailConfigForm.get("timeout").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-action-node-send-email-config",template:'<section [formGroup]="sendEmailConfigForm" fxLayout="column">\n  <mat-checkbox formControlName="useSystemSmtpSettings" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.use-system-smtp-settings\' | translate }}\n  </mat-checkbox>\n  <section fxLayout="column" *ngIf="sendEmailConfigForm.get(\'useSystemSmtpSettings\').value === false">\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.smtp-protocol</mat-label>\n      <mat-select formControlName="smtpProtocol">\n        <mat-option *ngFor="let smtpProtocol of smtpProtocols" [value]="smtpProtocol">\n          {{ smtpProtocol.toUpperCase() }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="60" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-host</mat-label>\n        <input required matInput formControlName="smtpHost">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpHost\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-host-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex="100" fxFlex.gt-sm="40" class="mat-block">\n        <mat-label translate>tb.rulenode.smtp-port</mat-label>\n        <input required type="number" step="1" min="1" max="65535" matInput formControlName="smtpPort">\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'required\')">\n          {{ \'tb.rulenode.smtp-port-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'min\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="sendEmailConfigForm.get(\'smtpPort\').hasError(\'max\')">\n          {{ \'tb.rulenode.smtp-port-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <mat-form-field class="mat-block">\n      <mat-label translate>tb.rulenode.timeout-msec</mat-label>\n      <input required type="number" step="1" min="0" matInput formControlName="timeout">\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'required\')">\n        {{ \'tb.rulenode.timeout-required\' | translate }}\n      </mat-error>\n      <mat-error *ngIf="sendEmailConfigForm.get(\'timeout\').hasError(\'min\')">\n        {{ \'tb.rulenode.min-timeout-msec-message\' | translate }}\n      </mat-error>\n    </mat-form-field>\n    <mat-checkbox formControlName="enableTls" style="padding-bottom: 16px;">\n      {{ \'tb.rulenode.enable-tls\' | translate }}\n    </mat-checkbox>\n    <mat-form-field class="mat-block" *ngIf="sendEmailConfigForm.get(\'enableTls\').value === true">\n      <mat-label translate>tb.rulenode.tls-version</mat-label>\n      <mat-select formControlName="tlsVersion">\n        <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">\n          {{ tlsVersion }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.username</mat-label>\n      <input matInput placeholder="{{ \'tb.rulenode.enter-username\' | translate }}" formControlName="username">\n    </mat-form-field>\n    <mat-form-field class="mat-block" floatLabel="always">\n      <mat-label translate>tb.rulenode.password</mat-label>\n      <input matInput type="password" placeholder="{{ \'tb.rulenode.enter-password\' | translate }}" formControlName="password">\n    </mat-form-field>\n  </section>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ce=function(){function e(){}return e=b([t.NgModule({declarations:[T,x,q,S,I,k,N,V,E,A,L,W,J,Y,Z,ae,oe,ie,le,se,me,ue,de,pe],imports:[r.CommonModule,a.SharedModule,ne],exports:[T,x,q,S,I,k,N,V,E,A,L,W,J,Y,Z,ae,oe,ie,le,se,me,ue,de,pe]})],e)}(),fe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n}return y(r,e),r.prototype.configForm=function(){return this.checkMessageConfigForm},r.prototype.onConfigurationSet=function(e){this.checkMessageConfigForm=this.fb.group({messageNames:[e?e.messageNames:null,[]],metadataNames:[e?e.metadataNames:null,[]],checkAllKeys:[!!e&&e.checkAllKeys,[]]})},r.prototype.validateConfig=function(){var e=this.checkMessageConfigForm.get("messageNames").value,t=this.checkMessageConfigForm.get("metadataNames").value;return e.length>0||t.length>0},r.prototype.removeMessageName=function(e){var t=this.checkMessageConfigForm.get("messageNames").value,r=t.indexOf(e);r>=0&&(t.splice(r,1),this.checkMessageConfigForm.get("messageNames").setValue(t,{emitEvent:!0}))},r.prototype.removeMetadataName=function(e){var t=this.checkMessageConfigForm.get("metadataNames").value,r=t.indexOf(e);r>=0&&(t.splice(r,1),this.checkMessageConfigForm.get("metadataNames").setValue(t,{emitEvent:!0}))},r.prototype.addMessageName=function(e){var t=e.input,r=e.value;if((r||"").trim()){r=r.trim();var n=this.checkMessageConfigForm.get("messageNames").value;n&&-1!==n.indexOf(r)||(n||(n=[]),n.push(r),this.checkMessageConfigForm.get("messageNames").setValue(n,{emitEvent:!0}))}t&&(t.value="")},r.prototype.addMetadataName=function(e){var t=e.input,r=e.value;if((r||"").trim()){r=r.trim();var n=this.checkMessageConfigForm.get("metadataNames").value;n&&-1!==n.indexOf(r)||(n||(n=[]),n.push(r),this.checkMessageConfigForm.get("metadataNames").setValue(n,{emitEvent:!0}))}t&&(t.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-check-message-config",template:'<section [formGroup]="checkMessageConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding tb-required">tb.rulenode.data-keys</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #messageNamesChipList>\n      <mat-chip\n        *ngFor="let messageName of checkMessageConfigForm.get(\'messageNames\').value;"\n        (removed)="removeMessageName(messageName)">\n        {{messageName}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.data-keys\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="messageNamesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addMessageName($event)"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <div class="tb-hint" translate>tb.rulenode.separator-hint</div>\n  <label translate class="tb-title no-padding tb-required">tb.rulenode.metadata-keys</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #metadataNamesChipList>\n      <mat-chip\n        *ngFor="let metadataName of checkMessageConfigForm.get(\'metadataNames\').value;"\n        (removed)="removeMetadataName(metadataName)">\n        {{metadataName}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.metadata-keys\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="metadataNamesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addMetadataName($event)"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <div class="tb-hint" translate>tb.rulenode.separator-hint</div>\n  <mat-checkbox fxFlex formControlName="checkAllKeys" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.check-all-keys\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.check-all-keys-hint</div>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ge=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.entitySearchDirection=Object.keys(a.EntitySearchDirection),n.entitySearchDirectionTranslationsMap=a.entitySearchDirectionTranslations,n}return y(r,e),r.prototype.configForm=function(){return this.checkRelationConfigForm},r.prototype.onConfigurationSet=function(e){this.checkRelationConfigForm=this.fb.group({checkForSingleEntity:[!!e&&e.checkForSingleEntity,[]],direction:[e?e.direction:null,[]],entityType:[e?e.entityType:null,e&&e.checkForSingleEntity?[i.Validators.required]:[]],entityId:[e?e.entityId:null,e&&e.checkForSingleEntity?[i.Validators.required]:[]],relationType:[e?e.relationType:null,[i.Validators.required]]})},r.prototype.validatorTriggers=function(){return["checkForSingleEntity"]},r.prototype.updateValidators=function(e){var t=this.checkRelationConfigForm.get("checkForSingleEntity").value;this.checkRelationConfigForm.get("entityType").setValidators(t?[i.Validators.required]:[]),this.checkRelationConfigForm.get("entityType").updateValueAndValidity({emitEvent:e}),this.checkRelationConfigForm.get("entityId").setValidators(t?[i.Validators.required]:[]),this.checkRelationConfigForm.get("entityId").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-check-relation-config",template:'<section [formGroup]="checkRelationConfigForm" fxLayout="column">\n  <mat-checkbox fxFlex formControlName="checkForSingleEntity" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.check-relation-to-specific-entity\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.check-relation-hint</div>\n  <mat-form-field class="mat-block" style="min-width: 100px;">\n    <mat-label translate>relation.direction</mat-label>\n    <mat-select formControlName="direction" required>\n      <mat-option *ngFor="let direction of entitySearchDirection" [value]="direction">\n        {{ entitySearchDirectionTranslationsMap.get(direction) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <div fxLayout="row" *ngIf="checkRelationConfigForm.get(\'checkForSingleEntity\').value" style="padding-top: 20px">\n    <tb-entity-type-select\n      style="min-width: 100px; padding-bottom: 20px; padding-right: 8px;"\n      showLabel\n      required\n      formControlName="entityType">\n    </tb-entity-type-select>\n    <tb-entity-autocomplete\n      fxFlex\n      required\n      *ngIf="checkRelationConfigForm.get(\'entityType\').value"\n      [entityType]="checkRelationConfigForm.get(\'entityType\').value"\n      formControlName="entityId">\n    </tb-entity-autocomplete>\n  </div>\n  <tb-relation-type-autocomplete\n    required\n    formControlName="relationType">\n  </tb-relation-type-autocomplete>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ye=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.perimeterType=M,n.perimeterTypes=Object.keys(M),n.perimeterTypeTranslationMap=w,n.rangeUnits=Object.keys(D),n.rangeUnitTranslationMap=B,n}return y(r,e),r.prototype.configForm=function(){return this.geoFilterConfigForm},r.prototype.onConfigurationSet=function(e){this.geoFilterConfigForm=this.fb.group({latitudeKeyName:[e?e.latitudeKeyName:null,[i.Validators.required]],longitudeKeyName:[e?e.longitudeKeyName:null,[i.Validators.required]],fetchPerimeterInfoFromMessageMetadata:[!!e&&e.fetchPerimeterInfoFromMessageMetadata,[]],perimeterType:[e?e.perimeterType:null,[]],centerLatitude:[e?e.centerLatitude:null,[]],centerLongitude:[e?e.centerLatitude:null,[]],range:[e?e.range:null,[]],rangeUnit:[e?e.rangeUnit:null,[]],polygonsDefinition:[e?e.polygonsDefinition:null,[]]})},r.prototype.validatorTriggers=function(){return["fetchPerimeterInfoFromMessageMetadata","perimeterType"]},r.prototype.updateValidators=function(e){var t=this.geoFilterConfigForm.get("fetchPerimeterInfoFromMessageMetadata").value,r=this.geoFilterConfigForm.get("perimeterType").value;t?this.geoFilterConfigForm.get("perimeterType").setValidators([]):this.geoFilterConfigForm.get("perimeterType").setValidators([i.Validators.required]),t||r!==M.CIRCLE?(this.geoFilterConfigForm.get("centerLatitude").setValidators([]),this.geoFilterConfigForm.get("centerLongitude").setValidators([]),this.geoFilterConfigForm.get("range").setValidators([]),this.geoFilterConfigForm.get("rangeUnit").setValidators([])):(this.geoFilterConfigForm.get("centerLatitude").setValidators([i.Validators.required,i.Validators.min(-90),i.Validators.max(90)]),this.geoFilterConfigForm.get("centerLongitude").setValidators([i.Validators.required,i.Validators.min(-180),i.Validators.max(180)]),this.geoFilterConfigForm.get("range").setValidators([i.Validators.required,i.Validators.min(0)]),this.geoFilterConfigForm.get("rangeUnit").setValidators([i.Validators.required])),t||r!==M.POLYGON?this.geoFilterConfigForm.get("polygonsDefinition").setValidators([]):this.geoFilterConfigForm.get("polygonsDefinition").setValidators([i.Validators.required]),this.geoFilterConfigForm.get("perimeterType").updateValueAndValidity({emitEvent:!1}),this.geoFilterConfigForm.get("centerLatitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("centerLongitude").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("range").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("rangeUnit").updateValueAndValidity({emitEvent:e}),this.geoFilterConfigForm.get("polygonsDefinition").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-gps-geofencing-config",template:'<section [formGroup]="geoFilterConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.latitude-key-name</mat-label>\n    <input matInput formControlName="latitudeKeyName" required>\n    <mat-error *ngIf="geoFilterConfigForm.get(\'latitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.latitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.longitude-key-name</mat-label>\n    <input matInput formControlName="longitudeKeyName" required>\n    <mat-error *ngIf="geoFilterConfigForm.get(\'longitudeKeyName\').hasError(\'required\')">\n      {{ \'tb.rulenode.longitude-key-name-required\' | translate }}\n    </mat-error>\n  </mat-form-field>\n  <mat-checkbox fxFlex formControlName="fetchPerimeterInfoFromMessageMetadata" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.fetch-perimeter-info-from-message-metadata\' | translate }}\n  </mat-checkbox>\n  <div fxLayout="row" *ngIf="!geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <mat-form-field fxFlex class="mat-block">\n      <mat-label translate>tb.rulenode.perimeter-type</mat-label>\n      <mat-select formControlName="perimeterType" required>\n        <mat-option *ngFor="let type of perimeterTypes" [value]="type">\n          {{ perimeterTypeTranslationMap.get(type) | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <div fxLayout="column"\n       *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.CIRCLE &&\n       !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-latitude</mat-label>\n        <input type="number" min="-90" max="90" step="0.1" matInput formControlName="centerLatitude" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'centerLatitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-latitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.circle-center-longitude</mat-label>\n        <input type="number" min="-180" max="180" step="0.1" matInput formControlName="centerLongitude" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'centerLongitude\').hasError(\'required\')">\n          {{ \'tb.rulenode.circle-center-longitude-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n    <div fxLayout="row" fxLayoutGap="8px">\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range</mat-label>\n        <input type="number" min="0" step="0.1" matInput formControlName="range" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'range\').hasError(\'required\')">\n          {{ \'tb.rulenode.range-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex>\n        <mat-label translate>tb.rulenode.range-units</mat-label>\n        <mat-select formControlName="rangeUnit" required>\n          <mat-option *ngFor="let type of rangeUnits" [value]="type">\n            {{ rangeUnitTranslationMap.get(type) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <div fxLayout="row" *ngIf="geoFilterConfigForm.get(\'perimeterType\').value === perimeterType.POLYGON &&\n                             !geoFilterConfigForm.get(\'fetchPerimeterInfoFromMessageMetadata\').value">\n    <div fxLayout="column" fxFlex="100">\n      <mat-form-field class="mat-block" hintLabel="{{\'tb.rulenode.polygon-definition-hint\' | translate}}">\n        <mat-label translate>tb.rulenode.polygon-definition</mat-label>\n        <input matInput formControlName="polygonsDefinition" required>\n        <mat-error *ngIf="geoFilterConfigForm.get(\'polygonsDefinition\').hasError(\'required\')">\n          {{ \'tb.rulenode.polygon-definition-required\' | translate }}\n        </mat-error>\n      </mat-form-field>\n    </div>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),be=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.messageTypeConfigForm},r.prototype.onConfigurationSet=function(e){this.messageTypeConfigForm=this.fb.group({messageTypes:[e?e.messageTypes:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-message-type-config",template:'<section [formGroup]="messageTypeConfigForm" fxLayout="column">\n  <tb-message-types-config\n    required\n    label="tb.rulenode.message-types-filter"\n    formControlName="messageTypes"\n  ></tb-message-types-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),he=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.allowedEntityTypes=[a.EntityType.DEVICE,a.EntityType.ASSET,a.EntityType.ENTITY_VIEW,a.EntityType.TENANT,a.EntityType.CUSTOMER,a.EntityType.USER,a.EntityType.DASHBOARD,a.EntityType.RULE_CHAIN,a.EntityType.RULE_NODE],n}return y(r,e),r.prototype.configForm=function(){return this.originatorTypeConfigForm},r.prototype.onConfigurationSet=function(e){this.originatorTypeConfigForm=this.fb.group({originatorTypes:[e?e.originatorTypes:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-filter-node-originator-type-config",template:'<section [formGroup]="originatorTypeConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding tb-required">tb.rulenode.originator-types-filter</label>\n  <tb-entity-type-list fxFlex\n                       formControlName="originatorTypes"\n                       [allowedEntityTypes]="allowedEntityTypes"\n                       [ignoreAuthorityFilter]="true"\n                       required>\n  </tb-entity-type-list>\n</section>\n',styles:[":host ::ng-deep tb-entity-type-list .mat-form-field-flex{padding-top:0}:host ::ng-deep tb-entity-type-list .mat-form-field-infix{border-top:0}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ce=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.scriptConfigForm},r.prototype.onConfigurationSet=function(e){this.scriptConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.scriptConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"filter",this.translate.instant("tb.rulenode.filter"),"Filter",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.scriptConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-filter-node-script-config",template:'<section [formGroup]="scriptConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.filter</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Filter"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-filter-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),ve=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.switchConfigForm},r.prototype.onConfigurationSet=function(e){this.switchConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.switchConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"switch",this.translate.instant("tb.rulenode.switch"),"Switch",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.switchConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-filter-node-switch-config",template:'<section [formGroup]="switchConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.switch</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Switch"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-switch-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),Fe=function(e){function r(t,r,n){var o,l,s=e.call(this,t)||this;s.store=t,s.translate=r,s.fb=n,s.alarmStatusTranslationsMap=a.alarmStatusTranslations,s.alarmStatusList=[],s.searchText="",s.displayStatusFn=s.displayStatus.bind(s);try{for(var m=C(Object.keys(a.AlarmStatus)),u=m.next();!u.done;u=m.next()){var d=u.value;s.alarmStatusList.push(a.AlarmStatus[d])}}catch(e){o={error:e}}finally{try{u&&!u.done&&(l=m.return)&&l.call(m)}finally{if(o)throw o.error}}return s.statusFormControl=new i.FormControl(""),s.filteredAlarmStatus=s.statusFormControl.valueChanges.pipe(f.startWith(""),f.map((function(e){return e||""})),f.mergeMap((function(e){return s.fetchAlarmStatus(e)})),f.share()),s}return y(r,e),r.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},r.prototype.configForm=function(){return this.alarmStatusConfigForm},r.prototype.prepareInputConfig=function(e){return this.searchText="",this.statusFormControl.patchValue("",{emitEvent:!0}),e},r.prototype.onConfigurationSet=function(e){this.alarmStatusConfigForm=this.fb.group({alarmStatusList:[e?e.alarmStatusList:null,[i.Validators.required]]})},r.prototype.displayStatus=function(e){return e?this.translate.instant(a.alarmStatusTranslations.get(e)):void 0},r.prototype.fetchAlarmStatus=function(e){var t=this,r=this.getAlarmStatusList();if(this.searchText=e,this.searchText&&this.searchText.length){var n=this.searchText.toUpperCase();return c.of(r.filter((function(e){return t.translate.instant(a.alarmStatusTranslations.get(a.AlarmStatus[e])).toUpperCase().includes(n)})))}return c.of(r)},r.prototype.alarmStatusSelected=function(e){this.addAlarmStatus(e.option.value),this.clear("")},r.prototype.removeAlarmStatus=function(e){var t=this.alarmStatusConfigForm.get("alarmStatusList").value;if(t){var r=t.indexOf(e);r>=0&&(t.splice(r,1),this.alarmStatusConfigForm.get("alarmStatusList").setValue(t))}},r.prototype.addAlarmStatus=function(e){var t=this.alarmStatusConfigForm.get("alarmStatusList").value;t||(t=[]),-1===t.indexOf(e)&&(t.push(e),this.alarmStatusConfigForm.get("alarmStatusList").setValue(t))},r.prototype.getAlarmStatusList=function(){var e=this;return this.alarmStatusList.filter((function(t){return-1===e.alarmStatusConfigForm.get("alarmStatusList").value.indexOf(t)}))},r.prototype.onAlarmStatusInputFocus=function(){this.statusFormControl.updateValueAndValidity({onlySelf:!0,emitEvent:!0})},r.prototype.clear=function(e){var t=this;void 0===e&&(e=""),this.alarmStatusInput.nativeElement.value=e,this.statusFormControl.patchValue(null,{emitEvent:!0}),setTimeout((function(){t.alarmStatusInput.nativeElement.blur(),t.alarmStatusInput.nativeElement.focus()}),0)},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:i.FormBuilder}]},b([t.ViewChild("alarmStatusInput",{static:!1}),h("design:type",t.ElementRef)],r.prototype,"alarmStatusInput",void 0),r=b([t.Component({selector:"tb-filter-node-check-alarm-status-config",template:'<section [formGroup]="alarmStatusConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" class="alarm-status-list">\n  <mat-label translate>tb.rulenode.alarm-status-filter</mat-label>\n  <mat-chip-list #alarmStatusChipList required>\n    <mat-chip\n      *ngFor="let alarmStatus of alarmStatusConfigForm.get(\'alarmStatusList\').value;"\n      (removed)="removeAlarmStatus(alarmStatus)">\n        <span>\n          <strong>{{alarmStatusTranslationsMap.get(alarmStatus) | translate}}</strong>\n        </span>\n      <mat-icon matChipRemove>close</mat-icon>\n    </mat-chip>\n    <input matInput type="text"\n           style="max-width: 200px;"\n           #alarmStatusInput\n           (focusin)="onAlarmStatusInputFocus()"\n           [formControl]="statusFormControl"\n           matAutocompleteOrigin\n           #origin="matAutocompleteOrigin"\n           [matAutocompleteConnectedTo]="origin"\n           [matAutocomplete]="alarmStatusAutocomplete"\n           [matChipInputFor]="alarmStatusChipList">\n  </mat-chip-list>\n  <mat-autocomplete #alarmStatusAutocomplete="matAutocomplete"\n                    class="tb-autocomplete"\n                    (optionSelected)="alarmStatusSelected($event)"\n                    [displayWith]="displayStatusFn">\n    <mat-option *ngFor="let status of filteredAlarmStatus | async" [value]="status">\n      <span [innerHTML]="alarmStatusTranslationsMap.get(status) | translate | highlight:searchText"></span>\n    </mat-option>\n    <mat-option *ngIf="(filteredAlarmStatus | async)?.length === 0" [value]="null" class="tb-not-found">\n      <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n        <div>\n          <span translate>tb.rulenode.no-alarm-status-matching</span>\n        </div>\n      </div>\n    </mat-option>\n  </mat-autocomplete>\n  </mat-form-field>\n  <tb-error [error]="(statusFormControl.touched &&\n                     alarmStatusConfigForm.get(\'alarmStatusList\').hasError(\'required\'))\n                  ? translate.instant(\'tb.rulenode.alarm-status-list-empty\') : \'\'"></tb-error>\n  </section>\n\n\n\n'}),h("design:paramtypes",[o.Store,n.TranslateService,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Te=function(){function e(){}return e=b([t.NgModule({declarations:[fe,ge,ye,be,he,Ce,ve,Fe],imports:[r.CommonModule,a.SharedModule,ne],exports:[fe,ge,ye,be,he,Ce,ve,Fe]})],e)}(),xe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.customerAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.customerAttributesConfigForm=this.fb.group({telemetry:[!!e&&e.telemetry,[]],attrMapping:[e?e.attrMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-customer-attributes-config",template:'<section [formGroup]="customerAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.attr-mapping</label>\n  <mat-checkbox fxFlex formControlName="telemetry" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.latest-telemetry\' | translate }}\n  </mat-checkbox>\n  <tb-kv-map-config\n    required\n    formControlName="attrMapping"\n    requiredText="tb.rulenode.attr-mapping-required"\n    keyText="{{ customerAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry\' : \'tb.rulenode.source-attribute\' }}"\n    keyRequiredText="{{ customerAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry-required\' : \'tb.rulenode.source-attribute-required\' }}"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),qe=function(e){function r(t,r,n){var a,o,l=e.call(this,t)||this;l.store=t,l.translate=r,l.fb=n,l.entityDetailsTranslationsMap=H,l.entityDetailsList=[],l.searchText="",l.displayDetailsFn=l.displayDetails.bind(l);try{for(var s=C(Object.keys(K)),m=s.next();!m.done;m=s.next()){var u=m.value;l.entityDetailsList.push(K[u])}}catch(e){a={error:e}}finally{try{m&&!m.done&&(o=s.return)&&o.call(s)}finally{if(a)throw a.error}}return l.detailsFormControl=new i.FormControl(""),l.filteredEntityDetails=l.detailsFormControl.valueChanges.pipe(f.startWith(""),f.map((function(e){return e||""})),f.mergeMap((function(e){return l.fetchEntityDetails(e)})),f.share()),l}return y(r,e),r.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},r.prototype.configForm=function(){return this.entityDetailsConfigForm},r.prototype.prepareInputConfig=function(e){return this.searchText="",this.detailsFormControl.patchValue("",{emitEvent:!0}),e},r.prototype.onConfigurationSet=function(e){this.entityDetailsConfigForm=this.fb.group({detailsList:[e?e.detailsList:null,[i.Validators.required]],addToMetadata:[!!e&&e.addToMetadata,[]]})},r.prototype.displayDetails=function(e){return e?this.translate.instant(H.get(e)):void 0},r.prototype.fetchEntityDetails=function(e){var t=this;if(this.searchText=e,this.searchText&&this.searchText.length){var r=this.searchText.toUpperCase();return c.of(this.entityDetailsList.filter((function(e){return t.translate.instant(H.get(K[e])).toUpperCase().includes(r)})))}return c.of(this.entityDetailsList)},r.prototype.detailsFieldSelected=function(e){this.addDetailsField(e.option.value),this.clear("")},r.prototype.removeDetailsField=function(e){var t=this.entityDetailsConfigForm.get("detailsList").value;if(t){var r=t.indexOf(e);r>=0&&(t.splice(r,1),this.entityDetailsConfigForm.get("detailsList").setValue(t))}},r.prototype.addDetailsField=function(e){var t=this.entityDetailsConfigForm.get("detailsList").value;t||(t=[]),-1===t.indexOf(e)&&(t.push(e),this.entityDetailsConfigForm.get("detailsList").setValue(t))},r.prototype.onEntityDetailsInputFocus=function(){this.detailsFormControl.updateValueAndValidity({onlySelf:!0,emitEvent:!0})},r.prototype.clear=function(e){var t=this;void 0===e&&(e=""),this.detailsInput.nativeElement.value=e,this.detailsFormControl.patchValue(null,{emitEvent:!0}),setTimeout((function(){t.detailsInput.nativeElement.blur(),t.detailsInput.nativeElement.focus()}),0)},r.ctorParameters=function(){return[{type:o.Store},{type:n.TranslateService},{type:i.FormBuilder}]},b([t.ViewChild("detailsInput",{static:!1}),h("design:type",t.ElementRef)],r.prototype,"detailsInput",void 0),r=b([t.Component({selector:"tb-enrichment-node-entity-details-config",template:'<section [formGroup]="entityDetailsConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" class="entity-fields-list">\n    <mat-label translate>tb.rulenode.entity-details</mat-label>\n    <mat-chip-list #detailsChipList required>\n      <mat-chip\n        *ngFor="let details of entityDetailsConfigForm.get(\'detailsList\').value;"\n        (removed)="removeDetailsField(details)">\n        <span>\n          <strong>{{entityDetailsTranslationsMap.get(details) | translate}}</strong>\n        </span>\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text"\n             style="max-width: 200px;"\n             #detailsInput\n             (focusin)="onEntityDetailsInputFocus()"\n             [formControl]="detailsFormControl"\n             matAutocompleteOrigin\n             #origin="matAutocompleteOrigin"\n             [matAutocompleteConnectedTo]="origin"\n             [matAutocomplete]="detailsAutocomplete"\n             [matChipInputFor]="detailsChipList">\n    </mat-chip-list>\n    <mat-autocomplete #detailsAutocomplete="matAutocomplete"\n                      class="tb-autocomplete"\n                      (optionSelected)="detailsFieldSelected($event)"\n                      [displayWith]="displayDetailsFn">\n      <mat-option *ngFor="let details of filteredEntityDetails | async" [value]="details">\n        <span [innerHTML]="entityDetailsTranslationsMap.get(details) | translate | highlight:searchText"></span>\n      </mat-option>\n      <mat-option *ngIf="(filteredEntityDetails | async)?.length === 0" [value]="null" class="tb-not-found">\n        <div class="tb-not-found-content" (click)="$event.stopPropagation()">\n          <div>\n            <span translate>tb.rulenode.no-entity-details-matching</span>\n          </div>\n        </div>\n      </mat-option>\n    </mat-autocomplete>\n  </mat-form-field>\n  <tb-error [error]="(detailsFormControl.touched &&\n                     entityDetailsConfigForm.get(\'detailsList\').hasError(\'required\'))\n                  ? translate.instant(\'tb.rulenode.entity-details-list-empty\') : \'\'"></tb-error>\n  <mat-checkbox fxFlex formControlName="addToMetadata" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.add-to-metadata\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.add-to-metadata-hint</div>\n</section>\n',styles:[":host ::ng-deep mat-form-field.entity-fields-list .mat-form-field-wrapper{margin-bottom:-1.25em}"]}),h("design:paramtypes",[o.Store,n.TranslateService,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Se=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n}return y(r,e),r.prototype.configForm=function(){return this.deviceAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.deviceAttributesConfigForm=this.fb.group({deviceRelationsQuery:[e?e.deviceRelationsQuery:null,[i.Validators.required]],tellFailureIfAbsent:[!!e&&e.tellFailureIfAbsent,[]],clientAttributeNames:[e?e.clientAttributeNames:null,[]],sharedAttributeNames:[e?e.sharedAttributeNames:null,[]],serverAttributeNames:[e?e.serverAttributeNames:null,[]],latestTsKeyNames:[e?e.latestTsKeyNames:null,[]],getLatestValueWithTs:[!!e&&e.getLatestValueWithTs,[]]})},r.prototype.removeKey=function(e,t){var r=this.deviceAttributesConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.deviceAttributesConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.deviceAttributesConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.deviceAttributesConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-device-attributes-config",template:'<section [formGroup]="deviceAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.device-relations-query</label>\n  <tb-device-relations-query-config\n    required\n    formControlName="deviceRelationsQuery"\n    style="padding-bottom: 15px;">\n  </tb-device-relations-query-config>\n  <mat-checkbox fxFlex formControlName="tellFailureIfAbsent" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.tell-failure-if-absent\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.tell-failure-if-absent-hint</div>\n  <label translate class="tb-title no-padding">tb.rulenode.client-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #clientAttributesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'clientAttributeNames\').value;"\n        (removed)="removeKey(key, \'clientAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.client-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="clientAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'clientAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.shared-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #sharedAttributesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'sharedAttributeNames\').value;"\n        (removed)="removeKey(key, \'sharedAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.shared-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="sharedAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'sharedAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.server-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #serverAttributesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'serverAttributeNames\').value;"\n        (removed)="removeKey(key, \'serverAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.server-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="serverAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'serverAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.latest-timeseries</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #latestTimeseriesChipList>\n      <mat-chip\n        *ngFor="let key of deviceAttributesConfigForm.get(\'latestTsKeyNames\').value;"\n        (removed)="removeKey(key, \'latestTsKeyNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.latest-timeseries\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="latestTimeseriesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'latestTsKeyNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <mat-checkbox formControlName="getLatestValueWithTs" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.get-latest-value-with-ts\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" innerHTML="{{ \'tb.rulenode.get-latest-value-with-ts-hint\' | translate }}"></div>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ie=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n}return y(r,e),r.prototype.configForm=function(){return this.originatorAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.originatorAttributesConfigForm=this.fb.group({tellFailureIfAbsent:[!!e&&e.tellFailureIfAbsent,[]],clientAttributeNames:[e?e.clientAttributeNames:null,[]],sharedAttributeNames:[e?e.sharedAttributeNames:null,[]],serverAttributeNames:[e?e.serverAttributeNames:null,[]],latestTsKeyNames:[e?e.latestTsKeyNames:null,[]],getLatestValueWithTs:[!!e&&e.getLatestValueWithTs,[]]})},r.prototype.removeKey=function(e,t){var r=this.originatorAttributesConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.originatorAttributesConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.originatorAttributesConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.originatorAttributesConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-originator-attributes-config",template:'<section [formGroup]="originatorAttributesConfigForm" fxLayout="column">\n  <mat-checkbox fxFlex formControlName="tellFailureIfAbsent" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.tell-failure-if-absent\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" translate>tb.rulenode.tell-failure-if-absent-hint</div>\n  <label translate class="tb-title no-padding">tb.rulenode.client-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #clientAttributesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'clientAttributeNames\').value;"\n        (removed)="removeKey(key, \'clientAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.client-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="clientAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'clientAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.shared-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #sharedAttributesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'sharedAttributeNames\').value;"\n        (removed)="removeKey(key, \'sharedAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.shared-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="sharedAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'sharedAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.server-attributes</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #serverAttributesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'serverAttributeNames\').value;"\n        (removed)="removeKey(key, \'serverAttributeNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.server-attributes\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="serverAttributesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'serverAttributeNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <label translate class="tb-title no-padding">tb.rulenode.latest-timeseries</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #latestTimeseriesChipList>\n      <mat-chip\n        *ngFor="let key of originatorAttributesConfigForm.get(\'latestTsKeyNames\').value;"\n        (removed)="removeKey(key, \'latestTsKeyNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.latest-timeseries\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="latestTimeseriesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'latestTsKeyNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <mat-checkbox formControlName="getLatestValueWithTs" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.get-latest-value-with-ts\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" innerHTML="{{ \'tb.rulenode.get-latest-value-with-ts-hint\' | translate }}"></div>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),ke=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.originatorFieldsConfigForm},r.prototype.onConfigurationSet=function(e){this.originatorFieldsConfigForm=this.fb.group({fieldsMapping:[e?e.fieldsMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-originator-fields-config",template:'<section [formGroup]="originatorFieldsConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.fields-mapping</label>\n  <tb-kv-map-config\n    required\n    formControlName="fieldsMapping"\n    requiredText="tb.rulenode.fields-mapping-required"\n    keyText="tb.rulenode.source-field"\n    keyRequiredText="tb.rulenode.source-field-required"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ne=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.separatorKeysCodes=[s.ENTER,s.COMMA,s.SEMICOLON],n.fetchMode=j,n.fetchModes=Object.keys(j),n.samplingOrders=Object.keys(U),n.timeUnits=Object.keys(R),n.timeUnitsTranslationMap=O,n}return y(r,e),r.prototype.configForm=function(){return this.getTelemetryFromDatabaseConfigForm},r.prototype.onConfigurationSet=function(e){this.getTelemetryFromDatabaseConfigForm=this.fb.group({latestTsKeyNames:[e?e.latestTsKeyNames:null,[]],fetchMode:[e?e.fetchMode:null,[i.Validators.required]],orderBy:[e?e.orderBy:null,[]],limit:[e?e.limit:null,[]],useMetadataIntervalPatterns:[!!e&&e.useMetadataIntervalPatterns,[]],startInterval:[e?e.startInterval:null,[]],startIntervalTimeUnit:[e?e.startIntervalTimeUnit:null,[]],endInterval:[e?e.endInterval:null,[]],endIntervalTimeUnit:[e?e.endIntervalTimeUnit:null,[]],startIntervalPattern:[e?e.startIntervalPattern:null,[]],endIntervalPattern:[e?e.endIntervalPattern:null,[]]})},r.prototype.validatorTriggers=function(){return["fetchMode","useMetadataIntervalPatterns"]},r.prototype.updateValidators=function(e){var t=this.getTelemetryFromDatabaseConfigForm.get("fetchMode").value,r=this.getTelemetryFromDatabaseConfigForm.get("useMetadataIntervalPatterns").value;t&&t===j.ALL?(this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([i.Validators.required,i.Validators.min(2),i.Validators.max(1e3)])):(this.getTelemetryFromDatabaseConfigForm.get("orderBy").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("limit").setValidators([])),r?(this.getTelemetryFromDatabaseConfigForm.get("startInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endInterval").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalTimeUnit").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([i.Validators.required])):(this.getTelemetryFromDatabaseConfigForm.get("startInterval").setValidators([i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalTimeUnit").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("endInterval").setValidators([i.Validators.required,i.Validators.min(1),i.Validators.max(2147483647)]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalTimeUnit").setValidators([i.Validators.required]),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").setValidators([]),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").setValidators([])),this.getTelemetryFromDatabaseConfigForm.get("orderBy").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("limit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endInterval").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endIntervalTimeUnit").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("startIntervalPattern").updateValueAndValidity({emitEvent:e}),this.getTelemetryFromDatabaseConfigForm.get("endIntervalPattern").updateValueAndValidity({emitEvent:e})},r.prototype.removeKey=function(e,t){var r=this.getTelemetryFromDatabaseConfigForm.get(t).value,n=r.indexOf(e);n>=0&&(r.splice(n,1),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(r,{emitEvent:!0}))},r.prototype.addKey=function(e,t){var r=e.input,n=e.value;if((n||"").trim()){n=n.trim();var a=this.getTelemetryFromDatabaseConfigForm.get(t).value;a&&-1!==a.indexOf(n)||(a||(a=[]),a.push(n),this.getTelemetryFromDatabaseConfigForm.get(t).setValue(a,{emitEvent:!0}))}r&&(r.value="")},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-get-telemetry-from-database",template:'<section [formGroup]="getTelemetryFromDatabaseConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.latest-timeseries</label>\n  <mat-form-field floatLabel="always" class="mat-block">\n    <mat-label></mat-label>\n    <mat-chip-list #latestTimeseriesChipList>\n      <mat-chip\n        *ngFor="let key of getTelemetryFromDatabaseConfigForm.get(\'latestTsKeyNames\').value;"\n        (removed)="removeKey(key, \'latestTsKeyNames\')">\n        {{key}}\n        <mat-icon matChipRemove>close</mat-icon>\n      </mat-chip>\n      <input matInput type="text" placeholder="{{\'tb.rulenode.latest-timeseries\' | translate}}"\n             style="max-width: 200px;"\n             [matChipInputFor]="latestTimeseriesChipList"\n             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n             (matChipInputTokenEnd)="addKey($event, \'latestTsKeyNames\')"\n             [matChipInputAddOnBlur]="true">\n    </mat-chip-list>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.fetch-mode</mat-label>\n    <mat-select formControlName="fetchMode" required>\n      <mat-option *ngFor="let mode of fetchModes" [value]="mode">\n        {{ mode }}\n      </mat-option>\n    </mat-select>\n    <mat-hint translate>tb.rulenode.fetch-mode-hint</mat-hint>\n  </mat-form-field>\n  <div fxLayout="column" *ngIf="getTelemetryFromDatabaseConfigForm.get(\'fetchMode\').value === fetchMode.ALL">\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.order-by</mat-label>\n      <mat-select formControlName="orderBy" required>\n        <mat-option *ngFor="let order of samplingOrders" [value]="order">\n          {{ order }}\n        </mat-option>\n      </mat-select>\n      <mat-hint translate>tb.rulenode.order-by-hint</mat-hint>\n    </mat-form-field>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.limit</mat-label>\n      <input type="number" min="2" max="1000" step="1" matInput formControlName="limit" required>\n      <mat-hint translate>tb.rulenode.limit-hint</mat-hint>\n    </mat-form-field>\n  </div>\n  <mat-checkbox formControlName="useMetadataIntervalPatterns">\n    {{ \'tb.rulenode.use-metadata-interval-patterns\' | translate }}\n  </mat-checkbox>\n  <div class="tb-hint" style="padding-bottom: 16px;" translate>tb.rulenode.use-metadata-interval-patterns-hint</div>\n  <div fxLayout="column" *ngIf="getTelemetryFromDatabaseConfigForm.get(\'useMetadataIntervalPatterns\').value === false; else intervalPattern">\n    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.start-interval</mat-label>\n        <input type="number" step="1" min="1" max="2147483647" matInput formControlName="startInterval" required>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startInterval\').hasError(\'required\')">\n          {{ \'tb.rulenode.start-interval-value-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startInterval\').hasError(\'min\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startInterval\').hasError(\'max\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.start-interval-time-unit</mat-label>\n        <mat-select formControlName="startIntervalTimeUnit" required>\n          <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.end-interval</mat-label>\n        <input type="number" step="1" min="1" max="2147483647" matInput formControlName="endInterval" required>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endInterval\').hasError(\'required\')">\n          {{ \'tb.rulenode.end-interval-value-required\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endInterval\').hasError(\'min\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n        <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endInterval\').hasError(\'max\')">\n          {{ \'tb.rulenode.time-value-range\' | translate }}\n        </mat-error>\n      </mat-form-field>\n      <mat-form-field fxFlex class="mat-block">\n        <mat-label translate>tb.rulenode.end-interval-time-unit</mat-label>\n        <mat-select formControlName="endIntervalTimeUnit" required>\n          <mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">\n            {{ timeUnitsTranslationMap.get(timeUnit) | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n  <ng-template #intervalPattern>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.start-interval-pattern</mat-label>\n      <input matInput formControlName="startIntervalPattern" required>\n      <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'startIntervalPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.start-interval-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.start-interval-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n    <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n      <mat-label translate>tb.rulenode.end-interval-pattern</mat-label>\n      <input matInput formControlName="endIntervalPattern" required>\n      <mat-error *ngIf="getTelemetryFromDatabaseConfigForm.get(\'endIntervalPattern\').hasError(\'required\')">\n        {{ \'tb.rulenode.end-interval-pattern-required\' | translate }}\n      </mat-error>\n      <mat-hint innerHTML="{{ \'tb.rulenode.end-interval-pattern-hint\' | translate }}"></mat-hint>\n    </mat-form-field>\n  </ng-template>\n</section>\n',styles:[":host label.tb-title{margin-bottom:-10px}"]}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ve=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.relatedAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.relatedAttributesConfigForm=this.fb.group({relationsQuery:[e?e.relationsQuery:null,[i.Validators.required]],telemetry:[!!e&&e.telemetry,[]],attrMapping:[e?e.attrMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-related-attributes-config",template:'<section [formGroup]="relatedAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.relations-query</label>\n  <tb-relations-query-config\n    required\n    formControlName="relationsQuery"\n    style="padding-bottom: 15px;">\n  </tb-relations-query-config>\n  <label translate class="tb-title tb-required">tb.rulenode.attr-mapping</label>\n  <mat-checkbox fxFlex formControlName="telemetry" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.latest-telemetry\' | translate }}\n  </mat-checkbox>\n  <tb-kv-map-config\n    required\n    formControlName="attrMapping"\n    requiredText="tb.rulenode.attr-mapping-required"\n    keyText="{{ relatedAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry\' : \'tb.rulenode.source-attribute\' }}"\n    keyRequiredText="{{ relatedAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry-required\' : \'tb.rulenode.source-attribute-required\' }}"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ee=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.tenantAttributesConfigForm},r.prototype.onConfigurationSet=function(e){this.tenantAttributesConfigForm=this.fb.group({telemetry:[!!e&&e.telemetry,[]],attrMapping:[e?e.attrMapping:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-enrichment-node-tenant-attributes-config",template:'<section [formGroup]="tenantAttributesConfigForm" fxLayout="column">\n  <label translate class="tb-title tb-required">tb.rulenode.attr-mapping</label>\n  <mat-checkbox fxFlex formControlName="telemetry" style="padding-bottom: 16px;">\n    {{ \'tb.rulenode.latest-telemetry\' | translate }}\n  </mat-checkbox>\n  <tb-kv-map-config\n    required\n    formControlName="attrMapping"\n    requiredText="tb.rulenode.attr-mapping-required"\n    keyText="{{ tenantAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry\' : \'tb.rulenode.source-attribute\' }}"\n    keyRequiredText="{{ tenantAttributesConfigForm.get(\'telemetry\').value ? \'tb.rulenode.source-telemetry-required\' : \'tb.rulenode.source-attribute-required\' }}"\n    valText="tb.rulenode.target-attribute"\n    valRequiredText="tb.rulenode.target-attribute-required">\n  </tb-kv-map-config>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Ae=function(){function e(){}return e=b([t.NgModule({declarations:[xe,qe,Se,Ie,ke,Ne,Ve,Ee],imports:[r.CommonModule,a.SharedModule,ne],exports:[xe,qe,Se,Ie,ke,Ne,Ve,Ee]})],e)}(),Le=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n.originatorSource=v,n.originatorSources=Object.keys(v),n.originatorSourceTranslationMap=P,n}return y(r,e),r.prototype.configForm=function(){return this.changeOriginatorConfigForm},r.prototype.onConfigurationSet=function(e){this.changeOriginatorConfigForm=this.fb.group({originatorSource:[e?e.originatorSource:null,[i.Validators.required]],relationsQuery:[e?e.relationsQuery:null,[]]})},r.prototype.validatorTriggers=function(){return["originatorSource"]},r.prototype.updateValidators=function(e){var t=this.changeOriginatorConfigForm.get("originatorSource").value;t&&t===v.RELATED?this.changeOriginatorConfigForm.get("relationsQuery").setValidators([i.Validators.required]):this.changeOriginatorConfigForm.get("relationsQuery").setValidators([]),this.changeOriginatorConfigForm.get("relationsQuery").updateValueAndValidity({emitEvent:e})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-transformation-node-change-originator-config",template:'<section [formGroup]="changeOriginatorConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block">\n    <mat-label translate>tb.rulenode.originator-source</mat-label>\n    <mat-select formControlName="originatorSource" required>\n      <mat-option *ngFor="let source of originatorSources" [value]="source">\n        {{ originatorSourceTranslationMap.get(source) | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <section fxLayout="column" *ngIf="changeOriginatorConfigForm.get(\'originatorSource\').value === originatorSource.RELATED">\n    <label translate class="tb-title tb-required">tb.rulenode.relations-query</label>\n    <tb-relations-query-config\n      required\n      formControlName="relationsQuery"\n      style="padding-bottom: 15px;">\n    </tb-relations-query-config>\n  </section>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Me=function(e){function r(t,r,n,a){var o=e.call(this,t)||this;return o.store=t,o.fb=r,o.nodeScriptTestService=n,o.translate=a,o}return y(r,e),r.prototype.configForm=function(){return this.scriptConfigForm},r.prototype.onConfigurationSet=function(e){this.scriptConfigForm=this.fb.group({jsScript:[e?e.jsScript:null,[i.Validators.required]]})},r.prototype.testScript=function(){var e=this,t=this.scriptConfigForm.get("jsScript").value;this.nodeScriptTestService.testNodeScript(t,"update",this.translate.instant("tb.rulenode.transformer"),"Transform",["msg","metadata","msgType"],this.ruleNodeId).subscribe((function(t){t&&e.scriptConfigForm.get("jsScript").setValue(t)}))},r.prototype.onValidate=function(){this.jsFuncComponent.validateOnSubmit()},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder},{type:l.NodeScriptTestService},{type:n.TranslateService}]},b([t.ViewChild("jsFuncComponent",{static:!0}),h("design:type",a.JsFuncComponent)],r.prototype,"jsFuncComponent",void 0),r=b([t.Component({selector:"tb-transformation-node-script-config",template:'<section [formGroup]="scriptConfigForm" fxLayout="column">\n  <label translate class="tb-title no-padding">tb.rulenode.transform</label>\n  <tb-js-func #jsFuncComponent\n              formControlName="jsScript"\n              functionName="Transform"\n              [functionArgs]="[\'msg\', \'metadata\', \'msgType\']"\n              noValidate="true">\n  </tb-js-func>\n  <div fxLayout="row">\n    <button mat-button mat-raised-button color="primary" (click)="testScript()">\n      {{ \'tb.rulenode.test-transformer-function\' | translate }}\n    </button>\n  </div>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder,l.NodeScriptTestService,n.TranslateService])],r)}(a.RuleNodeConfigurationComponent),Pe=function(e){function r(t,r){var n=e.call(this,t)||this;return n.store=t,n.fb=r,n}return y(r,e),r.prototype.configForm=function(){return this.toEmailConfigForm},r.prototype.onConfigurationSet=function(e){this.toEmailConfigForm=this.fb.group({fromTemplate:[e?e.fromTemplate:null,[i.Validators.required]],toTemplate:[e?e.toTemplate:null,[i.Validators.required]],ccTemplate:[e?e.ccTemplate:null,[]],bccTemplate:[e?e.bccTemplate:null,[]],subjectTemplate:[e?e.subjectTemplate:null,[i.Validators.required]],bodyTemplate:[e?e.bodyTemplate:null,[i.Validators.required]]})},r.ctorParameters=function(){return[{type:o.Store},{type:i.FormBuilder}]},r=b([t.Component({selector:"tb-transformation-node-to-email-config",template:'<section [formGroup]="toEmailConfigForm" fxLayout="column">\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.from-template</mat-label>\n    <textarea required matInput formControlName="fromTemplate" rows="2"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'fromTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.from-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.from-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.to-template</mat-label>\n    <textarea required matInput formControlName="toTemplate" rows="2"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'toTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.to-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mail-address-list-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.cc-template</mat-label>\n    <textarea matInput formControlName="ccTemplate" rows="2"></textarea>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mail-address-list-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.bcc-template</mat-label>\n    <textarea matInput formControlName="bccTemplate" rows="2"></textarea>\n    <mat-hint innerHTML="{{ \'tb.rulenode.mail-address-list-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.subject-template</mat-label>\n    <textarea required matInput formControlName="subjectTemplate" rows="2"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'subjectTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.subject-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.subject-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n  <mat-form-field class="mat-block" style="padding-bottom: 16px;">\n    <mat-label translate>tb.rulenode.body-template</mat-label>\n    <textarea required matInput formControlName="bodyTemplate" rows="6"></textarea>\n    <mat-error *ngIf="toEmailConfigForm.get(\'bodyTemplate\').hasError(\'required\')">\n      {{ \'tb.rulenode.body-template-required\' | translate }}\n    </mat-error>\n    <mat-hint innerHTML="{{ \'tb.rulenode.body-template-hint\' | translate }}"></mat-hint>\n  </mat-form-field>\n</section>\n'}),h("design:paramtypes",[o.Store,i.FormBuilder])],r)}(a.RuleNodeConfigurationComponent),Re=function(){function e(){}return e=b([t.NgModule({declarations:[Le,Me,Pe],imports:[r.CommonModule,a.SharedModule,ne],exports:[Le,Me,Pe]})],e)}(),we=function(){function e(e){!function(e){e.setTranslation("en_US",{tb:{rulenode:{"create-entity-if-not-exists":"Create new entity if not exists","create-entity-if-not-exists-hint":"Create a new entity set above if it does not exist.","entity-name-pattern":"Name pattern","entity-name-pattern-required":"Name pattern is required","entity-name-pattern-hint":"Name pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","entity-type-pattern":"Type pattern","entity-type-pattern-required":"Type pattern is required","entity-type-pattern-hint":"Type pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","entity-cache-expiration":"Entities cache expiration time (sec)","entity-cache-expiration-hint":"Specifies maximum time interval allowed to store found entity records. 0 value means that records will never expire.","entity-cache-expiration-required":"Entities cache expiration time is required.","entity-cache-expiration-range":"Entities cache expiration time should be greater than or equal to 0.","customer-name-pattern":"Customer name pattern","customer-name-pattern-required":"Customer name pattern is required","create-customer-if-not-exists":"Create new customer if not exists","customer-cache-expiration":"Customers cache expiration time (sec)","customer-name-pattern-hint":"Customer name pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","customer-cache-expiration-hint":"Specifies maximum time interval allowed to store found customer records. 0 value means that records will never expire.","customer-cache-expiration-required":"Customers cache expiration time is required.","customer-cache-expiration-range":"Customers cache expiration time should be greater than or equal to 0.","start-interval":"Start Interval","end-interval":"End Interval","start-interval-time-unit":"Start Interval Time Unit","end-interval-time-unit":"End Interval Time Unit","fetch-mode":"Fetch mode","fetch-mode-hint":"If selected fetch mode 'ALL'  you able to choose telemetry sampling order.","order-by":"Order by","order-by-hint":"Select to choose telemetry sampling order.",limit:"Limit","limit-hint":"Min limit value is 2, max - 1000. In case you want to fetch a single entry, select fetch mode 'FIRST' or 'LAST'.","time-unit-milliseconds":"Milliseconds","time-unit-seconds":"Seconds","time-unit-minutes":"Minutes","time-unit-hours":"Hours","time-unit-days":"Days","time-value-range":"Time value should be in a range from 1 to 2147483647.","start-interval-value-required":"Start interval value is required.","end-interval-value-required":"End interval value is required.",filter:"Filter",switch:"Switch","message-type":"Message type","message-type-required":"Message type is required.","message-types-filter":"Message types filter","no-message-types-found":"No message types found","no-message-type-matching":"'{{messageType}}' not found.","create-new-message-type":"Create a new one!","message-types-required":"Message types are required.","client-attributes":"Client attributes","shared-attributes":"Shared attributes","server-attributes":"Server attributes","latest-timeseries":"Latest timeseries","data-keys":"Message data","metadata-keys":"Message metadata","relations-query":"Relations query","device-relations-query":"Device relations query","max-relation-level":"Max relation level","relation-type-pattern":"Relation type pattern","relation-type-pattern-hint":"Relation type pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","relation-type-pattern-required":"Relation type pattern is required","relation-types-list":"Relation types to propagate","relation-types-list-hint":"If Propagate relation types are not selected, alarms will be propagated without filtering by relation type.","unlimited-level":"Unlimited level","latest-telemetry":"Latest telemetry","attr-mapping":"Attributes mapping","source-attribute":"Source attribute","source-attribute-required":"Source attribute is required.","source-telemetry":"Source telemetry","source-telemetry-required":"Source telemetry is required.","target-attribute":"Target attribute","target-attribute-required":"Target attribute is required.","attr-mapping-required":"At least one attribute mapping should be specified.","fields-mapping":"Fields mapping","fields-mapping-required":"At least one field mapping should be specified.","source-field":"Source field","source-field-required":"Source field is required.","originator-source":"Originator source","originator-customer":"Customer","originator-tenant":"Tenant","originator-related":"Related","originator-alarm-originator":"Alarm Originator","clone-message":"Clone message",transform:"Transform","default-ttl":"Default TTL in seconds","default-ttl-required":"Default TTL is required.","min-default-ttl-message":"Only 0 minimum TTL is allowed.","message-count":"Message count (0 - unlimited)","message-count-required":"Message count is required.","min-message-count-message":"Only 0 minimum message count is allowed.","period-seconds":"Period in seconds","period-seconds-required":"Period is required.","use-metadata-period-in-seconds-patterns":"Use metadata period in seconds pattern","use-metadata-period-in-seconds-patterns-hint":"If selected, rule node use period in seconds interval pattern from message metadata assuming that intervals are in the seconds.","period-in-seconds-pattern":"Period in seconds metadata pattern","period-in-seconds-pattern-required":"Period in seconds pattern is required","period-in-seconds-pattern-hint":"Period in seconds pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","min-period-seconds-message":"Only 1 second minimum period is allowed.",originator:"Originator","message-body":"Message body","message-metadata":"Message metadata",generate:"Generate","test-generator-function":"Test generator function",generator:"Generator","test-filter-function":"Test filter function","test-switch-function":"Test switch function","test-transformer-function":"Test transformer function",transformer:"Transformer","alarm-create-condition":"Alarm create condition","test-condition-function":"Test condition function","alarm-clear-condition":"Alarm clear condition","alarm-details-builder":"Alarm details builder","test-details-function":"Test details function","alarm-type":"Alarm type","alarm-type-required":"Alarm type is required.","alarm-severity":"Alarm severity","alarm-severity-required":"Alarm severity is required","alarm-status-filter":"Alarm status filter","alarm-status-list-empty":"Alarm status list is empty","no-alarm-status-matching":"No alarm status matching were found.",propagate:"Propagate",condition:"Condition",details:"Details","to-string":"To string","test-to-string-function":"Test to string function","from-template":"From Template","from-template-required":"From Template is required","from-template-hint":"From address template, use <code>${metaKeyName}</code> to substitute variables from metadata","to-template":"To Template","to-template-required":"To Template is required","mail-address-list-template-hint":"Comma separated address list, use <code>${metaKeyName}</code> to substitute variables from metadata","cc-template":"Cc Template","bcc-template":"Bcc Template","subject-template":"Subject Template","subject-template-required":"Subject Template is required","subject-template-hint":"Mail subject template, use <code>${metaKeyName}</code> to substitute variables from metadata","body-template":"Body Template","body-template-required":"Body Template is required","body-template-hint":"Mail body template, use <code>${metaKeyName}</code> to substitute variables from metadata","request-id-metadata-attribute":"Request Id Metadata attribute name","timeout-sec":"Timeout in seconds","timeout-required":"Timeout is required","min-timeout-message":"Only 0 minimum timeout value is allowed.","endpoint-url-pattern":"Endpoint URL pattern","endpoint-url-pattern-required":"Endpoint URL pattern is required","endpoint-url-pattern-hint":"HTTP URL address pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","request-method":"Request method","use-simple-client-http-factory":"Use simple client HTTP factory","read-timeout":"Read timeout in millis","read-timeout-hint":"The value of 0 means an infinite timeout","max-parallel-requests-count":"Max number of parallel requests","max-parallel-requests-count-hint":"The value of 0 specifies no limit in parallel processing",headers:"Headers","headers-hint":"Use <code>${metaKeyName}</code> in header/value fields to substitute variables from metadata",header:"Header","header-required":"Header is required",value:"Value","value-required":"Value is required","topic-pattern":"Topic pattern","topic-pattern-required":"Topic pattern is required","mqtt-topic-pattern-hint":"MQTT topic pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","bootstrap-servers":"Bootstrap servers","bootstrap-servers-required":"Bootstrap servers value is required","other-properties":"Other properties",key:"Key","key-required":"Key is required",retries:"Automatically retry times if fails","min-retries-message":"Only 0 minimum retries is allowed.","batch-size-bytes":"Produces batch size in bytes","min-batch-size-bytes-message":"Only 0 minimum batch size is allowed.","linger-ms":"Time to buffer locally (ms)","min-linger-ms-message":"Only 0 ms minimum value is allowed.","buffer-memory-bytes":"Client buffer max size in bytes","min-buffer-memory-message":"Only 0 minimum buffer size is allowed.",acks:"Number of acknowledgments","key-serializer":"Key serializer","key-serializer-required":"Key serializer is required","value-serializer":"Value serializer","value-serializer-required":"Value serializer is required","topic-arn-pattern":"Topic ARN pattern","topic-arn-pattern-required":"Topic ARN pattern is required","topic-arn-pattern-hint":"Topic ARN pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","aws-access-key-id":"AWS Access Key ID","aws-access-key-id-required":"AWS Access Key ID is required","aws-secret-access-key":"AWS Secret Access Key","aws-secret-access-key-required":"AWS Secret Access Key is required","aws-region":"AWS Region","aws-region-required":"AWS Region is required","exchange-name-pattern":"Exchange name pattern","routing-key-pattern":"Routing key pattern","message-properties":"Message properties",host:"Host","host-required":"Host is required",port:"Port","port-required":"Port is required","port-range":"Port should be in a range from 1 to 65535.","virtual-host":"Virtual host",username:"Username",password:"Password","automatic-recovery":"Automatic recovery","connection-timeout-ms":"Connection timeout (ms)","min-connection-timeout-ms-message":"Only 0 ms minimum value is allowed.","handshake-timeout-ms":"Handshake timeout (ms)","min-handshake-timeout-ms-message":"Only 0 ms minimum value is allowed.","client-properties":"Client properties","queue-url-pattern":"Queue URL pattern","queue-url-pattern-required":"Queue URL pattern is required","queue-url-pattern-hint":"Queue URL pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","delay-seconds":"Delay (seconds)","min-delay-seconds-message":"Only 0 seconds minimum value is allowed.","max-delay-seconds-message":"Only 900 seconds maximum value is allowed.",name:"Name","name-required":"Name is required","queue-type":"Queue type","sqs-queue-standard":"Standard","sqs-queue-fifo":"FIFO","gcp-project-id":"GCP project ID","gcp-project-id-required":"GCP project ID is required","gcp-service-account-key":"GCP service account key file","gcp-service-account-key-required":"GCP service account key file is required","pubsub-topic-name":"Topic name","pubsub-topic-name-required":"Topic name is required","message-attributes":"Message attributes","message-attributes-hint":"Use <code>${metaKeyName}</code> in name/value fields to substitute variables from metadata","connect-timeout":"Connection timeout (sec)","connect-timeout-required":"Connection timeout is required.","connect-timeout-range":"Connection timeout should be in a range from 1 to 200.","client-id":"Client ID","clean-session":"Clean session","enable-ssl":"Enable SSL",credentials:"Credentials","credentials-type":"Credentials type","credentials-type-required":"Credentials type is required.","credentials-anonymous":"Anonymous","credentials-basic":"Basic","credentials-pem":"PEM","username-required":"Username is required.","password-required":"Password is required.","ca-cert":"CA certificate file *","private-key":"Private key file *",cert:"Certificate file *","no-file":"No file selected.","drop-file":"Drop a file or click to select a file to upload.","private-key-password":"Private key password","use-system-smtp-settings":"Use system SMTP settings","use-metadata-interval-patterns":"Use metadata interval patterns","use-metadata-interval-patterns-hint":"If selected, rule node use start and end interval patterns from message metadata assuming that intervals are in the milliseconds.","use-message-alarm-data":"Use message alarm data","check-all-keys":"Check that all selected keys are present","check-all-keys-hint":"If selected, checks that all specified keys are present in the message data and metadata.","check-relation-to-specific-entity":"Check relation to specific entity","check-relation-hint":"Checks existence of relation to specific entity or to any entity based on direction and relation type.","delete-relation-to-specific-entity":"Delete relation to specific entity","delete-relation-hint":"Deletes relation from the originator of the incoming message to the specified entity or list of entities based on direction and type.","remove-current-relations":"Remove current relations","remove-current-relations-hint":"Removes current relations from the originator of the incoming message based on direction and type.","change-originator-to-related-entity":"Change originator to related entity","change-originator-to-related-entity-hint":"Used to process submitted message as a message from another entity.","start-interval-pattern":"Start interval pattern","end-interval-pattern":"End interval pattern","start-interval-pattern-required":"Start interval pattern is required","end-interval-pattern-required":"End interval pattern is required","start-interval-pattern-hint":"Start interval pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","end-interval-pattern-hint":"End interval pattern, use <code>${metaKeyName}</code> to substitute variables from metadata","smtp-protocol":"Protocol","smtp-host":"SMTP host","smtp-host-required":"SMTP host is required.","smtp-port":"SMTP port","smtp-port-required":"You must supply a smtp port.","smtp-port-range":"SMTP port should be in a range from 1 to 65535.","timeout-msec":"Timeout ms","min-timeout-msec-message":"Only 0 ms minimum value is allowed.","enter-username":"Enter username","enter-password":"Enter password","enable-tls":"Enable TLS","tls-version":"TLS version","min-period-0-seconds-message":"Only 0 second minimum period is allowed.","max-pending-messages":"Maximum pending messages","max-pending-messages-required":"Maximum pending messages is required.","max-pending-messages-range":"Maximum pending messages should be in a range from 1 to 100000.","originator-types-filter":"Originator types filter","interval-seconds":"Interval in seconds","interval-seconds-required":"Interval is required.","min-interval-seconds-message":"Only 1 second minimum interval is allowed.","output-timeseries-key-prefix":"Output timeseries key prefix","output-timeseries-key-prefix-required":"Output timeseries key prefix required.","separator-hint":'You should press "enter" to complete field input.',"entity-details":"Select entity details:","entity-details-title":"Title","entity-details-country":"Country","entity-details-state":"State","entity-details-zip":"Zip","entity-details-address":"Address","entity-details-address2":"Address2","entity-details-additional_info":"Additional Info","entity-details-phone":"Phone","entity-details-email":"Email","add-to-metadata":"Add selected details to message metadata","add-to-metadata-hint":"If selected, adds the selected details keys to the message metadata instead of message data.","entity-details-list-empty":"No entity details selected.","no-entity-details-matching":"No entity details matching were found.","custom-table-name":"Custom table name","custom-table-name-required":"Table Name is required","custom-table-hint":"You should enter the table name without prefix 'cs_tb_'.","message-field":"Message field","message-field-required":"Message field is required.","table-col":"Table column","table-col-required":"Table column is required.","latitude-key-name":"Latitude key name","longitude-key-name":"Longitude key name","latitude-key-name-required":"Latitude key name is required.","longitude-key-name-required":"Longitude key name is required.","fetch-perimeter-info-from-message-metadata":"Fetch perimeter information from message metadata","perimeter-circle":"Circle","perimeter-polygon":"Polygon","perimeter-type":"Perimeter type","circle-center-latitude":"Center latitude","circle-center-latitude-required":"Center latitude is required.","circle-center-longitude":"Center longitude","circle-center-longitude-required":"Center longitude is required.","range-unit-meter":"Meter","range-unit-kilometer":"Kilometer","range-unit-foot":"Foot","range-unit-mile":"Mile","range-unit-nautical-mile":"Nautical mile","range-units":"Range units",range:"Range","range-required":"Range is required.","polygon-definition":"Polygon definition","polygon-definition-required":"Polygon definition is required.","polygon-definition-hint":"Please, use the following format for manual definition of polygon: [[lat1,lon1],[lat2,lon2], ... ,[latN,lonN]].","min-inside-duration":"Minimal inside duration","min-inside-duration-value-required":"Minimal inside duration is required","min-inside-duration-time-unit":"Minimal inside duration time unit","min-outside-duration":"Minimal outside duration","min-outside-duration-value-required":"Minimal outside duration is required","min-outside-duration-time-unit":"Minimal outside duration time unit","tell-failure-if-absent":"Tell Failure","tell-failure-if-absent-hint":'If at least one selected key doesn\'t exist the outbound message will report "Failure".',"get-latest-value-with-ts":"Fetch Latest telemetry with Timestamp","get-latest-value-with-ts-hint":'If selected, latest telemetry values will be added to the outbound message metadata with timestamp, e.g: "temp": "&lcub;\\"ts\\":1574329385897,\\"value\\":42&rcub;"',"use-redis-queue":"Use redis queue for message persistence","trim-redis-queue":"Trim redis queue","redis-queue-max-size":"Redis queue max size"},"key-val":{key:"Key",value:"Value","remove-entry":"Remove entry","add-entry":"Add entry"}}},!0)}(e)}return e.ctorParameters=function(){return[{type:n.TranslateService}]},e=b([t.NgModule({declarations:[F],imports:[r.CommonModule,a.SharedModule],exports:[ce,Te,Ae,Re,F]}),h("design:paramtypes",[n.TranslateService])],e)}();e.RuleNodeCoreConfigModule=we,e.ɵa=F,e.ɵb=ce,e.ɵba=ne,e.ɵbb=X,e.ɵbc=ee,e.ɵbd=te,e.ɵbe=re,e.ɵbf=Te,e.ɵbg=fe,e.ɵbh=ge,e.ɵbi=ye,e.ɵbj=be,e.ɵbk=he,e.ɵbl=Ce,e.ɵbm=ve,e.ɵbn=Fe,e.ɵbo=Ae,e.ɵbp=xe,e.ɵbq=qe,e.ɵbr=Se,e.ɵbs=Ie,e.ɵbt=ke,e.ɵbu=Ne,e.ɵbv=Ve,e.ɵbw=Ee,e.ɵbx=Re,e.ɵby=Le,e.ɵbz=Me,e.ɵc=T,e.ɵca=Pe,e.ɵd=x,e.ɵe=q,e.ɵf=S,e.ɵg=I,e.ɵh=k,e.ɵi=N,e.ɵj=V,e.ɵk=E,e.ɵl=A,e.ɵm=L,e.ɵn=W,e.ɵo=J,e.ɵp=Y,e.ɵq=Z,e.ɵr=ae,e.ɵs=oe,e.ɵt=ie,e.ɵu=le,e.ɵv=se,e.ɵw=me,e.ɵx=ue,e.ɵy=de,e.ɵz=pe,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=rulenode-core-config.umd.min.js.map
\ No newline at end of file
diff --git a/tools/src/main/shell/client.keygen.sh b/tools/src/main/shell/client.keygen.sh
index ed35dcaa7e..c3fd45c186 100755
--- a/tools/src/main/shell/client.keygen.sh
+++ b/tools/src/main/shell/client.keygen.sh
@@ -20,7 +20,7 @@ usage() {
     echo "and imports server public key to client keystore"
     echo "usage: ./client.keygen.sh [-p file]"
     echo "    -p | --props | --properties file  Properties file. default value is ./keygen.properties"
-	echo "    -h | --help  | ?                  Show this message"
+    echo "    -h | --help  | ?                  Show this message"
 }
 
 PROPERTIES_FILE=keygen.properties
@@ -55,7 +55,7 @@ while :
             echo "Done"
             exit 0
             ;;
-        [yY]|[yY][eE]|[yY][eE]|[sS]|[yY]|"")
+        [yY]|[yY][eE]|[yY][eE][sS]|"")
             echo "Cleaning up files"
             rm -rf $CLIENT_FILE_PREFIX.jks
             rm -rf $CLIENT_FILE_PREFIX.pub.pem
diff --git a/tools/src/main/shell/server.keygen.sh b/tools/src/main/shell/server.keygen.sh
index 2eae1cc31e..c01d3ead50 100755
--- a/tools/src/main/shell/server.keygen.sh
+++ b/tools/src/main/shell/server.keygen.sh
@@ -23,7 +23,7 @@ usage() {
     echo "    -d | --dir directory              Server keystore directory, where the generated keystore file will be copied. If specified, overrides the value from the properties file"
     echo "                                      Default value is SERVER_KEYSTORE_DIR property from properties file"
     echo "    -p | --props | --properties file  Properties file. default value is ./keygen.properties"
-	echo "    -h | --help | ?                   Show this message"
+    echo "    -h | --help | ?                   Show this message"
 }
 
 COPY=true;
@@ -71,7 +71,7 @@ while :
             echo "Done"
             exit 0
             ;;
-        [yY]|[yY][eE]|[yY][eE]|[sS]|[yY]|"")
+        [yY]|[yY][eE]|[yY][eE][sS]|"")
             echo "Cleaning up files"
             rm -rf $SERVER_FILE_PREFIX.jks
             rm -rf $SERVER_FILE_PREFIX.pub.pem
@@ -129,7 +129,7 @@ if [[ $COPY = true ]]; then
                 [nN]|[nN][oO])
                     break
                     ;;
-                [yY]|[yY][eE]|[yY][eE]|[sS]|[yY]|"")
+                [yY]|[yY][eE]|[yY][eE][sS]|"")
                     read -p "(Default: $SERVER_KEYSTORE_DIR): " dir
                      if [[ !  -z  $dir  ]]; then
                         DESTINATION=$dir;
@@ -155,4 +155,4 @@ if [[ $COPY = true ]]; then
         fi
     fi
 fi
-echo "Done."
\ No newline at end of file
+echo "Done."
diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json
index 9124267fa1..8623eb93ef 100644
--- a/ui-ngx/package-lock.json
+++ b/ui-ngx/package-lock.json
@@ -1657,6 +1657,15 @@
         "@types/jquery": "*"
       }
     },
+    "@types/jszip": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/jszip/-/jszip-3.1.7.tgz",
+      "integrity": "sha512-+XQKNI5zpxutK05hO67huUTw/2imXCuJWjnFdU63tRES/xXSX1yVR9cv/QAdO6Rii2y2tTHbzjQ4i2apLfuK0Q==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/leaflet": {
       "version": "1.5.12",
       "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.12.tgz",
@@ -3701,8 +3710,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -6017,8 +6025,7 @@
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=",
-      "dev": true
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -6503,8 +6510,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isbinaryfile": {
       "version": "3.0.3",
@@ -7001,7 +7007,6 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
       "integrity": "sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==",
-      "dev": true,
       "requires": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -7236,7 +7241,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
       "requires": {
         "immediate": "~3.0.5"
       }
@@ -8748,8 +8752,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "parallel-transform": {
       "version": "1.2.0",
@@ -9598,8 +9601,7 @@
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "promise": {
       "version": "7.3.1",
@@ -10238,7 +10240,6 @@
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
       "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -10569,8 +10570,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -10898,8 +10898,7 @@
     "set-immediate-shim": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
-      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=",
-      "dev": true
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
     },
     "set-value": {
       "version": "2.0.1",
@@ -11725,7 +11724,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -12623,8 +12621,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util-promisify": {
       "version": "2.1.0",
diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index 1830fa64cf..f739af99c5 100644
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@@ -56,6 +56,7 @@
     "json-schema-defaults": "^0.4.0",
     "jstree": "^3.3.9",
     "jstree-bootstrap-theme": "^1.0.1",
+    "jszip": "^3.2.2",
     "leaflet": "^1.6.0",
     "leaflet-geometryutil": "^0.9.3",
     "leaflet-polylinedecorator": "^1.6.0",
@@ -105,6 +106,7 @@
     "@types/jquery": "^3.3.32",
     "@types/js-beautify": "^1.8.1",
     "@types/jstree": "^3.3.39",
+    "@types/jszip": "^3.1.7",
     "@types/leaflet": "^1.5.9",
     "@types/leaflet-polylinedecorator": "^1.6.0",
     "@types/lodash": "^4.14.149",
diff --git a/ui-ngx/src/app/app.module.ts b/ui-ngx/src/app/app.module.ts
index 4c7d0feca8..64ec2095a5 100644
--- a/ui-ngx/src/app/app.module.ts
+++ b/ui-ngx/src/app/app.module.ts
@@ -25,6 +25,21 @@ import { HomeModule } from '@home/home.module';
 
 import { AppComponent } from './app.component';
 import { DashboardRoutingModule } from '@modules/dashboard/dashboard-routing.module';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  { path: '**',
+    redirectTo: 'home'
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PageNotFoundRoutingModule { }
+
 
 @NgModule({
   declarations: [
@@ -36,8 +51,9 @@ import { DashboardRoutingModule } from '@modules/dashboard/dashboard-routing.mod
     AppRoutingModule,
     CoreModule,
     LoginModule,
+    HomeModule,
     DashboardRoutingModule,
-    HomeModule
+    PageNotFoundRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/ui-ngx/src/app/core/auth/auth.service.ts b/ui-ngx/src/app/core/auth/auth.service.ts
index 8a3e7d3525..656711bdc0 100644
--- a/ui-ngx/src/app/core/auth/auth.service.ts
+++ b/ui-ngx/src/app/core/auth/auth.service.ts
@@ -127,8 +127,9 @@ export class AuthService {
       {email}, defaultHttpOptions());
   }
 
-  public activate(activateToken: string, password: string): Observable<LoginResponse> {
-    return this.http.post<LoginResponse>('/api/noauth/activate', {activateToken, password}, defaultHttpOptions()).pipe(
+  public activate(activateToken: string, password: string, sendActivationMail: boolean): Observable<LoginResponse> {
+    return this.http.post<LoginResponse>(`/api/noauth/activate?sendActivationMail=${sendActivationMail}`,
+      {activateToken, password}, defaultHttpOptions()).pipe(
       tap((loginResponse: LoginResponse) => {
           this.setUserFromJwtToken(loginResponse.token, loginResponse.refreshToken, true);
         }
diff --git a/ui-ngx/src/app/core/core.module.ts b/ui-ngx/src/app/core/core.module.ts
index 877d193a9e..b053938722 100644
--- a/ui-ngx/src/app/core/core.module.ts
+++ b/ui-ngx/src/app/core/core.module.ts
@@ -28,7 +28,7 @@ import {
   MissingTranslationHandler,
   TranslateCompiler,
   TranslateLoader,
-  TranslateModule
+  TranslateModule, TranslateParser
 } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TbMissingTranslationHandler } from './translate/missing-translate-handler';
@@ -39,6 +39,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
 import { HotkeyModule } from 'angular2-hotkeys';
+import { TranslateDefaultParser } from '@core/translate/translate-default-parser';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/locale/locale.constant-', '.json');
@@ -67,6 +68,10 @@ export function HttpLoaderFactory(http: HttpClient) {
       compiler: {
         provide: TranslateCompiler,
         useClass: TranslateDefaultCompiler
+      },
+      parser: {
+        provide: TranslateParser,
+        useClass: TranslateDefaultParser
       }
     }),
     HotkeyModule.forRoot(),
diff --git a/ui-ngx/src/app/core/http/entity.service.ts b/ui-ngx/src/app/core/http/entity.service.ts
index 442cd22aab..4cf67175e4 100644
--- a/ui-ngx/src/app/core/http/entity.service.ts
+++ b/ui-ngx/src/app/core/http/entity.service.ts
@@ -480,6 +480,7 @@ export class EntityService {
         entityTypes.push(EntityType.DASHBOARD);
         if (useAliasEntityTypes) {
           entityTypes.push(AliasEntityType.CURRENT_CUSTOMER);
+          entityTypes.push(AliasEntityType.CURRENT_TENANT);
         }
         break;
       case Authority.CUSTOMER_USER:
@@ -1065,6 +1066,10 @@ export class EntityService {
       if (authUser.authority === Authority.CUSTOMER_USER) {
         entityId.id = authUser.customerId;
       }
+    } else if (entityType === AliasEntityType.CURRENT_TENANT){
+      const authUser =  getCurrentAuthUser(this.store);
+      entityId.entityType = EntityType.TENANT;
+      entityId.id = authUser.tenantId;
     }
     return entityId;
   }
diff --git a/ui-ngx/src/app/core/translate/translate-default-parser.ts b/ui-ngx/src/app/core/translate/translate-default-parser.ts
new file mode 100644
index 0000000000..1468ab195b
--- /dev/null
+++ b/ui-ngx/src/app/core/translate/translate-default-parser.ts
@@ -0,0 +1,76 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable } from '@angular/core';
+import { TranslateParser } from '@ngx-translate/core';
+import { isDefinedAndNotNull } from '@core/utils';
+
+@Injectable({ providedIn: 'root' })
+export class TranslateDefaultParser extends TranslateParser {
+  templateMatcher: RegExp = /{{\s?([^{}\s]*)\s?}}/g;
+
+  // tslint:disable-next-line:ban-types
+  public interpolate(expr: string | Function, params?: any): string {
+    let result: string;
+
+    if (typeof expr === 'string') {
+      result = this.interpolateString(expr, params);
+    } else if (typeof expr === 'function') {
+      result = this.interpolateFunction(expr, params);
+      if (typeof result === 'string') {
+        result = this.interpolateString(result, params);
+      }
+    } else {
+      result = expr as string;
+    }
+
+    return result;
+  }
+
+  getValue(target: any, key: string): any {
+    const keys = typeof key === 'string' ? key.split('.') : [key];
+    key = '';
+    do {
+      key += keys.shift();
+      if (isDefinedAndNotNull(target) && isDefinedAndNotNull(target[key]) && (typeof target[key] === 'object' || !keys.length)) {
+        target = target[key];
+        key = '';
+      } else if (!keys.length) {
+        target = undefined;
+      } else {
+        key += '.';
+      }
+    } while (keys.length);
+
+    return target;
+  }
+
+  // tslint:disable-next-line:ban-types
+  private interpolateFunction(fn: Function, params?: any) {
+    return fn(params);
+  }
+
+  private interpolateString(expr: string, params?: any) {
+    if (!params) {
+      return expr;
+    }
+
+    return expr.replace(this.templateMatcher, (substring: string, b: string) => {
+      const r = this.getValue(params, b);
+      return isDefinedAndNotNull(r) ? r : substring;
+    });
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index 7ff3317789..47c9ef8645 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
@@ -16,10 +16,10 @@
 
 -->
 <form [formGroup]="alarmFormGroup" style="min-width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="close()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -91,7 +91,6 @@
     <div fxLayout="row" *ngIf="alarm$ | async; let alarm;">
       <button *ngIf="allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
                                              alarm.status === alarmStatuses.CLEARED_UNACK)"
-              mat-button
               mat-raised-button
               color="primary"
               type="button"
@@ -102,7 +101,6 @@
       </button>
       <button *ngIf="allowClear && (alarm.status === alarmStatuses.ACTIVE_ACK ||
                                     alarm.status === alarmStatuses.ACTIVE_UNACK)"
-              mat-button
               mat-raised-button
               color="primary"
               type="button"
@@ -113,7 +111,6 @@
     </div>
     <span fxFlex></span>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts
index 13d5c12af1..2b0d0629a2 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts
@@ -39,10 +39,6 @@ import {
 import { AlarmService } from '@app/core/http/alarm.service';
 import { DialogService } from '@core/services/dialog.service';
 import { AlarmTableHeaderComponent } from '@home/components/alarm/alarm-table-header.component';
-import {
-  AuditLogDetailsDialogComponent,
-  AuditLogDetailsDialogData
-} from '@home/components/audit-log/audit-log-details-dialog.component';
 import {
   AlarmDetailsDialogComponent,
   AlarmDetailsDialogData
@@ -72,7 +68,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
     this.entityType = EntityType.ALARM;
     this.entityTranslations = entityTypeTranslations.get(EntityType.ALARM);
     this.entityResources = {
-    } as EntityTypeResource;
+    } as EntityTypeResource<AlarmInfo>;
     this.searchStatus = defaultSearchStatus;
 
     this.headerComponent = AlarmTableHeaderComponent;
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.html
index 4b86b4f481..2ef88b055e 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block" style="width: 200px;">
+<mat-form-field class="mat-block">
   <mat-label translate>alarm.alarm-status</mat-label>
-  <mat-select matInput [ngModel]="alarmTableConfig.searchStatus"
+  <mat-select [ngModel]="alarmTableConfig.searchStatus"
               (ngModelChange)="searchStatusChanged($event)">
     <mat-option *ngFor="let status of alarmSearchStatusTypes" [value]="status">
       {{ alarmSearchStatusTranslationsMap.get(alarmSearchStatusEnum[status]) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss
index 57960c57a5..759a4bbf01 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-header.component.scss
@@ -13,16 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   /*  flex: 1;
     display: flex;
     justify-content: flex-start; */
   padding-right: 8px;
+  min-width: 160px;
 }
 
 :host ::ng-deep {
   mat-form-field {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -31,5 +35,13 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.ts
index 760514dfb5..610aa261ff 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.ts
@@ -20,8 +20,6 @@ import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
 import { DialogService } from '@core/services/dialog.service';
 import { AlarmTableConfig } from './alarm-table-config';
 import { AlarmSearchStatus } from '@shared/models/alarm.models';
@@ -70,8 +68,7 @@ export class AlarmTableComponent implements OnInit {
               private dialogService: DialogService,
               private translate: TranslateService,
               private datePipe: DatePipe,
-              private dialog: MatDialog,
-              private store: Store<AppState>) {
+              private dialog: MatDialog) {
   }
 
   ngOnInit() {
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts
index 4ea777ff09..6673d55498 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select-panel.component.ts
@@ -14,11 +14,8 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, InjectionToken, OnInit } from '@angular/core';
-import { Timewindow } from '@shared/models/time/time.models';
+import { Component, Inject, InjectionToken } from '@angular/core';
 import { AliasInfo, IAliasController } from '@core/api/widget-api.models';
-import { PageComponent } from '@shared/components/page.component';
-import { TIMEWINDOW_PANEL_DATA, TimewindowPanelData } from '@shared/components/time/timewindow-panel.component';
 import { deepClone } from '@core/utils';
 
 export const ALIASES_ENTITY_SELECT_PANEL_DATA = new InjectionToken<any>('AliasesEntitySelectPanelData');
diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
index 5ddff2f60a..3ea70d7142 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-alias-dialog.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form #entityAliasForm="ngForm" [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+<form #entityAliasForm="ngForm" [formGroup]="entityAliasFormGroup" (ngSubmit)="save()" style="min-width: 550px;">
+  <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 774fc805da..724287eb90 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -19,35 +19,37 @@
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
-        <mat-form-field class="mat-block tb-attribute-scope" style="width: 200px;" *ngIf="!disableAttributeScopeSelection">
-          <mat-label translate>attribute.attributes-scope</mat-label>
-          <mat-select [disabled]="(isLoading$ | async) || attributeScopeSelectionReadonly"
-                      matInput [ngModel]="attributeScope"
-                      (ngModelChange)="attributeScopeChanged($event)">
-            <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
-              {{ telemetryTypeTranslationsMap.get(toTelemetryTypeFunc(scope)) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+          <span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span>
+          <mat-form-field class="mat-block tb-attribute-scope" *ngIf="!disableAttributeScopeSelection">
+            <mat-label translate>attribute.attributes-scope</mat-label>
+            <mat-select [disabled]="(isLoading$ | async) || attributeScopeSelectionReadonly"
+                        [ngModel]="attributeScope"
+                        (ngModelChange)="attributeScopeChanged($event)">
+              <mat-option *ngFor="let scope of attributeScopes" [value]="scope">
+                {{ telemetryTypeTranslationsMap.get(toTelemetryTypeFunc(scope)) | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
         <span fxFlex></span>
-        <button *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                mat-button mat-icon-button
+        <button mat-icon-button
+                *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
                 [disabled]="isLoading$ | async"
                 (click)="addAttribute($event)"
                 matTooltip="{{ 'action.add' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>add</mat-icon>
         </button>
-        <button *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                mat-button mat-icon-button
+        <button mat-icon-button
+                *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)"
                 [disabled]="isLoading$ | async"
                 (click)="reloadAttributes()"
                 matTooltip="{{ 'action.refresh' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>refresh</mat-icon>
         </button>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 [disabled]="isLoading$ | async"
                 (click)="enterFilterMode()"
                 matTooltip="{{ 'action.search' | translate }}"
@@ -58,7 +60,7 @@
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
@@ -69,7 +71,7 @@
                  [(ngModel)]="pageLink.textSearch"
                  placeholder="{{ 'common.enter-search' | translate }}"/>
         </mat-form-field>
-        <button mat-button mat-icon-button (click)="exitFilterMode()"
+        <button mat-icon-button (click)="exitFilterMode()"
                 matTooltip="{{ 'action.close' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>close</mat-icon>
@@ -77,23 +79,22 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools">
-                <span>
-                  {{ translate.get(
-                    attributeScope === latestTelemetryTypes.LATEST_TELEMETRY
-                        ? 'attribute.selected-telemetry' : 'attribute.selected-attributes',
-                    {count: dataSource.selection.selected.length}) | async }}
-                </span>
+      <div class="mat-toolbar-tools" fxLayout.xs="row wrap">
+        <span class="tb-entity-table-info">
+          {{ (attributeScope === latestTelemetryTypes.LATEST_TELEMETRY ?
+                'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
+        </span>
         <span fxFlex></span>
         <button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"
-                mat-button mat-icon-button [disabled]="isLoading$ | async"
+                class="button-widget-action"
+                mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
                 (click)="deleteAttributes($event)">
           <mat-icon>delete</mat-icon>
         </button>
-        <button mat-button mat-raised-button
-                color="accent"
+        <button mat-raised-button color="accent"
+                class="button-widget-action"
                 [disabled]="isLoading$ | async"
                 matTooltip="{{ 'attribute.show-on-widget' | translate }}"
                 matTooltipPosition="above"
@@ -104,7 +105,7 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'widget'">
-      <div class="mat-toolbar-tools" fxLayoutGap="8px">
+      <div class="mat-toolbar-tools" fxLayoutGap="8px" fxLayout.xs="row wrap">
         <div fxFlex fxLayout="row" fxLayoutAlign="start">
           <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
           <tb-widgets-bundle-select fxFlexOffset="5"
@@ -115,8 +116,9 @@
                                     (ngModelChange)="onWidgetsBundleChanged()">
           </tb-widgets-bundle-select>
         </div>
-        <button mat-button mat-raised-button [fxShow]="widgetsList.length > 0"
+        <button mat-raised-button [fxShow]="widgetsList.length > 0"
                 color="accent"
+                class="button-widget-action"
                 [disabled]="isLoading$ | async"
                 matTooltip="{{ 'attribute.add-to-dashboard' | translate }}"
                 matTooltipPosition="above"
@@ -124,7 +126,7 @@
           <mat-icon>dashboard</mat-icon>
           <span translate>attribute.add-to-dashboard</span>
         </button>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.close' | translate }}"
                 matTooltipPosition="above"
@@ -134,7 +136,7 @@
       </div>
     </mat-toolbar>
     <div fxFlex class="table-container" [fxShow]="mode !== 'widget'">
-      <mat-table [dataSource]="dataSource"
+      <table mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 30px;">
@@ -167,7 +169,7 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
-            <div fxLayout="row">
+            <div fxLayout="row" style="align-items: center">
               <span fxFlex>{{attribute.value | tbJson}}</span>
               <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
@@ -179,7 +181,7 @@
         <mat-row [ngClass]="{'mat-row-select': true,
                              'mat-selected': dataSource.selection.isSelected(attribute)}"
                  *matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row>
-      </mat-table>
+      </table>
       <span [fxShow]="dataSource.isEmpty() | async"
             fxLayoutAlign="center center"
             class="no-data-found" translate>{{
@@ -218,14 +220,16 @@
       </section>
 
       <ng-template #carouselPrev>
-        <button mat-button mat-icon-button *ngIf="widgetsCarouselIndex > 0"
+        <button mat-icon-button
+                *ngIf="widgetsCarouselIndex > 0"
                 matTooltip="{{ 'attribute.prev-widget' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>keyboard_arrow_left</mat-icon>
         </button>
       </ng-template>
       <ng-template #carouselNext>
-        <button mat-button mat-icon-button *ngIf="widgetsCarouselIndex < widgetsList.length - 1"
+        <button mat-icon-button
+                *ngIf="widgetsCarouselIndex < widgetsList.length - 1"
                 matTooltip="{{ 'attribute.next-widget' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>keyboard_arrow_right</mat-icon>
@@ -241,13 +245,11 @@
     <span translate *ngIf="mode === 'widget' && widgetsLoaded &&
                            widgetsList.length === 0 &&
                            widgetsBundle"
-          fxLayoutAlign="center center"
-          fxFlex
+          fxFlex fxLayoutAlign="center center"
           style="text-transform: uppercase; display: flex;"
           class="mat-headline">widgets-bundle.empty</span>
     <span translate *ngIf="mode === 'widget' && !widgetsBundle"
-          fxLayoutAlign="center center"
-          fxFlex
+          fxFlex fxLayoutAlign="center center"
           style="text-transform: uppercase; display: flex;"
           class="mat-headline">widget.select-widgets-bundle</span>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index 3de276b003..b8b237ec13 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -22,6 +24,14 @@
       height: 100%;
       background: #fff;
 
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
       .tb-entity-table-title {
         padding-right: 20px;
         white-space: nowrap;
@@ -32,6 +42,30 @@
       .table-container {
         overflow: auto;
       }
+
+      .tb-entity-table-info{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .button-widget-action{
+        margin-left: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-entity-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
     }
   }
 }
@@ -42,6 +76,7 @@
   }
   mat-form-field.tb-attribute-scope {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -50,6 +85,14 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
   mat-cell.tb-value-cell {
     cursor: pointer;
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
index f4ddad7825..3e6825edff 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
@@ -45,7 +45,8 @@ import {
   isClientSideTelemetryType,
   LatestTelemetry,
   TelemetryType,
-  telemetryTypeTranslations, toTelemetryType
+  telemetryTypeTranslations,
+  toTelemetryType
 } from '@shared/models/telemetry/telemetry.models';
 import { AttributeDatasource } from '@home/models/datasource/attribute-datasource';
 import { AttributeService } from '@app/core/http/attribute.service';
@@ -297,6 +298,9 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     if ($event) {
       $event.stopPropagation();
     }
+    if (this.isClientSideTelemetryTypeMap.get(this.attributeScope)) {
+      return;
+    }
     const target = $event.target || $event.srcElement || $event.currentTarget;
     const config = new OverlayConfig();
     config.backdropClass = 'cdk-overlay-transparent-backdrop';
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
index 5bda4c7550..3589e465fe 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar color="primary">
   <h2 translate>audit-log.audit-log-details</h2>
   <span fxFlex></span>
   <button mat-button mat-icon-button
@@ -33,10 +33,8 @@
   <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
-  <span fxFlex></span>
+<div mat-dialog-actions fxLayoutAlign="end center">
   <button mat-button color="primary"
-          style="margin-right: 20px;"
           type="button"
           [disabled]="(isLoading$ | async)"
           [mat-dialog-close]="false" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts
index c578b0eef3..a50bb0cdaa 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-table-config.ts
@@ -25,17 +25,13 @@ import {
   AuditLog,
   AuditLogMode
 } from '@shared/models/audit-log.models';
-import {
-  EntityTypeResource,
-  EntityTypeTranslation,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
+import { EntityTypeResource, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { AuditLogService } from '@core/http/audit-log.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { Direction } from '@shared/models/page/sort-order';
 import { MatDialog } from '@angular/material/dialog';
-import { PageLink, TimePageLink } from '@shared/models/page/page-link';
+import { TimePageLink } from '@shared/models/page/page-link';
 import { Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';
 import { EntityId } from '@shared/models/id/entity-id';
@@ -72,7 +68,7 @@ export class AuditLogTableConfig extends EntityTableConfig<AuditLog, TimePageLin
       search: 'audit-log.search'
     };
     this.entityResources = {
-    } as EntityTypeResource;
+    } as EntityTypeResource<AuditLog>;
 
     this.entitiesFetchFunction = pageLink => this.fetchAuditLogs(pageLink);
 
diff --git a/ui-ngx/src/app/modules/home/components/contact.component.html b/ui-ngx/src/app/modules/home/components/contact.component.html
index 53c2e29a76..3e5493e17c 100644
--- a/ui-ngx/src/app/modules/home/components/contact.component.html
+++ b/ui-ngx/src/app/modules/home/components/contact.component.html
@@ -18,7 +18,7 @@
 <section [formGroup]="parentForm">
   <mat-form-field class="mat-block">
     <mat-label translate>contact.country</mat-label>
-    <mat-select matInput formControlName="country">
+    <mat-select formControlName="country">
       <mat-option *ngFor="let country of countries" [value]="country">
         {{ country }}
       </mat-option>
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.ts b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
index 12894876eb..66a9f3dc82 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/details-panel.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 68bb015071..12ef8beec1 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -16,11 +16,11 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 400px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>{{ translations.add }}</h2>
     <span fxFlex></span>
-    <div [tb-help]="resources.helpLinkId"></div>
-    <button mat-button mat-icon-button
+    <div [tb-help]="helpLinkId()"></div>
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -32,15 +32,13 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
       {{ 'action.add' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.scss b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.scss
index 655a7ced9b..8f36fc9f4a 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.scss
@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
+:host ::ng-deep .mat-padding{
+  padding: 0;
 }
diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
index 98fc72f082..9793c1de92 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts
@@ -14,22 +14,22 @@
 /// limitations under the License.
 ///
 
-import {Component, ComponentFactoryResolver, Inject, OnInit, SkipSelf, ViewChild} from '@angular/core';
+import { Component, ComponentFactoryResolver, Inject, Injector, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {PageComponent} from '@shared/components/page.component';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
-import {EntityTypeResource, EntityTypeTranslation} from '@shared/models/entity-type.models';
-import {BaseData, HasId} from '@shared/models/base-data';
-import {EntityId} from '@shared/models/id/entity-id';
-import {TbAnchorComponent} from '@shared/components/tb-anchor.component';
-import {EntityComponent} from './entity.component';
-import {EntityTableConfig} from '@home/models/entity/entities-table-config.models';
-import {AddEntityDialogData} from '@home/models/entity/entity-component.models';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
+import { BaseData, HasId } from '@shared/models/base-data';
+import { EntityId } from '@shared/models/id/entity-id';
+import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
+import { EntityComponent } from './entity.component';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
+import { AddEntityDialogData } from '@home/models/entity/entity-component.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'tb-add-entity-dialog',
@@ -45,7 +45,7 @@ export class AddEntityDialogComponent extends
 
   entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
   translations: EntityTypeTranslation;
-  resources: EntityTypeResource;
+  resources: EntityTypeResource<BaseData<HasId>>;
   entity: BaseData<EntityId>;
 
   submitted = false;
@@ -57,6 +57,7 @@ export class AddEntityDialogComponent extends
               @Inject(MAT_DIALOG_DATA) public data: AddEntityDialogData<BaseData<HasId>>,
               public dialogRef: MatDialogRef<AddEntityDialogComponent, BaseData<HasId>>,
               private componentFactoryResolver: ComponentFactoryResolver,
+              private injector: Injector,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher) {
     super(store, router, dialogRef);
   }
@@ -69,14 +70,35 @@ export class AddEntityDialogComponent extends
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.entityComponent);
     const viewContainerRef = this.entityDetailsFormAnchor.viewContainerRef;
     viewContainerRef.clear();
-    const componentRef = viewContainerRef.createComponent(componentFactory);
+    const injector: Injector = Injector.create(
+      {
+        providers: [
+          {
+            provide: 'entity',
+            useValue: this.entity
+          },
+          {
+            provide: 'entitiesTableConfig',
+            useValue: this.entitiesTableConfig
+          }
+        ],
+        parent: this.injector
+      }
+    );
+    const componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
     this.entityComponent = componentRef.instance;
     this.entityComponent.isEdit = true;
-    this.entityComponent.entitiesTableConfig = this.entitiesTableConfig;
-    this.entityComponent.entity = this.entity;
     this.detailsForm = this.entityComponent.entityNgForm;
   }
 
+  helpLinkId(): string {
+    if (this.resources.helpLinkIdForEntity && this.entityComponent.entityForm) {
+      return this.resources.helpLinkIdForEntity(this.entityComponent.entityForm.getRawValue());
+    } else {
+      return this.resources.helpLinkId;
+    }
+  }
+
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
diff --git a/ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts b/ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts
index 0cf012d64f..fe8a1064b5 100644
--- a/ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts
@@ -22,12 +22,15 @@ import { AfterViewInit } from '@angular/core';
 import { POSTAL_CODE_PATTERNS } from '@home/models/contact.models';
 import { HasId } from '@shared/models/base-data';
 import {EntityComponent} from './entity.component';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 export abstract class ContactBasedComponent<T extends ContactBased<HasId>> extends EntityComponent<T> implements AfterViewInit {
 
   protected constructor(protected store: Store<AppState>,
-                        protected fb: FormBuilder) {
-    super(store);
+                        protected fb: FormBuilder,
+                        protected entityValue: T,
+                        protected entitiesTableConfigValue: EntityTableConfig<T>) {
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   buildForm(entity: T): FormGroup {
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 31b28c03e7..0759286192 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -25,7 +25,7 @@
     <tb-entity-details-panel
       [entitiesTableConfig]="entitiesTableConfig"
       [entityId]="dataSource.currentEntity?.id"
-      (closeEntityDetails)="isDetailsOpen = false"
+      (closeEntityDetails)="isDetailsOpen = false; detailsPanelOpened.emit(isDetailsOpen);"
       (entityUpdated)="onEntityUpdated($event)"
       (entityAction)="onEntityAction($event)"
     >
@@ -33,18 +33,19 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+      <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
         <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
-            <tb-anchor #entityTableHeader></tb-anchor>
-            <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
-                            (ngModelChange)="onTimewindowChange()"
-                            asButton historyOnly></tb-timewindow>
-            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent ||
-                                entitiesTableConfig.useTimePageLink"></span>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+              <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
+              <tb-anchor #entityTableHeader></tb-anchor>
+              <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
+                              (ngModelChange)="onTimewindowChange()"
+                              asButton historyOnly></tb-timewindow>
+            </div>
+            <span fxFlex></span>
             <div [fxShow]="addEnabled()">
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                       (click)="addEntity($event)"
                       matTooltip="{{ translations.add | translate }}"
@@ -52,7 +53,7 @@
                 <mat-icon>add</mat-icon>
               </button>
               <ng-template #addActions>
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                         *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
                         [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@@ -61,7 +62,7 @@
                   <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
                 </button>
                 <ng-template #addActionsMenu>
-                  <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                  <button mat-icon-button [disabled]="isLoading$ | async"
                           matTooltip="{{ translations.add | translate }}"
                           matTooltipPosition="above"
                           [matMenuTriggerFor]="addActionsMenu">
@@ -79,20 +80,20 @@
                 </ng-template>
               </ng-template>
             </div>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
               <mat-icon>{{actionDescriptor.icon}}</mat-icon>
             </button>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
+            <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>refresh</mat-icon>
             </button>
             <button *ngIf="entitiesTableConfig.searchEnabled"
-                    mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+                    mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
@@ -101,7 +102,7 @@
         </mat-toolbar>
         <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <button mat-button mat-icon-button
+            <button mat-icon-button
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
@@ -112,7 +113,7 @@
                      [(ngModel)]="pageLink.textSearch"
                      placeholder="{{ translations.search | translate }}"/>
             </mat-form-field>
-            <button mat-button mat-icon-button (click)="exitFilterMode()"
+            <button mat-icon-button (click)="exitFilterMode()"
                     matTooltip="{{ 'action.close' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>close</mat-icon>
@@ -121,11 +122,11 @@
         </mat-toolbar>
         <mat-toolbar *ngIf="entitiesTableConfig.selectionEnabled" class="mat-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-                    <span>
-                      {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
-                    </span>
+            <span class="tb-entity-table-info">
+              {{ translations.selectedEntities | translate:{count: dataSource.selection.selected.length} }}
+            </span>
             <span fxFlex></span>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
@@ -135,8 +136,8 @@
           </div>
         </mat-toolbar>
         <div fxFlex class="table-container">
-          <mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
-                     matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
+          <table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
+                     matSort [matSortActive]="pageLink.sortOrder?.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
               <mat-header-cell *matHeaderCellDef style="width: 30px;">
                 <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
@@ -154,8 +155,11 @@
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of entityColumns; trackBy: trackByColumnKey;">
               <mat-header-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
-                               *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
+                               [fxHide.lt-lg]="column.mobileHide"
+                               *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable">
+                {{ column.ignoreTranslate ? column.title : (column.title | translate) }} </mat-header-cell>
               <mat-cell [ngClass]="{'mat-number-cell': column.isNumberColumn}"
+                        [fxHide.lt-lg]="column.mobileHide"
                         *matCellDef="let entity; let row = index"
                         [matTooltip]="cellTooltip(entity, column, row)"
                         matTooltipPosition="above"
@@ -167,7 +171,7 @@
               <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
               <mat-cell *matCellDef="let entity; let row = index"
                         [ngStyle]="cellStyle(entity, column, row)">
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                         [fxShow]="column.actionDescriptor.isEnabled(entity)"
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"
@@ -187,8 +191,8 @@
                                                                     maxWidth: (cellActionDescriptors.length * 40) + 'px',
                                                                     width: (cellActionDescriptors.length * 40) + 'px' }">
                 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-                  <button mat-button mat-icon-button [disabled]="isLoading$ | async"
-                          [fxShow]="actionDescriptor.isEnabled(entity)" *ngFor="let actionDescriptor of cellActionDescriptors"
+                  <button mat-icon-button [disabled]="(isLoading$ | async) || !actionDescriptor.isEnabled(entity)"
+                          *ngFor="let actionDescriptor of cellActionDescriptors"
                           matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
                           matTooltipPosition="above"
                           (click)="actionDescriptor.onAction($event, entity)">
@@ -197,7 +201,7 @@
                   </button>
                 </div>
                 <div fxHide fxShow.lt-lg *ngIf="cellActionDescriptors.length">
-                  <button mat-button mat-icon-button
+                  <button mat-icon-button
                           (click)="$event.stopPropagation()"
                           [matMenuTriggerFor]="cellActionsMenu">
                     <mat-icon class="material-icons">more_vert</mat-icon>
@@ -220,16 +224,17 @@
                                  'mat-selected': dataSource.selection.isSelected(entity),
                                  'tb-current-entity': dataSource.isCurrentEntity(entity)}"
                      *matRowDef="let entity; columns: displayedColumns;" (click)="onRowClick($event, entity)"></mat-row>
-          </mat-table>
+          </table>
           <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async)"
                 fxLayoutAlign="center center"
                 class="no-data-found" translate>{{ translations.noEntities }}</span>
         </div>
-        <mat-divider></mat-divider>
-        <mat-paginator [length]="dataSource.total() | async"
+        <mat-divider *ngIf="displayPagination"></mat-divider>
+        <mat-paginator *ngIf="displayPagination"
+                       [length]="dataSource.total() | async"
                        [pageIndex]="pageLink.page"
                        [pageSize]="pageLink.pageSize"
-                       [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
+                       [pageSizeOptions]="pageSizeOptions"></mat-paginator>
       </div>
     </div>
   </mat-drawer-content>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss
index 4be24e9eb3..d5f8d53387 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -22,6 +24,14 @@
       height: 100%;
       background: #fff;
 
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
       .tb-entity-table-title {
         padding-right: 20px;
         white-space: nowrap;
@@ -32,6 +42,24 @@
       .table-container {
         overflow: auto;
       }
+
+      .tb-entity-table-info{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-entity-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
index 3c3ddab112..7b0fff61b0 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
@@ -16,25 +16,25 @@
 
 import {
   AfterViewInit,
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ComponentFactoryResolver,
-  ElementRef,
-  Input,
-  OnInit,
+  ElementRef, EventEmitter,
+  Input, OnChanges,
+  OnInit, SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { PageLink, TimePageLink } from '@shared/models/page/page-link';
+import { MAX_SAFE_PAGE_SIZE, PageLink, TimePageLink } from '@shared/models/page/page-link';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { EntitiesDataSource } from '@home/models/datasource/entity-datasource';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { forkJoin, fromEvent, merge, Observable } from 'rxjs';
+import { forkJoin, fromEvent, merge, Observable, Subscription } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { BaseData, HasId } from '@shared/models/base-data';
 import { ActivatedRoute } from '@angular/router';
@@ -51,7 +51,7 @@ import { EntityTypeTranslation } from '@shared/models/entity-type.models';
 import { DialogService } from '@core/services/dialog.service';
 import { AddEntityDialogComponent } from './add-entity-dialog.component';
 import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models';
-import { historyInterval, HistoryWindowType, Timewindow } from '@shared/models/time/time.models';
+import { DAY, historyInterval, HistoryWindowType, Timewindow } from '@shared/models/time/time.models';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { isDefined, isUndefined } from '@core/utils';
@@ -62,7 +62,7 @@ import { isDefined, isUndefined } from '@core/utils';
   styleUrls: ['./entities-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EntitiesTableComponent extends PageComponent implements AfterViewInit, OnInit {
+export class EntitiesTableComponent extends PageComponent implements AfterViewInit, OnInit, OnChanges {
 
   @Input()
   entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
@@ -87,12 +87,16 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
 
   selectionEnabled;
 
+  defaultPageSize = 10;
+  displayPagination = true;
+  pageSizeOptions;
   pageLink: PageLink;
   textSearchMode = false;
   timewindow: Timewindow;
   dataSource: EntitiesDataSource<BaseData<HasId>>;
 
   isDetailsOpen = false;
+  detailsPanelOpened = new EventEmitter<boolean>();
 
   @ViewChild('entityTableHeader', {static: true}) entityTableHeaderAnchor: TbAnchorComponent;
 
@@ -101,18 +105,43 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
+  private sortSubscription: Subscription;
+  private updateDataSubscription: Subscription;
+  private viewInited = false;
+
   constructor(protected store: Store<AppState>,
-              private route: ActivatedRoute,
+              public route: ActivatedRoute,
               public translate: TranslateService,
               public dialog: MatDialog,
               private dialogService: DialogService,
               private domSanitizer: DomSanitizer,
+              private cd: ChangeDetectorRef,
               private componentFactoryResolver: ComponentFactoryResolver) {
     super(store);
   }
 
   ngOnInit() {
-    this.entitiesTableConfig = this.entitiesTableConfig || this.route.snapshot.data.entitiesTableConfig;
+    if (this.entitiesTableConfig) {
+      this.init(this.entitiesTableConfig);
+    } else {
+      this.init(this.route.snapshot.data.entitiesTableConfig);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const propName of Object.keys(changes)) {
+      const change = changes[propName];
+      if (!change.firstChange && change.currentValue !== change.previousValue) {
+        if (propName === 'entitiesTableConfig' && change.currentValue) {
+          this.init(change.currentValue);
+        }
+      }
+    }
+  }
+
+  private init(entitiesTableConfig: EntityTableConfig<BaseData<HasId>>) {
+    this.isDetailsOpen = false;
+    this.entitiesTableConfig = entitiesTableConfig;
     if (this.entitiesTableConfig.headerComponent) {
       const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.headerComponent);
       const viewContainerRef = this.entityTableHeaderAnchor.viewContainerRef;
@@ -138,17 +167,16 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
           onAction: ($event, entity) => this.deleteEntity($event, entity)
         }
       );
+      this.groupActionDescriptors.push(
+        {
+          name: this.translate.instant('action.delete'),
+          icon: 'delete',
+          isEnabled: true,
+          onAction: ($event, entities) => this.deleteEntities($event, entities)
+        }
+      );
     }
 
-    this.groupActionDescriptors.push(
-      {
-        name: this.translate.instant('action.delete'),
-        icon: 'delete',
-        isEnabled: this.entitiesTableConfig.entitiesDeleteEnabled,
-        onAction: ($event, entities) => this.deleteEntities($event, entities)
-      }
-    );
-
     const enabledGroupActionDescriptors =
       this.groupActionDescriptors.filter((descriptor) => descriptor.isEnabled);
 
@@ -156,30 +184,39 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
 
     this.columnsUpdated();
 
-    const sortOrder: SortOrder = { property: this.entitiesTableConfig.defaultSortOrder.property,
-                                   direction: this.entitiesTableConfig.defaultSortOrder.direction };
+    let sortOrder: SortOrder = null;
+    if (this.entitiesTableConfig.defaultSortOrder) {
+      sortOrder = {
+        property: this.entitiesTableConfig.defaultSortOrder.property,
+        direction: this.entitiesTableConfig.defaultSortOrder.direction
+      };
+    }
+
+    this.displayPagination = this.entitiesTableConfig.displayPagination;
+    this.defaultPageSize = this.entitiesTableConfig.defaultPageSize;
+    this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
 
     if (this.entitiesTableConfig.useTimePageLink) {
-      this.timewindow = historyInterval(24 * 60 * 60 * 1000);
+      this.timewindow = historyInterval(DAY);
       const currentTime = Date.now();
       this.pageLink = new TimePageLink(10, 0, null, sortOrder,
         currentTime - this.timewindow.history.timewindowMs, currentTime);
     } else {
       this.pageLink = new PageLink(10, 0, null, sortOrder);
     }
-    this.dataSource = new EntitiesDataSource<BaseData<HasId>>(
-      this.entitiesTableConfig.entitiesFetchFunction,
-      this.entitiesTableConfig.entitySelectionEnabled,
-      () => {
-        this.dataLoaded();
-      }
-    );
+    this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : MAX_SAFE_PAGE_SIZE;
+    this.dataSource = this.entitiesTableConfig.dataSource(this.dataLoaded.bind(this));
     if (this.entitiesTableConfig.onLoadAction) {
       this.entitiesTableConfig.onLoadAction(this.route);
     }
     if (this.entitiesTableConfig.loadDataOnInit) {
       this.dataSource.loadEntities(this.pageLink);
     }
+    if (this.viewInited) {
+      setTimeout(() => {
+        this.updatePaginationSubscriptions();
+      }, 0);
+    }
   }
 
   ngAfterViewInit() {
@@ -189,15 +226,31 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
         debounceTime(150),
         distinctUntilChanged(),
         tap(() => {
-          this.paginator.pageIndex = 0;
+          if (this.displayPagination) {
+            this.paginator.pageIndex = 0;
+          }
           this.updateData();
         })
       )
       .subscribe();
 
-    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+    this.updatePaginationSubscriptions();
+    this.viewInited = true;
+  }
 
-    merge(this.sort.sortChange, this.paginator.page)
+  private updatePaginationSubscriptions() {
+    if (this.sortSubscription) {
+      this.sortSubscription.unsubscribe();
+      this.sortSubscription = null;
+    }
+    if (this.updateDataSubscription) {
+      this.updateDataSubscription.unsubscribe();
+      this.updateDataSubscription = null;
+    }
+    if (this.displayPagination) {
+      this.sortSubscription = this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+    }
+    this.updateDataSubscription = (this.displayPagination ? merge(this.sort.sortChange, this.paginator.page) : this.sort.sortChange)
       .pipe(
         tap(() => this.updateData())
       )
@@ -208,14 +261,29 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     return this.entitiesTableConfig.addEnabled;
   }
 
+  clearSelection() {
+    this.dataSource.selection.clear();
+    this.cd.detectChanges();
+  }
+
   updateData(closeDetails: boolean = true) {
     if (closeDetails) {
       this.isDetailsOpen = false;
     }
-    this.pageLink.page = this.paginator.pageIndex;
-    this.pageLink.pageSize = this.paginator.pageSize;
-    this.pageLink.sortOrder.property = this.sort.active;
-    this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()];
+    if (this.displayPagination) {
+      this.pageLink.page = this.paginator.pageIndex;
+      this.pageLink.pageSize = this.paginator.pageSize;
+    } else {
+      this.pageLink.page = 0;
+    }
+    if (this.sort.active) {
+      this.pageLink.sortOrder = {
+        property: this.sort.active,
+        direction: Direction[this.sort.direction.toUpperCase()]
+      };
+    } else {
+      this.pageLink.sortOrder = null;
+    }
     if (this.entitiesTableConfig.useTimePageLink) {
       const timePageLink = this.pageLink as TimePageLink;
       if (this.timewindow.history.historyType === HistoryWindowType.LAST_INTERVAL) {
@@ -230,14 +298,24 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     this.dataSource.loadEntities(this.pageLink);
   }
 
-  private dataLoaded() {
-    this.headerCellStyleCache.length = 0;
-    this.cellContentCache.length = 0;
-    this.cellTooltipCache.length = 0;
-    this.cellStyleCache.length = 0;
+  private dataLoaded(col?: number, row?: number) {
+    if (isFinite(col) && isFinite(row)) {
+      this.clearCellCache(col, row);
+    } else {
+      this.headerCellStyleCache.length = 0;
+      this.cellContentCache.length = 0;
+      this.cellTooltipCache.length = 0;
+      this.cellStyleCache.length = 0;
+    }
   }
 
   onRowClick($event: Event, entity) {
+    if (!this.entitiesTableConfig.handleRowClick($event, entity)) {
+      this.toggleEntityDetails($event, entity);
+    }
+  }
+
+  toggleEntityDetails($event: Event, entity) {
     if ($event) {
       $event.stopPropagation();
     }
@@ -246,6 +324,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     } else {
       this.isDetailsOpen = !this.isDetailsOpen;
     }
+    this.detailsPanelOpened.emit(this.isDetailsOpen);
   }
 
   addEntity($event: Event) {
@@ -345,16 +424,20 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   exitFilterMode() {
     this.textSearchMode = false;
     this.pageLink.textSearch = null;
-    this.paginator.pageIndex = 0;
+    if (this.displayPagination) {
+      this.paginator.pageIndex = 0;
+    }
     this.updateData();
   }
 
   resetSortAndFilter(update: boolean = true) {
     this.pageLink.textSearch = null;
     if (this.entitiesTableConfig.useTimePageLink) {
-      this.timewindow = historyInterval(24 * 60 * 60 * 1000);
+      this.timewindow = historyInterval(DAY);
+    }
+    if (this.displayPagination) {
+      this.paginator.pageIndex = 0;
     }
-    this.paginator.pageIndex = 0;
     const sortable = this.sort.sortables.get(this.entitiesTableConfig.defaultSortOrder.property);
     this.sort.active = sortable.id;
     this.sort.direction = this.entitiesTableConfig.defaultSortOrder.direction === Direction.ASC ? 'asc' : 'desc';
@@ -410,6 +493,13 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     return res;
   }
 
+  clearCellCache(col: number, row: number) {
+    const index = row * this.entitiesTableConfig.columns.length + col;
+    this.cellContentCache[index] = undefined;
+    this.cellTooltipCache[index] = undefined;
+    this.cellStyleCache[index] = undefined;
+  }
+
   cellContent(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number) {
     if (column instanceof EntityTableColumn) {
       const col = this.entitiesTableConfig.columns.indexOf(column);
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
index 71332f61f0..e459150eb9 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <tb-details-panel fxFlex
-                   [headerTitle]="entity?.name"
+                   [headerTitle]="entitiesTableConfig.entityTitle(entity)"
                    headerSubtitle="{{ translations.details | translate }}"
                    [isReadOnly]="entitiesTableConfig.detailsReadonly(entity)"
                    [isEdit]="isEditValue"
@@ -25,9 +25,9 @@
                    (applyDetails)="saveEntity()"
                    [theForm]="detailsForm">
   <div class="details-buttons">
-    <div [tb-help]="resources.helpLinkId"></div>
+    <div [tb-help]="helpLinkId()"></div>
   </div>
-  <mat-tab-group class="tb-absolute-fill" [ngClass]="{'tb-headless': isEditValue}" fxFlex [(selectedIndex)]="selectedTab">
+  <mat-tab-group class="tb-absolute-fill" [ngClass]="{'tb-headless': hideDetailsTabs()}" fxFlex [(selectedIndex)]="selectedTab">
     <mat-tab label="{{ 'details.details' | translate }}">
       <tb-anchor #entityDetailsForm></tb-anchor>
     </mat-tab>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
index 03aa90c0d5..7e79b0c16f 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts
@@ -15,36 +15,33 @@
 ///
 
 import {
-  ChangeDetectionStrategy,
+  AfterViewInit,
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ComponentFactoryResolver,
-  EventEmitter,
+  EventEmitter, Injector,
   Input,
   OnDestroy,
   OnInit,
   Output,
-  ViewChild,
-  ViewChildren,
   QueryList,
-  ContentChildren, AfterViewInit
+  ViewChild,
+  ViewChildren
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { BaseData, HasId } from '@shared/models/base-data';
-import {
-  EntityType,
-  EntityTypeResource,
-  EntityTypeTranslation
-} from '@shared/models/entity-type.models';
+import { EntityType, EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
 import { NgForm } from '@angular/forms';
 import { EntityComponent } from './entity.component';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 import { Subscription } from 'rxjs';
-import { MatTabGroup, MatTab } from '@angular/material/tabs';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
 import { EntityTabsComponent } from '@home/components/entity/entity-tabs.component';
+import { deepClone } from '@core/utils';
 
 @Component({
   selector: 'tb-entity-details-panel',
@@ -54,8 +51,6 @@ import { EntityTabsComponent } from '@home/components/entity/entity-tabs.compone
 })
 export class EntityDetailsPanelComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy {
 
-  @Input() entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
-
   @Output()
   closeEntityDetails = new EventEmitter<void>();
 
@@ -69,6 +64,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
   entityTabsComponent: EntityTabsComponent<BaseData<HasId>>;
   detailsForm: NgForm;
 
+  entitiesTableConfigValue: EntityTableConfig<BaseData<HasId>>;
   isEditValue = false;
   selectedTab = 0;
 
@@ -83,13 +79,16 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
   @ViewChildren(MatTab) inclusiveTabs: QueryList<MatTab>;
 
   translations: EntityTypeTranslation;
-  resources: EntityTypeResource;
+  resources: EntityTypeResource<BaseData<HasId>>;
   entity: BaseData<HasId>;
+  editingEntity: BaseData<HasId>;
 
   private currentEntityId: HasId;
   private entityActionSubscription: Subscription;
 
   constructor(protected store: Store<AppState>,
+              private injector: Injector,
+              private cd: ChangeDetectorRef,
               private componentFactoryResolver: ComponentFactoryResolver) {
     super(store);
   }
@@ -102,9 +101,26 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
     }
   }
 
+  @Input()
+  set entitiesTableConfig(entitiesTableConfig: EntityTableConfig<BaseData<HasId>>) {
+    this.entitiesTableConfigValue = entitiesTableConfig;
+    if (this.entityComponent) {
+      this.entityComponent.entitiesTableConfig = entitiesTableConfig;
+    }
+    if (this.entityTabsComponent) {
+      this.entityTabsComponent.entitiesTableConfig = entitiesTableConfig;
+    }
+  }
+
+  get entitiesTableConfig(): EntityTableConfig<BaseData<HasId>> {
+    return this.entitiesTableConfigValue;
+  }
+
   set isEdit(val: boolean) {
     this.isEditValue = val;
-    this.entityComponent.isEdit = val;
+    if (this.entityComponent) {
+      this.entityComponent.isEdit = val;
+    }
     if (this.entityTabsComponent) {
       this.entityTabsComponent.isEdit = val;
     }
@@ -131,15 +147,32 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.entitiesTableConfig.entityComponent);
     const viewContainerRef = this.entityDetailsFormAnchor.viewContainerRef;
     viewContainerRef.clear();
-    const componentRef = viewContainerRef.createComponent(componentFactory);
+    const injector: Injector = Injector.create(
+      {
+        providers: [
+          {
+            provide: 'entity',
+            useValue: this.entity
+          },
+          {
+            provide: 'entitiesTableConfig',
+            useValue: this.entitiesTableConfig
+          }
+        ],
+        parent: this.injector
+      }
+    );
+    const componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
     this.entityComponent = componentRef.instance;
     this.entityComponent.isEdit = this.isEdit;
-    this.entityComponent.entitiesTableConfig = this.entitiesTableConfig;
     this.detailsForm = this.entityComponent.entityNgForm;
     this.entityActionSubscription = this.entityComponent.entityAction.subscribe((action) => {
       this.entityAction.emit(action);
     });
     this.buildEntityTabsComponent();
+    this.entityComponent.entityForm.valueChanges.subscribe(() => {
+      this.cd.detectChanges();
+    });
   }
 
   buildEntityTabsComponent() {
@@ -151,9 +184,14 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
       this.entityTabsComponent = componentTabsRef.instance;
       this.entityTabsComponent.isEdit = this.isEdit;
       this.entityTabsComponent.entitiesTableConfig = this.entitiesTableConfig;
+      this.entityTabsComponent.detailsForm = this.detailsForm;
     }
   }
 
+  hideDetailsTabs(): boolean {
+    return this.isEditValue && this.entitiesTableConfig.hideDetailsTabsOnEdit;
+  }
+
   reload(): void {
     this.isEdit = false;
     this.entitiesTableConfig.loadEntity(this.currentEntityId).subscribe(
@@ -179,13 +217,28 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
         this.entityTabsComponent.entity = this.entity;
       }
     } else {
-      this.selectedTab = 0;
+      this.editingEntity = deepClone(this.entity);
+      this.entityComponent.entity = this.editingEntity;
+      if (this.entityTabsComponent) {
+        this.entityTabsComponent.entity = this.editingEntity;
+      }
+      if (this.entitiesTableConfig.hideDetailsTabsOnEdit) {
+        this.selectedTab = 0;
+      }
+    }
+  }
+
+  helpLinkId(): string {
+    if (this.resources.helpLinkIdForEntity && this.entityComponent.entityForm) {
+      return this.resources.helpLinkIdForEntity(this.entityComponent.entityForm.getRawValue());
+    } else {
+      return this.resources.helpLinkId;
     }
   }
 
   saveEntity() {
     if (this.detailsForm.valid) {
-      const editingEntity = {...this.entity, ...this.entityComponent.entityFormValue()};
+      const editingEntity = {...this.editingEntity, ...this.entityComponent.entityFormValue()};
       this.entitiesTableConfig.saveEntity(editingEntity).subscribe(
         (entity) => {
           this.entity = entity;
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
index 6670b17214..613104950c 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.html
@@ -18,7 +18,7 @@
 <div fxLayout="column" [formGroup]="entityFilterFormGroup" class="tb-entity-filter">
   <mat-form-field class="mat-block">
     <mat-label translate>alias.filter-type</mat-label>
-    <mat-select required matInput formControlName="type">
+    <mat-select required formControlName="type">
       <mat-option *ngFor="let type of aliasFilterTypes" [value]="type">
         {{aliasFilterTypeTranslations.get(type) | translate}}
       </mat-option>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts
index 600ce2d6da..64100eacfc 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-filter.component.ts
@@ -15,14 +15,7 @@
 ///
 
 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormBuilder, FormControl,
-  FormGroup,
-  NG_VALUE_ACCESSOR,
-  ValidatorFn,
-  Validators
-} from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { AliasFilterType, aliasFilterTypeTranslationMap, EntityAliasFilter } from '@shared/models/alias.models';
 import { AliasEntityType, EntityType } from '@shared/models/entity-type.models';
 import { TranslateService } from '@ngx-translate/core';
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-table-header.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-table-header.component.ts
index a61f78ec3e..e24345bc7e 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-table-header.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-table-header.component.ts
@@ -20,12 +20,25 @@ import { Input, OnInit, Directive } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
+import { PageLink } from '@shared/models/page/page-link';
 
 @Directive()
-export abstract class EntityTableHeaderComponent<T extends BaseData<HasId>> extends PageComponent implements OnInit {
+export abstract class EntityTableHeaderComponent<T extends BaseData<HasId>,
+  P extends PageLink = PageLink,
+  L extends BaseData<HasId> = T,
+  C extends EntityTableConfig<T, P, L> = EntityTableConfig<T, P, L>>
+  extends PageComponent implements OnInit {
+
+  entitiesTableConfigValue: C;
 
   @Input()
-  entitiesTableConfig: EntityTableConfig<T>;
+  set entitiesTableConfig(entitiesTableConfig: C) {
+    this.setEntitiesTableConfig(entitiesTableConfig);
+  }
+
+  get entitiesTableConfig(): C {
+    return this.entitiesTableConfigValue;
+  }
 
   protected constructor(protected store: Store<AppState>) {
     super(store);
@@ -34,4 +47,8 @@ export abstract class EntityTableHeaderComponent<T extends BaseData<HasId>> exte
   ngOnInit() {
   }
 
+  protected setEntitiesTableConfig(entitiesTableConfig: C) {
+    this.entitiesTableConfigValue = entitiesTableConfig;
+  }
+
 }
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
index 90a695d6f4..31ed87529e 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-tabs.component.ts
@@ -31,9 +31,15 @@ import { AuditLogMode } from '@shared/models/audit-log.models';
 import { DebugEventType, EventType } from '@shared/models/event.models';
 import { AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { NgForm } from '@angular/forms';
+import { PageLink } from '@shared/models/page/page-link';
 
 @Directive()
-export abstract class EntityTabsComponent<T extends BaseData<HasId>> extends PageComponent implements OnInit, AfterViewInit {
+export abstract class EntityTabsComponent<T extends BaseData<HasId>,
+  P extends PageLink = PageLink,
+  L extends BaseData<HasId> = T,
+  C extends EntityTableConfig<T, P, L> = EntityTableConfig<T, P, L>>
+  extends PageComponent implements OnInit, AfterViewInit {
 
   attributeScopes = AttributeScope;
   latestTelemetryTypes = LatestTelemetry;
@@ -54,6 +60,8 @@ export abstract class EntityTabsComponent<T extends BaseData<HasId>> extends Pag
 
   entityValue: T;
 
+  entitiesTableConfigValue: C;
+
   @ViewChildren(MatTab) entityTabs: QueryList<MatTab>;
 
   isEditValue: boolean;
@@ -69,7 +77,7 @@ export abstract class EntityTabsComponent<T extends BaseData<HasId>> extends Pag
 
   @Input()
   set entity(entity: T) {
-    this.entityValue = entity;
+    this.setEntity(entity);
   }
 
   get entity(): T {
@@ -77,7 +85,16 @@ export abstract class EntityTabsComponent<T extends BaseData<HasId>> extends Pag
   }
 
   @Input()
-  entitiesTableConfig: EntityTableConfig<T>;
+  set entitiesTableConfig(entitiesTableConfig: C) {
+    this.setEntitiesTableConfig(entitiesTableConfig);
+  }
+
+  get entitiesTableConfig(): C {
+    return this.entitiesTableConfigValue;
+  }
+
+  @Input()
+  detailsForm: NgForm;
 
   private entityTabsSubject = new BehaviorSubject<Array<MatTab>>(null);
 
@@ -100,4 +117,12 @@ export abstract class EntityTabsComponent<T extends BaseData<HasId>> extends Pag
     );
   }
 
+  protected setEntity(entity: T) {
+    this.entityValue = entity;
+  }
+
+  protected setEntitiesTableConfig(entitiesTableConfig: C) {
+    this.entitiesTableConfigValue = entitiesTableConfig;
+  }
+
 }
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
index fbe7de41e8..d98bcd3adf 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts
@@ -15,24 +15,39 @@
 ///
 
 import { BaseData, HasId } from '@shared/models/base-data';
-import { FormGroup, NgForm } from '@angular/forms';
+import { FormBuilder, FormGroup, NgForm } from '@angular/forms';
 import { PageComponent } from '@shared/components/page.component';
-import { EventEmitter, Input, OnInit, Output, ViewChild, Directive } from '@angular/core';
+import { Directive, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
+import { PageLink } from '@shared/models/page/page-link';
 
+// @dynamic
 @Directive()
-export abstract class EntityComponent<T extends BaseData<HasId>> extends PageComponent implements OnInit {
+// tslint:disable-next-line:directive-class-suffix
+export abstract class EntityComponent<T extends BaseData<HasId>,
+  P extends PageLink = PageLink,
+  L extends BaseData<HasId> = T,
+  C extends EntityTableConfig<T, P, L> = EntityTableConfig<T, P, L>>
+  extends PageComponent implements OnInit {
 
-  entityValue: T;
   entityForm: FormGroup;
 
   @ViewChild('entityNgForm', {static: true}) entityNgForm: NgForm;
 
   isEditValue: boolean;
 
+  @Input()
+  set entitiesTableConfig(entitiesTableConfig: C) {
+    this.setEntitiesTableConfig(entitiesTableConfig);
+  }
+
+  get entitiesTableConfig(): C {
+    return this.entitiesTableConfigValue;
+  }
+
   @Input()
   set isEdit(isEdit: boolean) {
     this.isEditValue = isEdit;
@@ -51,7 +66,8 @@ export abstract class EntityComponent<T extends BaseData<HasId>> extends PageCom
   set entity(entity: T) {
     this.entityValue = entity;
     if (this.entityForm) {
-      this.entityForm.reset();
+      this.entityForm.reset(undefined, {emitEvent: false});
+      this.entityForm.markAsPristine();
       this.updateForm(entity);
     }
   }
@@ -60,18 +76,18 @@ export abstract class EntityComponent<T extends BaseData<HasId>> extends PageCom
     return this.entityValue;
   }
 
-  @Input()
-  entitiesTableConfig: EntityTableConfig<T>;
-
   @Output()
   entityAction = new EventEmitter<EntityAction<T>>();
 
-  protected constructor(protected store: Store<AppState>) {
+  protected constructor(protected store: Store<AppState>,
+                        protected fb: FormBuilder,
+                        protected entityValue: T,
+                        protected entitiesTableConfigValue: C) {
     super(store);
+    this.entityForm = this.buildForm(this.entityValue);
   }
 
   ngOnInit() {
-    this.entityForm = this.buildForm(this.entityValue);
   }
 
   onEntityAction($event: Event, action: string) {
@@ -96,7 +112,7 @@ export abstract class EntityComponent<T extends BaseData<HasId>> extends PageCom
   }
 
   entityFormValue() {
-    const formValue = this.entityForm ? {...this.entityForm.value} : {};
+    const formValue = this.entityForm ? {...this.entityForm.getRawValue()} : {};
     return this.prepareFormValue(formValue);
   }
 
@@ -104,6 +120,10 @@ export abstract class EntityComponent<T extends BaseData<HasId>> extends PageCom
     return formValue;
   }
 
+  protected setEntitiesTableConfig(entitiesTableConfig: C) {
+    this.entitiesTableConfigValue = entitiesTableConfig;
+  }
+
   abstract buildForm(entity: T): FormGroup;
 
   abstract updateForm(entity: T);
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
index 2e998b209f..0d99ed3eb7 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@@ -94,7 +94,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
       noEntities: 'event.no-events-prompt'
     };
     this.entityResources = {
-    } as EntityTypeResource;
+    } as EntityTypeResource<Event>;
     this.entitiesFetchFunction = pageLink => this.fetchEvents(pageLink);
 
     this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html
index 9662e33af9..25c85d6b60 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block" style="width: 200px;">
+<mat-form-field class="mat-block">
   <mat-label translate>event.event-type</mat-label>
-  <mat-select matInput [ngModel]="eventTableConfig.eventType"
+  <mat-select [ngModel]="eventTableConfig.eventType"
               (ngModelChange)="eventTypeChanged($event)">
     <mat-option *ngFor="let type of eventTableConfig.eventTypes" [value]="type">
       {{ eventTypeTranslationsMap.get(type) | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss
index aa9f8d742d..416ac63175 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-header.component.scss
@@ -13,16 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
 /*  flex: 1;
   display: flex;
   justify-content: flex-start; */
   padding-right: 8px;
+  min-width: 160px;
 }
 
 :host ::ng-deep {
   mat-form-field {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -31,5 +35,13 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table.component.ts b/ui-ngx/src/app/modules/home/components/event/event-table.component.ts
index 9469711db7..aa6ce5dd77 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table.component.ts
@@ -15,20 +15,11 @@
 ///
 
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { AuditLogService } from '@core/http/audit-log.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
-import { AuditLogMode } from '@shared/models/audit-log.models';
 import { EntityId } from '@shared/models/id/entity-id';
-import { UserId } from '@shared/models/id/user-id';
-import { CustomerId } from '@shared/models/id/customer-id';
-import { AuditLogTableConfig } from '@home/components/audit-log/audit-log-table-config';
 import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Authority } from '@shared/models/authority.enum';
-import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { EventTableConfig } from './event-table-config';
 import { EventService } from '@core/http/event.service';
 import { DialogService } from '@core/services/dialog.service';
@@ -89,8 +80,7 @@ export class EventTableComponent implements OnInit {
               private dialogService: DialogService,
               private translate: TranslateService,
               private datePipe: DatePipe,
-              private dialog: MatDialog,
-              private store: Store<AppState>) {
+              private dialog: MatDialog) {
   }
 
   ngOnInit() {
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html
index 2f9598015c..46c87fe535 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html
@@ -44,13 +44,11 @@
             </tb-file-input>
           </fieldset>
         </form>
-        <div fxLayout="row">
-          <span fxFlex></span>
+        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
           <button mat-button
-                  style="margin-right: 20px;"
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-button mat-raised-button
+          <button mat-raised-button
                   [disabled]="(isLoading$ | async) || selectFileFormGroup.invalid || !selectFileFormGroup.dirty"
                   color="primary"
                   (click)="nextStep(2)">{{ 'action.continue' | translate }}</button>
@@ -62,7 +60,7 @@
           <fieldset [disabled]="isLoading$ | async" fxLayout="column">
             <mat-form-field class="mat-block">
               <mat-label translate>import.csv-delimiter</mat-label>
-              <mat-select required matInput formControlName="delim">
+              <mat-select required formControlName="delim">
                 <mat-option *ngFor="let delimiter of delimiters" [value]="delimiter.key">
                   {{ delimiter.value }}
                 </mat-option>
@@ -78,19 +76,19 @@
             </div>
           </fieldset>
         </form>
-        <div fxLayout="row">
+        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <span fxFlex></span>
-          <button mat-button
-                  style="margin-right: 20px;"
-                  [disabled]="(isLoading$ | async)"
-                  (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-button mat-raised-button
-                  [disabled]="(isLoading$ | async)"
-                  color="primary"
-                  (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
+          <div fxLayout="row wrap" fxLayoutGap="20px">
+            <button mat-button
+                    [disabled]="(isLoading$ | async)"
+                    (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+            <button mat-raised-button
+                    [disabled]="(isLoading$ | async)"
+                    color="primary"
+                    (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
+          </div>
         </div>
       </mat-step>
       <mat-step [stepControl]="columnTypesFormGroup">
@@ -98,19 +96,19 @@
           <ng-template matStepLabel>{{ 'import.stepper-text.column-type' | translate }}</ng-template>
           <tb-table-columns-assignment formControlName="columnsParam" [entityType]="entityType"></tb-table-columns-assignment>
         </form>
-        <div fxLayout="row">
+        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
-          <span fxFlex></span>
-          <button mat-button
-                  style="margin-right: 20px;"
-                  [disabled]="(isLoading$ | async)"
-                  (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-button mat-raised-button
-                  [disabled]="(isLoading$ | async) || columnTypesFormGroup.invalid || !columnTypesFormGroup.dirty"
-                  color="primary"
-                  (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
+          <div fxLayout="row wrap" fxLayoutGap="20px">
+            <button mat-button
+                    [disabled]="(isLoading$ | async)"
+                    (click)="cancel()">{{ 'action.cancel' | translate }}</button>
+            <button mat-raised-button
+                    [disabled]="(isLoading$ | async) || columnTypesFormGroup.invalid || !columnTypesFormGroup.dirty"
+                    color="primary"
+                    (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
+          </div>
         </div>
       </mat-step>
       <mat-step>
@@ -131,9 +129,8 @@
             {{ translate.instant('import.message.error-entities', {count: this.statistical.error.entity}) }}
           </p>
         </div>
-        <div fxLayout="row">
-          <span fxFlex></span>
-          <button mat-button mat-raised-button
+        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
+          <button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
                   (click)="nextStep(6)">{{ 'action.ok' | translate }}</button>
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss
index 9be9def15f..bed63393bb 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss
@@ -17,7 +17,6 @@
   .mat-dialog-content {
     .mat-vertical-content {
       form {
-        overflow: hidden !important;
         padding-bottom: 12px;
       }
     }
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html b/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
index a75d2b4bca..3e35485b9b 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #importForm="ngForm" [formGroup]="importFormGroup" (ngSubmit)="importFromJson()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>{{ importTitle }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -42,15 +42,13 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || importFormGroup.invalid || !importFormGroup.dirty">
       {{ 'action.import' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts b/ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts
index 3de12d3969..cd37c43223 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts
@@ -17,9 +17,6 @@
 import { Widget, WidgetType } from '@app/shared/models/widget.models';
 import { DashboardLayoutId } from '@shared/models/dashboard.models';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { ActionType } from '@shared/models/audit-log.models';
-import { RuleChain, RuleChainMetaData } from '@shared/models/rule-chain.models';
 
 export interface ImportWidgetResult {
   widget: Widget;
@@ -80,6 +77,21 @@ export interface CsvColumnParam {
   sampleData: any;
 }
 
+export interface FileType {
+  mimeType: string;
+  extension: string;
+}
+
+export const JSON_TYPE: FileType = {
+  mimeType: 'text/json',
+  extension: 'json'
+};
+
+export const ZIP_TYPE: FileType = {
+  mimeType: 'application/zip',
+  extension: 'zip'
+};
+
 export function convertCSVToJson(csvdata: string, config: CsvToJsonConfig,
                                  onError: (messageId: string, params?: any) => void): CsvToJsonResult | number {
   config = config || {};
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts b/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts
index 0bd96e2456..cb5ed40f93 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts
@@ -44,7 +44,7 @@ import {
   EntityAliasesDialogData
 } from '@home/components/alias/entity-aliases-dialog.component';
 import { ItemBufferService, WidgetItem } from '@core/services/item-buffer.service';
-import { ImportWidgetResult, WidgetsBundleItem } from './import-export.models';
+import { FileType, ImportWidgetResult, JSON_TYPE, WidgetsBundleItem, ZIP_TYPE } from './import-export.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { UtilsService } from '@core/services/utils.service';
 import { WidgetService } from '@core/http/widget.service';
@@ -54,6 +54,7 @@ import { ImportEntitiesResultInfo, ImportEntityData } from '@shared/models/entit
 import { RequestConfig } from '@core/http/http-utils';
 import { RuleChain, RuleChainImport, RuleChainMetaData } from '@shared/models/rule-chain.models';
 import { RuleChainService } from '@core/http/rule-chain.service';
+import * as JSZip from 'jszip';
 
 // @dynamic
 @Injectable()
@@ -79,7 +80,7 @@ export class ImportExportService {
       (dashboard) => {
         let name = dashboard.title;
         name = name.toLowerCase().replace(/\W/g, '_');
-        this.exportToPc(this.prepareDashboardExport(dashboard), name + '.json');
+        this.exportToPc(this.prepareDashboardExport(dashboard), name);
       },
       (e) => {
         this.handleExportError(e, 'dashboard.export-failed-error');
@@ -136,7 +137,7 @@ export class ImportExportService {
     const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget);
     let name = widgetItem.widget.config.title;
     name = name.toLowerCase().replace(/\W/g, '_');
-    this.exportToPc(this.prepareExport(widgetItem), name + '.json');
+    this.exportToPc(this.prepareExport(widgetItem), name);
   }
 
   public importWidget(dashboard: Dashboard, targetState: string,
@@ -235,7 +236,7 @@ export class ImportExportService {
         }
         let name = widgetType.name;
         name = name.toLowerCase().replace(/\W/g, '_');
-        this.exportToPc(this.prepareExport(widgetType), name + '.json');
+        this.exportToPc(this.prepareExport(widgetType), name);
       },
       (e) => {
         this.handleExportError(e, 'widget-type.export-failed-error');
@@ -281,7 +282,7 @@ export class ImportExportService {
             }
             let name = widgetsBundle.title;
             name = name.toLowerCase().replace(/\W/g, '_');
-            this.exportToPc(widgetsBundleItem, name + '.json');
+            this.exportToPc(widgetsBundleItem, name);
           },
           (e) => {
             this.handleExportError(e, 'widgets-bundle.export-failed-error');
@@ -383,7 +384,7 @@ export class ImportExportService {
     ).subscribe((ruleChainExport) => {
         let name = ruleChainExport.ruleChain.name;
         name = name.toLowerCase().replace(/\W/g, '_');
-        this.exportToPc(ruleChainExport, name + '.json');
+        this.exportToPc(ruleChainExport, name);
     },
       (e) => {
         this.handleExportError(e, 'rulechain.export-failed-error');
@@ -414,6 +415,19 @@ export class ImportExportService {
     );
   }
 
+  public exportJSZip(data: object, filename: string) {
+    const jsZip: JSZip = new JSZip();
+    for (const keyName in data) {
+      if (data.hasOwnProperty(keyName)) {
+        const valueData = data[keyName];
+        jsZip.file(keyName, valueData);
+      }
+    }
+    jsZip.generateAsync({type: 'blob'}).then(content => {
+      this.downloadFile(content, filename, ZIP_TYPE);
+    });
+  }
+
   private prepareRuleChain(ruleChain: RuleChain): RuleChain {
     ruleChain = this.prepareExport(ruleChain);
     if (ruleChain.firstRuleNodeId) {
@@ -678,13 +692,22 @@ export class ImportExportService {
       console.error('No data');
       return;
     }
-    if (!filename) {
-      filename = 'download.json';
-    }
+    this.exportJson(data, filename);
+  }
+
+  private exportJson(data: any, filename: string) {
     if (isObject(data)) {
       data = JSON.stringify(data, null,  2);
     }
-    const blob = new Blob([data], {type: 'text/json'});
+    this.downloadFile(data, filename, JSON_TYPE);
+  }
+
+  private downloadFile(data: any, filename: string, fileType: FileType) {
+    if (!filename) {
+      filename = 'download';
+    }
+    filename += '.' + fileType.extension;
+    const blob = new Blob([data], {type: fileType.mimeType});
     if (this.window.navigator && this.window.navigator.msSaveOrOpenBlob) {
       this.window.navigator.msSaveOrOpenBlob(blob, filename);
     } else {
@@ -692,7 +715,7 @@ export class ImportExportService {
       const a = this.document.createElement('a');
       a.download = filename;
       a.href = URL.createObjectURL(blob);
-      a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
+      a.dataset.downloadurl = [fileType.mimeType, a.download, a.href].join(':');
       // @ts-ignore
       e.initEvent('click', true, false, this.window,
         0, 0, 0, 0, 0, false, false, false, false, 0, null);
diff --git a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
index 889eaa9c1d..91e8474128 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="order">
     <mat-header-cell *matHeaderCellDef style="min-width: 40px; max-width: 40px; width: 40px"></mat-header-cell>
     <mat-cell *matCellDef="let column; let i = index">
@@ -23,13 +23,13 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="sampleData">
-    <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-example' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="flex: 0 0 30%;"> {{ 'import.column-example' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       {{column.sampleData}}
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef style="width: 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="flex: 0 0 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
         <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
@@ -39,7 +39,7 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="key">
-    <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="flex: 0 0 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-form-field floatLabel="always" hideRequiredMarker
                       *ngIf="isColumnTypeDiffers(column.type)">
@@ -52,5 +52,5 @@
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let column; columns: displayedColumns;"></mat-row>
-</mat-table>
+</table>
 <mat-divider></mat-divider>
diff --git a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
index 9e759ec641..3555efd1e3 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
@@ -19,8 +19,12 @@ import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Va
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityType } from '@shared/models/entity-type.models';
-import { CsvColumnParam, ImportEntityColumnType, importEntityColumnTypeTranslations,
-         importEntityObjectColumns } from '@home/components/import-export/import-export.models';
+import {
+  CsvColumnParam,
+  ImportEntityColumnType,
+  importEntityColumnTypeTranslations,
+  importEntityObjectColumns
+} from '@home/components/import-export/import-export.models';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 
@@ -51,8 +55,6 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
 
   displayedColumns = ['order', 'sampleData', 'type', 'key'];
 
-  importEntityColumnType = ImportEntityColumnType;
-
   columnTypes: AssignmentColumnType[] = [];
 
   columnTypesTranslations = importEntityColumnTypeTranslations;
@@ -123,9 +125,12 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
     this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.name).disabled = isSelectName;
     this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.type).disabled = isSelectType;
     this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.label).disabled = isSelectLabel;
-    this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.isGateway).disabled = isSelectGateway;
     this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.description).disabled = isSelectDescription;
 
+    const isGatewayColumnType = this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.isGateway);
+    if (isGatewayColumnType) {
+      isGatewayColumnType.disabled = isSelectGateway;
+    }
     const accessTokenColumnType = this.columnTypes.find((columnType) => columnType.value === ImportEntityColumnType.accessToken);
     if (accessTokenColumnType) {
       accessTokenColumnType.disabled = isSelectCredentials;
@@ -138,12 +143,10 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
   }
 
   public isColumnTypeDiffers(columnType: ImportEntityColumnType): boolean {
-    return columnType !== ImportEntityColumnType.name &&
-      columnType !== ImportEntityColumnType.type &&
-      columnType !== ImportEntityColumnType.label &&
-      columnType !== ImportEntityColumnType.accessToken &&
-      columnType !== ImportEntityColumnType.isGateway &&
-      columnType !== ImportEntityColumnType.description;
+    return columnType === ImportEntityColumnType.clientAttribute ||
+      columnType === ImportEntityColumnType.sharedAttribute ||
+      columnType === ImportEntityColumnType.serverAttribute ||
+      columnType === ImportEntityColumnType.timeseries;
   }
 
   private columnValid(column: CsvColumnParam): boolean {
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index 9b1686e0ed..15eadfc97b 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -19,30 +19,33 @@
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <span class="tb-entity-table-title">{{(direction == directions.FROM ?
-            'relation.from-relations' : 'relation.to-relations') | translate}}</span>
-        <mat-form-field class="mat-block tb-relation-direction" style="width: 200px;">
-          <mat-label translate>relation.direction</mat-label>
-          <mat-select matInput [ngModel]="direction"
-                      (ngModelChange)="directionChanged($event)">
-            <mat-option *ngFor="let type of directionTypes" [value]="type">
-              {{ directionTypeTranslations.get(directions[type]) | translate }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">
+          <span class="tb-entity-table-title">
+            {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
+          </span>
+          <mat-form-field class="mat-block tb-relation-direction">
+            <mat-label translate>relation.direction</mat-label>
+            <mat-select [ngModel]="direction"
+                        (ngModelChange)="directionChanged($event)">
+              <mat-option *ngFor="let type of directionTypes" [value]="type">
+                {{ directionTypeTranslations.get(directions[type]) | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
         <span fxFlex></span>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+        <button mat-icon-button [disabled]="isLoading$ | async"
                 (click)="addRelation($event)"
                 matTooltip="{{ 'action.add' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>add</mat-icon>
         </button>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="reloadRelations()"
+        <button mat-icon-button [disabled]="isLoading$ | async" (click)="reloadRelations()"
                 matTooltip="{{ 'action.refresh' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>refresh</mat-icon>
         </button>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+        <button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
@@ -51,7 +54,7 @@
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
@@ -62,7 +65,7 @@
                  [(ngModel)]="pageLink.textSearch"
                  placeholder="{{ 'common.enter-search' | translate }}"/>
         </mat-form-field>
-        <button mat-button mat-icon-button (click)="exitFilterMode()"
+        <button mat-icon-button (click)="exitFilterMode()"
                 matTooltip="{{ 'action.close' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>close</mat-icon>
@@ -70,12 +73,11 @@
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
-      <div class="mat-toolbar-tools">
-                <span>
-                  {{ translate.get('relation.selected-relations', {count: dataSource.selection.selected.length}) | async }}
-                </span>
-        <span fxFlex></span>
-        <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+      <div class="mat-toolbar-tools" fxLayoutAlign="space-between center">
+        <span class="tb-entity-table-info">
+          {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
+        </span>
+        <button mat-icon-button [disabled]="isLoading$ | async"
                 matTooltip="{{ 'action.delete' | translate }}"
                 matTooltipPosition="above"
                 (click)="deleteRelations($event)">
@@ -135,13 +137,13 @@
           </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             <div fxFlex fxLayout="row" fxLayoutAlign="end">
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
                       matTooltipPosition="above"
                       (click)="editRelation($event, relation)">
                 <mat-icon>edit</mat-icon>
               </button>
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.delete' | translate }}"
                       matTooltipPosition="above"
                       (click)="deleteRelation($event, relation)">
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss
index 83d66a687a..968939a89e 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -22,6 +24,14 @@
       height: 100%;
       background: #fff;
 
+      .mat-toolbar-tools{
+        min-height: auto;
+      }
+
+      .title-container{
+        overflow: hidden;
+      }
+
       .tb-entity-table-title {
         padding-right: 20px;
         white-space: nowrap;
@@ -32,6 +42,24 @@
       .table-container {
         overflow: auto;
       }
+
+      .tb-entity-table-info{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  @media #{$mat-xs} {
+    .mat-toolbar {
+      height: auto;
+      min-height: 100px;
+
+      .tb-entity-table-title{
+        padding-bottom: 5px;
+        width: 100%;
+      }
     }
   }
 }
@@ -42,6 +70,7 @@
   }
   mat-form-field.tb-relation-direction {
     font-size: 16px;
+    width: 200px;
 
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -50,5 +79,13 @@
     .mat-form-field-underline {
       bottom: 0;
     }
+
+    @media #{$mat-xs} {
+      width: 100%;
+
+      .mat-form-field-infix {
+        width: auto !important;
+      }
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
index 56620aee51..a8c69855c7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-css.raw
@@ -1,21 +1,9 @@
-/*================================================================================*/
-/*=======================  New TB 3.0 / Angular 8 Example  =======================*/
-/*================================================================================*/
-/*
-.edit-entity-form mat-form-field {
-    padding-right: 10px;
-}
-*/
 /*=======================================================================*/
 /*==========  There are two examples: for edit and add entity  ==========*/
 /*=======================================================================*/
 /*========================  Edit entity example  ========================*/
 /*=======================================================================*/
 /*
-.edit-entity-form md-input-container {
-    padding-right: 10px;
-}
-
 .edit-entity-form .boolean-value-input {
     padding-left: 5px;
 }
@@ -41,6 +29,10 @@
     white-space: nowrap;
 }
 
+.relations-list .mat-form-field-infix {
+    width: auto !important;
+}
+
 .relations-list .body {
     padding-right: 5px;
     padding-bottom: 15px;
@@ -56,26 +48,14 @@
     padding-left: 5px;
 }
 
-.relations-list .body md-autocomplete-wrap md-input-container {
-    height: 30px;
-}
-
 .relations-list .body .md-button {
     margin: 0;
 }
-
-.relations-list.old-relations tb-entity-select tb-entity-autocomplete button {
-    display: none;
-}
 */
 /*========================================================================*/
 /*=========================  Add entity example  =========================*/
 /*========================================================================*/
 /*
-.add-entity-form md-input-container {
-    padding-right: 10px;
-}
-
 .add-entity-form .boolean-value-input {
     padding-left: 5px;
 }
@@ -101,6 +81,10 @@
     white-space: nowrap;
 }
 
+.relations-list .mat-form-field-infix {
+    width: auto !important;
+}
+
 .relations-list .body {
     padding-right: 5px;
     padding-bottom: 15px;
@@ -116,10 +100,6 @@
     padding-left: 5px;
 }
 
-.relations-list .body md-autocomplete-wrap md-input-container {
-    height: 30px;
-}
-
 .relations-list .body .md-button {
     margin: 0;
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
index 73d771b9c6..11cda7cdbc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-html.raw
@@ -1,349 +1,355 @@
 <!--=======================================================================-->
-<!--===================  New TB 3.0 / Angular 8 Example   =================-->
-<!--=======================================================================-->
-<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
-<!--      class="edit-entity-form"-->
-<!--      (ngSubmit)="save()" style="width: 600px;">-->
-<!--  <mat-toolbar fxLayout="row" color="primary">-->
-<!--    <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
-<!--    <span fxFlex></span>-->
-<!--    <button mat-button mat-icon-button-->
-<!--            (click)="cancel()"-->
-<!--            type="button">-->
-<!--      <mat-icon class="material-icons">close</mat-icon>-->
-<!--    </button>-->
-<!--  </mat-toolbar>-->
-<!--  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
-<!--  </mat-progress-bar>-->
-<!--  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
-<!--  <div mat-dialog-content>-->
-<!--      <div class="mat-padding" fxLayout="column">-->
-<!--          <mat-form-field class="mat-block">-->
-<!--                <mat-label>Entity name</mat-label>-->
-<!--                <input matInput formControlName="entityName" required>-->
-<!--                <mat-error *ngIf="editEntityFormGroup.get('entityName').hasError('required')">-->
-<!--                    Entity name required-->
-<!--                </mat-error>-->
-<!--           </mat-form-field>-->
-<!--      </div>  -->
-<!--  </div>-->
-<!--  <div mat-dialog-actions fxLayout="row">-->
-<!--    <span fxFlex></span>-->
-<!--    <button mat-button mat-raised-button color="primary"-->
-<!--            type="submit"-->
-<!--            [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">-->
-<!--      {{ 'action.save' | translate }}-->
-<!--    </button>-->
-<!--    <button mat-button color="primary"-->
-<!--            style="margin-right: 20px;"-->
-<!--            type="button"-->
-<!--            [disabled]="(isLoading$ | async)"-->
-<!--            (click)="cancel()" cdkFocusInitial>-->
-<!--      {{ 'action.cancel' | translate }}-->
-<!--    </button>-->
-<!--  </div>-->
-<!--</form>-->
-<!--=======================================================================-->
 <!--=====  There are two example templates: for edit and add entity   =====-->
 <!--=======================================================================-->
 <!--========================  Edit entity example  ========================-->
 <!--=======================================================================-->
 <!-- -->
-<!--<md-dialog aria-label="Edit entity">-->
-<!--    <form name="editEntityForm" class="edit-entity-form" ng-submit="vm.save()">-->
-<!--        <md-toolbar>-->
-<!--            <div class="md-toolbar-tools">-->
-<!--                <h2>Edit {{vm.entityType.toLowerCase()}} {{vm.entityName}}</h2>-->
-<!--                <span flex></span>-->
-<!--                <md-button class="md-icon-button" ng-click="vm.cancel()">-->
-<!--                    <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>-->
-<!--                </md-button>-->
+<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
+<!--      (ngSubmit)="save()"  class="edit-entity-form">-->
+<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--        <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
+<!--        <span fxFlex></span>-->
+<!--        <button mat-icon-button (click)="cancel()" type="button">-->
+<!--            <mat-icon class="material-icons">close</mat-icon>-->
+<!--        </button>-->
+<!--    </mat-toolbar>-->
+<!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
+<!--    </mat-progress-bar>-->
+<!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
+<!--    <div mat-dialog-content fxLayout="column">-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Name</mat-label>-->
+<!--                <input matInput formControlName="entityName" required readonly="">-->
+<!--            </mat-form-field>-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Label</mat-label>-->
+<!--                <input matInput formControlName="entityLabel">-->
+<!--            </mat-form-field>-->
+<!--        </div>-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Type</mat-label>-->
+<!--                <input matInput formControlName="entityType" readonly>-->
+<!--            </mat-form-field>-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Type</mat-label>-->
+<!--                <input matInput formControlName="type" readonly>-->
+<!--            </mat-form-field>-->
+<!--        </div>-->
+<!--        <div formGroupName="attributes" fxLayout="column">-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Latitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="latitude">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Longitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="longitude">-->
+<!--                </mat-form-field>-->
 <!--            </div>-->
-<!--        </md-toolbar>-->
-<!--        <md-dialog-content>-->
-<!--            <div class="md-dialog-content">-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Name</label>-->
-<!--                        <input ng-model="vm.entityName" readonly>-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Type</label>-->
-<!--                        <input ng-model="vm.entityType" readonly>-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Type</label>-->
-<!--                        <input ng-model="vm.type" readonly>-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Latitude</label>-->
-<!--                        <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Longitude</label>-->
-<!--                        <input name="longitude" type="number" step="any" ng-model="vm.attributes.longitude">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                 <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Address</label>-->
-<!--                        <input ng-model="vm.attributes.address">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Owner</label>-->
-<!--                        <input ng-model="vm.attributes.owner">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Integer Value</label>-->
-<!--                        <input name="integerNumber" type="number" step="1" ng-pattern="/^-?[0-9]+$/" ng-model="vm.attributes.number">-->
-<!--                        <div ng-messages="editEntityForm.integerNumber.$error">-->
-<!--                            <div ng-message="pattern">Invalid integer value.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                    <div class="boolean-value-input" layout="column" layout-align="center start" flex>-->
-<!--                        <label class="checkbox-label">Boolean Value</label>-->
-<!--                        <md-checkbox ng-model="vm.attributes.booleanValue" style="margin-bottom: 40px;">-->
-<!--                            {{ (vm.attributes.booleanValue ? "value.true" : "value.false") | translate }}-->
-<!--                        </md-checkbox>-->
-<!--                    </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Address</mat-label>-->
+<!--                    <input matInput formControlName="address">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Owner</mat-label>-->
+<!--                    <input matInput formControlName="owner">-->
+<!--                </mat-form-field>-->
+<!--            </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Integer Value</mat-label>-->
+<!--                    <input type="number" step="1" matInput formControlName="number">-->
+<!--                    <mat-error *ngIf="editEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
+<!--                        Invalid integer value.-->
+<!--                    </mat-error>-->
+<!--                </mat-form-field>-->
+<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                    <label class="checkbox-label">Boolean Value</label>-->
+<!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
+<!--                        {{ (editEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
+<!--                    </mat-checkbox>-->
 <!--                </div>-->
-<!--                <div class="relations-list old-relations">-->
-<!--                    <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--                    <div class="body" ng-show="vm.relations.length">-->
-<!--                        <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">-->
-<!--                            <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">-->
-<!--                                <div flex layout="column">-->
-<!--                                    <div layout="row">-->
-<!--                                        <md-input-container class="md-block" style="min-width: 100px;">-->
-<!--                                            <label>Direction</label>-->
-<!--                                            <md-select ng-disabled="true" required ng-model="relation.direction">-->
-<!--                                                <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
-<!--                                                    {{ ("relation.search-direction." + direction) | translate}}-->
-<!--                                                </md-option>-->
-<!--                                            </md-select>-->
-<!--                                        </md-input-container>-->
-<!--                                        <tb-relation-type-autocomplete ng-disabled="true" flex class="md-block"-->
-<!--                                           the-form="editEntityForm"-->
-<!--                                           ng-model="relation.relationType"-->
-<!--                                           tb-required="true">-->
-<!--                                        </tb-relation-type-autocomplete>-->
-<!--                                    </div>-->
-<!--                                    <div layout="row">-->
-<!--                                        <tb-entity-select flex class="md-block"-->
-<!--                                            the-form="editEntityForm"-->
-<!--                                            ng-disabled="true"-->
-<!--                                            tb-required="true"-->
-<!--                                            ng-model="relation.relatedEntity">-->
-<!--                                        </tb-entity-select>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                                <div layout="column" layout-align="center center">-->
-<!--                                    <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
-<!--                                               ng-click="vm.removeOldRelation($index,relation)" aria-label="Remove">-->
-<!--                                        <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
-<!--                                        <md-icon aria-label="Remove" class="material-icons">-->
-<!--                                            close-->
-<!--                                        </md-icon>-->
-<!--                                    </md-button>-->
-<!--                                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <div class="relations-list old-relations">-->
+<!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
+<!--            <div class="body" [fxShow]="oldRelations().length">-->
+<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
+<!--                     *ngFor="let relation of oldRelations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div fxFlex fxLayout="column">-->
+<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
+<!--                                    <mat-label>Direction</mat-label>-->
+<!--                                    <mat-select formControlName="direction" name="direction">-->
+<!--                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
+<!--                                            {{ ("relation.search-direction." + direction.value) | translate}}-->
+<!--                                        </mat-option>-->
+<!--                                    </mat-select>-->
+<!--                                    <mat-error *ngIf="relation.get('direction').hasError('required')">-->
+<!--                                        Relation direction is required.-->
+<!--                                    </mat-error>-->
+<!--                                </mat-form-field>-->
+<!--                                <tb-relation-type-autocomplete-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        formControlName="relationType"-->
+<!--                                        required="true">-->
+<!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
+<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                                <tb-entity-select-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        required="true"-->
+<!--                                        formControlName="relatedEntity">-->
+<!--                                </tb-entity-select>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                            <button mat-icon-button color="primary"-->
+<!--                                    aria-label="Remove"-->
+<!--                                    type="button"-->
+<!--                                    (click)="removeOldRelation(i)"-->
+<!--                                    matTooltip="Remove relation"-->
+<!--                                    matTooltipPosition="above">-->
+<!--                                <mat-icon>close</mat-icon>-->
+<!--                            </button>-->
 <!--                        </div>-->
 <!--                    </div>-->
 <!--                </div>-->
-<!--                <div class="relations-list">-->
-<!--                    <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
-<!--                    <div class="body" ng-show="vm.newRelations.length">-->
-<!--                        <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.newRelations track by $index">-->
-<!--                            <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px; margin-bottom: 3px;">-->
-<!--                                <div flex layout="column">-->
-<!--                                    <div layout="row">-->
-<!--                                        <md-input-container class="md-block" style="min-width: 100px;">-->
-<!--                                            <label>Direction</label>-->
-<!--                                            <md-select name="direction" required ng-model="relation.direction">-->
-<!--                                                <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
-<!--                                                    {{ ("relation.search-direction." + direction) | translate}}-->
-<!--                                                </md-option>-->
-<!--                                            </md-select>-->
-<!--                                            <div ng-messages="editEntityForm.direction.$error">-->
-<!--                                                <div ng-message="required">Relation direction is required.</div>-->
-<!--                                            </div>-->
-<!--                                        </md-input-container>-->
-<!--                                        <tb-relation-type-autocomplete flex class="md-block"-->
-<!--                                           the-form="editEntityForm"-->
-<!--                                           ng-model="relation.relationType"-->
-<!--                                           tb-required="true">-->
-<!--                                        </tb-relation-type-autocomplete>-->
-<!--                                    </div>-->
-<!--                                    <div layout="row">-->
-<!--                                        <tb-entity-select flex class="md-block"-->
-<!--                                            the-form="editEntityForm"-->
-<!--                                            tb-required="true"-->
-<!--                                            ng-model="relation.relatedEntity">-->
-<!--                                        </tb-entity-select>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                                <div layout="column" layout-align="center center">-->
-<!--                                    <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
-<!--                                               ng-click="vm.removeRelation($index)" aria-label="Remove">-->
-<!--                                        <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
-<!--                                        <md-icon aria-label="Remove" class="material-icons">-->
-<!--                                            close-->
-<!--                                        </md-icon>-->
-<!--                                    </md-button>-->
-<!--                                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <div class="relations-list">-->
+<!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
+<!--            <div class="body" [fxShow]="relations().length">-->
+<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div fxFlex fxLayout="column">-->
+<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
+<!--                                    <mat-label>Direction</mat-label>-->
+<!--                                    <mat-select formControlName="direction" name="direction">-->
+<!--                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
+<!--                                            {{ ("relation.search-direction." + direction.value) | translate}}-->
+<!--                                        </mat-option>-->
+<!--                                    </mat-select>-->
+<!--                                    <mat-error *ngIf="relation.get('direction').hasError('required')">-->
+<!--                                        Relation direction is required.-->
+<!--                                    </mat-error>-->
+<!--                                </mat-form-field>-->
+<!--                                <tb-relation-type-autocomplete-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        formControlName="relationType"-->
+<!--                                        [required]="true">-->
+<!--                                </tb-relation-type-autocomplete>-->
+<!--                            </div>-->
+<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                                <tb-entity-select-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        [required]="true"-->
+<!--                                        formControlName="relatedEntity">-->
+<!--                                </tb-entity-select>-->
 <!--                            </div>-->
 <!--                        </div>-->
+<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                            <button mat-icon-button color="primary"-->
+<!--                                    aria-label="Remove"-->
+<!--                                    type="button"-->
+<!--                                    (click)="removeRelation(i)"-->
+<!--                                    matTooltip="Remove relation"-->
+<!--                                    matTooltipPosition="above">-->
+<!--                                <mat-icon>close</mat-icon>-->
+<!--                            </button>-->
+<!--                        </div>-->
 <!--                    </div>-->
-<!--                   <div>-->
-<!--                       <md-button class="md-primary md-raised" ng-click="vm.addRelation()" aria-label="Add">-->
-<!--                           <md-tooltip md-direction="top">Add Relation</md-tooltip>-->
-<!--                           Add-->
-<!--                       </md-button>-->
-<!--                   </div> -->
 <!--                </div>-->
 <!--            </div>-->
-<!--        </md-dialog-content>-->
-<!--        <md-dialog-actions>-->
-<!--            <md-button type="submit" ng-disabled="editEntityForm.$invalid || !editEntityForm.$dirty" class="md-raised md-primary">Save</md-button>-->
-<!--            <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>-->
-<!--        </md-dialog-actions>-->
-<!--    </form>-->
-<!--</md-dialog>-->
+<!--            <div>-->
+<!--                <button mat-raised-button color="primary"-->
+<!--                        type="button"-->
+<!--                        (click)="addRelation()"-->
+<!--                        matTooltip="Add Relation"-->
+<!--                        matTooltipPosition="above">-->
+<!--                    Add-->
+<!--                </button>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--        <button mat-button mat-raised-button color="primary"-->
+<!--                type="submit"-->
+<!--                [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">-->
+<!--            Save-->
+<!--        </button>-->
+<!--        <button mat-button color="primary"-->
+<!--                style="margin-right: 20px;"-->
+<!--                type="button"-->
+<!--                [disabled]="(isLoading$ | async)"-->
+<!--                (click)="cancel()" cdkFocusInitial>-->
+<!--            Cancel-->
+<!--        </button>-->
+<!--    </div>-->
+<!--</form>-->
 <!---->
 <!--========================================================================-->
 <!--=========================  Add entity example  =========================-->
 <!--========================================================================-->
 <!---->
-<!--<md-dialog aria-label="Add entity">-->
-<!--    <form name="addEntityForm" class="add-entity-form" ng-submit="vm.save()">-->
-<!--        <md-toolbar>-->
-<!--            <div class="md-toolbar-tools">-->
-<!--                <h2>Add entity</h2>-->
-<!--                <span flex></span>-->
-<!--                <md-button class="md-icon-button" ng-click="vm.cancel()">-->
-<!--                    <ng-md-icon icon="close" aria-label="Close"></ng-md-icon>-->
-<!--                </md-button>-->
+<!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
+<!--      (ngSubmit)="save()" class="add-entity-form">-->
+<!--    <mat-toolbar fxLayout="row" color="primary">-->
+<!--        <h2>Add entity</h2>-->
+<!--        <span fxFlex></span>-->
+<!--        <button mat-icon-button (click)="cancel()" type="button">-->
+<!--            <mat-icon class="material-icons">close</mat-icon>-->
+<!--        </button>-->
+<!--    </mat-toolbar>-->
+<!--    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
+<!--    </mat-progress-bar>-->
+<!--    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
+<!--    <div mat-dialog-content fxLayout="column">-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Name</mat-label>-->
+<!--                <input matInput formControlName="entityName" required>-->
+<!--                <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
+<!--                    Entity name is required.-->
+<!--                </mat-error>-->
+<!--            </mat-form-field>-->
+<!--            <mat-form-field fxFlex class="mat-block">-->
+<!--                <mat-label>Entity Label</mat-label>-->
+<!--                <input matInput formControlName="entityLabel" >-->
+<!--            </mat-form-field>-->
+<!--        </div>-->
+<!--        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--            <tb-entity-type-select-->
+<!--                    class="mat-block"-->
+<!--                    formControlName="entityType"-->
+<!--                    [showLabel]="true"-->
+<!--                    [allowedEntityTypes]="allowedEntityTypes"-->
+<!--            ></tb-entity-type-select>-->
+<!--            <tb-entity-subtype-autocomplete-->
+<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
+<!--                    class="mat-block"-->
+<!--                    formControlName="type"-->
+<!--                    [required]="true"-->
+<!--                    [entityType]="'ASSET'"-->
+<!--            ></tb-entity-subtype-autocomplete>-->
+<!--            <tb-entity-subtype-autocomplete-->
+<!--                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
+<!--                    class="mat-block"-->
+<!--                    formControlName="type"-->
+<!--                    [required]="true"-->
+<!--                    [entityType]="'DEVICE'"-->
+<!--            ></tb-entity-subtype-autocomplete>-->
+<!--        </div>-->
+<!--        <div formGroupName="attributes" fxLayout="column">-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Latitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="latitude">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Longitude</mat-label>-->
+<!--                    <input type="number" step="any" matInput formControlName="longitude">-->
+<!--                </mat-form-field>-->
 <!--            </div>-->
-<!--        </md-toolbar>-->
-<!--        <md-dialog-content>-->
-<!--            <div class="md-dialog-content">-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Name</label>-->
-<!--                        <input ng-model="vm.entityName" name=entityName required>-->
-<!--                        <div ng-messages="addEntityForm.entityName.$error">-->
-<!--                            <div ng-message="required">Entity name is required.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                    <tb-entity-type-select class="md-block" style="min-width: 100px; width: 100px;"-->
-<!--                       the-form="addEntityForm"-->
-<!--                       tb-required="true"-->
-<!--                       allowed-entity-types="vm.allowedEntityTypes"-->
-<!--                       ng-model="vm.entityType">-->
-<!--                    </tb-entity-type-select>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Entity Subtype</label>-->
-<!--                        <input ng-model="vm.type" name=type required>-->
-<!--                        <div ng-messages="addEntityForm.type.$error">-->
-<!--                            <div ng-message="required">Entity subtype is required.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Latitude</label>-->
-<!--                        <input name="latitude" type="number" step="any" ng-model="vm.attributes.latitude">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Longitude</label>-->
-<!--                        <input name="longitude" type="number" step="any" ng-model="vm.attributes.longitude">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                 <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Address</label>-->
-<!--                        <input ng-model="vm.attributes.address">-->
-<!--                    </md-input-container>-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Owner</label>-->
-<!--                        <input ng-model="vm.attributes.owner">-->
-<!--                    </md-input-container>-->
-<!--                </div>-->
-<!--                <div layout="row">-->
-<!--                    <md-input-container flex class="md-block">-->
-<!--                        <label>Integer Value</label>-->
-<!--                        <input name="integerNumber" type="number" step="1" ng-pattern="/^-?[0-9]+$/" ng-model="vm.attributes.number">-->
-<!--                        <div ng-messages="addEntityForm.integerNumber.$error">-->
-<!--                            <div ng-message="pattern">Invalid integer value.</div>-->
-<!--                        </div>-->
-<!--                    </md-input-container>-->
-<!--                    <div class="boolean-value-input" layout="column" layout-align="center start" flex>-->
-<!--                        <label class="checkbox-label">Boolean Value</label>-->
-<!--                        <md-checkbox ng-model="vm.attributes.booleanValue" style="margin-bottom: 40px;">-->
-<!--                            {{ (vm.attributes.booleanValue ? "value.true" : "value.false") | translate }}-->
-<!--                        </md-checkbox>-->
-<!--                    </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Address</mat-label>-->
+<!--                    <input matInput formControlName="address">-->
+<!--                </mat-form-field>-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Owner</mat-label>-->
+<!--                    <input matInput formControlName="owner">-->
+<!--                </mat-form-field>-->
+<!--            </div>-->
+<!--            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                <mat-form-field fxFlex class="mat-block">-->
+<!--                    <mat-label>Integer Value</mat-label>-->
+<!--                    <input type="number" step="1" matInput formControlName="number">-->
+<!--                    <mat-error *ngIf="addEntityFormGroup.get('attributes').get('number').hasError('pattern')">-->
+<!--                        Invalid integer value.-->
+<!--                    </mat-error>-->
+<!--                </mat-form-field>-->
+<!--                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
+<!--                    <label class="checkbox-label">Boolean Value</label>-->
+<!--                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
+<!--                        {{ (addEntityFormGroup.get('attributes').get('booleanValue').value ? "value.true" : "value.false") | translate }}-->
+<!--                    </mat-checkbox>-->
 <!--                </div>-->
-<!--                <div class="relations-list">-->
-<!--                    <div class="md-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
-<!--                    <div class="body" ng-show="vm.relations.length">-->
-<!--                        <div class="row" layout="row" layout-align="start center" ng-repeat="relation in vm.relations track by $index">-->
-<!--                            <div class="md-whiteframe-1dp" flex layout="row" style="padding-left: 5px;">-->
-<!--                                <div flex layout="column">-->
-<!--                                    <div layout="row">-->
-<!--                                        <md-input-container class="md-block" style="min-width: 100px;">-->
-<!--                                            <label>Direction</label>-->
-<!--                                            <md-select name="direction" required ng-model="relation.direction">-->
-<!--                                                <md-option ng-repeat="direction in vm.entitySearchDirection" ng-value="direction">-->
-<!--                                                    {{ ("relation.search-direction." + direction) | translate}}-->
-<!--                                                </md-option>-->
-<!--                                            </md-select>-->
-<!--                                            <div ng-messages="addEntityForm.direction.$error">-->
-<!--                                                <div ng-message="required">Relation direction is required.</div>-->
-<!--                                            </div>-->
-<!--                                        </md-input-container>-->
-<!--                                        <tb-relation-type-autocomplete flex class="md-block"-->
-<!--                                           the-form="addEntityForm"-->
-<!--                                           ng-model="relation.relationType"-->
-<!--                                           tb-required="true">-->
-<!--                                        </tb-relation-type-autocomplete>-->
-<!--                                    </div>-->
-<!--                                    <div layout="row">-->
-<!--                                        <tb-entity-select flex class="md-block"-->
-<!--                                            the-form="addEntityForm"-->
-<!--                                            tb-required="true"-->
-<!--                                            ng-model="relation.relatedEntity">-->
-<!--                                        </tb-entity-select>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                                <div layout="column" layout-align="center center">-->
-<!--                                    <md-button class="md-icon-button md-primary" style="width: 40px; min-width: 40px;"-->
-<!--                                               ng-click="vm.removeRelation($index)" aria-label="Remove">-->
-<!--                                        <md-tooltip md-direction="top">Remove relation</md-tooltip>-->
-<!--                                        <md-icon aria-label="Remove" class="material-icons">-->
-<!--                                            close-->
-<!--                                        </md-icon>-->
-<!--                                    </md-button>-->
-<!--                                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--        <div class="relations-list">-->
+<!--            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
+<!--            <div class="body" [fxShow]="relations().length">-->
+<!--                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
+<!--                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
+<!--                        <div fxFlex fxLayout="column">-->
+<!--                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">-->
+<!--                                <mat-form-field class="mat-block" style="min-width: 100px;">-->
+<!--                                    <mat-label>Direction</mat-label>-->
+<!--                                    <mat-select formControlName="direction" name="direction">-->
+<!--                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">-->
+<!--                                            {{ ("relation.search-direction." + direction.value) | translate}}-->
+<!--                                        </mat-option>-->
+<!--                                    </mat-select>-->
+<!--                                    <mat-error *ngIf="relation.get('direction').hasError('required')">-->
+<!--                                        Relation direction is required.-->
+<!--                                    </mat-error>-->
+<!--                                </mat-form-field>-->
+<!--                                <tb-relation-type-autocomplete-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        formControlName="relationType"-->
+<!--                                        [required]="true">-->
+<!--                                </tb-relation-type-autocomplete>-->
 <!--                            </div>-->
+<!--                            <div fxLayout="row" fxLayout.xs="column">-->
+<!--                                <tb-entity-select-->
+<!--                                        fxFlex class="mat-block"-->
+<!--                                        [required]="true"-->
+<!--                                        formControlName="relatedEntity">-->
+<!--                                </tb-entity-select>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                        <div fxLayout="column" fxLayoutAlign="center center">-->
+<!--                            <button mat-icon-button color="primary"-->
+<!--                                    aria-label="Remove"-->
+<!--                                    type="button"-->
+<!--                                    (click)="removeRelation(i)"-->
+<!--                                    matTooltip="Remove relation"-->
+<!--                                    matTooltipPosition="above">-->
+<!--                                <mat-icon>close</mat-icon>-->
+<!--                            </button>-->
 <!--                        </div>-->
 <!--                    </div>-->
-<!--                   <div>-->
-<!--                       <md-button class="md-primary md-raised" ng-click="vm.addRelation()" aria-label="Add">-->
-<!--                           <md-tooltip md-direction="top">Add Relation</md-tooltip>-->
-<!--                           Add-->
-<!--                       </md-button>-->
-<!--                   </div> -->
 <!--                </div>-->
 <!--            </div>-->
-<!--        </md-dialog-content>-->
-<!--        <md-dialog-actions>-->
-<!--            <md-button type="submit" ng-disabled="addEntityForm.$invalid || !addEntityForm.$dirty" class="md-raised md-primary">Create</md-button>-->
-<!--            <md-button ng-click="vm.cancel()" class="md-primary">Cancel</md-button>-->
-<!--        </md-dialog-actions>-->
-<!--    </form>-->
-<!--</md-dialog>-->
+<!--            <div>-->
+<!--                <button mat-raised-button color="primary"-->
+<!--                        type="button"-->
+<!--                        (click)="addRelation()"-->
+<!--                        matTooltip="Add Relation"-->
+<!--                        matTooltipPosition="above">-->
+<!--                    Add-->
+<!--                </button>-->
+<!--            </div>-->
+<!--        </div>-->
+<!--    </div>-->
+<!--    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
+<!--        <button mat-button mat-raised-button color="primary"-->
+<!--                type="submit"-->
+<!--                [disabled]="(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty">-->
+<!--            Create-->
+<!--        </button>-->
+<!--        <button mat-button color="primary"-->
+<!--                style="margin-right: 20px;"-->
+<!--                type="button"-->
+<!--                [disabled]="(isLoading$ | async)"-->
+<!--                (click)="cancel()" cdkFocusInitial>-->
+<!--            Cancel-->
+<!--        </button>-->
+<!--    </div>-->
+<!--</form>-->
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
index 02a97e7d6e..83986b4812 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-sample-js.raw
@@ -1,83 +1,34 @@
-/*================================================================================*/
-/*=======================  New TB 3.0 / Angular 8 Example  =======================*/
-/*================================================================================*/
-//
-//let $injector = widgetContext.$scope.$injector;
-//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
-//
-//deviceService.getDevice(entityId.id).subscribe(function(device) {
-//   console.log(device);
-//});
-//
-//
-//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
-//
-//customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe(
-//    function(res) {
-//        console.log(res);
-//    }
-//);
-//
-//function EditEntityDialogController(instance) {
-//    let vm = instance;
-//    vm.entityId = entityId;
-//    vm.entityName = entityName;
-//    vm.entityType = entityId.entityType;
-//
-//    vm.editEntityFormGroup = vm.fb.group({
-//      entityName: [vm.entityName, [vm.validators.required]]
-//    });
-//
-//    vm.cancel = function() {
-//        vm.dialogRef.close(null);
-//    };
-//
-//    vm.save = function() {
-//        const newVal = vm.editEntityFormGroup.value;
-//        vm.dialogRef.close(newVal);
-//    };
-//}
-//
 /*=======================================================================*/
 /*=====  There are three examples: for delete, edit and add entity  =====*/
 /*=======================================================================*/
 /*=======================  Delete entity example  =======================*/
 /*=======================================================================*/
 //
-//var $injector = widgetContext.$scope.$injector;
-//var $mdDialog = $injector.get('$mdDialog'),
-//    $document = $injector.get('$document'),
-//    types = $injector.get('types'),
-//    assetService = $injector.get('assetService'),
-//    deviceService = $injector.get('deviceService')
-//    $rootScope = $injector.get('$rootScope'),
-//    $q = $injector.get('$q');
+//let $injector = widgetContext.$scope.$injector;
+//let dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));
+//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
+//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
 //
 //openDeleteEntityDialog();
 //
 //function openDeleteEntityDialog() {
-//    var title = 'Delete ' + entityId.entityType
-//        .toLowerCase() + ' ' +
-//        entityName;
-//    var content = 'Are you sure you want to delete the ' +
-//        entityId.entityType.toLowerCase() + ' ' +
-//        entityName + '?';
-//    var confirm = $mdDialog.confirm()
-//        .targetEvent($event)
-//        .title(title)
-//        .htmlContent(content)
-//        .ariaLabel(title)
-//        .cancel('Cancel')
-//        .ok('Delete');
-//    $mdDialog.show(confirm).then(function() {
-//        deleteEntity();
-//    })
+//    let title = 'Delete ' + entityId.entityType.toLowerCase() + ' ' +
+//                 entityName;
+//    let content = 'Are you sure you want to delete the ' +
+//                  entityId.entityType.toLowerCase() + ' ' + entityName + '?';
+//    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(
+//        function(result) {
+//            if (result) {
+//                deleteEntity();
+//            }
+//        }
+//    );
 //}
 //
 //function deleteEntity() {
-//    deleteEntityPromise(entityId).then(
+//    deleteEntityObservable(entityId).subscribe(
 //        function success() {
-//            updateAliasData();
+//            widgetContext.updateAliases();
 //        },
 //        function fail() {
 //            showErrorDialog();
@@ -85,228 +36,243 @@
 //    );
 //}
 //
-//function deleteEntityPromise(entityId) {
-//    if (entityId.entityType == types.entityType.asset) {
+//function deleteEntityObservable(entityId) {
+//    if (entityId.entityType == "ASSET") {
 //        return assetService.deleteAsset(entityId.id);
-//    } else if (entityId.entityType == types.entityType.device) {
+//    } else if (entityId.entityType == "DEVICE") {
 //        return deviceService.deleteDevice(entityId.id);
 //    }
 //}
 //
-//function updateAliasData() {
-//    var aliasIds = [];
-//    for (var id in widgetContext.aliasController.resolvedAliases) {
-//        aliasIds.push(id);
-//    }
-//    var tasks = [];
-//    aliasIds.forEach(function(aliasId) {
-//        widgetContext.aliasController.setAliasUnresolved(aliasId);
-//        tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
-//    });
-//    $q.all(tasks).then(function() {
-//        $rootScope.$broadcast('entityAliasesChanged', aliasIds);
-//    });
-//}
-//
 //function showErrorDialog() {
-//    var title = 'Error';
-//    var content = 'An error occurred while deleting the entity. Please try again.';
-//    var alert = $mdDialog.alert()
-//        .title(title)
-//        .htmlContent(content)
-//        .ariaLabel(title)
-//        .parent(angular.element($document[0].body))
-//        .targetEvent($event)
-//        .multiple(true)
-//        .clickOutsideToClose(true)
-//        .ok('CLOSE');
-//    $mdDialog.show(alert);
+//    let title = 'Error';
+//    let content = 'An error occurred while deleting the entity. Please try again.';
+//    dialogs.alert(title, content, 'CLOSE').subscribe(
+//        function(result) {}
+//    );
 //}
 //
 /*=======================================================================*/
 /*========================  Edit entity example  ========================*/
 /*=======================================================================*/
 //
-//var $injector = widgetContext.$scope.$injector;
-//var $mdDialog = $injector.get('$mdDialog'),
-//    $document = $injector.get('$document'),
-//    $q = $injector.get('$q'),
-//    types = $injector.get('types'),
-//    $rootScope = $injector.get('$rootScope'),
-//    entityService = $injector.get('entityService'),
-//    attributeService = $injector.get('attributeService'),
-//    entityRelationService = $injector.get('entityRelationService');
+//let $injector = widgetContext.$scope.$injector;
+//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
+//let entityService = $injector.get(widgetContext.servicesMap.get('entityService'));
+//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
+//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
+//let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
+//let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
 //
 //openEditEntityDialog();
 //
 //function openEditEntityDialog() {
-//    $mdDialog.show({
-//        controller: ['$scope','$mdDialog', EditEntityDialogController],
-//        controllerAs: 'vm',
-//        template: htmlTemplate,
-//        locals: {
-//            entityId: entityId
-//        },
-//        parent: angular.element($document[0].body),
-//        targetEvent: $event,
-//        multiple: true,
-//        clickOutsideToClose: false
-//    });
+//    customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();
 //}
 //
-//function EditEntityDialogController($scope,$mdDialog) {
-//    var vm = this;
-//    vm.entityId = entityId;
+//function EditEntityDialogController(instance) {
+//    let vm = instance;
+//
 //    vm.entityName = entityName;
 //    vm.entityType = entityId.entityType;
-//    vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device];
-//    vm.allowedRelatedEntityTypes = [];
-//    vm.entitySearchDirection = types.entitySearchDirection;
+//    vm.entitySearchDirection = {
+//        from: "FROM",
+//        to: "TO"
+//    };
 //    vm.attributes = {};
-//    vm.serverAttributes = {};
-//    vm.relations = [];
-//    vm.newRelations = [];
+//    vm.oldRelationsData = [];
 //    vm.relationsToDelete = [];
+//    vm.entity = {};
+//
+//    vm.editEntityFormGroup = vm.fb.group({
+//        entityName: ['', [vm.validators.required]],
+//        entityType: [null],
+//        entityLabel: [null],
+//        type: ['', [vm.validators.required]],
+//        attributes: vm.fb.group({
+//            latitude: [null],
+//            longitude: [null],
+//            address: [null],
+//            owner: [null],
+//            number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
+//            booleanValue: [false]
+//        }),
+//        oldRelations: vm.fb.array([]),
+//        relations: vm.fb.array([])
+//    });
+//
 //    getEntityInfo();
 //
+//    vm.cancel = function() {
+//        vm.dialogRef.close(null);
+//    };
+//
+//    vm.relations = function() {
+//        return vm.editEntityFormGroup.get('relations');
+//    };
+//
+//    vm.oldRelations = function() {
+//        return vm.editEntityFormGroup.get('oldRelations');
+//    };
+//
 //    vm.addRelation = function() {
-//        var relation = {
-//            direction: null,
-//            relationType: null,
-//            relatedEntity: null
-//        };
-//        vm.newRelations.push(relation);
-//        $scope.editEntityForm.$setDirty();
+//        vm.relations().push(vm.fb.group({
+//            relatedEntity: [null, [vm.validators.required]],
+//            relationType: [null, [vm.validators.required]],
+//            direction: [null, [vm.validators.required]]
+//        }));
 //    };
+//
+//    function addOldRelation() {
+//        vm.oldRelations().push(vm.fb.group({
+//            relatedEntity: [{value: null, disabled: true}, [vm.validators.required]],
+//            relationType: [{value: null, disabled: true}, [vm.validators.required]],
+//            direction: [{value: null, disabled: true}, [vm.validators.required]]
+//        }));
+//    }
+//
 //    vm.removeRelation = function(index) {
-//        if (index > -1) {
-//            vm.newRelations.splice(index, 1);
-//            $scope.editEntityForm.$setDirty();
-//        }
+//        vm.relations().removeAt(index);
+//        vm.relations().markAsDirty();
 //    };
-//    vm.removeOldRelation = function(index, relation) {
-//        if (index > -1) {
-//            vm.relations.splice(index, 1);
-//            vm.relationsToDelete.push(relation);
-//            $scope.editEntityForm.$setDirty();
-//        }
+//
+//    vm.removeOldRelation = function(index) {
+//        vm.oldRelations().removeAt(index);
+//        vm.relationsToDelete.push(vm.oldRelationsData[index]);
+//        vm.oldRelations().markAsDirty();
 //    };
+//
 //    vm.save = function() {
-//        saveAttributes();
-//        saveRelations();
-//        $scope.editEntityForm.$setPristine();
-//    };
-//    vm.cancel = function() {
-//        $mdDialog.hide();
+//        vm.editEntityFormGroup.markAsPristine();
+//        widgetContext.rxjs.forkJoin([
+//            saveAttributes(entityId),
+//            saveRelations(entityId),
+//            saveEntity()
+//        ]).subscribe(
+//            function () {
+//                widgetContext.updateAliases();
+//                vm.dialogRef.close(null);
+//            }
+//        );
 //    };
 //
 //    function getEntityAttributes(attributes) {
 //        for (var i = 0; i < attributes.length; i++) {
-//              vm.attributes[attributes[i].key] = attributes[i].value;
+//            vm.attributes[attributes[i].key] = attributes[i].value;
 //        }
-//        vm.serverAttributes = angular.copy(vm.attributes);
 //    }
 //
 //    function getEntityRelations(relations) {
-//        var relationsFrom = relations[0];
-//        var relationsTo = relations[1];
-//        for (var i=0; i < relationsFrom.length; i++) {
-//            var relation = {
-//                direction: types.entitySearchDirection.from,
+//        let relationsFrom = relations[0];
+//        let relationsTo = relations[1];
+//        for (let i=0; i < relationsFrom.length; i++) {
+//            let relation = {
+//                direction: 'FROM',
 //                relationType: relationsFrom[i].type,
 //                relatedEntity: relationsFrom[i].to
 //            };
-//            vm.relations.push(relation);
+//            vm.oldRelationsData.push(relation);
+//            addOldRelation();
 //        }
-//        for (var i=0; i < relationsTo.length; i++) {
-//            var relation = {
-//                direction: types.entitySearchDirection.to,
+//        for (let i=0; i < relationsTo.length; i++) {
+//            let relation = {
+//                direction: 'TO',
 //                relationType: relationsTo[i].type,
 //                relatedEntity: relationsTo[i].from
 //            };
-//            vm.relations.push(relation);
+//            vm.oldRelationsData.push(relation);
+//            addOldRelation();
 //        }
 //    }
 //
 //    function getEntityInfo() {
-//        entityService.getEntity(entityId.entityType, entityId.id).then(
-//            function(entity) {
-//                vm.entity = entity;
-//                vm.type = vm.entity.type;
-//            });
-//        attributeService.getEntityAttributesValues(entityId.entityType, entityId.id, 'SERVER_SCOPE').then(
-//            function(data){
-//                if (data.length) {
-//                    getEntityAttributes(data);
+//        entityService.getEntity(entityId.entityType, entityId.id).subscribe(function (entity) {
+//            vm.entity = entity;
+//            widgetContext.rxjs.forkJoin([
+//                entityRelationService.findInfoByFrom(entityId),
+//                entityRelationService.findInfoByTo(entityId),
+//                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE')
+//            ]).subscribe(
+//                function (data) {
+//                    getEntityRelations(data.slice(0,2));
+//                    getEntityAttributes(data[2]);
+//                    vm.editEntityFormGroup.patchValue({
+//                        entityName: vm.entity.name,
+//                        entityType: vm.entityType,
+//                        entityLabel: vm.entity.label,
+//                        type: vm.entity.type,
+//                        attributes: vm.attributes,
+//                        oldRelations: vm.oldRelationsData
+//                    }, {emitEvent: false});
 //                }
-//            });
-//        $q.all([entityRelationService.findInfoByFrom(entityId.id, entityId.entityType), entityRelationService.findInfoByTo(entityId.id, entityId.entityType)]).then(
-//            function(relations){
-//                getEntityRelations(relations);
-//            });
+//            );
+//        });
 //    }
 //
-//    function saveAttributes() {
-//        var attributesArray = [];
-//        for (var key in vm.attributes) {
-//            if (vm.attributes[key] !== vm.serverAttributes[key]) {
-//                attributesArray.push({key: key, value: vm.attributes[key]});
+//    function saveEntity() {
+//        const formValues = vm.editEntityFormGroup.value;
+//        if (vm.entity.label !== formValues.entityLabel){
+//            vm.entity.label = formValues.entityLabel;
+//            if (formValues.entityType == 'ASSET') {
+//                return assetService.saveAsset(vm.entity);
+//            } else if (formValues.entityType == 'DEVICE') {
+//                return deviceService.saveDevice(vm.entity);
+//            }
+//        } else {
+//            return widgetContext.rxjs.of([]);
+//        }
+//    }
+//
+//    function saveAttributes(entityId) {
+//        let attributes = vm.editEntityFormGroup.get('attributes').value;
+//        let attributesArray = [];
+//        for (let key in attributes) {
+//            if (attributes[key] !== vm.attributes[key]) {
+//                attributesArray.push({key: key, value: attributes[key]});
 //            }
 //        }
 //        if (attributesArray.length > 0) {
-//            attributeService.saveEntityAttributes(entityId.entityType, entityId.id, \"SERVER_SCOPE\", attributesArray);
+//            return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
 //    }
 //
-//    function saveRelations() {
-//        var tasks = [];
-//        for (var i=0; i < vm.newRelations.length; i++) {
-//            var relation = {
-//                type: vm.newRelations[i].relationType
+//    function saveRelations(entityId) {
+//        let relations = vm.editEntityFormGroup.get('relations').value;
+//        let tasks = [];
+//        for(let i=0; i < relations.length; i++) {
+//            let relation = {
+//                type: relations[i].relationType,
+//                typeGroup: 'COMMON'
 //            };
-//            if (vm.newRelations[i].direction == types.entitySearchDirection.from) {
-//                relation.to = vm.newRelations[i].relatedEntity;
+//            if (relations[i].direction == 'FROM') {
+//                relation.to = relations[i].relatedEntity;
 //                relation.from = entityId;
 //            } else {
 //                relation.to = entityId;
-//                relation.from = vm.newRelations[i].relatedEntity;
+//                relation.from = relations[i].relatedEntity;
 //            }
 //            tasks.push(entityRelationService.saveRelation(relation));
 //        }
-//        for (var i=0; i < vm.relationsToDelete.length; i++) {
-//            var relation = {
+//        for (let i=0; i < vm.relationsToDelete.length; i++) {
+//            let relation = {
 //                type: vm.relationsToDelete[i].relationType
 //            };
-//            if (vm.relationsToDelete[i].direction == types.entitySearchDirection.from) {
+//            if (vm.relationsToDelete[i].direction == 'FROM') {
 //                relation.to = vm.relationsToDelete[i].relatedEntity;
 //                relation.from = entityId;
 //            } else {
 //                relation.to = entityId;
 //                relation.from = vm.relationsToDelete[i].relatedEntity;
 //            }
-//            tasks.push(entityRelationService.deleteRelation(relation.from.id, relation.from.entityType, relation.type, relation.to.id, relation.to.entityType));
+//            tasks.push(entityRelationService.deleteRelation(relation.from, relation.type, relation.to));
 //        }
-//        $q.all(tasks).then(function(){
-//            vm.relations = vm.relations.concat(vm.newRelations);
-//            vm.newRelations = [];
-//            vm.relationsToDelete = [];
-//            updateAliasData();
-//        });
-//    }
-//
-//    function updateAliasData() {
-//        var aliasIds = [];
-//        for (var id in widgetContext.aliasController.resolvedAliases) {
-//            aliasIds.push(id);
+//        if (tasks.length > 0) {
+//            return widgetContext.rxjs.forkJoin(tasks);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
-//        var tasks = [];
-//        aliasIds.forEach(function(aliasId) {
-//            widgetContext.aliasController.setAliasUnresolved(aliasId);
-//            tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
-//        });
-//        $q.all(tasks).then(function() {
-//            $rootScope.$broadcast('entityAliasesChanged', aliasIds);
-//        });
 //    }
 //}
 //
@@ -314,124 +280,132 @@
 /*=========================  Add entity example  =========================*/
 /*========================================================================*/
 //
-//var $injector = widgetContext.$scope.$injector;
-//var $mdDialog = $injector.get('$mdDialog'),
-//    $document = $injector.get('$document'),
-//    $q = $injector.get('$q'),
-//    $rootScope = $injector.get('$rootScope'),
-//    types = $injector.get('types'),
-//    assetService = $injector.get('assetService'),
-//    deviceService = $injector.get('deviceService'),
-//    attributeService = $injector.get('attributeService'),
-//    entityRelationService = $injector.get('entityRelationService');
+//let $injector = widgetContext.$scope.$injector;
+//let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
+//let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
+//let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
+//let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
+//let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));
 //
 //openAddEntityDialog();
 //
 //function openAddEntityDialog() {
-//    $mdDialog.show({
-//        controller: ['$scope','$mdDialog', AddEntityDialogController],
-//        controllerAs: 'vm',
-//        template: htmlTemplate,
-//        locals: {
-//            entityId: entityId
-//        },
-//        parent: angular.element($document[0].body),
-//        targetEvent: $event,
-//        multiple: true,
-//        clickOutsideToClose: false
-//    });
+//    customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();
 //}
 //
-//function AddEntityDialogController($scope, $mdDialog) {
-//    var vm = this;
-//    vm.allowedEntityTypes = [types.entityType.asset, types.entityType.device];
-//    vm.allowedRelatedEntityTypes = [];
-//    vm.entitySearchDirection = types.entitySearchDirection;
-//    vm.attributes = {};
-//    vm.relations = [];
+//function AddEntityDialogController(instance) {
+//    let vm = instance;
+//
+//    vm.allowedEntityTypes = ['ASSET', 'DEVICE'];
+//    vm.entitySearchDirection = {
+//        from: "FROM",
+//        to: "TO"
+//    }
+//
+//    vm.addEntityFormGroup = vm.fb.group({
+//      entityName: ['', [vm.validators.required]],
+//      entityType: ['DEVICE'],
+//      entityLabel: [null],
+//      type: ['', [vm.validators.required]],
+//      attributes: vm.fb.group({
+//          latitude: [null],
+//          longitude: [null],
+//          address: [null],
+//          owner: [null],
+//          number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
+//          booleanValue: [null]
+//      }),
+//      relations: vm.fb.array([])
+//    });
+//
+//    vm.cancel = function() {
+//        vm.dialogRef.close(null);
+//    };
+//
+//    vm.relations = function() {
+//        return vm.addEntityFormGroup.get('relations');
+//    };
 //
 //    vm.addRelation = function() {
-//        var relation = {
-//            direction: null,
-//            relationType: null,
-//            relatedEntity: null
-//        };
-//        vm.relations.push(relation);
+//        vm.relations().push(vm.fb.group({
+//          relatedEntity: [null, [vm.validators.required]],
+//          relationType: [null, [vm.validators.required]],
+//          direction: [null, [vm.validators.required]]
+//        }));
 //    };
+//
 //    vm.removeRelation = function(index) {
-//        if (index > -1) {
-//            vm.relations.splice(index, 1);
-//        }
+//        vm.relations().removeAt(index);
+//        vm.relations().markAsDirty();
 //    };
+//
 //    vm.save = function() {
-//        $scope.addEntityForm.$setPristine();
-//        saveEntityPromise().then(
+//        vm.addEntityFormGroup.markAsPristine();
+//        saveEntityObservable().subscribe(
 //            function (entity) {
-//                saveAttributes(entity.id);
-//                saveRelations(entity.id);
-//                $mdDialog.hide();
+//                widgetContext.rxjs.forkJoin([
+//                    saveAttributes(entity.id),
+//                    saveRelations(entity.id)
+//                ]).subscribe(
+//                    function () {
+//                        widgetContext.updateAliases();
+//                        vm.dialogRef.close(null);
+//                    }
+//                );
 //            }
 //        );
 //    };
-//    vm.cancel = function() {
-//        $mdDialog.hide();
-//    };
 //
-//
-//    function saveEntityPromise() {
-//        var entity = {
-//            name: vm.entityName,
-//            type: vm.type
+//    function saveEntityObservable() {
+//        const formValues = vm.addEntityFormGroup.value;
+//        let entity = {
+//            name: formValues.entityName,
+//            type: formValues.type,
+//            label: formValues.entityLabel
 //        };
-//        if (vm.entityType == types.entityType.asset) {
+//        if (formValues.entityType == 'ASSET') {
 //            return assetService.saveAsset(entity);
-//        } else if (vm.entityType == types.entityType.device) {
+//        } else if (formValues.entityType == 'DEVICE') {
 //            return deviceService.saveDevice(entity);
 //        }
 //    }
 //
 //    function saveAttributes(entityId) {
-//        var attributesArray = [];
-//        for (var key in vm.attributes) {
-//            attributesArray.push({key: key, value: vm.attributes[key]});
+//        let attributes = vm.addEntityFormGroup.get('attributes').value;
+//        let attributesArray = [];
+//        for (let key in attributes) {
+//            if(attributes[key] !== null) {
+//                attributesArray.push({key: key, value: attributes[key]});
+//            }
 //        }
 //        if (attributesArray.length > 0) {
-//            attributeService.saveEntityAttributes(entityId.entityType, entityId.id, \"SERVER_SCOPE\", attributesArray);
+//            return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
 //    }
 //
 //    function saveRelations(entityId) {
-//        var tasks = [];
-//        for (var i=0; i < vm.relations.length; i++) {
-//            var relation = {
-//                type: vm.relations[i].relationType
+//        let relations = vm.addEntityFormGroup.get('relations').value;
+//        let tasks = [];
+//        for(let i=0; i < relations.length; i++) {
+//            let relation = {
+//                type: relations[i].relationType,
+//                typeGroup: 'COMMON'
 //            };
-//            if (vm.relations[i].direction == types.entitySearchDirection.from) {
-//                relation.to = vm.relations[i].relatedEntity;
+//            if (relations[i].direction == 'FROM') {
+//                relation.to = relations[i].relatedEntity;
 //                relation.from = entityId;
 //            } else {
 //                relation.to = entityId;
-//                relation.from = vm.relations[i].relatedEntity;
+//                relation.from = relations[i].relatedEntity;
 //            }
 //            tasks.push(entityRelationService.saveRelation(relation));
 //        }
-//        $q.all(tasks).then(function(){
-//            updateAliasData();
-//        });
-//    }
-//
-//    function updateAliasData() {
-//        var aliasIds = [];
-//        for (var id in widgetContext.aliasController.resolvedAliases) {
-//            aliasIds.push(id);
+//        if (tasks.length > 0) {
+//            return widgetContext.rxjs.forkJoin(tasks);
+//        } else {
+//            return widgetContext.rxjs.of([]);
 //        }
-//        var tasks = [];
-//        aliasIds.forEach(function(aliasId) {
-//            widgetContext.aliasController.setAliasUnresolved(aliasId);
-//            tasks.push(widgetContext.aliasController.getAliasInfo(aliasId));
-//        });
-//        $q.all(tasks).then(function() {
-//            $rootScope.$broadcast('entityAliasesChanged', aliasIds);
-//        });
 //    }
 //}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
new file mode 100644
index 0000000000..7e7feb4136
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.html
@@ -0,0 +1,262 @@
+<!--
+
+    Copyright © 2016-2020 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<form #formContainer class="gateway-form"
+      [formGroup]="gatewayConfigurationGroup"
+      tb-toast toastTarget="{{ toastTargetId }}"
+      (ngSubmit)="save()">
+  <mat-accordion multi="true" class="mat-body-1">
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <div class="tb-panel-title">{{ 'gateway.thingsboard' | translate | uppercase }}</div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+        <tb-entity-gateway-select
+          formControlName="gateway"
+          [newGatewayType]="gatewayType"
+          (gatewayNameExist)="gatewayExist()"
+          required
+        >
+      </tb-entity-gateway-select>
+      <div fxLayout="column">
+        <mat-form-field fxFlex>
+          <mat-label>{{'gateway.security-type' | translate }}</mat-label>
+          <mat-select formControlName="securityType" >
+            <mat-option *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">
+              {{ securityType.value.toString() | translate }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
+        <mat-form-field fxFlex>
+          <mat-label>{{ 'gateway.thingsboard-host' | translate }}</mat-label>
+          <input matInput type="text" formControlName="host">
+          <mat-error *ngIf="gatewayConfigurationGroup.get('host').hasError('required')" translate>
+            gateway.thingsboard-host-required
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field fxFlex>
+          <mat-label>{{ 'gateway.thingsboard-port' | translate }}</mat-label>
+          <input matInput type="number" formControlName="port">
+          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('required')" translate>
+            gateway.thingsboard-port-required
+          </mat-error>
+          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('min')" translate>
+            gateway.thingsboard-port-min
+          </mat-error>
+          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('max')" translate>
+            gateway.thingsboard-port-max
+          </mat-error>
+          <mat-error *ngIf="gatewayConfigurationGroup.get('port').hasError('pattern')" translate>
+            gateway.thingsboard-port-pattern
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <div *ngIf="gatewayConfigurationGroup.get('securityType').value == 'tls'" fxLayout="column">
+        <mat-form-field fxFlex>
+          <mat-label>{{ 'gateway.tls-path-ca-certificate' | translate }}</mat-label>
+          <input matInput type="text" formControlName="caCertPath">
+        </mat-form-field>
+        <mat-form-field fxFlex>
+          <mat-label>{{ 'gateway.tls-path-private-key' | translate }}</mat-label>
+          <input matInput type="text" formControlName="privateKeyPath">
+        </mat-form-field>
+        <mat-form-field fxFlex>
+          <mat-label>{{ 'gateway.tls-path-client-certificate' | translate }}</mat-label>
+          <input matInput type="text" formControlName="certPath">
+        </mat-form-field>
+      </div>
+
+      <mat-checkbox formControlName="remoteConfiguration">{{ 'gateway.remote' | translate }}</mat-checkbox>
+
+      <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
+        <mat-form-field fxFlex>
+          <mat-label>{{'gateway.remote-logging-level' | translate }}</mat-label>
+          <mat-select formControlName="remoteLoggingLevel">
+            <mat-option *ngFor="let logLevel of gatewayLogLevels" [value]="logLevel">
+              {{ logLevel }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field fxFlex>
+          <mat-label>{{ 'gateway.path-logs' | translate }}</mat-label>
+          <input matInput type="text" formControlName="remoteLoggingPathToLogs">
+          <mat-error *ngIf="gatewayConfigurationGroup.get('remoteLoggingPathToLogs').hasError('required')" translate>
+            gateway.path-logs-required
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <div class="tb-panel-title">{{ 'gateway.storage' | translate | uppercase }}</div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column">
+        <mat-form-field fxFlex>
+          <mat-label>{{'gateway.storage-type' | translate }}</mat-label>
+          <mat-select formControlName="storageType">
+            <mat-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
+              {{ storageType.value.toString() | translate}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap">
+          <mat-form-field fxFlex>
+            <mat-label>{{ 'gateway.storage-pack-size' | translate }}</mat-label>
+            <input matInput type="number" formControlName="readRecordsCount">
+            <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('required')" translate>
+              gateway.storage-pack-size-required
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('min')" translate>
+              gateway.storage-pack-size-min
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigurationGroup.get('readRecordsCount').hasError('pattern')" translate>
+              gateway.storage-pack-size-pattern
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex>
+            <mat-label >
+              {{ (gatewayConfigurationGroup.get('storageType').value !== 'file' ? 'gateway.storage-max-records' : 'gateway.storage-max-file-records') | translate}}
+            </mat-label>
+            <input matInput type="number" formControlName="maxRecordsCount">
+            <mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('required')" translate>
+              gateway.storage-max-records-required
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('min')" translate>
+              gateway.storage-max-records-min
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigurationGroup.get('maxRecordsCount').hasError('pattern')" translate>
+              gateway.storage-max-records-pattern
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" *ngIf="gatewayConfigurationGroup.get('storageType').value == 'file'">
+          <mat-form-field fxFlex>
+            <mat-label>{{ 'gateway.storage-max-files' | translate }}</mat-label>
+            <input matInput type="number" formControlName="maxFilesCount">
+            <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('required')" translate>
+              gateway.storage-max-files-required
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('min')" translate>
+              gateway.storage-max-files-min
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigurationGroup.get('maxFilesCount').hasError('pattern')" translate>
+              gateway.storage-max-files-pattern
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex>
+            <mat-label>{{ 'gateway.storage-path' | translate }}</mat-label>
+            <input matInput type="text" formControlName="dataFolderPath">
+            <mat-error *ngIf="gatewayConfigurationGroup.get('dataFolderPath').hasError('required')" translate>
+              gateway.storage-path-required
+            </mat-error>
+          </mat-form-field>
+        </div>
+      </div>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <div class="tb-panel-title">{{ 'gateway.connectors' | translate | uppercase }}</div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column" class="gateway-config">
+        <section formArrayName="connectors" *ngFor="let connector of connectors.controls; let i = index;">
+          <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-between stretch" fxLayoutGap="8px">
+            <div fxLayout="column" fxLayoutAlign="center start">
+              <mat-slide-toggle formControlName="enabled"></mat-slide-toggle>
+            </div>
+            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap" fxFlex>
+              <mat-form-field fxFlex>
+                <mat-label>{{'gateway.connector-type' | translate }}</mat-label>
+                <mat-select formControlName="configType" (selectionChange)="changeConnectorType(connector)">
+                  <mat-option *ngFor="let connectorType of connectorTypes" [value]="connectorType">
+                    {{ connectorType }}
+                  </mat-option>
+                </mat-select>
+                <mat-error *ngIf="connector.get('configType').hasError('required')" translate>
+                  gateway.connector-type-required
+                </mat-error>
+              </mat-form-field>
+
+              <mat-form-field fxFlex>
+                <mat-label>{{ 'gateway.connector-name' | translate }}</mat-label>
+                <input matInput type="text" formControlName="name" (blur)="changeConnectorName(connector, i)">
+                <mat-error *ngIf="connector.get('name').hasError('required')" translate>
+                  gateway.connector-name-required
+                </mat-error>
+              </mat-form-field>
+            </div>
+            <div [fxLayout]="alignment" [fxLayoutGap]="layoutGap"
+                 fxLayoutAlign="{{alignment == 'row' ? 'end center' : 'space-evenly center'}}" class="action-buttons">
+              <button mat-icon-button (click)="openConfigDialog($event, i, connector.get('config').value, connector.get('name').value)"
+                         matTooltip="{{ 'gateway.update-config' | translate }}"
+                         matTooltipPosition="above"
+                         [ngClass]="{'mat-warn': connector.get('config').invalid}">
+                <mat-icon>more_horiz</mat-icon>
+              </button>
+              <button mat-icon-button (click)="removeConnector(i)"
+                      matTooltip="{{ 'gateway.delete' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+          </div>
+        </section>
+        <span [fxShow]="!connectors.length" fxLayoutAlign="center center" class="no-data-found">{{'gateway.no-connectors' | translate}}</span>
+        <div>
+          <button mat-raised-button type="button" (click)="addNewConnector()"
+                  matTooltip="{{ 'gateway.connector-add' | translate }}"
+                  matTooltipPosition="above">
+            {{ 'action.add' | translate }}
+          </button>
+        </div>
+      </div >
+    </mat-expansion-panel>
+  </mat-accordion>
+  <section fxLayout="row" fxLayoutAlign="end center" class="form-action-buttons">
+    <button mat-raised-button color="primary" type="button"
+            (click)="exportConfig()"
+            *ngIf="!gatewayConfigurationGroup.get('remoteConfiguration').value"
+            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"
+            matTooltip="{{'gateway.download-tip' | translate }}">
+      {{'action.download' | translate }}
+    </button>
+
+    <button mat-raised-button color="primary" type="submit"
+            *ngIf="gatewayConfigurationGroup.get('remoteConfiguration').value"
+            [disabled]="!gatewayConfigurationGroup.dirty || gatewayConfigurationGroup.invalid"
+            matTooltip="{{'gateway.save-tip' | translate }}">
+      {{'action.save' | translate }}
+    </button>
+  </section>
+</form>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss
new file mode 100644
index 0000000000..ed84b55a6d
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.scss
@@ -0,0 +1,41 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host{
+  .gateway-form {
+    height: 100%;
+    padding: 5px;
+    background-color: transparent;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .form-action-buttons{
+      padding-top: 8px;
+    }
+
+    .gateway-config {
+      .no-data-found {
+        position: relative;
+        display: flex;
+        height: 40px;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  ::ng-deep .mat-form-field-infix {
+    width: auto !important;
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
new file mode 100644
index 0000000000..dcc6dc7bee
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
@@ -0,0 +1,408 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { WidgetContext } from '@home/models/widget-component.models';
+import { UtilsService } from '@core/services/utils.service';
+import {
+  CONFIGURATION_ATTRIBUTE,
+  CONFIGURATION_DRAFT_ATTRIBUTE,
+  ConnectorType,
+  createFormConfig,
+  CURRENT_CONFIGURATION_ATTRIBUTE,
+  DEFAULT_CONNECTOR,
+  gatewayConfigJSON,
+  GatewayFormConnectorModel,
+  GatewayFormModels,
+  GatewayLogLevel,
+  generateConnectorConfigFiles,
+  generateLogConfigFile,
+  generateYAMLConfigFile,
+  getDraftConnectorsJSON,
+  getEntityId,
+  REMOTE_LOGGING_LEVEL_ATTRIBUTE,
+  SecurityType,
+  SecurityTypeTranslationMap,
+  StorageType,
+  StorageTypeTranslationMap,
+  ValidateJSON,
+  WidgetSetting
+} from './gateway-form.models';
+import { WINDOW } from '@core/services/window.service';
+import { MatDialog } from '@angular/material/dialog';
+import {
+  JsonObjectEditDialogComponent,
+  JsonObjectEditDialogData
+} from '@shared/components/dialog/json-object-edit-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceService } from '@core/http/device.service';
+import { AttributeService } from '@core/http/attribute.service';
+import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
+import { forkJoin, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { ImportExportService } from '@home/components/import-export/import-export.service';
+
+// @dynamic
+@Component({
+  selector: 'tb-gateway-form',
+  templateUrl: './gateway-form.component.html',
+  styleUrls: ['./gateway-form.component.scss']
+})
+
+export class GatewayFormComponent extends PageComponent implements OnInit, OnDestroy {
+  constructor(
+    protected store: Store<AppState>,
+    private elementRef: ElementRef,
+    private utils: UtilsService,
+    private ngZone: NgZone,
+    private fb: FormBuilder,
+    @Inject(WINDOW) private window: Window,
+    private dialog: MatDialog,
+    private translate: TranslateService,
+    private deviceService: DeviceService,
+    private attributeService: AttributeService,
+    private importExport: ImportExportService
+  ) {
+    super(store);
+  }
+
+  get connectors(): FormArray {
+    return this.gatewayConfigurationGroup.get('connectors') as FormArray;
+  }
+
+  @ViewChild('formContainer', {static: true}) formContainerRef: ElementRef<HTMLElement>;
+  @ViewChild('gatewayConfigurationForm', {static: true}) multipleInputForm: NgForm;
+
+  private successfulSaved: string;
+  private gatewayNameExists: string;
+  private archiveFileName: string;
+  private formResizeListener: any;
+  private subscribeStorageType$: any;
+  private subscribeGateway$: any;
+
+  alignment = 'row';
+  layoutGap = '5px';
+  gatewayType: string;
+  gatewayConfigurationGroup: FormGroup;
+  securityTypes = SecurityTypeTranslationMap;
+  gatewayLogLevels = Object.values(GatewayLogLevel);
+  connectorTypes = Object.keys(ConnectorType);
+  storageTypes = StorageTypeTranslationMap;
+
+  toastTargetId = 'gateway-configuration-widget' + this.utils.guid();
+
+  @Input()
+  ctx: WidgetContext;
+
+  ngOnInit(): void {
+    this.initWidgetSettings(this.ctx.settings);
+
+    this.buildForm();
+    this.ctx.updateWidgetParams();
+    this.formResizeListener = this.resize.bind(this);
+    // @ts-ignore
+    addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+  }
+
+  ngOnDestroy(): void {
+    if (this.formResizeListener) {
+      // @ts-ignore
+      removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+    }
+    this.subscribeGateway$.unsubscribe();
+    this.subscribeStorageType$.unsubscribe();
+  }
+
+  private initWidgetSettings(settings: WidgetSetting): void {
+    let widgetTitle;
+    if (settings.widgetTitle && settings.widgetTitle.length) {
+      widgetTitle = this.utils.customTranslation(settings.widgetTitle, settings.widgetTitle);
+    } else {
+      widgetTitle = this.translate.instant('gateway.gateway');
+    }
+    this.ctx.widgetTitle = widgetTitle;
+
+    this.archiveFileName = settings.archiveFileName?.length ? settings.archiveFileName : 'gatewayConfiguration';
+    this.gatewayType = settings.gatewayType?.length ? settings.gatewayType : 'Gateway';
+    this.gatewayNameExists = this.utils.customTranslation(settings.gatewayNameExists, settings.gatewayNameExists) || this.translate.instant('gateway.gateway-exists');
+    this.successfulSaved = this.utils.customTranslation(settings.successfulSave, settings.successfulSave) || this.translate.instant('gateway.gateway-saved');
+
+    this.updateWidgetDisplaying();
+  }
+
+  private resize(): void {
+    this.ngZone.run(() => {
+      this.updateWidgetDisplaying();
+      this.ctx.detectChanges();
+    });
+  }
+
+  private updateWidgetDisplaying(): void {
+    if(this.ctx.$container && this.ctx.$container[0].offsetWidth <= 425){
+      this.layoutGap = '0';
+      this.alignment = 'column';
+    } else {
+      this.layoutGap = '5px';
+      this.alignment = 'row';
+    }
+  }
+
+  private saveAttribute(attributeName: string, attributeValue: string, attributeScope: AttributeScope): Observable<any> {
+    const gatewayId = this.gatewayConfigurationGroup.get('gateway').value;
+    const attributes: AttributeData = {
+      key: attributeName,
+      value: attributeValue
+    };
+    return this.attributeService.saveEntityAttributes(getEntityId(gatewayId), attributeScope, [attributes]);
+  }
+
+  private createConnector(setting: GatewayFormConnectorModel = DEFAULT_CONNECTOR): void {
+    this.connectors.push(this.fb.group({
+      enabled: [setting.enabled],
+      configType: [setting.configType, [Validators.required]],
+      name: [setting.name, [Validators.required]],
+      config: [setting.config, [Validators.nullValidator, ValidateJSON]]
+    }));
+  }
+
+  private getFormField(name: string): AbstractControl {
+    return this.gatewayConfigurationGroup.get(name);
+  }
+
+  private buildForm(): void {
+    this.gatewayConfigurationGroup = this.fb.group({
+      gateway: [null],
+      accessToken: [null, [Validators.required]],
+      securityType: [SecurityType.accessToken],
+      host: [this.window.location.hostname, [Validators.required]],
+      port: [1883, [Validators.required, Validators.min(1), Validators.max(65535), Validators.pattern(/^-?[0-9]+$/)]],
+      remoteConfiguration: [true],
+      caCertPath: ['/etc/thingsboard-gateway/ca.pem'],
+      privateKeyPath: ['/etc/thingsboard-gateway/privateKey.pem'],
+      certPath: ['/etc/thingsboard-gateway/certificate.pem'],
+      remoteLoggingLevel: [GatewayLogLevel.debug],
+      remoteLoggingPathToLogs: ['./logs/', [Validators.required]],
+      storageType: [StorageType.memory],
+      readRecordsCount: [100, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
+      maxRecordsCount: [10000, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
+      maxFilesCount: [5, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
+      dataFolderPath: ['./data/', [Validators.required]],
+      connectors: this.fb.array([])
+    });
+
+    this.subscribeStorageType$ = this.getFormField('storageType').valueChanges.subscribe((value: StorageType) => {
+      if (value === StorageType.memory) {
+        this.getFormField('maxFilesCount').disable();
+        this.getFormField('dataFolderPath').disable();
+      } else {
+        this.getFormField('maxFilesCount').enable();
+        this.getFormField('dataFolderPath').enable();
+      }
+    });
+
+    this.subscribeGateway$ = this.getFormField('gateway').valueChanges.subscribe((gatewayId: string) => {
+      if (gatewayId !== null) {
+        forkJoin([
+          this.deviceService.getDeviceCredentials(gatewayId).pipe(tap(deviceCredential => {
+            this.getFormField('accessToken').patchValue(deviceCredential.credentialsId);
+          })),
+          ...this.getAttributes(gatewayId)]).subscribe(() => {
+          this.gatewayConfigurationGroup.markAsPristine();
+          this.ctx.detectChanges();
+        });
+      } else {
+        this.getFormField('accessToken').patchValue('');
+      }
+    })
+  }
+
+  gatewayExist(): void {
+    this.ctx.showErrorToast(this.gatewayNameExists, 'top', 'left', this.toastTargetId);
+  }
+
+  exportConfig(): void {
+    const gatewayConfiguration: GatewayFormModels = this.gatewayConfigurationGroup.value;
+    const filesZip: any = {};
+    filesZip['tb_gateway.yaml'] = generateYAMLConfigFile(gatewayConfiguration);
+    generateConnectorConfigFiles(filesZip, gatewayConfiguration.connectors);
+    generateLogConfigFile(filesZip, gatewayConfiguration.remoteLoggingLevel, gatewayConfiguration.remoteLoggingPathToLogs);
+    this.importExport.exportJSZip(filesZip, this.archiveFileName);
+    this.saveAttribute(
+      REMOTE_LOGGING_LEVEL_ATTRIBUTE,
+      this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(),
+      AttributeScope.SHARED_SCOPE);
+  }
+
+  addNewConnector(): void {
+    this.createConnector();
+  }
+
+  removeConnector(index: number): void {
+    if (index > -1) {
+      this.connectors.removeAt(index);
+      this.connectors.markAsDirty();
+    }
+  }
+
+  openConfigDialog($event: Event, index: number, config: object, type: string): void {
+    if ($event) {
+      $event.stopPropagation();
+      $event.preventDefault();
+    }
+    this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        jsonValue: config,
+        title: this.translate.instant('gateway.title-connectors-json', {typeName: type})
+      }
+    }).afterClosed().subscribe(
+      (res) => {
+        if (res) {
+          this.connectors.at(index).get('config').patchValue(res);
+          this.ctx.detectChanges();
+        }
+      }
+    );
+  }
+
+  private createConnectorName(connectors: GatewayFormConnectorModel[], name: string, index: number = 0): string {
+    const newKeyName = index ? name + index : name;
+    const indexRes = connectors.findIndex((element) => element.name === newKeyName);
+    return indexRes === -1 ? newKeyName : this.createConnectorName(connectors, name, ++index);
+  }
+
+  private validateConnectorName(connectors: GatewayFormConnectorModel[], name: string, connectorIndex: number, index = 0): string {
+    for (let i = 0; i < connectors.length; i++) {
+      const nameEq = (index === 0) ? name : name + index;
+      if (i !== connectorIndex && connectors[i].name === nameEq) {
+        this.validateConnectorName(connectors, name, connectorIndex, ++index);
+      }
+    }
+    return (index === 0) ? name : name + index;
+  }
+
+  changeConnectorType(connector: AbstractControl): void {
+    if (!connector.get('name').value) {
+      const typeConnector = connector.get('configType').value;
+      const connectors = this.gatewayConfigurationGroup.value.connectors;
+      connector.get('name').patchValue(this.createConnectorName(connectors, ConnectorType[typeConnector]));
+    }
+  }
+
+  changeConnectorName(connector: AbstractControl, index: number): void {
+    const connectors = this.gatewayConfigurationGroup.value.connectors;
+    connector.get('name').patchValue(this.validateConnectorName(connectors, connector.get('name').value, index));
+  }
+
+  save(): void {
+    const gatewayConfiguration: GatewayFormModels = this.gatewayConfigurationGroup.value;
+    forkJoin([
+      this.saveAttribute(
+        CONFIGURATION_ATTRIBUTE,
+        window.btoa(JSON.stringify(gatewayConfigJSON(gatewayConfiguration))),
+        AttributeScope.SHARED_SCOPE),
+      this.saveAttribute(
+        CONFIGURATION_DRAFT_ATTRIBUTE,
+        window.btoa(JSON.stringify(getDraftConnectorsJSON(gatewayConfiguration.connectors))),
+        AttributeScope.SERVER_SCOPE),
+      this.saveAttribute(
+        REMOTE_LOGGING_LEVEL_ATTRIBUTE,
+        this.gatewayConfigurationGroup.value.remoteLoggingLevel.toUpperCase(),
+        AttributeScope.SHARED_SCOPE)
+    ]).subscribe(() =>{
+      this.ctx.showSuccessToast(this.successfulSaved,
+        2000, 'top', 'left', this.toastTargetId);
+      this.gatewayConfigurationGroup.markAsPristine();
+    })
+  }
+
+  private getAttributes(gatewayId: string): Array<Observable<Array<AttributeData>>> {
+    const tasks = [];
+    tasks.push(forkJoin([this.getAttribute(CURRENT_CONFIGURATION_ATTRIBUTE, AttributeScope.CLIENT_SCOPE, gatewayId),
+      this.getAttribute(CONFIGURATION_DRAFT_ATTRIBUTE, AttributeScope.SERVER_SCOPE, gatewayId)]).pipe(
+        tap(([currentConfig, draftConfig]) => {
+          this.setFormGatewaySettings(currentConfig);
+          this.setFormConnectorsDraft(draftConfig);
+        })
+      )
+    );
+    tasks.push(this.getAttribute(REMOTE_LOGGING_LEVEL_ATTRIBUTE, AttributeScope.SHARED_SCOPE, gatewayId).pipe(
+      tap(logsLevel => this.processLoggingLevel(logsLevel))
+    ));
+    return tasks;
+  }
+
+  private getAttribute(attributeName: string, attributeScope: AttributeScope, gatewayId: string): Observable<Array<AttributeData>> {
+    return this.attributeService.getEntityAttributes(getEntityId(gatewayId), attributeScope, [attributeName]);
+  }
+
+  private setFormGatewaySettings(response: Array<AttributeData>): void {
+    this.connectors.clear();
+    if (response.length > 0) {
+      const attribute = JSON.parse(window.atob(response[0].value));
+      for (const attributeKey of Object.keys(attribute)) {
+        const keyValue = attribute[attributeKey];
+        if (attributeKey === 'thingsboard') {
+          if (keyValue !== null && Object.keys(keyValue).length > 0) {
+            this.gatewayConfigurationGroup.patchValue(createFormConfig(keyValue));
+          }
+        } else {
+          for (const connector of Object.keys(keyValue)) {
+            let name = 'No name';
+            if (Object.prototype.hasOwnProperty.call(keyValue[connector], 'name')) {
+              name = keyValue[connector].name;
+            }
+            const newConnector: GatewayFormConnectorModel = {
+              enabled: true,
+              configType: (attributeKey as ConnectorType),
+              config: keyValue[connector].config,
+              name
+            };
+            this.createConnector(newConnector);
+          }
+        }
+      }
+    }
+  }
+
+  private setFormConnectorsDraft(response: Array<AttributeData>): void {
+    if (response.length > 0) {
+      const attribute = JSON.parse(window.atob(response[0].value));
+      for (const connectorName of Object.keys(attribute)) {
+        const newConnector: GatewayFormConnectorModel = {
+          enabled: false,
+          configType: (attribute[connectorName].connector as ConnectorType),
+          config: attribute[connectorName].config,
+          name: connectorName
+        };
+        this.createConnector(newConnector);
+      }
+    }
+  }
+
+  private processLoggingLevel(value: Array<AttributeData>): void {
+    let logsLevel = GatewayLogLevel.debug;
+    if (value.length > 0 && GatewayLogLevel[value[0].value.toLowerCase()]) {
+      logsLevel = GatewayLogLevel[value[0].value.toLowerCase()];
+    }
+    this.getFormField('remoteLoggingLevel').patchValue(logsLevel);
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.models.ts
new file mode 100644
index 0000000000..4cf5914459
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.models.ts
@@ -0,0 +1,374 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+import { EntityId } from '@shared/models/id/entity-id';
+import { EntityType } from '@shared/models/entity-type.models';
+
+export enum SecurityType {
+  tls = 'tls',
+  accessToken = 'accessToken'
+}
+
+export interface WidgetSetting {
+  widgetTitle: string;
+  archiveFileName: string;
+  gatewayType: string;
+  successfulSave: string;
+  gatewayNameExists: string;
+}
+
+export const CURRENT_CONFIGURATION_ATTRIBUTE = 'current_configuration';
+export const CONFIGURATION_DRAFT_ATTRIBUTE = 'configuration_drafts';
+export const CONFIGURATION_ATTRIBUTE = 'configuration';
+export const REMOTE_LOGGING_LEVEL_ATTRIBUTE = 'RemoteLoggingLevel';
+
+export const SecurityTypeTranslationMap = new Map<SecurityType, string>(
+  [
+    [SecurityType.tls, 'gateway.security-types.tls'],
+    [SecurityType.accessToken, 'gateway.security-types.access-token']
+  ]
+);
+
+export enum GatewayLogLevel {
+  none = 'NONE',
+  critical = 'CRITICAL',
+  error = 'ERROR',
+  warning = 'WARNING',
+  info = 'INFO',
+  debug = 'DEBUG'
+}
+
+export enum StorageType {
+  memory = 'memory',
+  file = 'file'
+}
+
+export const StorageTypeTranslationMap = new Map<StorageType, string>(
+  [
+    [StorageType.memory, 'gateway.storage-types.memory-storage'],
+    [StorageType.file, 'gateway.storage-types.file-storage']
+  ]
+);
+
+export enum ConnectorType {
+  mqtt= 'MQTT',
+  modbus = 'Modbus',
+  opc_ua = 'OPC-UA',
+  ble = 'BLE'
+}
+
+export interface GatewayFormModels {
+  gateway?: string;
+  accessToken?: string;
+  securityType?: SecurityType;
+  host?: string;
+  port?: number;
+  remoteConfiguration?: boolean;
+  caCertPath?: string;
+  privateKeyPath?: string;
+  certPath?: string;
+  remoteLoggingLevel?: GatewayLogLevel;
+  remoteLoggingPathToLogs?:string;
+  storageType?: StorageType;
+  readRecordsCount?: number;
+  maxRecordsCount?: number;
+  maxFilesCount?: number;
+  dataFolderPath?: number;
+  connectors?: Array<GatewayFormConnectorModel>;
+}
+
+export interface GatewayFormConnectorModel {
+  config: object;
+  name: string;
+  configType: ConnectorType;
+  enabled: boolean;
+}
+
+export const DEFAULT_CONNECTOR: GatewayFormConnectorModel = {
+  config: {},
+  name: '',
+  configType: null,
+  enabled: false
+};
+
+type Connector = {
+  [key in ConnectorType]?: Array<ConnectorConfig>;
+}
+
+interface GatewaySetting extends Connector{
+  thingsboard: GatewayMainSetting;
+}
+
+interface ConnectorConfig {
+  name: string;
+  config: object;
+}
+
+interface GatewayMainSetting {
+  thingsboard: GatewayMainThingsboardSetting;
+  connectors: Array<GatewayMainConnector>,
+  logs: string,
+  storage: GatewayStorage
+}
+
+interface GatewayMainThingsboardSetting {
+  host: string,
+  remoteConfiguration: boolean,
+  port: number,
+  security: GatewaySecurity
+}
+
+type GatewaySecurity = SecurityToken | SecurityCertificate;
+
+interface SecurityToken {
+  accessToken: string;
+}
+
+interface SecurityCertificate {
+  caCert: string;
+  privateKey: string;
+  cert: string;
+}
+
+type GatewayStorage = GatewayStorageMemory | GatewayStorageFile;
+
+interface GatewayStorageMemory {
+  type: string;
+  max_records_count: number;
+  read_records_count: number;
+}
+
+interface GatewayStorageFile {
+  type: string;
+  data_folder_path: number;
+  max_file_count: number;
+  max_read_records_count: number;
+  max_records_per_file: number;
+}
+
+interface GatewayMainConnector {
+  configuration: string;
+  name: string;
+  type: ConnectorType;
+}
+
+export function ValidateJSON(control: AbstractControl): ValidationErrors | null {
+  if (JSON.stringify(control.value) === JSON.stringify({})) {
+    return { validJSON: true };
+  }
+  return null;
+}
+
+const TEMPLATE_LOGS_CONFIG = '[loggers]}}keys=root, service, connector, converter, tb_connection, storage, extension}}[handlers]}}keys=consoleHandler, serviceHandler, connectorHandler, converterHandler, tb_connectionHandler, storageHandler, extensionHandler}}[formatters]}}keys=LogFormatter}}[logger_root]}}level=ERROR}}handlers=consoleHandler}}[logger_connector]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=connector}}[logger_storage]}}level={ERROR}}}handlers=storageHandler}}formatter=LogFormatter}}qualname=storage}}[logger_tb_connection]}}level={ERROR}}}handlers=tb_connectionHandler}}formatter=LogFormatter}}qualname=tb_connection}}[logger_service]}}level={ERROR}}}handlers=serviceHandler}}formatter=LogFormatter}}qualname=service}}[logger_converter]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=converter}}[logger_extension]}}level={ERROR}}}handlers=connectorHandler}}formatter=LogFormatter}}qualname=extension}}[handler_consoleHandler]}}class=StreamHandler}}level={ERROR}}}formatter=LogFormatter}}args=(sys.stdout,)}}[handler_connectorHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}connector.log", "d", 1, 7,)}}[handler_storageHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}storage.log", "d", 1, 7,)}}[handler_serviceHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}service.log", "d", 1, 7,)}}[handler_converterHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}converter.log", "d", 1, 3,)}}[handler_extensionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}extension.log", "d", 1, 3,)}}[handler_tb_connectionHandler]}}level={ERROR}}}class=logging.handlers.TimedRotatingFileHandler}}formatter=LogFormatter}}args=("{./logs/}tb_connection.log", "d", 1, 3,)}}[formatter_LogFormatter]}}format="%(asctime)s - %(levelname)s - [%(filename)s] - %(module)s - %(lineno)d - %(message)s" }}datefmt="%Y-%m-%d %H:%M:%S"';
+
+export function generateYAMLConfigFile(gatewaySetting: GatewayFormModels): string {
+  let config;
+  config = 'thingsboard:\n';
+  config += '  host: ' + gatewaySetting.host + '\n';
+  config += '  remoteConfiguration: ' + gatewaySetting.remoteConfiguration + '\n';
+  config += '  port: ' + gatewaySetting.port + '\n';
+  config += '  security:\n';
+  if (gatewaySetting.securityType === SecurityType.accessToken) {
+    config += '    access-token: ' + gatewaySetting.accessToken + '\n';
+  } else {
+    config += '    ca_cert: ' + gatewaySetting.caCertPath + '\n';
+    config += '    privateKey: ' + gatewaySetting.privateKeyPath + '\n';
+    config += '    cert: ' + gatewaySetting.certPath + '\n';
+  }
+  config += 'storage:\n';
+  if (gatewaySetting.storageType === StorageType.memory) {
+    config += '  type: memory\n';
+    config += '  read_records_count: ' + gatewaySetting.readRecordsCount + '\n';
+    config += '  max_records_count: ' + gatewaySetting.maxRecordsCount + '\n';
+  } else {
+    config += '  type: file\n';
+    config += '  data_folder_path: ' + gatewaySetting.dataFolderPath + '\n';
+    config += '  max_file_count: ' + gatewaySetting.maxFilesCount + '\n';
+    config += '  max_read_records_count: ' + gatewaySetting.readRecordsCount + '\n';
+    config += '  max_records_per_file: ' + gatewaySetting.maxRecordsCount + '\n';
+  }
+  config += 'connectors:\n';
+  for(const connector of gatewaySetting.connectors){
+    if (connector.enabled) {
+      config += '  -\n';
+      config += '    name: ' + connector.name + '\n';
+      config += '    type: ' + connector.configType + '\n';
+      config += '    configuration: ' + generateFileName(connector.name) + '\n';
+    }
+  }
+  return config;
+}
+
+export function generateConnectorConfigFiles(fileZipAdd: object, connectors: Array<GatewayFormConnectorModel>): void {
+  for(const connector of connectors) {
+    if (connector.enabled) {
+      fileZipAdd[generateFileName(connector.name)] = JSON.stringify(connector.config);
+    }
+  }
+}
+
+function generateFileName(fileName): string {
+  return fileName.replace('_', '')
+    .replace('-', '')
+    .replace(/^\s+|\s+/g, '')
+    .toLowerCase() + '.json';
+}
+
+export function generateLogConfigFile(fileZipAdd: object, logsLevel: string, logsPath: string): void {
+  fileZipAdd['logs.conf'] = getLogsConfig(logsLevel, logsPath);
+}
+
+function getLogsConfig(logsLevel: string, logsPath: string): string {
+  return TEMPLATE_LOGS_CONFIG
+    .replace(/{ERROR}/g, logsLevel)
+    .replace(/{.\/logs\/}/g, logsPath);
+}
+
+export function getEntityId(gatewayId: string): EntityId {
+  return {
+    id: gatewayId,
+    entityType: EntityType.DEVICE
+  }
+}
+
+export function createFormConfig(keyValue: GatewayMainSetting): GatewayFormModels {
+  const formSetting: GatewayFormModels = {};
+  if (Object.prototype.hasOwnProperty.call(keyValue, 'thingsboard')) {
+    formSetting.host = keyValue.thingsboard.host;
+    formSetting.port = keyValue.thingsboard.port;
+    formSetting.remoteConfiguration = keyValue.thingsboard.remoteConfiguration;
+    if (Object.prototype.hasOwnProperty.call(keyValue.thingsboard.security, SecurityType.accessToken)) {
+      formSetting.securityType = SecurityType.accessToken;
+      formSetting.accessToken = (keyValue.thingsboard.security as SecurityToken).accessToken;
+    } else {
+      formSetting.securityType = SecurityType.tls;
+      formSetting.caCertPath = (keyValue.thingsboard.security as SecurityCertificate).caCert;
+      formSetting.privateKeyPath = (keyValue.thingsboard.security as SecurityCertificate).privateKey;
+      formSetting.certPath = (keyValue.thingsboard.security as SecurityCertificate).cert;
+    }
+  }
+
+  if (Object.prototype.hasOwnProperty.call(keyValue, 'storage') && Object.prototype.hasOwnProperty.call(keyValue.storage, 'type')) {
+    if (keyValue.storage.type === StorageType.memory) {
+      formSetting.storageType = StorageType.memory;
+      formSetting.readRecordsCount = (keyValue.storage as GatewayStorageMemory).read_records_count;
+      formSetting.maxRecordsCount = (keyValue.storage as GatewayStorageMemory).max_records_count;
+    } else if (keyValue.storage.type === StorageType.file) {
+      formSetting.storageType = StorageType.file;
+      formSetting.dataFolderPath = (keyValue.storage as GatewayStorageFile).data_folder_path;
+      formSetting.maxFilesCount = (keyValue.storage as GatewayStorageFile).max_file_count;
+      formSetting.readRecordsCount = (keyValue.storage as GatewayStorageMemory).read_records_count;
+      formSetting.maxRecordsCount = (keyValue.storage as GatewayStorageMemory).max_records_count;
+    }
+  }
+  return formSetting;
+}
+
+export function getDraftConnectorsJSON(currentConnectors: Array<GatewayFormConnectorModel>) {
+  const draftConnectors = {};
+  for(const connector of currentConnectors){
+    if (!connector.enabled) {
+      draftConnectors[connector.name] = {
+        connector: connector.configType,
+        config: connector.config
+      };
+    }
+  }
+  return draftConnectors;
+}
+
+export function gatewayConfigJSON(gatewayConfiguration: GatewayFormModels): GatewaySetting {
+  const gatewayConfig = {
+    thingsboard: gatewayMainConfigJSON(gatewayConfiguration)
+  };
+  gatewayConnectorJSON(gatewayConfig, gatewayConfiguration.connectors);
+  return gatewayConfig;
+}
+
+function gatewayMainConfigJSON(gatewayConfiguration: GatewayFormModels): GatewayMainSetting {
+  let security: GatewaySecurity;
+  if (gatewayConfiguration.securityType === SecurityType.accessToken) {
+    security = {
+      accessToken: gatewayConfiguration.accessToken
+    }
+  } else {
+    security = {
+      caCert: gatewayConfiguration.caCertPath,
+      privateKey: gatewayConfiguration.privateKeyPath,
+      cert: gatewayConfiguration.certPath
+    }
+  }
+  const thingsboard: GatewayMainThingsboardSetting = {
+    host: gatewayConfiguration.host,
+    remoteConfiguration: gatewayConfiguration.remoteConfiguration,
+    port: gatewayConfiguration.port,
+    security
+  };
+
+  let storage: GatewayStorage;
+  if (gatewayConfiguration.storageType === StorageType.memory) {
+    storage = {
+      type: StorageType.memory,
+      read_records_count: gatewayConfiguration.readRecordsCount,
+      max_records_count: gatewayConfiguration.maxRecordsCount
+    };
+  } else {
+    storage = {
+      type: StorageType.file,
+      data_folder_path: gatewayConfiguration.dataFolderPath,
+      max_file_count: gatewayConfiguration.maxFilesCount,
+      max_read_records_count: gatewayConfiguration.readRecordsCount,
+      max_records_per_file: gatewayConfiguration.maxRecordsCount
+    };
+  }
+
+  const connectors: Array<GatewayMainConnector> = [];
+  for (const connector of gatewayConfiguration.connectors) {
+    if (connector.enabled) {
+      const connectorConfig: GatewayMainConnector = {
+        configuration: generateFileName(connector.name),
+        name: connector.name,
+        type: connector.configType
+      };
+      connectors.push(connectorConfig);
+    }
+  }
+
+  return {
+    thingsboard,
+    connectors,
+    storage,
+    logs: window.btoa(getLogsConfig(gatewayConfiguration.remoteLoggingLevel, gatewayConfiguration.remoteLoggingPathToLogs))
+  }
+}
+
+function gatewayConnectorJSON(gatewayConfiguration, currentConnectors: Array<GatewayFormConnectorModel>): void {
+  for (const connector of currentConnectors) {
+    if (connector.enabled) {
+      const typeConnector = connector.configType;
+      if (!Array.isArray(gatewayConfiguration[typeConnector])) {
+        gatewayConfiguration[typeConnector] = [];
+      }
+
+      const connectorConfig: ConnectorConfig = {
+        name: connector.name,
+        config: connector.config
+      };
+      gatewayConfiguration[typeConnector].push(connectorConfig);
+    }
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 5d4465cacc..90bd9341d6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -170,8 +170,8 @@ export default abstract class LeafletMap {
                 this.map.setZoom(this.options.defaultZoomLevel, { animate: false });
                 this.map.panTo(bounds.getCenter(), { animate: false });
             } else {
-                this.map.once('zoomend', function () {
-                    if (!this.options.defaultZoomLevel && this.options.map.getZoom() > this.options.minZoomLevel) {
+                this.map.once('zoomend', () => {
+                    if (!this.options.defaultZoomLevel && this.map.getZoom() > this.options.minZoomLevel) {
                         this.map.setZoom(this.options.minZoomLevel, { animate: false });
                     }
                 });
@@ -323,4 +323,4 @@ export default abstract class LeafletMap {
             this.polygons.get(key).updatePolygon(data, dataSources, settings);
         });
     }
-}
\ No newline at end of file
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index c1fc2a4264..c2cd46c6b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -39,10 +39,9 @@ import { JsonSettingsSchema } from '@shared/models/widget.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { AttributeService } from '@core/http/attribute.service';
+import { Type } from '@angular/core';
 
-let providerSets;
-let defaultSettings;
-
+// @dynamic
 export class MapWidgetController implements MapWidgetInterface {
 
     constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
@@ -141,7 +140,7 @@ export class MapWidgetController implements MapWidgetInterface {
                 });
     }
 
-    initSettings(settings: UnitedMapSettings) {
+    initSettings(settings: UnitedMapSettings): UnitedMapSettings {
         const functionParams = ['data', 'dsData', 'dsIndex'];
         this.provider = settings.provider || this.mapProvider;
         const customOptions = {
@@ -190,12 +189,12 @@ export class MapWidgetController implements MapWidgetInterface {
 export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController;
 
 interface IProvider {
-    MapClass: LeafletMap,
+    MapClass: Type<LeafletMap>,
     schema: JsonSettingsSchema,
     name: string
 }
 
-providerSets = {
+export const providerSets: {[key: string]: IProvider} = {
     'openstreet-map': {
         MapClass: OpenStreetMap,
         schema: openstreetMapSettingsSchema,
@@ -221,9 +220,9 @@ providerSets = {
         schema: imageMapSettingsSchema,
         name: 'image-map'
     }
-}
+};
 
-defaultSettings = {
+export const defaultSettings: any = {
     xPosKeyName: 'xPos',
     yPosKeyName: 'yPos',
     markerOffsetX: 0.5,
@@ -257,4 +256,4 @@ defaultSettings = {
     credentials: '',
     markerClusteringSetting: null,
     draggableMarker: false
-}
+};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts
index ba3c024d26..92ba6e43d9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/web-camera-input.component.ts
@@ -46,6 +46,7 @@ interface WebCameraInputWidgetSettings {
   maxHeight: number;
 }
 
+// @dynamic
 @Component({
   selector: 'tb-web-camera-widget',
   templateUrl: './web-camera-input.component.html',
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
index c849c09193..4e00afe9c3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@@ -33,6 +33,8 @@ import {
 import { MultipleInputWidgetComponent } from './lib/multiple-input-widget.component';
 import { TripAnimationComponent } from './trip-animation/trip-animation.component';
 import { WebCameraInputWidgetComponent } from './lib/web-camera-input.component';
+import { GatewayFormComponent } from './lib/gateway/gateway-form.component';
+import { ImportExportService } from '@home/components/import-export/import-export.service';
 
 @NgModule({
   declarations:
@@ -47,7 +49,8 @@ import { WebCameraInputWidgetComponent } from './lib/web-camera-input.component'
       DateRangeNavigatorPanelComponent,
       MultipleInputWidgetComponent,
       TripAnimationComponent,
-      WebCameraInputWidgetComponent
+      WebCameraInputWidgetComponent,
+      GatewayFormComponent
     ],
   imports: [
     CommonModule,
@@ -64,10 +67,12 @@ import { WebCameraInputWidgetComponent } from './lib/web-camera-input.component'
     DateRangeNavigatorWidgetComponent,
     MultipleInputWidgetComponent,
     TripAnimationComponent,
-    WebCameraInputWidgetComponent
+    WebCameraInputWidgetComponent,
+    GatewayFormComponent
   ],
   providers: [
-    CustomDialogService
+    CustomDialogService,
+    ImportExportService
   ]
 })
 export class WidgetComponentsModule { }
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 5dd493a4f3..caa713cfb0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -29,7 +29,6 @@ import {
   OnDestroy,
   OnInit,
   SimpleChanges,
-  Type,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
@@ -44,7 +43,8 @@ import {
   Widget,
   WidgetActionDescriptor,
   widgetActionSources,
-  WidgetActionType, WidgetComparisonSettings,
+  WidgetActionType,
+  WidgetComparisonSettings,
   WidgetResource,
   widgetType,
   WidgetTypeParameters
@@ -90,24 +90,7 @@ import { DashboardService } from '@core/http/dashboard.service';
 import { DatasourceService } from '@core/api/datasource.service';
 import { WidgetSubscription } from '@core/api/widget-subscription';
 import { EntityService } from '@core/http/entity.service';
-import { AssetService } from '@core/http/asset.service';
-import { DialogService } from '@core/services/dialog.service';
-import { CustomDialogService } from '@home/components/widget/dialog/custom-dialog.service';
-import { DatePipe } from '@angular/common';
-import { AttributeService } from '@core/http/attribute.service';
-import { TranslateService } from '@ngx-translate/core';
-import { HttpClient } from '@angular/common/http';
-
-const ServicesMap = new Map<string, Type<any>>();
-ServicesMap.set('deviceService', DeviceService);
-ServicesMap.set('assetService', AssetService);
-ServicesMap.set('attributeService', AttributeService);
-ServicesMap.set('dialogs', DialogService);
-ServicesMap.set('customDialog', CustomDialogService);
-ServicesMap.set('date', DatePipe);
-ServicesMap.set('utils', UtilsService);
-ServicesMap.set('translate', TranslateService);
-ServicesMap.set('http', HttpClient);
+import { ServicesMap } from '@home/models/services.map';
 
 @Component({
   selector: 'tb-widget',
@@ -706,6 +689,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
         this.dynamicWidgetComponentRef = this.widgetContentContainer.createComponent(this.widgetInfo.componentFactory, 0, injector);
         this.cd.detectChanges();
       } catch (e) {
+        console.error(e);
         if (this.dynamicWidgetComponentRef) {
           this.dynamicWidgetComponentRef.destroy();
           this.dynamicWidgetComponentRef = null;
@@ -1010,7 +994,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
               'entityName', 'additionalParams', 'entityLabel', customFunction);
             customActionFunction($event, this.widgetContext, entityId, entityName, additionalParams, entityLabel);
           } catch (e) {
-            //
+            console.error(e);
           }
         }
         break;
@@ -1035,7 +1019,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
                   'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel', customPrettyFunction);
                 customActionPrettyFunction($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
               } catch (e) {
-                //
+                console.error(e);
               }
             }
           },
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index f2c1b70d9c..9368219816 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #addEntitiesToCustomerForm="ngForm" [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -39,16 +39,14 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || addEntitiesToCustomerForm.invalid
             || !addEntitiesToCustomerForm.dirty">
       {{ 'action.assign' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.ts b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.ts
index c325aad9c1..dd696d25bd 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.ts
@@ -14,19 +14,18 @@
 /// limitations under the License.
 ///
 
-import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {PageComponent} from '@shared/components/page.component';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
-import {DeviceService} from '@core/http/device.service';
-import {EntityType} from '@shared/models/entity-type.models';
-import {forkJoin, Observable} from 'rxjs';
-import {AssetService} from '@core/http/asset.service';
-import {EntityViewService} from '@core/http/entity-view.service';
-import {DashboardService} from '@core/http/dashboard.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { DeviceService } from '@core/http/device.service';
+import { EntityType } from '@shared/models/entity-type.models';
+import { forkJoin, Observable } from 'rxjs';
+import { AssetService } from '@core/http/asset.service';
+import { EntityViewService } from '@core/http/entity-view.service';
+import { DashboardService } from '@core/http/dashboard.service';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index 1c8c535de9..8ad9a67ae7 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form #assignToCustomerForm="ngForm" [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -30,7 +30,7 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <span>{{ assignToCustomerText | translate }}</span>
+      <div style="padding-bottom: 0.5em;">{{ assignToCustomerText | translate }}</div>
       <tb-entity-autocomplete
         formControlName="customerId"
         required
@@ -38,16 +38,14 @@
       </tb-entity-autocomplete>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || assignToCustomerForm.invalid
             || !assignToCustomerForm.dirty">
       {{ 'action.assign' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.ts b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.ts
index 83b2f30269..1643223ebf 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.ts
@@ -14,19 +14,18 @@
 /// limitations under the License.
 ///
 
-import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {PageComponent} from '@shared/components/page.component';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
-import {DeviceService} from '@core/http/device.service';
-import {EntityId} from '@shared/models/id/entity-id';
-import {EntityType} from '@shared/models/entity-type.models';
-import {forkJoin, Observable} from 'rxjs';
-import {AssetService} from '@core/http/asset.service';
-import {EntityViewService} from '@core/http/entity-view.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { DeviceService } from '@core/http/device.service';
+import { EntityId } from '@shared/models/id/entity-id';
+import { EntityType } from '@shared/models/entity-type.models';
+import { forkJoin, Observable } from 'rxjs';
+import { AssetService } from '@core/http/asset.service';
+import { EntityViewService } from '@core/http/entity-view.service';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 
diff --git a/ui-ngx/src/app/modules/home/dialogs/home-dialogs.module.ts b/ui-ngx/src/app/modules/home/dialogs/home-dialogs.module.ts
index b6d2a0521f..4a9ae93300 100644
--- a/ui-ngx/src/app/modules/home/dialogs/home-dialogs.module.ts
+++ b/ui-ngx/src/app/modules/home/dialogs/home-dialogs.module.ts
@@ -17,8 +17,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@app/shared/shared.module';
-import {AssignToCustomerDialogComponent} from '@modules/home/dialogs/assign-to-customer-dialog.component';
-import {AddEntitiesToCustomerDialogComponent} from '@modules/home/dialogs/add-entities-to-customer-dialog.component';
+import { AssignToCustomerDialogComponent } from '@modules/home/dialogs/assign-to-customer-dialog.component';
+import { AddEntitiesToCustomerDialogComponent } from '@modules/home/dialogs/add-entities-to-customer-dialog.component';
 import { HomeDialogsService } from './home-dialogs.service';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts b/ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts
index 29e4c3ce62..e7524567b0 100644
--- a/ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts
+++ b/ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts
@@ -15,8 +15,6 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { AuthService } from '@core/auth/auth.service';
 import { MatDialog } from '@angular/material/dialog';
 import { EntityType } from '@shared/models/entity-type.models';
 import { Observable } from 'rxjs';
@@ -38,7 +36,6 @@ export class HomeDialogsService {
         return this.openImportDialogCSV(entityType, 'device.import', 'device.device-file');
       case EntityType.ASSET:
         return this.openImportDialogCSV(entityType, 'asset.import', 'asset.asset-file');
-        break;
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index 9febaf4ae7..b85569638a 100644
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@@ -35,17 +35,17 @@
   <mat-sidenav-content>
     <div fxLayout="column" role="main" style="height: 100%;">
       <mat-toolbar fxLayout="row" color="primary" class="mat-elevation-z1 tb-primary-toolbar">
-        <button [fxShow]="!forceFullscreen" mat-button mat-icon-button id="main"
+        <button [fxShow]="!forceFullscreen" mat-icon-button id="main"
                 [ngClass]="{'tb-invisible': displaySearchMode()}"
                 fxHide.gt-sm (click)="sidenav.toggle()">
           <mat-icon class="material-icons">menu</mat-icon>
         </button>
-        <button [fxShow]="forceFullscreen" mat-button mat-icon-button
+        <button [fxShow]="forceFullscreen" mat-icon-button
                 [ngClass]="{'tb-invisible': displaySearchMode()}"
                 (click)="goBack()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
         </button>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 [ngClass]="{'tb-invisible': !displaySearchMode()}"
                 (click)="closeSearch()">
           <mat-icon class="material-icons">arrow_back</mat-icon>
@@ -62,12 +62,11 @@
           </mat-form-field>
         </div>
         <button [fxShow]="searchEnabled"
-                mat-button mat-icon-button
-                (click)="openSearch()">
+                mat-icon-button (click)="openSearch()">
           <mat-icon class="material-icons">search</mat-icon>
         </button>
         <button *ngIf="fullscreenEnabled" [fxShow]="!displaySearchMode()"
-                mat-button mat-icon-button fxHide.xs fxHide.sm (click)="toggleFullscreen()">
+                mat-icon-button fxHide.lt-md (click)="toggleFullscreen()">
           <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
         </button>
         <tb-user-menu [displayUserInfo]="!displaySearchMode()"></tb-user-menu>
diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts
index fc5068a0c5..42669b0d76 100644
--- a/ui-ngx/src/app/modules/home/home.component.ts
+++ b/ui-ngx/src/app/modules/home/home.component.ts
@@ -17,24 +17,19 @@
 import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import { fromEvent, Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
-import { debounceTime, distinctUntilChanged, map, mergeMap, take, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators';
 
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { User } from '@shared/models/user.model';
 import { PageComponent } from '@shared/components/page.component';
 import { AppState } from '@core/core.state';
-import { AuthService } from '@core/auth/auth.service';
-import { UserService } from '@core/http/user.service';
-import { MenuService } from '@core/services/menu.service';
 import { getCurrentAuthState, selectAuthUser, selectUserDetails } from '@core/auth/auth.selectors';
 import { MediaBreakpoints } from '@shared/models/constants';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { Router } from '@angular/router';
 import * as _screenfull from 'screenfull';
 import { MatSidenav } from '@angular/material/sidenav';
 import { AuthState } from '@core/auth/auth.models';
 import { WINDOW } from '@core/services/window.service';
-import { ISearchableComponent, instanceOfSearchableComponent } from '@home/models/searchable-component.models';
+import { instanceOfSearchableComponent, ISearchableComponent } from '@home/models/searchable-component.models';
 
 const screenfull = _screenfull as _screenfull.Screenfull;
 
@@ -74,9 +69,6 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
 
   constructor(protected store: Store<AppState>,
               @Inject(WINDOW) private window: Window,
-              private authService: AuthService,
-              private router: Router,
-              private userService: UserService, private menuService: MenuService,
               public breakpointObserver: BreakpointObserver) {
     super(store);
   }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index 62bb29a7a6..034d92aa70 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -15,10 +15,8 @@
     limitations under the License.
 
 -->
-<a class="mat-button" routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
-  <span class="mat-button-wrapper">
-    <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
-    <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
-    <span>{{section.name | translate}}</span>
-  </span>
+<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
+  <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
+  <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
+  <span>{{section.name | translate}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 0a61a80de5..4ca7eb8f4c 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -15,15 +15,13 @@
     limitations under the License.
 
 -->
-<a class="mat-button tb-button-toggle"
+<a mat-button class="tb-button-toggle"
         routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
-  <span class="mat-button-wrapper">
-    <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
-    <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
-    <span>{{section.name | translate}}</span>
-    <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
-          [ngClass]="{'tb-toggled' : sectionActive()}"></span>
-  </span>
+  <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
+  <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
+  <span>{{section.name | translate}}</span>
+  <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
+        [ngClass]="{'tb-toggled' : sectionActive()}"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
   <li *ngFor="let page of section.pages">
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
index bb3718c2da..8dbacbab9d 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
@@ -13,6 +13,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
+:host ::ng-deep {
+  .tb-button-toggle {
+    .tb-toggle-icon {
+      display: inline-block;
+      width: 15px;
+      margin: auto 0 auto auto;
+      background-size: 100% auto;
+      transition: transform .3s ease-in-out;
+      &.tb-toggled {
+        transform: rotateZ(180deg);
+      }
+    }
+  }
 
+  .tb-menu-toggle-list {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+
+    transition: .75s cubic-bezier(.35, 0, .25, 1);
+
+    transition-property: height;
+
+    a.mat-button {
+      padding: 0 16px 0 32px;
+      font-weight: 500;
+      text-transform: none !important;
+      text-rendering: optimizeLegibility;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
index ab1ed335de..026eae6935 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
@@ -34,18 +34,8 @@
   a.mat-button {
     text-transform: uppercase;
     display: flex;
-    width: 100%;
-    max-height: 40px;
-    padding: 0 16px;
-    margin: 0;
     overflow: hidden;
     line-height: 40px;
-    color: inherit;
-    text-align: left;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
     border-radius: 0;
     &:hover {
       border-bottom: none;
@@ -61,6 +51,8 @@
 
     .mat-button-wrapper {
       width: 100%;
+      display: inline-flex;
+      align-items: center;
       mat-icon {
         margin-right: 8px;
         margin-left: 0;
@@ -76,35 +68,4 @@
       }
     }
   }
-
-  .tb-button-toggle {
-    .tb-toggle-icon {
-      display: inline-block;
-      width: 15px;
-      margin: auto 0 auto auto;
-      background-size: 100% auto;
-      transition: transform .3s, ease-in-out;
-      &.tb-toggled {
-        transform: rotateZ(180deg);
-      }
-    }
-  }
-
-  .tb-menu-toggle-list {
-    position: relative;
-    z-index: 1;
-    overflow: hidden;
-
-    transition: .75s cubic-bezier(.35, 0, .25, 1);
-
-    transition-property: height;
-
-    a.mat-button {
-      padding: 0 16px 0 32px;
-      font-weight: 500;
-      text-transform: none !important;
-      text-rendering: optimizeLegibility;
-    }
-  }
-
 }
diff --git a/ui-ngx/src/app/modules/home/models/datasource/entity-datasource.ts b/ui-ngx/src/app/modules/home/models/datasource/entity-datasource.ts
index af51523e9a..53ca40ebbb 100644
--- a/ui-ngx/src/app/modules/home/models/datasource/entity-datasource.ts
+++ b/ui-ngx/src/app/modules/home/models/datasource/entity-datasource.ts
@@ -36,8 +36,8 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
   public currentEntity: T = null;
 
   constructor(private fetchFunction: EntitiesFetchFunction<T, P>,
-              private selectionEnabledFunction: EntityBooleanFunction<T>,
-              private dataLoadedFunction: () => void) {}
+              protected selectionEnabledFunction: EntityBooleanFunction<T>,
+              protected dataLoadedFunction: (col?: number, row?: number) => void) {}
 
   connect(collectionViewer: CollectionViewer): Observable<T[] | ReadonlyArray<T>> {
     return this.entitiesSubject.asObservable();
@@ -50,7 +50,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
 
   reset() {
     const pageData = emptyPageData<T>();
-    this.entitiesSubject.next(pageData.data);
+    this.onEntities(pageData.data);
     this.pageDataSubject.next(pageData);
     this.dataLoadedFunction();
   }
@@ -64,7 +64,7 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
       catchError(() => of(emptyPageData<T>())),
     ).subscribe(
       (pageData) => {
-        this.entitiesSubject.next(pageData.data);
+        this.onEntities(pageData.data);
         this.pageDataSubject.next(pageData);
         result.next(pageData);
         this.dataLoadedFunction();
@@ -73,6 +73,10 @@ export class EntitiesDataSource<T extends BaseData<HasId>, P extends PageLink =
     return result;
   }
 
+  protected onEntities(entities: T[]) {
+    this.entitiesSubject.next(entities);
+  }
+
   isAllSelected(): Observable<boolean> {
     const numSelected = this.selection.selected.length;
     return this.entitiesSubject.pipe(
diff --git a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
index f621dbf86d..13b9c5eacc 100644
--- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
+++ b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
@@ -14,21 +14,21 @@
 /// limitations under the License.
 ///
 
-import {BaseData, HasId} from '@shared/models/base-data';
-import {EntitiesFetchFunction} from '@home/models/datasource/entity-datasource';
-import {Observable, of} from 'rxjs';
-import {emptyPageData} from '@shared/models/page/page-data';
-import {DatePipe} from '@angular/common';
-import {Direction, SortOrder} from '@shared/models/page/sort-order';
-import {EntityType, EntityTypeResource, EntityTypeTranslation} from '@shared/models/entity-type.models';
-import {EntityComponent} from '@home/components/entity/entity.component';
-import {Type} from '@angular/core';
-import {EntityAction} from './entity-component.models';
-import {HasUUID} from '@shared/models/id/has-uuid';
-import {PageLink} from '@shared/models/page/page-link';
-import {EntitiesTableComponent} from '@home/components/entity/entities-table.component';
-import {EntityTableHeaderComponent} from '@home/components/entity/entity-table-header.component';
-import {ActivatedRoute} from '@angular/router';
+import { BaseData, HasId } from '@shared/models/base-data';
+import { EntitiesDataSource, EntitiesFetchFunction } from '@home/models/datasource/entity-datasource';
+import { Observable, of } from 'rxjs';
+import { emptyPageData } from '@shared/models/page/page-data';
+import { DatePipe } from '@angular/common';
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
+import { EntityType, EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
+import { EntityComponent } from '@home/components/entity/entity.component';
+import { Type } from '@angular/core';
+import { EntityAction } from './entity-component.models';
+import { HasUUID } from '@shared/models/id/has-uuid';
+import { PageLink } from '@shared/models/page/page-link';
+import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
+import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
+import { ActivatedRoute } from '@angular/router';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
 
 export type EntityBooleanFunction<T extends BaseData<HasId>> = (entity: T) => boolean;
@@ -39,6 +39,7 @@ export type EntityByIdOperation<T extends BaseData<HasId>> = (id: HasUUID) => Ob
 export type EntityIdOneWayOperation = (id: HasUUID) => Observable<any>;
 export type EntityActionFunction<T extends BaseData<HasId>> = (action: EntityAction<T>) => boolean;
 export type CreateEntityOperation<T extends BaseData<HasId>> = () => Observable<T>;
+export type EntityRowClickFunction<T extends BaseData<HasId>> = (event: Event, entity: T) => boolean;
 
 export type CellContentFunction<T extends BaseData<HasId>> = (entity: T, key: string) => string;
 export type CellTooltipFunction<T extends BaseData<HasId>> = (entity: T, key: string) => string | undefined;
@@ -76,7 +77,9 @@ export class BaseEntityTableColumn<T extends BaseData<HasId>> {
               public key: string,
               public title: string,
               public width: string = '0px',
-              public sortable: boolean = true) {
+              public sortable: boolean = true,
+              public ignoreTranslate: boolean = false,
+              public mobileHide: boolean = false) {
   }
 }
 
@@ -120,7 +123,7 @@ export class DateEntityTableColumn<T extends BaseData<HasId>> extends EntityTabl
 
 export type EntityColumn<T extends BaseData<HasId>> = EntityTableColumn<T> | EntityActionTableColumn<T>;
 
-export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = PageLink> {
+export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = PageLink, L extends BaseData<HasId> = T> {
 
   constructor() {}
 
@@ -137,32 +140,41 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
   addEnabled = true;
   entitiesDeleteEnabled = true;
   detailsPanelEnabled = true;
+  hideDetailsTabsOnEdit = true;
   actionsColumnTitle = null;
   entityTranslations: EntityTypeTranslation;
-  entityResources: EntityTypeResource;
-  entityComponent: Type<EntityComponent<T>>;
-  entityTabsComponent: Type<EntityTabsComponent<T>>;
+  entityResources: EntityTypeResource<T>;
+  entityComponent: Type<EntityComponent<T, P, L>>;
+  entityTabsComponent: Type<EntityTabsComponent<T, P, L>>;
   addDialogStyle = {};
   defaultSortOrder: SortOrder = {property: 'createdTime', direction: Direction.ASC};
-  columns: Array<EntityColumn<T>> = [];
-  cellActionDescriptors: Array<CellActionDescriptor<T>> = [];
-  groupActionDescriptors: Array<GroupActionDescriptor<T>> = [];
+  displayPagination = true;
+  defaultPageSize = 10;
+  columns: Array<EntityColumn<L>> = [];
+  cellActionDescriptors: Array<CellActionDescriptor<L>> = [];
+  groupActionDescriptors: Array<GroupActionDescriptor<L>> = [];
   headerActionDescriptors: Array<HeaderActionDescriptor> = [];
   addActionDescriptors: Array<HeaderActionDescriptor> = [];
-  headerComponent: Type<EntityTableHeaderComponent<T>>;
+  headerComponent: Type<EntityTableHeaderComponent<T, P, L>>;
   addEntity: CreateEntityOperation<T> = null;
+  dataSource: (dataLoadedFunction: (col?: number, row?: number) => void)
+    => EntitiesDataSource<L> = (dataLoadedFunction: (col?: number, row?: number) => void) => {
+    return new EntitiesDataSource(this.entitiesFetchFunction, this.entitySelectionEnabled, dataLoadedFunction);
+  };
   detailsReadonly: EntityBooleanFunction<T> = () => false;
-  entitySelectionEnabled: EntityBooleanFunction<T> = () => true;
-  deleteEnabled: EntityBooleanFunction<T> = () => true;
-  deleteEntityTitle: EntityStringFunction<T> = () => '';
-  deleteEntityContent: EntityStringFunction<T> = () => '';
+  entitySelectionEnabled: EntityBooleanFunction<L> = () => true;
+  deleteEnabled: EntityBooleanFunction<T | L> = () => true;
+  deleteEntityTitle: EntityStringFunction<L> = () => '';
+  deleteEntityContent: EntityStringFunction<L> = () => '';
   deleteEntitiesTitle: EntityCountStringFunction = () => '';
   deleteEntitiesContent: EntityCountStringFunction = () => '';
   loadEntity: EntityByIdOperation<T> = () => of();
   saveEntity: EntityTwoWayOperation<T> = (entity) => of(entity);
   deleteEntity: EntityIdOneWayOperation = () => of();
-  entitiesFetchFunction: EntitiesFetchFunction<T, P> = () => of(emptyPageData<T>());
+  entitiesFetchFunction: EntitiesFetchFunction<L, P> = () => of(emptyPageData<L>());
   onEntityAction: EntityActionFunction<T> = () => false;
+  handleRowClick: EntityRowClickFunction<L> = () => false;
+  entityTitle: EntityStringFunction<T> = (entity) => entity?.name;
 }
 
 export function checkBoxCell(value: boolean): string {
diff --git a/ui-ngx/src/app/modules/home/models/services.map.ts b/ui-ngx/src/app/modules/home/models/services.map.ts
new file mode 100644
index 0000000000..2c786783e1
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/models/services.map.ts
@@ -0,0 +1,44 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Type } from '@angular/core';
+import { DeviceService } from '@core/http/device.service';
+import { AssetService } from '@core/http/asset.service';
+import { AttributeService } from '@core/http/attribute.service';
+import { EntityRelationService } from '@core/http/entity-relation.service';
+import { EntityService } from '@core/http/entity.service';
+import { DialogService } from '@core/services/dialog.service';
+import { CustomDialogService } from '@home/components/widget/dialog/custom-dialog.service';
+import { DatePipe } from '@angular/common';
+import { UtilsService } from '@core/services/utils.service';
+import { TranslateService } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+
+export const ServicesMap = new Map<string, Type<any>>(
+  [
+   ['deviceService', DeviceService],
+   ['assetService', AssetService],
+   ['attributeService', AttributeService],
+   ['entityRelationService', EntityRelationService],
+   ['entityService', EntityService],
+   ['dialogs', DialogService],
+   ['customDialog', CustomDialogService],
+   ['date', DatePipe],
+   ['utils', UtilsService],
+   ['translate', TranslateService],
+   ['http', HttpClient]
+  ]
+);
diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
index 7c44cb4d0e..47f1a5261b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
@@ -15,13 +15,13 @@
 ///
 
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { MailServerComponent } from '@modules/home/pages/admin/mail-server.component';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { Authority } from '@shared/models/authority.enum';
-import {GeneralSettingsComponent} from '@modules/home/pages/admin/general-settings.component';
-import {SecuritySettingsComponent} from '@modules/home/pages/admin/security-settings.component';
+import { GeneralSettingsComponent } from '@modules/home/pages/admin/general-settings.component';
+import { SecuritySettingsComponent } from '@modules/home/pages/admin/security-settings.component';
 
 const routes: Routes = [
   {
diff --git a/ui-ngx/src/app/modules/home/pages/admin/admin.module.ts b/ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
index 639be9e76f..48bcf56fd5 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
@@ -20,9 +20,9 @@ import { CommonModule } from '@angular/common';
 import { AdminRoutingModule } from './admin-routing.module';
 import { SharedModule } from '@app/shared/shared.module';
 import { MailServerComponent } from '@modules/home/pages/admin/mail-server.component';
-import {GeneralSettingsComponent} from '@modules/home/pages/admin/general-settings.component';
-import {SecuritySettingsComponent} from '@modules/home/pages/admin/security-settings.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { GeneralSettingsComponent } from '@modules/home/pages/admin/general-settings.component';
+import { SecuritySettingsComponent } from '@modules/home/pages/admin/security-settings.component';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 
 @NgModule({
   declarations:
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
index 6d208ce517..0693d3535b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
@@ -20,10 +20,8 @@ import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {AdminSettings, GeneralSettings} from '@shared/models/settings.models';
+import { AdminSettings, GeneralSettings } from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { TranslateService } from '@ngx-translate/core';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 
 @Component({
@@ -39,7 +37,6 @@ export class GeneralSettingsComponent extends PageComponent implements OnInit, H
   constructor(protected store: Store<AppState>,
               private router: Router,
               private adminService: AdminService,
-              private translate: TranslateService,
               public fb: FormBuilder) {
     super(store);
   }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index 32dcc0d22c..e87ccd3159 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -95,13 +95,12 @@
             <mat-label translate>common.password</mat-label>
             <input matInput formControlName="password" type="password" placeholder="{{ 'common.enter-password' | translate }}"/>
           </mat-form-field>
-          <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
-            <button mat-button mat-raised-button
-                    type="button" style="margin-right: 16px;"
+          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+            <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || mailSettingsForm.invalid" (click)="sendTestMail()">
               {{'admin.send-test-mail' | translate}}
             </button>
-            <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || mailSettingsForm.invalid || !mailSettingsForm.dirty"
+            <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || mailSettingsForm.invalid || !mailSettingsForm.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
index b5616016bd..52e6c64b6b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
@@ -20,10 +20,8 @@ import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { SecuritySettings} from '@shared/models/settings.models';
+import { SecuritySettings } from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { TranslateService } from '@ngx-translate/core';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 
 @Component({
@@ -39,7 +37,6 @@ export class SecuritySettingsComponent extends PageComponent implements OnInit,
   constructor(protected store: Store<AppState>,
               private router: Router,
               private adminService: AdminService,
-              private translate: TranslateService,
               public fb: FormBuilder) {
     super(store);
   }
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts b/ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts
index bf2b8970cd..b882dff5e0 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {AssetsTableConfigResolver} from './assets-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { AssetsTableConfigResolver } from './assets-table-config.resolver';
 
 const routes: Routes = [
   {
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.scss
index e5e92c2f3d..bd3bc86b1c 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.scss
@@ -13,14 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   flex: 1;
   display: flex;
   justify-content: flex-start;
+  min-width: 150px;
 }
 
 :host ::ng-deep {
   tb-entity-subtype-select {
+    width: 100%;
+
     mat-form-field {
       font-size: 16px;
 
@@ -31,6 +36,14 @@
       .mat-form-field-underline {
         bottom: 0;
       }
+
+      @media #{$mat-xs} {
+        width: 100%;
+
+        .mat-form-field-infix {
+          width: auto !important;
+        }
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.ts b/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.ts
index c222f414e1..bb0700dad8 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset-table-header.component.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityTableHeaderComponent} from '../../components/entity/entity-table-header.component';
-import {EntityType} from '@shared/models/entity-type.models';
-import {AssetInfo} from '@shared/models/asset.models';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component';
+import { EntityType } from '@shared/models/entity-type.models';
+import { AssetInfo } from '@shared/models/asset.models';
 
 @Component({
   selector: 'tb-asset-table-header',
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
index 1ac34a2407..7a9b65d82e 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'asset.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.component.ts b/ui-ngx/src/app/modules/home/pages/asset/asset.component.ts
index 46e8da5798..5c3fd44a8e 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.component.ts
@@ -14,16 +14,17 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {AssetInfo} from '@app/shared/models/asset.models';
+import { Component, Inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { AssetInfo } from '@app/shared/models/asset.models';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-asset',
@@ -38,8 +39,10 @@ export class AssetComponent extends EntityComponent<AssetInfo> {
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
+              @Inject('entity') protected entityValue: AssetInfo,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<AssetInfo>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   ngOnInit() {
diff --git a/ui-ngx/src/app/modules/home/pages/asset/asset.module.ts b/ui-ngx/src/app/modules/home/pages/asset/asset.module.ts
index c2c735c186..4bcb2404ab 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/asset.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/asset.module.ts
@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {AssetComponent} from './asset.component';
-import {AssetTableHeaderComponent} from './asset-table-header.component';
-import {AssetRoutingModule} from './asset-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { AssetComponent } from './asset.component';
+import { AssetTableHeaderComponent } from './asset-table-header.component';
+import { AssetRoutingModule } from './asset-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts
index 2ef473a9c6..d199af2542 100644
--- a/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts
@@ -146,7 +146,7 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
 
   configureColumns(assetScope: string): Array<EntityTableColumn<AssetInfo>> {
     const columns: Array<EntityTableColumn<AssetInfo>> = [
-      new DateEntityTableColumn<AssetInfo>('createdTime', 'asset.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<AssetInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<AssetInfo>('name', 'asset.name', '25%'),
       new EntityTableColumn<AssetInfo>('type', 'asset.asset-type', '25%'),
       new EntityTableColumn<DeviceInfo>('label', 'asset.label', '25%'),
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts b/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
index dc3bcfb62d..f3ec436a1e 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts
@@ -14,16 +14,16 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {UsersTableConfigResolver} from '../user/users-table-config.resolver';
-import {CustomersTableConfigResolver} from './customers-table-config.resolver';
-import {DevicesTableConfigResolver} from '@modules/home/pages/device/devices-table-config.resolver';
-import {AssetsTableConfigResolver} from '../asset/assets-table-config.resolver';
-import {DashboardsTableConfigResolver} from '@modules/home/pages/dashboard/dashboards-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { UsersTableConfigResolver } from '../user/users-table-config.resolver';
+import { CustomersTableConfigResolver } from './customers-table-config.resolver';
+import { DevicesTableConfigResolver } from '@modules/home/pages/device/devices-table-config.resolver';
+import { AssetsTableConfigResolver } from '../asset/assets-table-config.resolver';
+import { DashboardsTableConfigResolver } from '@modules/home/pages/dashboard/dashboards-table-config.resolver';
 import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
 import { BreadCrumbConfig } from '@shared/components/breadcrumb';
 import { dashboardBreadcumbLabelFunction, DashboardResolver } from '@home/pages/dashboard/dashboard-routing.module';
@@ -124,7 +124,7 @@ const routes: Routes = [
               breadcrumb: {
                 labelFunction: dashboardBreadcumbLabelFunction,
                 icon: 'dashboard'
-              } as BreadCrumbConfig,
+              } as BreadCrumbConfig<DashboardPageComponent>,
               auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
               title: 'customer.dashboard',
               widgetEditMode: false
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
index 2c2410e2c3..a30e0acdd5 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
@@ -46,7 +46,7 @@
           [fxShow]="!hideDelete() && !isEdit && !isPublic">
     {{'customer.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.component.ts b/ui-ngx/src/app/modules/home/pages/customer/customer.component.ts
index 993b63e716..5d58d2be2c 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.component.ts
@@ -14,15 +14,15 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Customer } from '@shared/models/customer.model';
-import {Tenant} from '@app/shared/models/tenant.model';
-import {ActionNotificationShow} from '@app/core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {ContactBasedComponent} from '../../components/entity/contact-based.component';
+import { ActionNotificationShow } from '@app/core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { ContactBasedComponent } from '../../components/entity/contact-based.component';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-customer',
@@ -34,8 +34,10 @@ export class CustomerComponent extends ContactBasedComponent<Customer> {
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
+              @Inject('entity') protected entityValue: Customer,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<Customer>,
               protected fb: FormBuilder) {
-    super(store, fb);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   hideDelete() {
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customer.module.ts b/ui-ngx/src/app/modules/home/pages/customer/customer.module.ts
index 4ba1782c71..2cdbbcf7c1 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customer.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customer.module.ts
@@ -17,9 +17,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {CustomerComponent} from '@modules/home/pages/customer/customer.component';
-import {CustomerRoutingModule} from './customer-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { CustomerComponent } from '@modules/home/pages/customer/customer.component';
+import { CustomerRoutingModule } from './customer-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { CustomerTabsComponent } from '@home/pages/customer/customer-tabs.component';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
index ae48b1b034..2e0b0abe14 100644
--- a/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts
@@ -18,7 +18,6 @@ import { Injectable } from '@angular/core';
 
 import { Resolve, Router } from '@angular/router';
 
-import { Tenant } from '@shared/models/tenant.model';
 import {
   DateEntityTableColumn,
   EntityTableColumn,
@@ -26,15 +25,11 @@ import {
 } from '@home/models/entity/entities-table-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import {
-  EntityType,
-  entityTypeResources,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import {Customer} from '@app/shared/models/customer.model';
-import {CustomerService} from '@app/core/http/customer.service';
-import {CustomerComponent} from '@modules/home/pages/customer/customer.component';
+import { Customer } from '@app/shared/models/customer.model';
+import { CustomerService } from '@app/core/http/customer.service';
+import { CustomerComponent } from '@modules/home/pages/customer/customer.component';
 import { CustomerTabsComponent } from '@home/pages/customer/customer-tabs.component';
 
 @Injectable()
@@ -54,7 +49,7 @@ export class CustomersTableConfigResolver implements Resolve<EntityTableConfig<C
     this.config.entityResources = entityTypeResources.get(EntityType.CUSTOMER);
 
     this.config.columns.push(
-      new DateEntityTableColumn<Customer>('createdTime', 'customer.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<Customer>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<Customer>('title', 'customer.title', '25%'),
       new EntityTableColumn<Customer>('email', 'contact.email', '25%'),
       new EntityTableColumn<Customer>('country', 'contact.country', '25%'),
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
index 4cf252527b..5b2f950da6 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
index e3aea3be2f..7f19cfe571 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-form.component.ts
@@ -14,21 +14,22 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
+import { Component, Inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
 import {
   Dashboard,
-  isPublicDashboard,
   getDashboardAssignedCustomersText,
   isCurrentPublicDashboardCustomer,
-  DashboardInfo
+  isPublicDashboard
 } from '@shared/models/dashboard.models';
-import {DashboardService} from '@core/http/dashboard.service';
+import { DashboardService } from '@core/http/dashboard.service';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
+import { isEqual } from '@core/utils';
 
 @Component({
   selector: 'tb-dashboard-form',
@@ -46,8 +47,10 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
               private dashboardService: DashboardService,
+              @Inject('entity') protected entityValue: Dashboard,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<Dashboard>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   ngOnInit() {
@@ -104,7 +107,9 @@ export class DashboardFormComponent extends EntityComponent<Dashboard> {
   }
 
   private updateFields(entity: Dashboard): void {
-    this.assignedCustomersText = getDashboardAssignedCustomersText(entity);
-    this.publicLink = this.dashboardService.getPublicDashboardLink(entity);
+    if (entity && !isEqual(entity, {})) {
+      this.assignedCustomersText = getDashboardAssignedCustomersText(entity);
+      this.publicLink = this.dashboardService.getPublicDashboardLink(entity);
+    }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts
index 4422189897..f69a9b591f 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts
@@ -45,7 +45,7 @@ import {
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { AuthUser } from '@shared/models/user.model';
-import { getCurrentAuthState, getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { getCurrentAuthState } from '@core/auth/auth.selectors';
 import { Widget, WidgetConfig, WidgetPosition, widgetTypesData } from '@app/shared/models/widget.models';
 import { environment as env } from '@env/environment';
 import { Authority } from '@shared/models/authority.enum';
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts
index 0ea33212f8..7fd00cdd04 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts
@@ -14,17 +14,12 @@
 /// limitations under the License.
 ///
 
-import { DashboardLayoutId, GridSettings, WidgetLayout, Dashboard, WidgetLayouts } from '@app/shared/models/dashboard.models';
+import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models';
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
 import { Timewindow } from '@shared/models/time/time.models';
 import { IAliasController, IStateController } from '@core/api/widget-api.models';
 import { ILayoutController } from './layout/layout.models';
-import {
-  DashboardContextMenuItem,
-  WidgetContextMenuItem
-} from '@home/models/dashboard-component.models';
-import { Observable } from 'rxjs';
-import { ChangeDetectorRef } from '@angular/core';
+import { DashboardContextMenuItem, WidgetContextMenuItem } from '@home/models/dashboard-component.models';
 
 export declare type DashboardPageScope = 'tenant' | 'customer';
 
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
index afcf45222d..ebb916d39a 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts
@@ -17,14 +17,11 @@
 import { Injectable, NgModule } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {DashboardsTableConfigResolver} from './dashboards-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { DashboardsTableConfigResolver } from './dashboards-table-config.resolver';
 import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.component';
 import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb';
-import { widgetTypesBreadcumbLabelFunction } from '@home/pages/widget/widget-library-routing.module';
-import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { WidgetService } from '@core/http/widget.service';
 import { Observable } from 'rxjs';
 import { Dashboard } from '@app/shared/models/dashboard.models';
 import { DashboardService } from '@core/http/dashboard.service';
@@ -46,7 +43,8 @@ export class DashboardResolver implements Resolve<Dashboard> {
   }
 }
 
-export const dashboardBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate, component) => component.dashboard.title);
+export const dashboardBreadcumbLabelFunction: BreadCrumbLabelFunction<DashboardPageComponent>
+  = ((route, translate, component) => component.dashboard.title);
 
 const routes: Routes = [
   {
@@ -77,7 +75,7 @@ const routes: Routes = [
           breadcrumb: {
             labelFunction: dashboardBreadcumbLabelFunction,
             icon: 'dashboard'
-          } as BreadCrumbConfig,
+          } as BreadCrumbConfig<DashboardPageComponent>,
           auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
           title: 'dashboard.dashboard',
           widgetEditMode: false
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
index 385bb2bca4..4d176a765d 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {ActivatedRouteSnapshot, Resolve, Router} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -26,20 +26,20 @@ import {
   GroupActionDescriptor,
   HeaderActionDescriptor
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
-import {forkJoin, Observable, of} from 'rxjs';
-import {select, Store} from '@ngrx/store';
-import {selectAuthUser} from '@core/auth/auth.selectors';
-import {map, mergeMap, take, tap} from 'rxjs/operators';
-import {AppState} from '@core/core.state';
-import {Authority} from '@app/shared/models/authority.enum';
-import {CustomerService} from '@core/http/customer.service';
-import {Customer} from '@app/shared/models/customer.model';
+import { TranslateService } from '@ngx-translate/core';
+import { DatePipe } from '@angular/common';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
+import { forkJoin, Observable, of } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+import { selectAuthUser } from '@core/auth/auth.selectors';
+import { map, mergeMap, take, tap } from 'rxjs/operators';
+import { AppState } from '@core/core.state';
+import { Authority } from '@app/shared/models/authority.enum';
+import { CustomerService } from '@core/http/customer.service';
+import { Customer } from '@app/shared/models/customer.model';
 import { MatDialog } from '@angular/material/dialog';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
 import {
   AddEntitiesToCustomerDialogComponent,
   AddEntitiesToCustomerDialogData
@@ -51,8 +51,8 @@ import {
   isCurrentPublicDashboardCustomer,
   isPublicDashboard
 } from '@app/shared/models/dashboard.models';
-import {DashboardService} from '@app/core/http/dashboard.service';
-import {DashboardFormComponent} from '@modules/home/pages/dashboard/dashboard-form.component';
+import { DashboardService } from '@app/core/http/dashboard.service';
+import { DashboardFormComponent } from '@modules/home/pages/dashboard/dashboard-form.component';
 import {
   ManageDashboardCustomersActionType,
   ManageDashboardCustomersDialogComponent,
@@ -142,7 +142,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
 
   configureColumns(dashboardScope: string): Array<EntityTableColumn<DashboardInfo>> {
     const columns: Array<EntityTableColumn<DashboardInfo>> = [
-      new DateEntityTableColumn<DashboardInfo>('createdTime', 'dashboard.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<DashboardInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<DashboardInfo>('title', 'dashboard.title', '50%')
     ];
     if (dashboardScope === 'tenant') {
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
index bd43fd13d6..fb67c143ce 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.html
@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()">
-  <mat-toolbar fxLayout="row" color="primary">
+<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()" style="min-width: 350px;">
+  <mat-toolbar color="primary">
     <h2 translate>device.device-credentials</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -32,7 +32,7 @@
     <fieldset [disabled]="(isLoading$ | async) || isReadOnly">
       <mat-form-field class="mat-block">
         <mat-label translate>device.credentials-type</mat-label>
-        <mat-select matInput formControlName="credentialsType"
+        <mat-select formControlName="credentialsType"
                     (ngModelChange)="credentialsTypeChanged()">
           <mat-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
             {{ credentialTypeNamesMap.get(deviceCredentialsType[credentialsType]) }}
@@ -60,16 +60,14 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button *ngIf="!isReadOnly" mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button *ngIf="!isReadOnly" mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || deviceCredentialsForm.invalid
             || !deviceCredentialsForm.dirty">
       {{ 'action.save' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts
index a7963c656b..1ee3c8bd7a 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device-credentials-dialog.component.ts
@@ -14,18 +14,14 @@
 /// limitations under the License.
 ///
 
-import {Component, OnInit, SkipSelf, Inject} from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { TranslateService } from '@ngx-translate/core';
-import { AuthService } from '@core/auth/auth.service';
-import {DeviceService} from '@core/http/device.service';
-import {DeviceCredentials, DeviceCredentialsType, credentialTypeNames} from '@shared/models/device.models';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { DeviceService } from '@core/http/device.service';
+import { credentialTypeNames, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts b/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts
index 7326deccb7..a44c38cdc5 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device-routing.module.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {DevicesTableConfigResolver} from '@modules/home/pages/device/devices-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { DevicesTableConfigResolver } from '@modules/home/pages/device/devices-table-config.resolver';
 
 const routes: Routes = [
   {
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.scss
index e5e92c2f3d..bd3bc86b1c 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/device/device-table-header.component.scss
@@ -13,14 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   flex: 1;
   display: flex;
   justify-content: flex-start;
+  min-width: 150px;
 }
 
 :host ::ng-deep {
   tb-entity-subtype-select {
+    width: 100%;
+
     mat-form-field {
       font-size: 16px;
 
@@ -31,6 +36,14 @@
       .mat-form-field-underline {
         bottom: 0;
       }
+
+      @media #{$mat-xs} {
+        width: 100%;
+
+        .mat-form-field-infix {
+          width: auto !important;
+        }
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/device/device-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/device/device-tabs.component.ts
index afb3d0aa75..d76c01fd70 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device-tabs.component.ts
@@ -18,7 +18,6 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DeviceInfo } from '@shared/models/device.models';
-import { EntityType } from '@shared/models/entity-type.models';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
 
 @Component({
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.html b/ui-ngx/src/app/modules/home/pages/device/device.component.html
index 3df4a40460..526f877bc8 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,13 +40,13 @@
           [fxShow]="!isEdit">
     {{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-raised-button color="primary" fxFlex.xs
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [fxShow]="!hideDelete() && !isEdit">
     {{'device.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.ts b/ui-ngx/src/app/modules/home/pages/device/device.component.ts
index 91b8e64b6b..d187c8bf0c 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.ts
@@ -14,22 +14,19 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { Component, Inject } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
-import { map } from 'rxjs/operators';
-import { Authority } from '@shared/models/authority.enum';
-import {DeviceInfo} from '@shared/models/device.models';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {DeviceService} from '@core/http/device.service';
-import {ClipboardService} from 'ngx-clipboard';
+import { DeviceInfo } from '@shared/models/device.models';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceService } from '@core/http/device.service';
+import { ClipboardService } from 'ngx-clipboard';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-device',
@@ -46,8 +43,10 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
               protected translate: TranslateService,
               private deviceService: DeviceService,
               private clipboardService: ClipboardService,
+              @Inject('entity') protected entityValue: DeviceInfo,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<DeviceInfo>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   ngOnInit() {
diff --git a/ui-ngx/src/app/modules/home/pages/device/device.module.ts b/ui-ngx/src/app/modules/home/pages/device/device.module.ts
index 9c2dd0f886..c6e7c3bcc4 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device.module.ts
@@ -17,12 +17,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {DeviceComponent} from '@modules/home/pages/device/device.component';
-import {DeviceRoutingModule} from './device-routing.module';
-import {DeviceTableHeaderComponent} from '@modules/home/pages/device/device-table-header.component';
-import {DeviceCredentialsDialogComponent} from '@modules/home/pages/device/device-credentials-dialog.component';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { DeviceComponent } from '@modules/home/pages/device/device.component';
+import { DeviceRoutingModule } from './device-routing.module';
+import { DeviceTableHeaderComponent } from '@modules/home/pages/device/device-table-header.component';
+import { DeviceCredentialsDialogComponent } from '@modules/home/pages/device/device-credentials-dialog.component';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
index d97a5fa45d..3216e776dd 100644
--- a/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts
@@ -149,7 +149,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
 
   configureColumns(deviceScope: string): Array<EntityTableColumn<DeviceInfo>> {
     const columns: Array<EntityTableColumn<DeviceInfo>> = [
-      new DateEntityTableColumn<DeviceInfo>('createdTime', 'device.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<DeviceInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<DeviceInfo>('name', 'device.name', '25%'),
       new EntityTableColumn<DeviceInfo>('type', 'device.device-type', '25%'),
       new EntityTableColumn<DeviceInfo>('label', 'device.label', '25%')
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-routing.module.ts b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-routing.module.ts
index 815f8906b3..58b3416eb2 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-routing.module.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {EntityViewsTableConfigResolver} from '@modules/home/pages/entity-view/entity-views-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { EntityViewsTableConfigResolver } from '@modules/home/pages/entity-view/entity-views-table-config.resolver';
 
 const routes: Routes = [
   {
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.scss
index e5e92c2f3d..bd3bc86b1c 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.scss
@@ -13,14 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
+
 :host {
   flex: 1;
   display: flex;
   justify-content: flex-start;
+  min-width: 150px;
 }
 
 :host ::ng-deep {
   tb-entity-subtype-select {
+    width: 100%;
+
     mat-form-field {
       font-size: 16px;
 
@@ -31,6 +36,14 @@
       .mat-form-field-underline {
         bottom: 0;
       }
+
+      @media #{$mat-xs} {
+        width: 100%;
+
+        .mat-form-field-infix {
+          width: auto !important;
+        }
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.ts b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.ts
index 49bb617f61..5e80aec3c1 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view-table-header.component.ts
@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityTableHeaderComponent} from '../../components/entity/entity-table-header.component';
-import {EntityType} from '@shared/models/entity-type.models';
-import {EntityViewInfo} from '@app/shared/models/entity-view.models';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component';
+import { EntityType } from '@shared/models/entity-type.models';
+import { EntityViewInfo } from '@app/shared/models/entity-view.models';
 
 @Component({
   selector: 'tb-entity-view-table-header',
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 69e56aaa27..0d5a733954 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'entity-view.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.ts b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.ts
index 6f41837190..1a1895dada 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.ts
@@ -14,20 +14,20 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {EntityViewInfo} from '@app/shared/models/entity-view.models';
-import {Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {DataKeyType} from '@shared/models/telemetry/telemetry.models';
-import {EntityId} from '@app/shared/models/id/entity-id';
+import { Component, Inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { EntityViewInfo } from '@app/shared/models/entity-view.models';
+import { Observable } from 'rxjs';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { EntityId } from '@app/shared/models/id/entity-id';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-entity-view',
@@ -51,8 +51,10 @@ export class EntityViewComponent extends EntityComponent<EntityViewInfo> {
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
+              @Inject('entity') protected entityValue: EntityViewInfo,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<EntityViewInfo>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   ngOnInit() {
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.module.ts b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.module.ts
index 298a72faca..494ca571ea 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.module.ts
@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {EntityViewComponent} from '@modules/home/pages/entity-view/entity-view.component';
-import {EntityViewTableHeaderComponent} from './entity-view-table-header.component';
-import {EntityViewRoutingModule} from './entity-view-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { EntityViewComponent } from '@modules/home/pages/entity-view/entity-view.component';
+import { EntityViewTableHeaderComponent } from './entity-view-table-header.component';
+import { EntityViewRoutingModule } from './entity-view-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { EntityViewTabsComponent } from '@home/pages/entity-view/entity-view-tabs.component';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts
index db92c823be..755d5b37d9 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts
@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {ActivatedRouteSnapshot, Resolve, Router} from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
 import {
   CellActionDescriptor,
   checkBoxCell,
@@ -26,22 +26,22 @@ import {
   GroupActionDescriptor,
   HeaderActionDescriptor
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
-import {forkJoin, Observable, of} from 'rxjs';
-import {select, Store} from '@ngrx/store';
-import {selectAuthUser} from '@core/auth/auth.selectors';
-import {map, mergeMap, take, tap} from 'rxjs/operators';
-import {AppState} from '@core/core.state';
-import {Authority} from '@app/shared/models/authority.enum';
-import {CustomerService} from '@core/http/customer.service';
-import {Customer} from '@app/shared/models/customer.model';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {BroadcastService} from '@core/services/broadcast.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DatePipe } from '@angular/common';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
+import { forkJoin, Observable, of } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+import { selectAuthUser } from '@core/auth/auth.selectors';
+import { map, mergeMap, take, tap } from 'rxjs/operators';
+import { AppState } from '@core/core.state';
+import { Authority } from '@app/shared/models/authority.enum';
+import { CustomerService } from '@core/http/customer.service';
+import { Customer } from '@app/shared/models/customer.model';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { BroadcastService } from '@core/services/broadcast.service';
 import { MatDialog } from '@angular/material/dialog';
-import {DialogService} from '@core/services/dialog.service';
+import { DialogService } from '@core/services/dialog.service';
 import {
   AssignToCustomerDialogComponent,
   AssignToCustomerDialogData
@@ -50,11 +50,11 @@ import {
   AddEntitiesToCustomerDialogComponent,
   AddEntitiesToCustomerDialogData
 } from '../../dialogs/add-entities-to-customer-dialog.component';
-import {EntityView, EntityViewInfo} from '@app/shared/models/entity-view.models';
-import {EntityViewService} from '@core/http/entity-view.service';
-import {EntityViewComponent} from '@modules/home/pages/entity-view/entity-view.component';
-import {EntityViewTableHeaderComponent} from '@modules/home/pages/entity-view/entity-view-table-header.component';
-import {EntityViewId} from '@shared/models/id/entity-view-id';
+import { EntityView, EntityViewInfo } from '@app/shared/models/entity-view.models';
+import { EntityViewService } from '@core/http/entity-view.service';
+import { EntityViewComponent } from '@modules/home/pages/entity-view/entity-view.component';
+import { EntityViewTableHeaderComponent } from '@modules/home/pages/entity-view/entity-view-table-header.component';
+import { EntityViewId } from '@shared/models/id/entity-view-id';
 import { EntityViewTabsComponent } from '@home/pages/entity-view/entity-view-tabs.component';
 
 @Injectable()
@@ -146,7 +146,7 @@ export class EntityViewsTableConfigResolver implements Resolve<EntityTableConfig
 
   configureColumns(entityViewScope: string): Array<EntityTableColumn<EntityViewInfo>> {
     const columns: Array<EntityTableColumn<EntityViewInfo>> = [
-      new DateEntityTableColumn<EntityViewInfo>('createdTime', 'entity-view.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<EntityViewInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<EntityViewInfo>('name', 'entity-view.name', '33%'),
       new EntityTableColumn<EntityViewInfo>('type', 'entity-view.entity-view-type', '33%'),
     ];
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
index 86d470b1af..f2d07de7fb 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
@@ -24,11 +24,11 @@
       <mat-card-content>
         <mat-grid-list rowHeight="170px" [cols]="section.places.length">
           <mat-grid-tile *ngFor="let place of section.places">
-            <button mat-button mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
+            <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
               <mat-icon *ngIf="!place.isMdiIcon" class="material-icons tb-mat-96">{{place.icon}}</mat-icon>
               <mat-icon *ngIf="place.isMdiIcon" class="tb-mat-96" [svgIcon]="place.icon"></mat-icon>
               <span translate>{{place.name}}</span>
-            </button>
+            </a>
           </mat-grid-tile>
         </mat-grid-list>
       </mat-card-content>
diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
index b8712ab447..8a7118d6d9 100644
--- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
@@ -37,10 +37,17 @@
         padding: 16px;
       }
     }
-    button.tb-card-button {
+    .tb-card-button {
       width: 100%;
       height: 100%;
       max-width: 240px;
+      text-transform: uppercase;
+      &:hover {
+        border-bottom: none;
+      }
+      &:focus {
+        border-bottom: none;
+      }
       .mat-button-wrapper {
         width: 100%;
         height: 100%;
@@ -52,8 +59,8 @@
         }
         span {
           height: 18px;
-          min-height: 18px;
-          max-height: 18px;
+          min-height: 36px;
+          max-height: 36px;
           padding: 0 0 20px 0;
           margin: auto;
           font-size: 18px;
diff --git a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
index 47eb131334..8ff4824c10 100644
--- a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts
@@ -29,20 +29,6 @@ import { EntityViewModule } from '@modules/home/pages/entity-view/entity-view.mo
 import { RuleChainModule } from '@modules/home/pages/rulechain/rulechain.module';
 import { WidgetLibraryModule } from '@modules/home/pages/widget/widget-library.module';
 import { DashboardModule } from '@modules/home/pages/dashboard/dashboard.module';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  { path: '**',
-    redirectTo: 'home'
-  }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class PageNotFoundRoutingModule { }
 
 @NgModule({
   exports: [
@@ -58,8 +44,7 @@ export class PageNotFoundRoutingModule { }
     WidgetLibraryModule,
     DashboardModule,
     AuditLogModule,
-    UserModule,
-    PageNotFoundRoutingModule
+    UserModule
   ]
 })
 export class HomePagesModule { }
diff --git a/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html b/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html
index 0a3b056a1d..8a43675cfd 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.html
@@ -19,7 +19,7 @@
   <mat-toolbar fxLayout="row" color="primary">
     <h2 translate>profile.change-password</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             [mat-dialog-close]="false"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -45,15 +45,13 @@
       <mat-icon class="material-icons" matPrefix>lock</mat-icon>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || changePasswordForm.invalid">
       {{ 'profile.change-password' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             [mat-dialog-close]="false" cdkFocusInitial>
diff --git a/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.ts
index 66febeeca4..d439ed5dbf 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/profile/change-password-dialog.component.ts
@@ -16,10 +16,9 @@
 
 import { Component, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from '@core/auth/auth.service';
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts b/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts
index 668b260b5c..0a6f02eca7 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile-routing.module.ts
@@ -14,18 +14,18 @@
 /// limitations under the License.
 ///
 
-import {Injectable, NgModule} from '@angular/core';
-import {Resolve, RouterModule, Routes} from '@angular/router';
+import { Injectable, NgModule } from '@angular/core';
+import { Resolve, RouterModule, Routes } from '@angular/router';
 
-import {ProfileComponent} from './profile.component';
-import {ConfirmOnExitGuard} from '@core/guards/confirm-on-exit.guard';
-import {Authority} from '@shared/models/authority.enum';
-import {User} from '@shared/models/user.model';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {UserService} from '@core/http/user.service';
-import {getCurrentAuthUser} from '@core/auth/auth.selectors';
-import {Observable} from 'rxjs';
+import { ProfileComponent } from './profile.component';
+import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
+import { Authority } from '@shared/models/authority.enum';
+import { User } from '@shared/models/user.model';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { UserService } from '@core/http/user.service';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class UserProfileResolver implements Resolve<User> {
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
index 4871cb0e97..88a47338c3 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.html
@@ -18,7 +18,7 @@
 <div>
   <mat-card class="profile-card">
     <mat-card-title>
-      <div fxLayout="row">
+      <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px">
         <div fxFlex fxLayout="column">
           <span class="mat-headline" translate>profile.profile</span>
           <span class="profile-email" style='opacity: 0.7;'>{{ profile ? profile.get('email').value : '' }}</span>
diff --git a/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts b/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
index f7b2630684..1fe2dd4f8d 100644
--- a/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/profile/profile.component.ts
@@ -14,24 +14,24 @@
 /// limitations under the License.
 ///
 
-import {Component, OnInit} from '@angular/core';
-import {UserService} from '@core/http/user.service';
-import {User} from '@shared/models/user.model';
-import {Authority} from '@shared/models/authority.enum';
-import {PageComponent} from '@shared/components/page.component';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {HasConfirmForm} from '@core/guards/confirm-on-exit.guard';
-import {ActionAuthUpdateUserDetails} from '@core/auth/auth.actions';
-import {environment as env} from '@env/environment';
-import {TranslateService} from '@ngx-translate/core';
-import {ActionSettingsChangeLanguage} from '@core/settings/settings.actions';
-import {ChangePasswordDialogComponent} from '@modules/home/pages/profile/change-password-dialog.component';
+import { Component, OnInit } from '@angular/core';
+import { UserService } from '@core/http/user.service';
+import { User } from '@shared/models/user.model';
+import { Authority } from '@shared/models/authority.enum';
+import { PageComponent } from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
+import { ActionAuthUpdateUserDetails } from '@core/auth/auth.actions';
+import { environment as env } from '@env/environment';
+import { TranslateService } from '@ngx-translate/core';
+import { ActionSettingsChangeLanguage } from '@core/settings/settings.actions';
+import { ChangePasswordDialogComponent } from '@modules/home/pages/profile/change-password-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import {DialogService} from '@core/services/dialog.service';
-import {AuthService} from '@core/auth/auth.service';
-import {ActivatedRoute} from '@angular/router';
+import { DialogService } from '@core/services/dialog.service';
+import { AuthService } from '@core/auth/auth.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'tb-profile',
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
index d0bbc57628..768e76b5a9 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss
@@ -319,6 +319,7 @@
 
   .tb-context-menu-header {
     display: flex;
+    box-sizing: content-box;
     flex-direction: row;
     height: 36px;
     min-height: 36px;
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
index 0624129fe0..02643a79c4 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts
@@ -126,7 +126,8 @@ export class RuleChainImportGuard implements CanActivate {
 
 }
 
-export const ruleChainBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate, component) => {
+export const ruleChainBreadcumbLabelFunction: BreadCrumbLabelFunction<RuleChainPageComponent>
+  = ((route, translate, component) => {
   let label: string = component.ruleChain.name;
   if (component.ruleChain.root) {
     label += ` (${translate.instant('rulechain.root')})`;
@@ -134,7 +135,8 @@ export const ruleChainBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route,
   return label;
 });
 
-export const importRuleChainBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate, component) => {
+export const importRuleChainBreadcumbLabelFunction: BreadCrumbLabelFunction<RuleChainPageComponent> =
+  ((route, translate, component) => {
   return `${translate.instant('rulechain.import')}: ${component.ruleChain.name}`;
 });
 
@@ -167,7 +169,7 @@ const routes: Routes = [
           breadcrumb: {
             labelFunction: ruleChainBreadcumbLabelFunction,
             icon: 'settings_ethernet'
-          } as BreadCrumbConfig,
+          } as BreadCrumbConfig<RuleChainPageComponent>,
           auth: [Authority.TENANT_ADMIN],
           title: 'rulechain.rulechain',
           import: false
@@ -187,7 +189,7 @@ const routes: Routes = [
           breadcrumb: {
             labelFunction: importRuleChainBreadcumbLabelFunction,
             icon: 'settings_ethernet'
-          } as BreadCrumbConfig,
+          } as BreadCrumbConfig<RuleChainPageComponent>,
           auth: [Authority.TENANT_ADMIN],
           title: 'rulechain.rulechain',
           import: true
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.ts
index 805890b5f3..8cd88e548f 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.component.ts
@@ -14,17 +14,15 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {AssetInfo} from '@app/shared/models/asset.models';
-import {RuleChain} from '@shared/models/rule-chain.models';
+import { Component, Inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { RuleChain } from '@shared/models/rule-chain.models';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-rulechain',
@@ -35,8 +33,10 @@ export class RuleChainComponent extends EntityComponent<RuleChain> {
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
+              @Inject('entity') protected entityValue: RuleChain,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<RuleChain>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   hideDelete() {
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
index 5b3f90a5a1..bcc18f4714 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain.module.ts
@@ -14,14 +14,18 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
-import {RuleChainComponent} from '@modules/home/pages/rulechain/rulechain.component';
-import {RuleChainRoutingModule} from '@modules/home/pages/rulechain/rulechain-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.component';
+import { RuleChainRoutingModule } from '@modules/home/pages/rulechain/rulechain-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
-import { RuleChainPageComponent, AddRuleNodeLinkDialogComponent, AddRuleNodeDialogComponent } from './rulechain-page.component';
+import {
+  AddRuleNodeDialogComponent,
+  AddRuleNodeLinkDialogComponent,
+  RuleChainPageComponent
+} from './rulechain-page.component';
 import { RuleNodeComponent } from '@home/pages/rulechain/rulenode.component';
 import { FC_NODE_COMPONENT_CONFIG } from 'ngx-flowchart/dist/ngx-flowchart';
 import { RuleNodeDetailsComponent } from './rule-node-details.component';
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
index 1838866665..3dff54f6f5 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
@@ -14,23 +14,23 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Resolve, Router} from '@angular/router';
+import { Resolve, Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
   EntityTableColumn,
   EntityTableConfig
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
-import {RuleChain} from '@shared/models/rule-chain.models';
-import {RuleChainService} from '@core/http/rule-chain.service';
-import {RuleChainComponent} from '@modules/home/pages/rulechain/rulechain.component';
-import {DialogService} from '@core/services/dialog.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DatePipe } from '@angular/common';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
+import { RuleChain } from '@shared/models/rule-chain.models';
+import { RuleChainService } from '@core/http/rule-chain.service';
+import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.component';
+import { DialogService } from '@core/services/dialog.service';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
 import { ItemBufferService } from '@core/services/item-buffer.service';
@@ -55,7 +55,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
     this.config.entityResources = entityTypeResources.get(EntityType.RULE_CHAIN);
 
     this.config.columns.push(
-      new DateEntityTableColumn<RuleChain>('createdTime', 'rulechain.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<RuleChain>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<RuleChain>('name', 'rulechain.name', '100%'),
       new EntityTableColumn<RuleChain>('root', 'rulechain.root', '60px',
         entity => {
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant-routing.module.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenant-routing.module.ts
index 8c3083ebf1..c2406e8826 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant-routing.module.ts
@@ -14,21 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Injectable, NgModule } from '@angular/core';
-import { Resolve, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
 import { Authority } from '@shared/models/authority.enum';
 import { TenantsTableConfigResolver } from '@modules/home/pages/tenant/tenants-table-config.resolver';
-import { ProfileComponent } from '@modules/home/pages/profile/profile.component';
-import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
-import { Customer } from '@shared/models/customer.model';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { forkJoin, Observable, throwError } from 'rxjs';
-import { getCurrentAuthUser } from '@core/auth/auth.selectors';
-import { catchError, finalize, map, tap } from 'rxjs/operators';
-import {UsersTableConfigResolver} from '../user/users-table-config.resolver';
+import { UsersTableConfigResolver } from '../user/users-table-config.resolver';
 
 const routes: Routes = [
   {
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts
index 3be2b029f7..b2809b980d 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenant.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -23,6 +23,7 @@ import {Tenant} from '@app/shared/models/tenant.model';
 import {ActionNotificationShow} from '@app/core/notification/notification.actions';
 import {TranslateService} from '@ngx-translate/core';
 import {ContactBasedComponent} from '../../components/entity/contact-based.component';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-tenant',
@@ -32,8 +33,10 @@ export class TenantComponent extends ContactBasedComponent<Tenant> {
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
+              @Inject('entity') protected entityValue: Tenant,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<Tenant>,
               protected fb: FormBuilder) {
-    super(store, fb);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   hideDelete() {
diff --git a/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
index 0a8a19c342..14406718fa 100644
--- a/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts
@@ -54,7 +54,7 @@ export class TenantsTableConfigResolver implements Resolve<EntityTableConfig<Ten
     this.config.entityResources = entityTypeResources.get(EntityType.TENANT);
 
     this.config.columns.push(
-      new DateEntityTableColumn<Tenant>('createdTime', 'tenant.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<Tenant>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<Tenant>('title', 'tenant.title', '25%'),
       new EntityTableColumn<Tenant>('email', 'contact.email', '25%'),
       new EntityTableColumn<Tenant>('country', 'contact.country', '25%'),
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
index b851b7cc48..52d221c55f 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -29,11 +29,11 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content mat-padding" fxLayout="column">
+    <div class="mat-content" fxLayout="column">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
       <div fxLayout="row" fxLayoutAlign="start center">
         <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 color="primary"
                 ngxClipboard
                 cbContent="{{ activationLink }}"
@@ -45,10 +45,8 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts
index 8b30c3a666..54bbc9c7fa 100644
--- a/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts
@@ -16,7 +16,6 @@
 
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
index e5f93ba0dc..52ac55275c 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html
@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+<form (ngSubmit)="add()" style="min-width: 450px;">
+  <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
     <span fxFlex></span>
     <div [tb-help]="'user'"></div>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -33,22 +33,20 @@
     <tb-user></tb-user>
     <mat-form-field class="mat-block">
       <mat-label translate>user.activation-method</mat-label>
-      <mat-select matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
+      <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
         <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod">
           {{ activationMethodTranslations.get(activationMethodEnum[activationMethod]) | translate }}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
       {{ 'action.add' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.scss
new file mode 100644
index 0000000000..a49b3e8fc1
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.scss
@@ -0,0 +1,19 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host ::ng-deep .mat-padding{
+  padding: 0;
+}
diff --git a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
index 911b6bfb70..3bd54f9c75 100644
--- a/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts
@@ -16,7 +16,6 @@
 
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { NgForm } from '@angular/forms';
@@ -30,7 +29,7 @@ import {
   ActivationLinkDialogComponent,
   ActivationLinkDialogData
 } from '@modules/home/pages/user/activation-link-dialog.component';
-import {TenantId} from '@app/shared/models/id/tenant-id';
+import { TenantId } from '@app/shared/models/id/tenant-id';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 
@@ -42,7 +41,8 @@ export interface AddUserDialogData {
 
 @Component({
   selector: 'tb-add-user-dialog',
-  templateUrl: './add-user-dialog.component.html'
+  templateUrl: './add-user-dialog.component.html',
+  styleUrls: ['./add-user-dialog.component.scss']
 })
 export class AddUserDialogComponent extends DialogComponent<AddUserDialogComponent, User> implements OnInit {
 
diff --git a/ui-ngx/src/app/modules/home/pages/user/user-routing.module.ts b/ui-ngx/src/app/modules/home/pages/user/user-routing.module.ts
index ba32993506..380548f2bd 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/user-routing.module.ts
@@ -15,7 +15,7 @@
 ///
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { UsersTableConfigResolver } from '@modules/home/pages/user/users-table-config.resolver';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.html b/ui-ngx/src/app/modules/home/pages/user/user.component.html
index ac286159e3..c64b4c1c5b 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.html
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.component.ts b/ui-ngx/src/app/modules/home/pages/user/user.component.ts
index 416ff1bb7c..07567267db 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/user.component.ts
@@ -14,16 +14,17 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, Optional } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
+import { selectAuth } from '@core/auth/auth.selectors';
 import { map } from 'rxjs/operators';
 import { Authority } from '@shared/models/authority.enum';
 import { isUndefined } from '@core/utils';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-user',
@@ -40,8 +41,10 @@ export class UserComponent extends EntityComponent<User> {
   );
 
   constructor(protected store: Store<AppState>,
+              @Optional() @Inject('entity') protected entityValue: User,
+              @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<User>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   hideDelete() {
diff --git a/ui-ngx/src/app/modules/home/pages/user/user.module.ts b/ui-ngx/src/app/modules/home/pages/user/user.module.ts
index 35d4bf30fa..5e7678ec1d 100644
--- a/ui-ngx/src/app/modules/home/pages/user/user.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/user.module.ts
@@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component';
 import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module';
 import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component';
 import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
 
 @NgModule({
diff --git a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
index f0666cfa25..3a20827e30 100644
--- a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
@@ -24,25 +24,18 @@ import {
 } from '@home/models/entity/entities-table-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
-import {
-  EntityType,
-  entityTypeResources,
-  entityTypeTranslations
-} from '@shared/models/entity-type.models';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { User } from '@shared/models/user.model';
 import { UserService } from '@core/http/user.service';
 import { UserComponent } from '@modules/home/pages/user/user.component';
 import { CustomerService } from '@core/http/customer.service';
 import { map, mergeMap, take, tap } from 'rxjs/operators';
-import { forkJoin, noop, Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { Authority } from '@shared/models/authority.enum';
 import { CustomerId } from '@shared/models/id/customer-id';
 import { MatDialog } from '@angular/material/dialog';
 import { EntityAction } from '@home/models/entity/entity-component.models';
-import {
-  AddUserDialogComponent,
-  AddUserDialogData
-} from '@modules/home/pages/user/add-user-dialog.component';
+import { AddUserDialogComponent, AddUserDialogData } from '@modules/home/pages/user/add-user-dialog.component';
 import { AuthState } from '@core/auth/auth.models';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -54,9 +47,8 @@ import {
 } from '@modules/home/pages/user/activation-link-dialog.component';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { Customer } from '@shared/models/customer.model';
-import {TenantService} from '@app/core/http/tenant.service';
-import {TenantId} from '@app/shared/models/id/tenant-id';
+import { TenantService } from '@app/core/http/tenant.service';
+import { TenantId } from '@app/shared/models/id/tenant-id';
 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
 
 export interface UsersTableRouteData {
@@ -89,7 +81,7 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
     this.config.entityResources = entityTypeResources.get(EntityType.USER);
 
     this.config.columns.push(
-      new DateEntityTableColumn<User>('createdTime', 'user.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<User>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<User>('firstName', 'user.first-name', '33%'),
       new EntityTableColumn<User>('lastName', 'user.last-name', '33%'),
       new EntityTableColumn<User>('email', 'user.email', '33%')
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
index 369517e8fd..503df91e46 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts
@@ -26,9 +26,9 @@ import { Observable } from 'rxjs';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
-import { map, share } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
-import { Widget, widgetType, WidgetType } from '@app/shared/models/widget.models';
+import { widgetType, WidgetType } from '@app/shared/models/widget.models';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { WidgetsData } from '@home/models/dashboard-component.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
@@ -114,10 +114,11 @@ export class WidgetEditorAddDataResolver implements Resolve<WidgetEditorData> {
   }
 }
 
-export const widgetTypesBreadcumbLabelFunction: BreadCrumbLabelFunction = ((route, translate) => route.data.widgetsBundle.title);
+export const widgetTypesBreadcumbLabelFunction: BreadCrumbLabelFunction<any> = ((route, translate) =>
+  route.data.widgetsBundle.title);
 
-export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction =
-  ((route, translate, component) => component ? (component as WidgetEditorComponent).widget.widgetName : '');
+export const widgetEditorBreadcumbLabelFunction: BreadCrumbLabelFunction<WidgetEditorComponent> =
+  ((route, translate, component) => component ? component.widget.widgetName : '');
 
 export const routes: Routes = [
   {
@@ -146,7 +147,7 @@ export const routes: Routes = [
           breadcrumb: {
             labelFunction: widgetTypesBreadcumbLabelFunction,
             icon: 'now_widgets'
-          } as BreadCrumbConfig
+          } as BreadCrumbConfig<any>
         },
         resolve: {
           widgetsBundle: WidgetsBundleResolver
@@ -173,7 +174,7 @@ export const routes: Routes = [
               breadcrumb: {
                 labelFunction: widgetEditorBreadcumbLabelFunction,
                 icon: 'insert_chart'
-              } as BreadCrumbConfig
+              } as BreadCrumbConfig<WidgetEditorComponent>
             },
             resolve: {
               widgetEditorData: WidgetEditorDataResolver
@@ -189,7 +190,7 @@ export const routes: Routes = [
               breadcrumb: {
                 labelFunction: widgetEditorBreadcumbLabelFunction,
                 icon: 'insert_chart'
-              } as BreadCrumbConfig
+              } as BreadCrumbConfig<WidgetEditorComponent>
             },
             resolve: {
               widgetEditorData: WidgetEditorAddDataResolver
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index b15080a084..84a2bfad7f 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.ts
index 4a36a9bc22..1e70668556 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.ts
@@ -14,12 +14,13 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import {Store} from '@ngrx/store';
 import {AppState} from '@core/core.state';
 import {EntityComponent} from '../../components/entity/entity.component';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {WidgetsBundle} from '@shared/models/widgets-bundle.model';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 
 @Component({
   selector: 'tb-widgets-bundle',
@@ -29,8 +30,10 @@ import {WidgetsBundle} from '@shared/models/widgets-bundle.model';
 export class WidgetsBundleComponent extends EntityComponent<WidgetsBundle> {
 
   constructor(protected store: Store<AppState>,
+              @Inject('entity') protected entityValue: WidgetsBundle,
+              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<WidgetsBundle>,
               public fb: FormBuilder) {
-    super(store);
+    super(store, fb, entityValue, entitiesTableConfigValue);
   }
 
   hideDelete() {
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
index 115e9f2b11..5edd4c0825 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
@@ -14,28 +14,28 @@
 /// limitations under the License.
 ///
 
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
-import {Resolve, Router} from '@angular/router';
+import { Resolve, Router } from '@angular/router';
 import {
   checkBoxCell,
   DateEntityTableColumn,
   EntityTableColumn,
   EntityTableConfig
 } from '@home/models/entity/entities-table-config.models';
-import {TranslateService} from '@ngx-translate/core';
-import {DatePipe} from '@angular/common';
-import {EntityType, entityTypeResources, entityTypeTranslations} from '@shared/models/entity-type.models';
-import {EntityAction} from '@home/models/entity/entity-component.models';
-import {WidgetsBundle} from '@shared/models/widgets-bundle.model';
-import {WidgetService} from '@app/core/http/widget.service';
-import {WidgetsBundleComponent} from '@modules/home/pages/widget/widgets-bundle.component';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {getCurrentAuthUser} from '@app/core/auth/auth.selectors';
-import {Authority} from '@shared/models/authority.enum';
-import {DialogService} from '@core/services/dialog.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DatePipe } from '@angular/common';
+import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
+import { EntityAction } from '@home/models/entity/entity-component.models';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
+import { WidgetService } from '@app/core/http/widget.service';
+import { WidgetsBundleComponent } from '@modules/home/pages/widget/widgets-bundle.component';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { getCurrentAuthUser } from '@app/core/auth/auth.selectors';
+import { Authority } from '@shared/models/authority.enum';
+import { DialogService } from '@core/services/dialog.service';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
 
 @Injectable()
@@ -56,8 +56,11 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.WIDGETS_BUNDLE);
     this.config.entityResources = entityTypeResources.get(EntityType.WIDGETS_BUNDLE);
 
+    this.config.entityTitle = (widgetsBundle) => widgetsBundle ?
+      widgetsBundle.title : '';
+
     this.config.columns.push(
-      new DateEntityTableColumn<WidgetsBundle>('createdTime', 'widgets-bundle.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<WidgetsBundle>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<WidgetsBundle>('title', 'widgets-bundle.title', '100%'),
       new EntityTableColumn<WidgetsBundle>('tenantId', 'widgets-bundle.system', '60px',
         entity => {
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
index e59e0b3257..76201072f3 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
   <mat-card fxFlex="initial" class="tb-create-password-card">
-    <mat-card-title>
+    <mat-card-title class="layout-padding">
       <span translate class="mat-headline">login.create-password</span>
     </mat-card-title>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -38,8 +38,8 @@
               <input matInput type="password" formControlName="password2"/>
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start" class="layout-padding">
+            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
+                 fxLayoutAlign.gt-xs="center start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.create-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.scss b/ui-ngx/src/app/modules/login/pages/login/create-password.component.scss
index b1738a0f10..96cd5016a1 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.scss
@@ -17,11 +17,11 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-create-password-content {
     background-color: #eee;
     .tb-create-password-card {
-      @media #{$mat-gt-sm} {
+      @media #{$mat-gt-xs} {
         width: 450px !important;
       }
     }
diff --git a/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts b/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts
index 64c6bbab48..47e36c5ce4 100644
--- a/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts
+++ b/ui-ngx/src/app/modules/login/pages/login/create-password.component.ts
@@ -68,7 +68,7 @@ export class CreatePasswordComponent extends PageComponent implements OnInit, On
     } else {
       this.authService.activate(
         this.activateToken,
-        this.createPassword.get('password').value).subscribe();
+        this.createPassword.get('password').value, true).subscribe();
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index af58b53190..d9230018d5 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.html
@@ -15,43 +15,39 @@
     limitations under the License.
 
 -->
-<div class="tb-login-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" fxFlex>
-  <mat-card style="height: 100%; max-height: 600px; overflow-y: auto; overflow-x: hidden;">
+<div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
+  <mat-card style="height: 100%; max-height: 525px; overflow-y: auto;">
     <mat-card-content>
-      <form #loginForm="ngForm" class="tb-login-form" fxLayout="column" [formGroup]="loginFormGroup" (ngSubmit)="login()">
-        <fieldset [disabled]="isLoading$ | async">
-          <div fxFlex fxLayout="column">
-            <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
-              <tb-logo class="login-logo" style="padding-bottom: 25px;"></tb-logo>
+      <form #loginForm="ngForm" class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
+        <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+          <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
+            <tb-logo class="login-logo"></tb-logo>
+          </div>
+          <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+          </mat-progress-bar>
+          <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
+          <div tb-toast fxLayout="column" class="layout-padding">
+            <span style="height: 50px;"></span>
+            <mat-form-field>
+              <mat-label translate>login.username</mat-label>
+              <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
+              <mat-icon matPrefix>email</mat-icon>
+              <mat-error *ngIf="loginFormGroup.get('username').invalid">
+                {{ 'user.invalid-email-format' | translate }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field>
+              <mat-label translate>common.password</mat-label>
+              <input id="password-input" matInput type="password" formControlName="password"/>
+              <mat-icon matPrefix>lock</mat-icon>
+            </mat-form-field>
+            <div fxLayoutAlign="end center">
+              <button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">{{ 'login.forgot-password' | translate }}
+              </button>
             </div>
-            <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-            </mat-progress-bar>
-            <span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
-            <div tb-toast fxLayout="column" class="layout-padding">
-              <span style="height: 50px;"></span>
-              <mat-form-field>
-                <mat-label translate>login.username</mat-label>
-                <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
-                <mat-icon class="material-icons" matPrefix>email</mat-icon>
-                <mat-error *ngIf="loginFormGroup.get('username').invalid">
-                  {{ 'user.invalid-email-format' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field>
-                <mat-label translate>common.password</mat-label>
-                <input id="password-input" matInput type="password" formControlName="password"/>
-                <mat-icon class="material-icons" matPrefix>lock</mat-icon>
-              </mat-form-field>
-              <div fxLayout.gt-sm="column" fxLayoutAlign="space-between stretch">
-                <div fxLayout.gt-sm="column" fxLayoutAlign="space-between end">
-                  <button mat-button type="button" routerLink="/login/resetPasswordRequest">{{ 'login.forgot-password' | translate }}
-                  </button>
-                </div>
-              </div>
-              <div fxLayout="column" style="padding: 15px 0;">
-                <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
-                        type="submit">{{ 'login.login' | translate }}</button>
-              </div>
+            <div fxLayout="column" class="tb-action-button">
+              <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
+                      type="submit">{{ 'login.login' | translate }}</button>
             </div>
           </div>
         </fieldset>
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.scss b/ui-ngx/src/app/modules/login/pages/login/login.component.scss
index 9d9c2914dc..88d7bbf199 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.scss
@@ -17,15 +17,24 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-login-content {
     margin-top: 36px;
     margin-bottom: 76px;
-    background-color: rgb(250,250,250);
+    background-color: rgb(250, 250, 250);
     .tb-login-form {
-      @media #{$mat-gt-sm} {
+      @media #{$mat-gt-xs} {
         width: 550px !important;
       }
+
+      .tb-reset-password{
+        padding: 0 6px;
+      }
+
+      .tb-action-button{
+        padding-top: 20px;
+        padding-bottom: 20px;
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.ts b/ui-ngx/src/app/modules/login/pages/login/login.component.ts
index 6fe81e44ef..7e3f99239f 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.ts
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.ts
@@ -23,6 +23,7 @@ import { FormBuilder } from '@angular/forms';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Constants } from '@shared/models/constants';
 import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'tb-login',
@@ -39,11 +40,17 @@ export class LoginComponent extends PageComponent implements OnInit {
   constructor(protected store: Store<AppState>,
               private authService: AuthService,
               public fb: FormBuilder,
-              private router: Router) {
+              private router: Router,
+              private route: ActivatedRoute) {
     super(store);
   }
 
   ngOnInit() {
+    if (this.route.snapshot.queryParams.username && this.route.snapshot.queryParams.password) {
+      this.loginFormGroup.setValue({username: this.route.snapshot.queryParams.username,
+        password: this.route.snapshot.queryParams.password});
+      this.login();
+    }
   }
 
   login(): void {
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
index e6b8a3cb7a..7413a88f5d 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
   <mat-card fxFlex="initial" class="tb-request-password-reset-card">
-    <mat-card-title>
+    <mat-card-title class="layout-padding">
       <span translate class="mat-headline">login.request-password-reset</span>
     </mat-card-title>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -36,8 +36,8 @@
                 {{ 'user.invalid-email-format' | translate }}
               </mat-error>
             </mat-form-field>
-            <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start" class="layout-padding">
+            <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
+                 fxLayoutAlign.gt-xs="center start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.request-password-reset' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.scss b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.scss
index 8826172799..06fd1646ef 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.scss
@@ -17,11 +17,11 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-request-password-reset-content {
     background-color: #eee;
     .tb-request-password-reset-card {
-      @media #{$mat-gt-sm} {
+      @media #{$mat-gt-xs} {
         width: 450px !important;
       }
     }
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
index ca6a207918..35e72607c3 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
@@ -17,11 +17,11 @@
 -->
 <div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
   <mat-card fxFlex="initial" class="tb-reset-password-card">
-    <mat-card-title>
-      <span translate class="mat-headline">login.password-reset</span>
+    <mat-card-title class="layout-padding tb-card-title">
+      <span translate class="mat-headline tb-card-title">login.password-reset</span>
     </mat-card-title>
-    <mat-card-subtitle>
-      <span *ngIf="isExpiredPassword" translate>login.expired-password-reset-message</span>
+    <mat-card-subtitle *ngIf="isExpiredPassword" class="layout-padding tb-card-title">
+      <div class="tb-card-title" translate>login.expired-password-reset-message</div>
     </mat-card-subtitle>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
@@ -42,7 +42,7 @@
               <mat-icon class="material-icons" matPrefix>lock</mat-icon>
             </mat-form-field>
             <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-                 fxLayoutAlign.gt-sm="center start" class="layout-padding">
+                 fxLayoutAlign.gt-sm="center start">
               <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
                 {{ 'login.reset-password' | translate }}
               </button>
diff --git a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.scss b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.scss
index 4ba7afeb36..ec8986748c 100644
--- a/ui-ngx/src/app/modules/login/pages/login/reset-password.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/reset-password.component.scss
@@ -17,7 +17,7 @@
 
 :host {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 0;
   .tb-reset-password-content {
     background-color: #eee;
     .tb-reset-password-card {
@@ -25,5 +25,10 @@
         width: 450px !important;
       }
     }
+
+    .tb-card-title{
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index 9471ee5d2f..1264acc3a2 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -19,7 +19,7 @@
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
     {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
   </h1>
-  <span fxHide.xs fxHide.sm *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
+  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
         <mat-icon *ngIf="breadcrumb.isMdiIcon" [svgIcon]="breadcrumb.icon">
 	    	</mat-icon>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.scss b/ui-ngx/src/app/shared/components/breadcrumb.component.scss
index 37876a12c8..a36f9b3bb9 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.scss
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.scss
@@ -14,28 +14,24 @@
  * limitations under the License.
  */
 :host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   min-width: 0;
-  flex: 1;
 
   .tb-breadcrumb {
-    font-size: 18px !important;
-    font-weight: 400 !important;
+    font-size: 18px;
+    font-weight: 400;
     overflow: hidden;
 
     h1,
     a,
-    span {
+    span:not(.divider) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     h1 {
-      font-size: 24px !important;
-      font-weight: 400 !important;
+      font-size: 24px;
+      font-weight: 400;
     }
 
     a {
@@ -44,6 +40,7 @@
       transition: opacity .35s;
       color: inherit;
       text-decoration: none;
+      outline: none;
     }
 
     a:hover,
@@ -54,7 +51,7 @@
     }
 
     .divider {
-      padding: 0 30px;
+      padding: 0 20px;
     }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
index a3c1b09fbd..4aaa546f4a 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
@@ -65,7 +65,7 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
   buildBreadCrumbs(route: ActivatedRouteSnapshot, breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
     let newBreadcrumbs = breadcrumbs;
     if (route.routeConfig && route.routeConfig.data) {
-      const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig;
+      const breadcrumbConfig = route.routeConfig.data.breadcrumb as BreadCrumbConfig<any>;
       if (breadcrumbConfig && !breadcrumbConfig.skip) {
         let label;
         let labelFunction;
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.ts b/ui-ngx/src/app/shared/components/breadcrumb.ts
index 77371cbbf0..6063fd043b 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.ts
@@ -27,10 +27,10 @@ export interface BreadCrumb {
   queryParams: Params;
 }
 
-export type BreadCrumbLabelFunction = (route: ActivatedRouteSnapshot, translate: TranslateService, component: any) => string;
+export type BreadCrumbLabelFunction<C> = (route: ActivatedRouteSnapshot, translate: TranslateService, component: C) => string;
 
-export interface BreadCrumbConfig {
-  labelFunction: BreadCrumbLabelFunction;
+export interface BreadCrumbConfig<C> {
+  labelFunction: BreadCrumbLabelFunction<C>;
   label: string;
   icon: string;
   skip: boolean;
diff --git a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
index d0e5125926..cbcbb262be 100644
--- a/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html
@@ -16,8 +16,7 @@
 
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
-<div mat-dialog-content [innerHTML]="data.message">
-</div>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<div mat-dialog-content [innerHTML]="data.message"></div>
+<div mat-dialog-actions fxLayoutAlign="end center">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
index 6abbd68dea..aeb705d631 100644
--- a/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html
@@ -16,9 +16,8 @@
 
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
-<div mat-dialog-content [innerHTML]="data.message">
-</div>
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+<div mat-dialog-content [innerHTML]="data.message"></div>
+<div mat-dialog-actions fxLayoutAlign="end center">
   <button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index 07098ea49c..8dc4f5b1d2 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="jsonFormGroup" (ngSubmit)="add()" style="min-width: 400px;">
   <mat-toolbar fxLayout="row" color="primary">
-    <h2>{{ (this.data.title ? this.data.title : 'details.edit-json') | translate }}</h2>
+    <h2>{{ title }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
index aacedd7f3a..0e702c3ffd 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
@@ -14,16 +14,17 @@
 /// limitations under the License.
 ///
 
-import {Component, Inject, OnInit} from '@angular/core';
-import {DialogComponent} from '@shared/components/dialog.component';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {Router} from '@angular/router';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {FormBuilder, FormGroup} from '@angular/forms';
-
-export interface JsonObjectEdittDialogData {
-  jsonValue: Object;
+import { Component, Inject, OnInit } from '@angular/core';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { Router } from '@angular/router';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface JsonObjectEditDialogData {
+  jsonValue: object;
   title?: string;
 }
 
@@ -32,22 +33,24 @@ export interface JsonObjectEdittDialogData {
   templateUrl: './json-object-edit-dialog.component.html',
   styleUrls: []
 })
-export class JsonObjectEditDialogComponent extends DialogComponent<JsonObjectEditDialogComponent, Object>
-  implements OnInit {
+export class JsonObjectEditDialogComponent extends DialogComponent<JsonObjectEditDialogComponent, object> implements OnInit {
 
   jsonFormGroup: FormGroup;
+  title: string;
 
   submitted = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: JsonObjectEdittDialogData,
-              public dialogRef: MatDialogRef<JsonObjectEditDialogComponent, Object>,
-              public fb: FormBuilder) {
+              @Inject(MAT_DIALOG_DATA) public data: JsonObjectEditDialogData,
+              public dialogRef: MatDialogRef<JsonObjectEditDialogComponent, object>,
+              public fb: FormBuilder,
+              private translate: TranslateService) {
     super(store, router, dialogRef);
   }
 
   ngOnInit(): void {
+    this.title = this.data.title ? this.data.title : this.translate.instant('details.edit-json');
     this.jsonFormGroup = this.fb.group({
       json: [this.data.jsonValue, []]
     });
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
index 69803583c5..dc533c1e66 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
@@ -14,18 +14,18 @@
 /// limitations under the License.
 ///
 
-import {AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {map, mergeMap, startWith, tap, share} from 'rxjs/operators';
-import {Store} from '@ngrx/store';
-import {AppState} from '@app/core/core.state';
-import {TranslateService} from '@ngx-translate/core';
-import {AliasEntityType, EntityType} from '@shared/models/entity-type.models';
-import {BaseData} from '@shared/models/base-data';
-import {EntityId} from '@shared/models/id/entity-id';
-import {EntityService} from '@core/http/entity.service';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, mergeMap, share, tap } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+import { AppState } from '@app/core/core.state';
+import { TranslateService } from '@ngx-translate/core';
+import { AliasEntityType, EntityType } from '@shared/models/entity-type.models';
+import { BaseData } from '@shared/models/base-data';
+import { EntityId } from '@shared/models/id/entity-id';
+import { EntityService } from '@core/http/entity.service';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
   selector: 'tb-entity-autocomplete',
@@ -164,6 +164,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
           this.entityRequiredText = 'rulechain.rulechain-required';
           break;
         case EntityType.TENANT:
+        case AliasEntityType.CURRENT_TENANT:
           this.entityText = 'tenant.tenant';
           this.noEntitiesMatchingText = 'tenant.no-tenants-matching';
           this.entityRequiredText = 'tenant.tenant-required';
@@ -226,10 +227,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
     this.searchText = '';
     if (value != null) {
       if (typeof value === 'string') {
-        let targetEntityType = this.entityTypeValue;
-        if (targetEntityType === AliasEntityType.CURRENT_CUSTOMER) {
-          targetEntityType = EntityType.CUSTOMER;
-        }
+        const targetEntityType = this.checkEntityType(this.entityTypeValue);
         this.entityService.getEntity(targetEntityType, value, {ignoreLoading: true}).subscribe(
           (entity) => {
             this.modelValue = entity.id.id;
@@ -237,7 +235,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
           }
         );
       } else {
-        const targetEntityType = value.entityType as EntityType;
+        const targetEntityType = this.checkEntityType(value.entityType);
         this.entityService.getEntity(targetEntityType, value.id, {ignoreLoading: true}).subscribe(
           (entity) => {
             this.modelValue = entity.id.id;
@@ -276,10 +274,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
 
   fetchEntities(searchText?: string): Observable<Array<BaseData<EntityId>>> {
     this.searchText = searchText;
-    let targetEntityType = this.entityTypeValue;
-    if (targetEntityType === AliasEntityType.CURRENT_CUSTOMER) {
-      targetEntityType = EntityType.CUSTOMER;
-    }
+    const targetEntityType = this.checkEntityType(this.entityTypeValue);
     return this.entityService.getEntitiesByNameFilter(targetEntityType, searchText,
       50, this.entitySubtypeValue, {ignoreLoading: true}).pipe(
       map((data) => {
@@ -310,4 +305,12 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
     }, 0);
   }
 
+  checkEntityType(entityType: EntityType | AliasEntityType): EntityType {
+    if (entityType === AliasEntityType.CURRENT_CUSTOMER) {
+      return EntityType.CUSTOMER;
+    } else if (entityType === AliasEntityType.CURRENT_TENANT) {
+      return EntityType.TENANT;
+    }
+    return entityType;
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html
new file mode 100644
index 0000000000..0cdf818ace
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.html
@@ -0,0 +1,56 @@
+<!--
+
+    Copyright © 2016-2020 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<mat-form-field [formGroup]="selectDeviceGatewayFormGroup" class="mat-block">
+  <input matInput type="text" #deviceGatewayInput placeholder="{{ 'gateway.gateway-name' | translate }}"
+         formControlName="gateway"
+         (focusin)="onFocus()"
+         [required]="required"
+         (keydown)="gatewayNameEnter($event)"
+         (keypress)="gatewayNameEnter($event)"
+         [matAutocomplete]="gatewayAutocomplete"
+  >
+  <button *ngIf="selectDeviceGatewayFormGroup.get('gateway').value" (click)="clear()"
+          type="button" matSuffix mat-icon-button aria-label="Clear">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+  <mat-autocomplete class="tb-autocomplete"
+                    #gatewayAutocomplete="matAutocomplete"
+                    [displayWith]="displayGatewayFn">
+    <mat-option *ngFor="let gateway of filteredGateways | async" [value]="gateway">
+      <span [innerHTML]="gateway.name | highlight:searchText"></span>
+    </mat-option>
+    <mat-option *ngIf="!(filteredGateways | async)?.length" [value]="null" class="tb-not-found">
+      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span translate>gateway.no-gateway-found</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span translate [translateParams]="{item: searchText | truncate:true:6:&apos;...&apos;}">
+            gateway.no-gateway-matching
+          </span>
+        </ng-template>
+        <span>
+          <a translate (click)="createGateway($event, searchText)">gateway.create-new-gateway</a>
+        </span>
+      </div>
+    </mat-option>
+  </mat-autocomplete>
+  <mat-error *ngIf="selectDeviceGatewayFormGroup.get('gateway').hasError('required')">
+    {{ 'gateway.gateway-name-required' | translate }}
+  </mat-error>
+</mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.ts
new file mode 100644
index 0000000000..f37a249820
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/entity/entity-gateway-select.component.ts
@@ -0,0 +1,223 @@
+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ENTER } from '@angular/cdk/keycodes';
+import { Observable, of } from 'rxjs';
+import { filter, map, mergeMap, reduce, share, switchMap, tap } from 'rxjs/operators';
+import { EntityService } from '@core/http/entity.service';
+import { EntityType } from '@shared/models/entity-type.models';
+import { Device } from '@shared/models/device.models';
+import { DialogService } from '@core/services/dialog.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceService } from '@core/http/device.service';
+
+@Component({
+  selector: 'tb-entity-gateway-select',
+  templateUrl: './entity-gateway-select.component.html',
+  styleUrls: [],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => EntityGatewaySelectComponent),
+    multi: true
+  }]
+})
+
+export class EntityGatewaySelectComponent implements ControlValueAccessor, OnInit {
+  get required(): boolean {
+    return this.requiredValue;
+  }
+
+  @Input()
+  set required(value: boolean) {
+    this.requiredValue = coerceBooleanProperty(value);
+  }
+
+  @Input()
+  set newGatewayType(value: string){
+    this.gatewayType = value;
+  }
+
+  @Output()
+  private gatewayNameExist = new EventEmitter();
+
+  constructor(private store: Store<AppState>,
+              private entityService: EntityService,
+              private dialogService: DialogService,
+              private deviceService: DeviceService,
+              private translate: TranslateService,
+              private fb: FormBuilder) {
+    this.loadGatewayList();
+    this.selectDeviceGatewayFormGroup = this.fb.group({
+      gateway: [null]
+    });
+  }
+
+  private gatewayType = 'Gateway';
+  private dirty: boolean;
+  private requiredValue: boolean;
+  private gatewayList: Array<Device>;
+
+  searchText = '';
+  filteredGateways: Observable<Array<Device>>;
+  selectDeviceGatewayFormGroup: FormGroup;
+  modelValue: string | null;
+
+  @ViewChild('deviceGatewayInput', {static: true}) deviceGatewayInput: ElementRef<HTMLInputElement>;
+  private propagateChange = (v: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  ngOnInit() {
+    this.filteredGateways = this.selectDeviceGatewayFormGroup.get('gateway').valueChanges
+      .pipe(
+        tap(value => {
+          let modelValue;
+          if (typeof value === 'string' || !value) {
+            modelValue = null;
+          } else {
+            modelValue = value.id.id;
+          }
+          this.updateView(modelValue);
+          if (value === null) {
+            this.clear();
+          }
+        }),
+        map(value => value ? (typeof value === 'string' ? value : value.name) : ''),
+        mergeMap(name => this.fetchGateway(name) ),
+        share()
+      );
+  }
+
+  fetchGateway(searchText?: string): Observable<Array<Device>> {
+    this.searchText = searchText;
+    let result = [];
+    if (searchText && searchText.length) {
+      result = this.gatewayList.filter((gateway) => gateway.name.toLowerCase().includes(searchText.toLowerCase()));
+    } else {
+      result = this.gatewayList;
+    }
+    return of(result);
+  }
+
+  onFocus() {
+    if (this.dirty) {
+      this.selectDeviceGatewayFormGroup.get('gateway').updateValueAndValidity({onlySelf: true, emitEvent: true});
+      this.dirty = false;
+    }
+  }
+
+  displayGatewayFn(gateway?: Device): string | undefined {
+    return gateway ? gateway.name : undefined;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+  }
+
+  writeValue(value: string | null): void {
+    if(value === null){
+      this.searchText = '';
+      this.selectDeviceGatewayFormGroup.get('gateway').patchValue('', {emitEvent: false});
+      this.dirty = true;
+    }
+  }
+
+  clear(value: string = '', hideList?: boolean) {
+    this.searchText = value;
+    this.selectDeviceGatewayFormGroup.get('gateway').patchValue(value, {emitEvent: true});
+    if(!hideList) {
+      setTimeout(() => {
+        this.deviceGatewayInput.nativeElement.blur();
+        this.deviceGatewayInput.nativeElement.focus();
+      }, 0);
+    }
+  }
+
+  textIsNotEmpty(text: string): boolean {
+    return !!text && text.length > 0;
+  }
+
+  gatewayNameEnter($event: KeyboardEvent) {
+    if ($event.keyCode === ENTER) {
+      if (!this.modelValue) {
+        this.createGateway($event, this.searchText);
+      }
+    }
+  }
+
+  createGateway($event: Event, gatewayName: string) {
+    $event.preventDefault();
+    $event.stopPropagation();
+    const title = this.translate.instant('gateway.create-new-gateway');
+    const content = this.translate.instant('gateway.create-new-gateway-text', {gatewayName});
+    this.dialogService.confirm(title, content, null, null, true).subscribe(value => {
+      if(value){
+        this.createDeviceGateway(gatewayName);
+      } else {
+        this.clear('', true);
+      }
+    });
+  }
+
+  private createDeviceGateway(gatewayName: string){
+    this.deviceService.findByName(gatewayName, {ignoreErrors: true}).subscribe(value => {
+      this.gatewayNameExist.emit(gatewayName)
+    }, () => {
+      const newGateway: Device = {
+        name: gatewayName,
+        label: null,
+        type: this.gatewayType,
+        additionalInfo: {
+          gateway: true
+        }
+      };
+
+      this.deviceService.saveDevice(newGateway).subscribe(
+        (device) => {
+          this.searchText = '';
+          this.gatewayList.push(device);
+          this.selectDeviceGatewayFormGroup.get('gateway').patchValue(device, {emitEvent: true});
+        }
+      );
+    })
+  }
+
+  private loadGatewayList(): void{
+    this.entityService.getEntitiesByNameFilter(EntityType.DEVICE, '', -1).pipe(
+      switchMap(results => results),
+      filter((device) => (device as Device)?.additionalInfo?.gateway),
+      reduce((acc, val) => acc.concat(val), [])
+    ).subscribe((devices) => {
+      this.gatewayList = devices;
+      if(!this.searchText && this.gatewayList.length){
+        this.selectDeviceGatewayFormGroup.get('gateway').patchValue(this.gatewayList[0], {emitEvent: true});
+      }
+    })
+  }
+
+  private updateView(modelValue: any) {
+    this.propagateChange(modelValue);
+  }
+}
diff --git a/ui-ngx/src/app/shared/components/entity/entity-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-select.component.html
index 5ed8282c47..ffc11e3735 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-select.component.html
@@ -27,7 +27,7 @@
   </tb-entity-type-select>
   <tb-entity-autocomplete
     fxFlex
-    *ngIf="modelValue.entityType"
+    *ngIf="modelValue.entityType && modelValue.entityType !== AliasEntityType.CURRENT_TENANT"
     [required]="required"
     [entityType]="modelValue.entityType"
     formControlName="entityId">
diff --git a/ui-ngx/src/app/shared/components/entity/entity-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-select.component.ts
index 735fd37af6..670b105f9a 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-select.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-select.component.ts
@@ -14,15 +14,16 @@
 /// limitations under the License.
 ///
 
-import {AfterViewInit, Component, forwardRef, Input, OnInit} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {TranslateService} from '@ngx-translate/core';
-import {AliasEntityType, EntityType, entityTypeTranslations} from '@shared/models/entity-type.models';
-import {EntityService} from '@core/http/entity.service';
-import {EntityId} from '@shared/models/id/entity-id';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import { AfterViewInit, Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { TranslateService } from '@ngx-translate/core';
+import { AliasEntityType, EntityType } from '@shared/models/entity-type.models';
+import { EntityService } from '@core/http/entity.service';
+import { EntityId } from '@shared/models/id/entity-id';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
 
 @Component({
   selector: 'tb-entity-select',
@@ -60,6 +61,8 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
 
   displayEntityTypeSelect: boolean;
 
+  AliasEntityType = AliasEntityType;
+
   private readonly defaultEntityType: EntityType | AliasEntityType = null;
 
   private propagateChange = (v: any) => { };
@@ -94,6 +97,9 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
   ngOnInit() {
     this.entitySelectFormGroup.get('entityType').valueChanges.subscribe(
       (value) => {
+        if(value === AliasEntityType.CURRENT_TENANT){
+          this.modelValue.id = NULL_UUID;
+        }
         this.updateView(value, this.modelValue.id);
       }
     );
@@ -139,7 +145,7 @@ export class EntitySelectComponent implements ControlValueAccessor, OnInit, Afte
           entityType,
           id: this.modelValue.entityType !== entityType ? null : entityId
         };
-        if (this.modelValue.entityType && this.modelValue.id) {
+        if (this.modelValue.entityType && (this.modelValue.id || this.modelValue.entityType === AliasEntityType.CURRENT_TENANT)) {
           this.propagateChange(this.modelValue);
         } else {
           this.propagateChange(null);
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
index 00bd722c38..92b43d490f 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-form-field [formGroup]="subTypeFormGroup" class="mat-block">
   <mat-label *ngIf="showLabel">{{ entitySubtypeTitle | translate }}</mat-label>
-  <mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" matInput formControlName="subType">
+  <mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
     <mat-option *ngFor="let subType of subTypesOptions | async" [value]="subType">
       {{ displaySubTypeFn(subType) }}
     </mat-option>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.scss b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.scss
index 3bda90f75f..bb3718c2da 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.scss
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.scss
@@ -14,7 +14,5 @@
  * limitations under the License.
  */
 :host {
-  mat-select.tb-entity-subtype-select {
-    min-width: 200px;
-  }
+
 }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.ts
index 7e41068e3d..72540ad4c8 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.ts
@@ -14,26 +14,18 @@
 /// limitations under the License.
 ///
 
-import {AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild, OnDestroy} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Observable, of, throwError, Subscription, Subject} from 'rxjs';
-import {PageLink} from '@shared/models/page/page-link';
-import {Direction} from '@shared/models/page/sort-order';
-import {filter, map, mergeMap, publishReplay, refCount, startWith, tap, publish} from 'rxjs/operators';
-import {PageData, emptyPageData} from '@shared/models/page/page-data';
-import {DashboardInfo} from '@app/shared/models/dashboard.models';
-import {DashboardId} from '@app/shared/models/id/dashboard-id';
-import {DashboardService} from '@core/http/dashboard.service';
-import {Store} from '@ngrx/store';
-import {AppState} from '@app/core/core.state';
-import {getCurrentAuthUser} from '@app/core/auth/auth.selectors';
-import {Authority} from '@shared/models/authority.enum';
-import {TranslateService} from '@ngx-translate/core';
-import {DeviceService} from '@core/http/device.service';
-import {EntitySubtype, EntityType} from '@app/shared/models/entity-type.models';
-import {BroadcastService} from '@app/core/services/broadcast.service';
-import {AssetService} from '@core/http/asset.service';
-import {EntityViewService} from '@core/http/entity-view.service';
+import { AfterViewInit, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable, Subject, Subscription, throwError } from 'rxjs';
+import { map, mergeMap, publishReplay, refCount, startWith, tap } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+import { AppState } from '@app/core/core.state';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceService } from '@core/http/device.service';
+import { EntitySubtype, EntityType } from '@app/shared/models/entity-type.models';
+import { BroadcastService } from '@app/core/services/broadcast.service';
+import { AssetService } from '@core/http/asset.service';
+import { EntityViewService } from '@core/http/entity-view.service';
 
 @Component({
   selector: 'tb-entity-subtype-select',
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html
index 39ff2846cd..fb38aa212d 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.html
+++ b/ui-ngx/src/app/shared/components/js-func.component.html
@@ -31,7 +31,7 @@
       <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </div>
-  <div id="tb-javascript-panel" class="tb-js-func-panel" fxLayout="column" tb-toast toastTarget="jsFuncEditor">
+  <div id="tb-javascript-panel" class="tb-js-func-panel" fxLayout="column" tb-toast toastTarget="{{toastTargetId}}">
     <div #javascriptEditor id="tb-javascript-input" [ngClass]="{'fill-height': fillHeight}"></div>
   </div>
   <div fxLayout="row" fxLayoutAlign="start center" style="height: 40px;">
diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts
index e0e176efd9..06e7f77104 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.ts
+++ b/ui-ngx/src/app/shared/components/js-func.component.ts
@@ -31,7 +31,7 @@ import { ActionNotificationHide, ActionNotificationShow } from '@core/notificati
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { UtilsService } from '@core/services/utils.service';
-import { isUndefined } from '@app/core/utils';
+import { guid, isUndefined } from '@app/core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
 
@@ -62,6 +62,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
   private editorsResizeCaf: CancelAnimationFrame;
   private editorResizeListener: any;
 
+  toastTargetId = `jsFuncEditor-${guid()}`;
+
   @Input() functionName: string;
 
   @Input() functionArgs: Array<string>;
@@ -183,6 +185,9 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    if (this.jsEditor) {
+      this.jsEditor.setReadOnly(this.disabled);
+    }
   }
 
   public validate(c: FormControl) {
@@ -209,7 +214,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
           {
             message: this.validationError,
             type: 'error',
-            target: 'jsFuncEditor',
+            target: this.toastTargetId,
             verticalPosition: 'bottom',
             horizontalPosition: 'left'
           }));
@@ -301,7 +306,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
     if (this.errorShowed) {
       this.store.dispatch(new ActionNotificationHide(
         {
-          target: 'jsFuncEditor'
+          target: this.toastTargetId
         }));
       this.errorShowed = false;
     }
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index d072c674f4..c416798953 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -22,11 +22,11 @@
     <label class="tb-title no-padding">{{ label }}</label>
     <span fxFlex></span>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="beautifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
     </button>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="minifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
       {{'js-func.mini' | translate }}
     </button>
     <button type='button' mat-button mat-icon-button (click)="fullscreen = !fullscreen"
@@ -36,7 +36,7 @@
       <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </div>
-  <div id="tb-json-panel" tb-toast toastTarget="jsonContentEditor"
+  <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
        class="tb-json-content-panel" fxLayout="column">
     <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/json-content.component.ts b/ui-ngx/src/app/shared/components/json-content.component.ts
index ed949a6bb0..6db51b848a 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.ts
+++ b/ui-ngx/src/app/shared/components/json-content.component.ts
@@ -33,6 +33,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ContentType, contentTypesMap } from '@shared/models/constants';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-json-content',
@@ -60,6 +61,8 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
   private editorsResizeCaf: CancelAnimationFrame;
   private editorResizeListener: any;
 
+  toastTargetId = `jsonContentEditor-${guid()}`;
+
   @Input() label: string;
 
   @Input() contentType: ContentType;
@@ -115,7 +118,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
       mode: `ace/mode/${mode}`,
       showGutter: true,
       showPrintMargin: false,
-      readOnly: this.readonly
+      readOnly: this.disabled || this.readonly
     };
 
     const advancedOptions = {
@@ -182,6 +185,9 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    if (this.jsonEditor) {
+      this.jsonEditor.setReadOnly(this.disabled || this.readonly);
+    }
   }
 
   public validate(c: FormControl) {
@@ -193,7 +199,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
   }
 
   validateOnSubmit(): void {
-    if (!this.readonly) {
+    if (!this.disabled && !this.readonly) {
       this.cleanupJsonErrors();
       this.contentValid = true;
       this.propagateChange(this.contentBody);
@@ -220,7 +226,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
         {
           message: errorInfo,
           type: 'error',
-          target: 'jsonContentEditor',
+          target: this.toastTargetId,
           verticalPosition: 'bottom',
           horizontalPosition: 'left'
         }));
@@ -233,7 +239,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
     if (this.errorShowed) {
       this.store.dispatch(new ActionNotificationHide(
         {
-          target: 'jsonContentEditor'
+          target: this.toastTargetId
         }));
       this.errorShowed = false;
     }
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index 755c517aca..aaacf1f857 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -20,16 +20,16 @@
      [fullscreen]="fullscreen" (fullscreenChanged)="onFullscreen()" fxLayout="column">
   <div fxLayout="row" fxLayoutAlign="start center" class="tb-json-object-toolbar">
     <label class="tb-title no-padding"
-           ng-class="{'tb-required': required,
-                      'tb-readonly': readonly,
-                      'tb-error': !objectValid}">{{ label }}</label>
+           [ngClass]="{'tb-required': required,
+                       'tb-readonly': readonly,
+                       'tb-error': !objectValid}">{{ label }}</label>
     <span fxFlex></span>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="beautifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
     </button>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="minifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
       {{'js-func.mini' | translate }}
     </button>
     <button mat-button mat-icon-button (click)="fullscreen = !fullscreen"
@@ -38,7 +38,7 @@
       <mat-icon class="material-icons">{{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
     </button>
   </div>
-  <div id="tb-json-panel" tb-toast toastTarget="jsonObjectEditor"
+  <div id="tb-json-panel" tb-toast toastTarget="{{toastTargetId}}"
        class="tb-json-object-panel" fxLayout="column">
     <div #jsonEditor id="tb-json-input" [ngStyle]="editorStyle" [ngClass]="{'fill-height': fillHeight}"></div>
   </div>
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.ts b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
index 40d222e0e4..dcd9722aa0 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.ts
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
@@ -30,6 +30,7 @@ import { ActionNotificationHide, ActionNotificationShow } from '@core/notificati
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { CancelAnimationFrame, RafService } from '@core/services/raf.service';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-json-object-edit',
@@ -57,6 +58,8 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
   private editorsResizeCaf: CancelAnimationFrame;
   private editorResizeListener: any;
 
+  toastTargetId = `jsonObjectEditor-${guid()}`;
+
   @Input() label: string;
 
   @Input() disabled: boolean;
@@ -108,7 +111,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
       mode: 'ace/mode/json',
       showGutter: true,
       showPrintMargin: false,
-      readOnly: this.readonly
+      readOnly: this.disabled || this.readonly
     };
 
     const advancedOptions = {
@@ -158,6 +161,9 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    if (this.jsonEditor) {
+      this.jsonEditor.setReadOnly(this.disabled || this.readonly);
+    }
   }
 
   public validate(c: FormControl) {
@@ -169,14 +175,14 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
   }
 
   validateOnSubmit(): void {
-    if (!this.readonly) {
+    if (!this.disabled && !this.readonly) {
       this.cleanupJsonErrors();
       if (!this.objectValid) {
         this.store.dispatch(new ActionNotificationShow(
           {
             message: this.validationError,
             type: 'error',
-            target: 'jsonObjectEditor',
+            target: this.toastTargetId,
             verticalPosition: 'bottom',
             horizontalPosition: 'left'
           }));
@@ -189,7 +195,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
     if (this.errorShowed) {
       this.store.dispatch(new ActionNotificationHide(
         {
-          target: 'jsonObjectEditor'
+          target: this.toastTargetId
         }));
       this.errorShowed = false;
     }
diff --git a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts
index c1a16dd3b1..dd9d6eaba2 100644
--- a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts
+++ b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts
@@ -120,7 +120,7 @@ class DraggableChip {
     }
   }
 
-  private onDragStart(event: DragEvent) {
+  private onDragStart(event: Event | any) {
     if (this.preventDrag) {
       event.preventDefault();
     } else {
@@ -136,7 +136,7 @@ class DraggableChip {
     }
   }
 
-  private onDragEnter(event: DragEvent) {
+  private onDragEnter(event: Event | any) {
     this.counter++;
     if (this.dragging) {
       return;
@@ -148,7 +148,7 @@ class DraggableChip {
     this.chipElement.addEventListener('drop', this.dropHandler);
   }
 
-  private onDragLeave(event: DragEvent) {
+  private onDragLeave(event: Event | any) {
     this.counter--;
     if (this.counter <= 0) {
       this.counter = 0;
@@ -158,14 +158,14 @@ class DraggableChip {
     }
   }
 
-  private onDragEnd(event: DragEvent) {
+  private onDragEnd(event: Event | any) {
     this.dragging = false;
     globalDraggingChipListId = null;
     this.chipListElement.classList.remove(draggingClassName);
     this.chipElement.classList.remove(draggingClassName);
   }
 
-  private onDragOver(event: DragEvent) {
+  private onDragOver(event: Event | any) {
     if (this.dragging) {
       return;
     }
@@ -203,7 +203,7 @@ class DraggableChip {
 
   }
 
-  private onDrop(event: DragEvent) {
+  private onDrop(event: Event | any) {
     this.counter = 0;
     event.preventDefault();
     if (globalDraggingChipListId !== this.chipListElement.id) {
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html
index db83d782d4..1a9a5d5e11 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section fxLayout="row">
-  <div fxHide.xs fxHide.sm fxHide.md *ngIf="displayUserInfo" class="tb-user-info" fxLayout="row">
+  <div fxHide.lt-lg *ngIf="displayUserInfo" class="tb-user-info" fxLayout="row">
     <mat-icon class="material-icons tb-mini-avatar">account_circle</mat-icon>
     <div fxLayout="column" fxLayoutAlign="center">
       <span *ngIf="userDisplayName$ | async; let userDisplayName" class="tb-user-display-name">{{ userDisplayName }}</span>
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.scss b/ui-ngx/src/app/shared/components/user-menu.component.scss
index 007ab3265b..b600bd9fab 100644
--- a/ui-ngx/src/app/shared/components/user-menu.component.scss
+++ b/ui-ngx/src/app/shared/components/user-menu.component.scss
@@ -18,7 +18,6 @@
     line-height: 1.5;
 
     span {
-      text-align: left;
       text-transform: none;
     }
 
@@ -42,6 +41,7 @@
     height: 36px;
     margin: auto 8px;
     font-size: 36px;
+    cursor: default;
   }
 }
 
diff --git a/ui-ngx/src/app/shared/components/value-input.component.scss b/ui-ngx/src/app/shared/components/value-input.component.scss
index 6bd272c92b..df5a1e13c5 100644
--- a/ui-ngx/src/app/shared/components/value-input.component.scss
+++ b/ui-ngx/src/app/shared/components/value-input.component.scss
@@ -19,7 +19,8 @@
       padding-bottom: 1px;
     }
     mat-select-trigger {
-      mat-icon {
+      .mat-icon {
+        vertical-align: middle;
         margin-right: 16px;
       }
     }
diff --git a/ui-ngx/src/app/shared/components/value-input.component.ts b/ui-ngx/src/app/shared/components/value-input.component.ts
index f067e6e1b7..1cddd25292 100644
--- a/ui-ngx/src/app/shared/components/value-input.component.ts
+++ b/ui-ngx/src/app/shared/components/value-input.component.ts
@@ -21,7 +21,7 @@ import { isObject } from '@core/utils';
 import { MatDialog } from '@angular/material/dialog';
 import {
   JsonObjectEditDialogComponent,
-  JsonObjectEdittDialogData
+  JsonObjectEditDialogData
 } from '@shared/components/dialog/json-object-edit-dialog.component';
 
 @Component({
@@ -69,7 +69,7 @@ export class ValueInputComponent implements OnInit, ControlValueAccessor {
     if ($event) {
       $event.stopPropagation();
     }
-    this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEdittDialogData, Object>(JsonObjectEditDialogComponent, {
+    this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss
index a300a0c843..4af250b0bb 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../scss/constants';
+
 tb-widgets-bundle-select {
   mat-select {
     margin: 0;
@@ -96,6 +98,10 @@ mat-toolbar {
             color: #fff !important;
           }
         }
+
+        @media #{$mat-xs} {
+          width: auto;
+        }
       }
       .mat-form-field-underline {
         display: none;
diff --git a/ui-ngx/src/app/shared/models/entity-type.models.ts b/ui-ngx/src/app/shared/models/entity-type.models.ts
index d323546fee..b206281bce 100644
--- a/ui-ngx/src/app/shared/models/entity-type.models.ts
+++ b/ui-ngx/src/app/shared/models/entity-type.models.ts
@@ -15,6 +15,7 @@
 ///
 
 import {TenantId} from './id/tenant-id';
+import { BaseData, HasId } from '@shared/models/base-data';
 
 ///
 /// Copyright © 2016-2019 The Thingsboard Authors
@@ -48,7 +49,8 @@ export enum EntityType {
 }
 
 export enum AliasEntityType {
-  CURRENT_CUSTOMER = 'CURRENT_CUSTOMER'
+  CURRENT_CUSTOMER = 'CURRENT_CUSTOMER',
+  CURRENT_TENANT = 'CURRENT_TENANT'
 }
 
 export interface EntityTypeTranslation {
@@ -63,8 +65,9 @@ export interface EntityTypeTranslation {
   search?: string;
 }
 
-export interface EntityTypeResource {
+export interface EntityTypeResource<T> {
   helpLinkId: string;
+  helpLinkIdForEntity?(entity: T): string;
 }
 
 export const entityTypeTranslations = new Map<EntityType | AliasEntityType, EntityTypeTranslation>(
@@ -216,14 +219,21 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
     [
       AliasEntityType.CURRENT_CUSTOMER,
       {
-        type: 'entity.type-entity-view',
+        type: 'entity.type-current-customer',
         list: 'entity.type-current-customer'
       }
+    ],
+    [
+      AliasEntityType.CURRENT_TENANT,
+      {
+        type: 'entity.type-current-tenant',
+        list: 'entity.type-current-tenant'
+      }
     ]
   ]
 );
 
-export const entityTypeResources = new Map<EntityType, EntityTypeResource>(
+export const entityTypeResources = new Map<EntityType, EntityTypeResource<BaseData<HasId>>>(
   [
     [
       EntityType.TENANT,
diff --git a/ui-ngx/src/app/shared/models/page/page-link.ts b/ui-ngx/src/app/shared/models/page/page-link.ts
index a883c7cdb3..ee0f2c8fda 100644
--- a/ui-ngx/src/app/shared/models/page/page-link.ts
+++ b/ui-ngx/src/app/shared/models/page/page-link.ts
@@ -19,6 +19,8 @@ import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { getDescendantProp, isObject } from '@core/utils';
 import { SortDirection } from '@angular/material/sort';
 
+export const MAX_SAFE_PAGE_SIZE = 2147483647;
+
 export type PageLinkSearchFunction<T> = (entity: T, textSearch: string) => boolean;
 
 const defaultPageLinkSearchFunction: PageLinkSearchFunction<any> =
diff --git a/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts b/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
index d98a02e471..d75239ec68 100644
--- a/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
+++ b/ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
@@ -279,6 +279,10 @@ export class TelemetrySubscriber {
 
   public unsubscribe() {
     this.telemetryService.unsubscribe(this);
+    this.complete();
+  }
+
+  public complete() {
     this.dataSubject.complete();
     this.reconnectSubject.complete();
   }
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 472cd9f01a..5008f10459 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -94,7 +94,6 @@ import { EntityListSelectComponent } from '@shared/components/entity/entity-list
 import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component';
 import { FooterFabButtonsComponent } from '@shared/components/footer-fab-buttons.component';
 import { CircularProgressDirective } from '@shared/components/circular-progress.directive';
-import { MatSpinner } from '@angular/material/progress-spinner';
 import { FabToolbarComponent, FabActionsDirective, FabTriggerDirective } from '@shared/components/fab-toolbar.component';
 import { DashboardSelectPanelComponent } from '@shared/components/dashboard-select-panel.component';
 import { DashboardSelectComponent } from '@shared/components/dashboard-select.component';
@@ -129,6 +128,7 @@ import { TbJsonToStringDirective } from '@shared/components/directives/tb-json-t
 import { JsonObjectEditDialogComponent } from '@shared/components/dialog/json-object-edit-dialog.component';
 import { HistorySelectorComponent } from './components/time/history-selector/history-selector.component';
 import { TbTemplatePipe } from '@shared/pipe/template.pipe';
+import { EntityGatewaySelectComponent } from '@shared/components/entity/entity-gateway-select.component';
 
 @NgModule({
   providers: [
@@ -213,7 +213,8 @@ import { TbTemplatePipe } from '@shared/pipe/template.pipe';
     KeyboardShortcutPipe,
     TbJsonToStringDirective,
     JsonObjectEditDialogComponent,
-    HistorySelectorComponent
+    HistorySelectorComponent,
+    EntityGatewaySelectComponent
   ],
   imports: [
     CommonModule,
@@ -373,7 +374,8 @@ import { TbTemplatePipe } from '@shared/pipe/template.pipe';
     KeyboardShortcutPipe,
     TranslateModule,
     JsonObjectEditDialogComponent,
-    HistorySelectorComponent
+    HistorySelectorComponent,
+    EntityGatewaySelectComponent
   ]
 })
 export class SharedModule { }
diff --git a/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json b/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
index 0006afc74b..2b8048409c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
+++ b/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
@@ -336,7 +336,8 @@
         "password": "Heslo",
         "enter-username": "Zadejte uživatelské jméno",
         "enter-password": "Zadejte heslo",
-        "enter-search": "Zadejte hledaný řetězec"
+        "enter-search": "Zadejte hledaný řetězec",
+        "created-time": "Datum vytvoření"
     },
     "content-type": {
         "json": "JSON",
@@ -770,6 +771,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {Jeden uzel pravidla} other {Seznam # uzlů pravidel} }",
         "rulenode-name-starts-with": "Uzly pravidel, jejichž název začíná '{{prefix}}'",
         "type-current-customer": "Stávající zákazník",
+        "type-current-tenant": "Stávající tenant",
         "search": "Vyhledat entity",
         "selected-entities": "{ count, plural, 1 {1 entita} other {# entit} } zvoleno",
         "entity-name": "Název entity",
diff --git a/ui-ngx/src/assets/locale/locale.constant-de_DE.json b/ui-ngx/src/assets/locale/locale.constant-de_DE.json
index ef5c6c9344..5b58389f7a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-de_DE.json
+++ b/ui-ngx/src/assets/locale/locale.constant-de_DE.json
@@ -360,7 +360,8 @@
     "password": "Passwort",
     "enter-username": "Benutzername eingeben",
     "enter-password": "Passwort eingeben",
-    "enter-search": "Suche eingeben"
+    "enter-search": "Suche eingeben",
+    "created-time": "Erstellungszeit"
   },
   "content-type": {
     "json": "Json",
diff --git a/ui-ngx/src/assets/locale/locale.constant-el_GR.json b/ui-ngx/src/assets/locale/locale.constant-el_GR.json
index 156d08aa47..40ebe9e66f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-el_GR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-el_GR.json
@@ -378,7 +378,8 @@
     "password": "Κωδικός πρόσβασης",
     "enter-username": "Εισάγετε Όνομα χρήστη",
     "enter-password": "Εισάγετε Κωδικό πρόσβασης",
-    "enter-search": "Αναζήτηση"
+    "enter-search": "Αναζήτηση",
+    "created-time": "Δημιουργήθηκε"
   },
   "converter": {
     "converter": "Μετατροπέας δεδομένων",
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 978e2cda87..6c475a25e0 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -53,7 +53,8 @@
         "export": "Export",
         "share-via": "Share via {{provider}}",
         "continue": "Continue",
-        "discard-changes": "Discard Changes"
+        "discard-changes": "Discard Changes",
+        "download": "Download"
     },
     "aggregation": {
         "aggregation": "Aggregation",
@@ -246,7 +247,6 @@
         "no-asset-types-matching": "No asset types matching '{{entitySubtype}}' were found.",
         "asset-type-list-empty": "No asset types selected.",
         "asset-types": "Asset types",
-        "created-time": "Created time",
         "name": "Name",
         "name-required": "Name is required.",
         "description": "Description",
@@ -379,7 +379,8 @@
         "password": "Password",
         "enter-username": "Enter username",
         "enter-password": "Enter password",
-        "enter-search": "Enter search"
+        "enter-search": "Enter search",
+        "created-time": "Created time"
     },
     "content-type": {
         "json": "Json",
@@ -420,7 +421,6 @@
         "manage-assets": "Manage assets",
         "manage-devices": "Manage devices",
         "manage-dashboards": "Manage dashboards",
-        "created-time": "Created time",
         "title": "Title",
         "title-required": "Title is required.",
         "description": "Description",
@@ -465,7 +465,6 @@
         "no-dashboards-text": "No dashboards found",
         "no-widgets": "No widgets configured",
         "add-widget": "Add new widget",
-        "created-time": "Created time",
         "title": "Title",
         "select-widget-title": "Select widget",
         "select-widget-subtitle": "List of available widget types",
@@ -708,7 +707,6 @@
         "no-device-types-matching": "No device types matching '{{entitySubtype}}' were found.",
         "device-type-list-empty": "No device types selected.",
         "device-types": "Device types",
-        "created-time": "Created time",
         "name": "Name",
         "name-required": "Name is required.",
         "description": "Description",
@@ -832,6 +830,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {One rule node} other {List of # rule nodes} }",
         "rulenode-name-starts-with": "Rule nodes whose names start with '{{prefix}}'",
         "type-current-customer": "Current Customer",
+        "type-current-tenant": "Current Tenant",
         "search": "Search entities",
         "selected-entities": "{ count, plural, 1 {1 entity} other {# entities} } selected",
         "entity-name": "Entity name",
@@ -1415,7 +1414,6 @@
         "rulechains": "Rule chains",
         "root": "Root",
         "delete": "Delete rule chain",
-        "created-time": "Created time",
         "name": "Name",
         "name-required": "Name is required.",
         "description": "Description",
@@ -1531,7 +1529,6 @@
         "delete-tenants-title": "Are you sure you want to delete { count, plural, 1 {1 tenant} other {# tenants} }?",
         "delete-tenants-action-title": "Delete { count, plural, 1 {1 tenant} other {# tenants} }",
         "delete-tenants-text": "Be careful, after the confirmation all selected tenants will be removed and all related data will become unrecoverable.",
-        "created-time": "Created time",
         "title": "Title",
         "title-required": "Title is required.",
         "description": "Description",
@@ -1592,7 +1589,6 @@
         "delete-users-text": "Be careful, after the confirmation all selected users will be removed and all related data will become unrecoverable.",
         "activation-email-sent-message": "Activation email was successfully sent!",
         "resend-activation": "Resend activation",
-        "created-time": "Created time",
         "email": "Email",
         "email-required": "Email is required.",
         "invalid-email-format": "Invalid email format.",
@@ -1714,7 +1710,6 @@
         "widgets-bundles": "Widgets Bundles",
         "add": "Add Widgets Bundle",
         "delete": "Delete widgets bundle",
-        "created-time": "Created time",
         "title": "Title",
         "title-required": "Title is required.",
         "add-widgets-bundle-text": "Add new widgets bundle",
diff --git a/ui-ngx/src/assets/locale/locale.constant-es_ES.json b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
index 864aec9786..6dce1d9be9 100644
--- a/ui-ngx/src/assets/locale/locale.constant-es_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
@@ -364,7 +364,8 @@
         "password": "Contraseña",
         "enter-username": "Introduzca nombre de usuario",
         "enter-password": "Introduzca contraseña",
-        "enter-search": "Introduzca búsqueda"
+        "enter-search": "Introduzca búsqueda",
+        "created-time": "Tiempo de creación"
     },
     "content-type": {
         "json": "Json",
@@ -1226,7 +1227,6 @@
         "remember-me": "Recordarme",
         "forgot-password": "¿Olvidó la contraseña?",
         "password-reset": "Restablecer contraseña",
-        "expired-password-reset-message": "",
         "new-password": "Nueva contraseña",
         "new-password-again": "Repita la nueva contraseña",
         "password-link-sent-message": "¡El enlace para el restablecer la contraseña fue enviado correctamente!",
@@ -1556,7 +1556,6 @@
         "export": "Exportar widget"
     },
     "widget-action": {
-        "custom-pretty": "",
         "header-button": "Botón del encabezado del widget",
         "open-dashboard-state": "Navegar a nuevo estado del panel",
         "update-dashboard-state": "Actualizar estado vigente del panel",
diff --git a/ui-ngx/src/assets/locale/locale.constant-fa_IR.json b/ui-ngx/src/assets/locale/locale.constant-fa_IR.json
index b4ca2eaf4a..05e6aeb2f6 100644
--- a/ui-ngx/src/assets/locale/locale.constant-fa_IR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-fa_IR.json
@@ -48,7 +48,7 @@
         "paste-reference": "رونوشت مرجع",
         "import": "وارد کردن",
         "export": "صدور",
-        "share-via": "{{provider}} اشتراک گذاري از طريق" 
+        "share-via": "{{provider}} اشتراک گذاري از طريق"
 	},
     "aggregation": {
         "aggregation": "تجميع",
@@ -336,7 +336,8 @@
         "password": "رمز عبور",
         "enter-username": "وارد کردن نام کاربري",
         "enter-password": "وارد کردن رمز عبور",
-        "enter-search": "وارد کردن جستجو"
+        "enter-search": "وارد کردن جستجو",
+        "created-time": "زمان ايجاد"
     },
     "content-type": {
         "json": "JSON",
diff --git a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json
index 3fccf0fbbf..29b840d6f2 100644
--- a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json
@@ -347,7 +347,8 @@
         "enter-search": "Entrez la recherche",
         "enter-username": "Entrez le nom d'utilisateur",
         "password": "Mot de passe",
-        "username": "Nom d'utilisateur"
+        "username": "Nom d'utilisateur",
+        "created-time": "Heure de création"
     },
     "confirm-on-exit": {
         "html-message": "Vous avez des modifications non enregistrées. <br/> Êtes-vous sûr de vouloir quitter cette page?",
diff --git a/ui-ngx/src/assets/locale/locale.constant-it_IT.json b/ui-ngx/src/assets/locale/locale.constant-it_IT.json
index 1f694eabc7..8b86e87638 100644
--- a/ui-ngx/src/assets/locale/locale.constant-it_IT.json
+++ b/ui-ngx/src/assets/locale/locale.constant-it_IT.json
@@ -361,7 +361,8 @@
         "password": "Password",
         "enter-username": "Inserisci nome utente",
         "enter-password": "Inserisci password",
-        "enter-search": "Cerca ..."
+        "enter-search": "Cerca ...",
+        "created-time": "Orario di creazione"
     },
     "content-type": {
         "json": "Json",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ja_JA.json b/ui-ngx/src/assets/locale/locale.constant-ja_JA.json
index f40122e2d6..f1651519ec 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ja_JA.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ja_JA.json
@@ -326,8 +326,9 @@
 		"password": "パスワード",
 		"enter-username": "ユーザーネームを入力してください",
 		"enter-password": "パスワードを入力する",
-		"enter-search": "検索を入力"
-	},
+		"enter-search": "検索を入力",
+    "created-time": "作成時刻"
+  },
 	"content-type": {
 		"json": "Json",
 		"text": "テキスト",
diff --git a/ui-ngx/src/assets/locale/locale.constant-lv_LV.json b/ui-ngx/src/assets/locale/locale.constant-lv_LV.json
index 38df5ff1bd..4cefaf52fa 100644
--- a/ui-ngx/src/assets/locale/locale.constant-lv_LV.json
+++ b/ui-ngx/src/assets/locale/locale.constant-lv_LV.json
@@ -337,7 +337,8 @@
         "password": "Parole",
         "enter-username": "Ievadiet lietotājvārdu",
         "enter-password": "Ievadiet paroli",
-        "enter-search": "Ievadiet meklēt"
+        "enter-search": "Ievadiet meklēt",
+        "created-time": "Izveidošanas laiks"
     },
     "content-type": {
         "json": "Json",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ro_RO.json b/ui-ngx/src/assets/locale/locale.constant-ro_RO.json
index ce9a64dda4..5a08ab42af 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ro_RO.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ro_RO.json
@@ -369,7 +369,8 @@
         "password": "Parola",
         "enter-username": "Introdu nume utilizator",
         "enter-password": "Introdu parola",
-        "enter-search": "Definește căutarea"
+        "enter-search": "Definește căutarea",
+        "created-time": "Data Creării"
     },
     "content-type": {
         "json": "Json",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
index 6337b14854..514cd9a8e3 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
@@ -371,7 +371,8 @@
         "password": "Пароль",
         "enter-username": "Введите имя пользователя",
         "enter-password": "Введите пароль",
-        "enter-search": "Введите условие поиска"
+        "enter-search": "Введите условие поиска",
+        "created-time": "Время создания"
     },
     "content-type": {
         "json": "Json",
@@ -809,6 +810,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {Одно правило} other {Список из # правил} }",
         "rulenode-name-starts-with": "Правила, чьи названия начинаются с '{{prefix}}'",
         "type-current-customer": "Текущий клиент",
+        "type-current-tenant": "Текущий владелец",
         "search": "Поиск объектов",
         "selected-entities": "Выбран(ы) { count, plural, 1 {1 объект} few {# объекта} other {# объектов} }",
         "entity-name": "Название объекта",
diff --git a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json
index 6a77df9127..bb99098127 100644
--- a/ui-ngx/src/assets/locale/locale.constant-tr_TR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-tr_TR.json
@@ -326,7 +326,8 @@
         "password": "Parola",
         "enter-username": "Kullanıcı adı gir",
         "enter-password": "Parola gir",
-        "enter-search": "Arama gir"
+        "enter-search": "Arama gir",
+        "created-time": "Oluşma zamanı"
     },
     "content-type": {
         "json": "Json",
diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
index 471031c9a3..92e8dc4a99 100644
--- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
+++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
@@ -405,7 +405,8 @@
         "password": "Пароль",
         "enter-username": "Введіть ім'я користувача",
         "enter-password": "Введіть пароль",
-        "enter-search": "Введіть пошук"
+        "enter-search": "Введіть пошук",
+        "created-time": "Час створення"
     },
     "converter": {
         "converter": "Перетворювач даних",
@@ -942,6 +943,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {Одне правило} other {Список # правил} }",
         "rulenode-name-starts-with": "Список правил, імена яких починаються '{{prefix}}'",
         "type-current-customer": "Поточний клієнт",
+        "type-current-tenant": "Поточний власник",
         "search": "Пошук сутностей",
         "selected-entities": "{ count, plural, 1 {1 сутність} other {# сутності} } вибрано",
         "entity-name": "Ім'я сутності",
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
index 081cccdde5..1b70a7f643 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
@@ -326,7 +326,8 @@
         "password": "密码",
         "enter-username": "输入用户名",
         "enter-password": "输入密码",
-        "enter-search": "输入检索条件"
+        "enter-search": "输入检索条件",
+        "created-time": "创建时间"
     },
     "content-type": {
         "json": "Json",
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
index 9888752b40..ed387affce 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
@@ -326,7 +326,8 @@
     "password": "密碼",
     "enter-username": "輸入用戶名",
     "enter-password": "輸入密碼",
-    "enter-search": "輸入檢索條件"
+    "enter-search": "輸入檢索條件",
+    "created-time": "建立時間"
   },
   "content-type": {
     "json": "Json",
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 1beeaf7a86..bbe2248bb0 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -95,8 +95,10 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  &, &.mat-headline {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
 }
 
 h1 {
@@ -235,6 +237,14 @@ label {
   user-select: none;
 }
 
+.tb-readonly-label {
+  color: rgba(0, 0, 0, .54);
+}
+
+.tb-disabled-label {
+  color: rgba(0, 0, 0, .44);
+}
+
 div {
   &.tb-small {
     font-size: 14px;
@@ -437,10 +447,10 @@ mat-label {
   }
 
   .layout-padding, .layout-padding > * {
-    @media #{$mat-lt-md} {
+    @media #{$mat-lt-sm} {
       padding: 4px;
     }
-    @media #{$mat-gt-sm} {
+    @media #{$mat-gt-xs} {
       padding: 8px;
     }
   }
@@ -465,10 +475,16 @@ mat-label {
     display: block;
   }
 
+  .mat-form-field{
+    .mat-icon {
+      margin-right: 4px;
+      margin-left: 4px;
+    }
+  }
+
   button.mat-menu-item {
     overflow: hidden;
     fill: #737373;
-    display: block;
     .tb-alt-text {
       float: right;
     }
@@ -600,7 +616,7 @@ mat-label {
     display: table-cell;
     box-sizing: content-box;
     line-break: unset;
-    width: 0px;
+    width: 0;
     overflow: hidden;
     vertical-align: middle;
     border-width: 0;
@@ -608,6 +624,7 @@ mat-label {
     border-bottom-color: rgba(0, 0, 0, 0.12);
     border-style: solid;
     text-overflow: ellipsis;
+    touch-action: auto !important;
     &:last-child {
       padding: 0 12px 0 0;
     }
@@ -627,6 +644,7 @@ mat-label {
   .mat-header-cell {
     white-space: nowrap;
     button.mat-sort-header-button {
+      display: block;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -661,22 +679,22 @@ mat-label {
   }
 
   .mat-toolbar-tools {
-    font-size: 20px;
+    //font-size: 20px;
     letter-spacing: .005em;
-    box-sizing: border-box;
+    //box-sizing: border-box;
     font-weight: 400;
     display: flex;
     align-items: center;
     flex-direction: row;
     width: 100%;
     height: 64px;
-    max-height: 64px;
+    //max-height: 64px;
     padding: 0 16px;
-    margin: 0;
+    //margin: 0;
   }
 
   .mat-icon {
-    vertical-align: middle;
+    vertical-align: bottom;
     box-sizing: content-box;
     &.tb-mat-16 {
       @include tb-mat-icon-size(16);
@@ -764,6 +782,11 @@ mat-label {
 
   .mat-toolbar {
     line-height: normal;
+
+    h1, h2, h3, h4, h5, h6 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   mat-toolbar *, mat-toolbar :after, mat-toolbar :before {
@@ -799,6 +822,9 @@ mat-label {
       .mat-dialog-actions {
         margin-bottom: 0;
         padding: 8px 8px 8px 16px;
+        button:last-of-type{
+          margin-right: 20px;
+        }
       }
     }
   }
@@ -825,7 +851,7 @@ mat-label {
   }
 
   .tb-fullscreen-dialog {
-    @media #{$mat-lt-md} {
+    @media #{$mat-lt-sm} {
       min-height: 100%;
       min-width: 100%;
       max-width: none !important;
@@ -886,6 +912,7 @@ mat-label {
     display: flex;
     height: calc(100% - 60px);
     text-transform: uppercase;
+    text-align: center;
   }
 
 
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index bf61c4e208..6907d6c29d 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -61,41 +61,17 @@ $tb-mat-indigo: (
 $tb-primary: mat-palette($tb-mat-indigo);
 $tb-accent: mat-palette($mat-deep-orange);
 
-// Background palette for light themes.
-$tb-light-theme-background: (
-  status-bar: map_get($mat-grey, 300),
-  app-bar:    map_get($mat-grey, 100),
-  background: #eee, // map_get($mat-grey, 50),
-  hover:      rgba(black, 0.04),
-  card:       white,
-  dialog:     white,
-  disabled-button: rgba(black, 0.12),
-  raised-button: white,
-  focused-button: $dark-focused,
-  selected-button: map_get($mat-grey, 300),
-  selected-disabled-button: map_get($mat-grey, 400),
-  disabled-button-toggle: map_get($mat-grey, 200),
-  unselected-chip: map_get($mat-grey, 300),
-  disabled-list-option: map_get($mat-grey, 200),
-  tooltip: map_get($mat-grey, 700)
-);
+$background: (background: map_get($mat-grey, 200));
 
-@function get-tb-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
-  @return (
-    primary: $primary,
-    accent: $accent,
-    warn: $warn,
-    is-dark: false,
-    foreground: $mat-light-theme-foreground,
-    background: $tb-light-theme-background,
-  );
-}
+$tb-theme-background: map_merge($mat-light-theme-background, $background);
 
-$tb-theme: get-tb-light-theme(
+$tb-mat-theme: mat-light-theme(
     $tb-primary,
     $tb-accent
 );
 
+$tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background));
+
 $primary: mat-color($tb-primary);
 $accent: mat-color($tb-accent);
 
diff --git a/ui-ngx/tsconfig.json b/ui-ngx/tsconfig.json
index 8e1880e048..bef693e404 100644
--- a/ui-ngx/tsconfig.json
+++ b/ui-ngx/tsconfig.json
@@ -30,7 +30,10 @@
       "@core/*": ["src/app/core/*"],
       "@modules/*": ["src/app/modules/*"],
       "@shared/*": ["src/app/shared/*"],
-      "@home/*": ["src/app/modules/home/*"]
+      "@home/*": ["src/app/modules/home/*"],
+      "jszip": [
+        "node_modules/jszip/dist/jszip.min.js"
+      ]
     },
     "lib": [
       "es2018",
diff --git a/ui/src/app/api/entity.service.js b/ui/src/app/api/entity.service.js
index b795432dee..f692c99051 100644
--- a/ui/src/app/api/entity.service.js
+++ b/ui/src/app/api/entity.service.js
@@ -435,6 +435,10 @@ function EntityService($http, $q, $filter, $translate, $log, userService, device
             if (user.authority === 'CUSTOMER_USER') {
                 entityId.id = user.customerId;
             }
+        } else if (entityType === types.aliasEntityType.current_tenant){
+            let user = userService.getCurrentUser();
+            entityId.entityType = types.entityType.tenant;
+            entityId.id = user.tenantId;
         }
         return entityId;
     }
@@ -806,6 +810,7 @@ function EntityService($http, $q, $filter, $translate, $log, userService, device
                 entityTypes.dashboard = types.entityType.dashboard;
                 if (useAliasEntityTypes) {
                     entityTypes.current_customer = types.aliasEntityType.current_customer;
+                    entityTypes.current_tenant = types.aliasEntityType.current_tenant;
                 }
                 break;
             case 'CUSTOMER_USER':
diff --git a/ui/src/app/api/login.service.js b/ui/src/app/api/login.service.js
index 2322c13b63..0707070ed5 100644
--- a/ui/src/app/api/login.service.js
+++ b/ui/src/app/api/login.service.js
@@ -85,9 +85,12 @@ function LoginService($http, $q) {
         return deferred.promise;
     }
 
-    function activate(activateToken, password) {
+    function activate(activateToken, password, sendActivationMail) {
         var deferred = $q.defer();
         var url = '/api/noauth/activate';
+        if(sendActivationMail === true || sendActivationMail === false) {
+            url += '?sendActivationMail=' + sendActivationMail;
+        }
         $http.post(url, {activateToken: activateToken, password: password}).then(function success(response) {
             deferred.resolve(response);
         }, function fail() {
diff --git a/ui/src/app/common/types.constant.js b/ui/src/app/common/types.constant.js
index 86bf952582..aff3821573 100644
--- a/ui/src/app/common/types.constant.js
+++ b/ui/src/app/common/types.constant.js
@@ -408,7 +408,8 @@ export default angular.module('thingsboard.types', [])
                 }
             },
             aliasEntityType: {
-                current_customer: "CURRENT_CUSTOMER"
+                current_customer: "CURRENT_CUSTOMER",
+                current_tenant: "CURRENT_TENANT"
             },
             entityTypeTranslations: {
                 "DEVICE": {
@@ -474,6 +475,10 @@ export default angular.module('thingsboard.types', [])
                 "CURRENT_CUSTOMER": {
                     type: 'entity.type-current-customer',
                     list: 'entity.type-current-customer'
+                },
+                "CURRENT_TENANT": {
+                    type: 'entity.type-current-tenant',
+                    list: 'entity.type-current-tenant'
                 }
             },
             entityField: {
diff --git a/ui/src/app/components/gateway/gateway-form.directive.js b/ui/src/app/components/gateway/gateway-form.directive.js
index 1e2e02ce24..5efa2ee121 100644
--- a/ui/src/app/components/gateway/gateway-form.directive.js
+++ b/ui/src/app/components/gateway/gateway-form.directive.js
@@ -119,7 +119,7 @@ function GatewayFormController($scope, $injector, $document, $mdExpansionPanel,
         vm.ctx.widgetTitle = widgetTitle;
 
         archiveFileName = vm.settings.archiveFileName && vm.settings.archiveFileName.length ? vm.settings.archiveFileName : 'gatewayConfiguration';
-        gatewayNameExists = utils.customTranslation(vm.settings.deviceNameExist, vm.settings.deviceNameExist) || $translate.instant('gateway.gateway-exists');
+        gatewayNameExists = utils.customTranslation(vm.settings.gatewayNameExists, vm.settings.gatewayNameExists) || $translate.instant('gateway.gateway-exists');
         successfulSaved = utils.customTranslation(vm.settings.successfulSave, vm.settings.successfulSave) || $translate.instant('gateway.gateway-saved');
     }
 
diff --git a/ui/src/app/components/react/json-form-ace-editor.jsx b/ui/src/app/components/react/json-form-ace-editor.jsx
index 966419b3fe..2329bbddf7 100644
--- a/ui/src/app/components/react/json-form-ace-editor.jsx
+++ b/ui/src/app/components/react/json-form-ace-editor.jsx
@@ -83,9 +83,9 @@ class ThingsboardAceEditor extends React.Component {
         fixAceEditor(editor);
     }
 
-    onToggleFull(groupId) {
+    onToggleFull() {
         this.setState({ isFull: !this.state.isFull });
-        this.props.onToggleFullscreen(groupId);
+        this.props.onToggleFullscreen();
         this.updateAceEditorSize = true;
     }
 
@@ -140,7 +140,7 @@ class ThingsboardAceEditor extends React.Component {
                     <div className="title-panel">
                         <label>{this.props.mode}</label>
                         <FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={'Tidy'} onTouchTap={this.onTidy}/>
-                        <FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={this.state.isFull ? 'Exit fullscreen' : 'Fullscreen'} onTouchTap={() => this.onToggleFull(this.props.groupId)}/>
+                        <FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={this.state.isFull ? 'Exit fullscreen' : 'Fullscreen'} onTouchTap={this.onToggleFull}/>
                     </div>
                     <AceEditor mode={this.props.mode}
                                height={this.state.isFull ? "100%" : "150px"}
diff --git a/ui/src/app/components/react/json-form-array.jsx b/ui/src/app/components/react/json-form-array.jsx
index 1f20c4aa6d..eb414d8619 100644
--- a/ui/src/app/components/react/json-form-array.jsx
+++ b/ui/src/app/components/react/json-form-array.jsx
@@ -131,7 +131,7 @@ class ThingsboardArray extends React.Component {
             }
             let forms = this.props.form.items.map(function(form, index){
                 var copy = this.copyWithIndex(form, i);
-                return this.props.builder(copy, this.props.groupId, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
+                return this.props.builder(copy, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
             }.bind(this));
             arrays.push(
             <li key={keys[i]} className="list-group-item">
diff --git a/ui/src/app/components/react/json-form-fieldset.jsx b/ui/src/app/components/react/json-form-fieldset.jsx
index 4e078d72e2..f668ba774c 100644
--- a/ui/src/app/components/react/json-form-fieldset.jsx
+++ b/ui/src/app/components/react/json-form-fieldset.jsx
@@ -19,7 +19,7 @@ class ThingsboardFieldSet extends React.Component {
 
     render() {
         let forms = this.props.form.items.map(function(form, index){
-            return this.props.builder(form, this.props.groupId, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
+            return this.props.builder(form, this.props.model, index, this.props.onChange, this.props.onColorClick, this.props.onIconClick, this.props.onToggleFullscreen, this.props.mapper, this.props.builder);
         }.bind(this));
 
         return (
diff --git a/ui/src/app/components/react/json-form-schema-form.jsx b/ui/src/app/components/react/json-form-schema-form.jsx
index 2172ac3640..04970f601b 100644
--- a/ui/src/app/components/react/json-form-schema-form.jsx
+++ b/ui/src/app/components/react/json-form-schema-form.jsx
@@ -40,9 +40,6 @@ class ThingsboardSchemaForm extends React.Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            groupId: null,
-        };
 
         this.mapper = {
             'number': ThingsboardNumber,
@@ -88,15 +85,12 @@ class ThingsboardSchemaForm extends React.Component {
         this.props.onIconClick(event);
     }
 
-    onToggleFullscreen(groupId) {
-        this.setState({
-            groupId: groupId
-        });
+    onToggleFullscreen() {
         this.props.onToggleFullscreen();
     }
 
 
-    builder(form, groupId, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
+    builder(form, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
         var type = form.type;
         let Field = this.mapper[type];
         if(!Field) {
@@ -109,21 +103,21 @@ class ThingsboardSchemaForm extends React.Component {
                 return null;
             }
         }
-        return <Field model={model} groupId={groupId} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
+        return <Field model={model} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
     }
 
-    createSchema(theForm, groupId) {
+    createSchema(theForm) {
         let merged = utils.merge(this.props.schema, theForm, this.props.ignore, this.props.option);
         let mapper = this.mapper;
         if(this.props.mapper) {
             mapper = _.merge(this.mapper, this.props.mapper);
         }
         let forms = merged.map(function(form, index) {
-            return this.builder(form, groupId, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
+            return this.builder(form, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
         }.bind(this));
 
         let formClass = 'SchemaForm';
-        if (this.props.isFullscreen && groupId === this.state.groupId) {
+        if (this.props.isFullscreen) {
             formClass += ' SchemaFormFullscreen';
         }
 
@@ -136,7 +130,7 @@ class ThingsboardSchemaForm extends React.Component {
         if(this.props.groupInfoes&&this.props.groupInfoes.length>0){
             let content=[];
             for(let info of this.props.groupInfoes){
-                let forms = this.createSchema(this.props.form[info.formIndex], info.formIndex);
+                let forms = this.createSchema(this.props.form[info.formIndex]);
                 let item = <ThingsboardSchemaGroup key={content.length} forms={forms} info={info}></ThingsboardSchemaGroup>;
                 content.push(item);
             }
@@ -166,8 +160,8 @@ class ThingsboardSchemaGroup extends React.Component{
     render() {
         let theCla = "pull-right fa fa-chevron-down md-toggle-icon"+(this.state.showGroup?"":" tb-toggled")
         return (<section className="md-whiteframe-z1" style={{marginTop: '10px'}}>
-                    <div className='SchemaGroupname md-button-toggle' onClick={this.toogleGroup.bind(this)}>{this.props.info.GroupTitle}<span className={theCla}></span></div>
-                    <div style={{padding: '20px'}} className={this.state.showGroup?"":"invisible"}>{this.props.forms}</div>
-                </section>);
+            <div className='SchemaGroupname md-button-toggle' onClick={this.toogleGroup.bind(this)}>{this.props.info.GroupTitle}<span className={theCla}></span></div>
+            <div style={{padding: '20px'}} className={this.state.showGroup?"":"invisible"}>{this.props.forms}</div>
+        </section>);
     }
 }
diff --git a/ui/src/app/components/react/json-form.scss b/ui/src/app/components/react/json-form.scss
index 91c14d51ff..85825abf42 100644
--- a/ui/src/app/components/react/json-form.scss
+++ b/ui/src/app/components/react/json-form.scss
@@ -24,15 +24,12 @@ $input-label-float-scale: .75 !default;
 .tb-fullscreen {
   [name="ReactSchemaForm"] {
     .SchemaForm {
-      display: none;
-
       &.SchemaFormFullscreen {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        display: block;
 
         > div:not(.fullscreen-form-field) {
           display: none !important;
diff --git a/ui/src/app/components/widget/widget.controller.js b/ui/src/app/components/widget/widget.controller.js
index 5346246eae..83225edcc2 100644
--- a/ui/src/app/components/widget/widget.controller.js
+++ b/ui/src/app/components/widget/widget.controller.js
@@ -152,7 +152,7 @@ export default function WidgetController($scope, $state, $timeout, $window, $ocL
             var entityInfo = getActiveEntityInfo();
             var entityId = entityInfo ? entityInfo.entityId : null;
             var entityName = entityInfo ? entityInfo.entityName : null;
-            var entityLabel = entityInfo && entityInfo.label ? entityInfo.label : null;
+            var entityLabel = entityInfo && entityInfo.entityLabel ? entityInfo.entityLabel : null;
             handleWidgetAction($event, this.descriptor, entityId, entityName, null, entityLabel);
         }
         widgetContext.customHeaderActions.push(headerAction);
diff --git a/ui/src/app/dashboard/states/manage-dashboard-states.tpl.html b/ui/src/app/dashboard/states/manage-dashboard-states.tpl.html
index 23b2433d0a..5c8f363003 100644
--- a/ui/src/app/dashboard/states/manage-dashboard-states.tpl.html
+++ b/ui/src/app/dashboard/states/manage-dashboard-states.tpl.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<md-dialog aria-label="{{ 'dashboard.manage-states' | translate }}" style="width: 620px;">
+<md-dialog aria-label="{{ 'dashboard.manage-states' | translate }}" style="min-width: 600px;">
     <form name="theForm" ng-submit="vm.save()">
         <md-toolbar>
             <div class="md-toolbar-tools">
@@ -72,7 +72,7 @@
                         </md-toolbar>
                         <md-table-container>
                             <table md-table>
-                                <thead fix-head md-head md-order="vm.query.order" md-on-reorder="vm.onReorder">
+                                <thead md-head md-order="vm.query.order" md-on-reorder="vm.onReorder">
                                     <tr md-row>
                                         <th md-column md-order-by="name"><span translate>dashboard.state-name</span></th>
                                         <th md-column md-order-by="id"><span translate>dashboard.state-id</span></th>
diff --git a/ui/src/app/entity/entity-select.directive.js b/ui/src/app/entity/entity-select.directive.js
index 9b1c763a60..e93a769eec 100644
--- a/ui/src/app/entity/entity-select.directive.js
+++ b/ui/src/app/entity/entity-select.directive.js
@@ -22,13 +22,14 @@ import entitySelectTemplate from './entity-select.tpl.html';
 /* eslint-enable import/no-unresolved, import/default */
 
 /*@ngInject*/
-export default function EntitySelect($compile, $templateCache, entityService) {
+export default function EntitySelect($compile, $templateCache, entityService, types) {
 
     var linker = function (scope, element, attrs, ngModelCtrl) {
         var template = $templateCache.get(entitySelectTemplate);
         element.html(template);
 
         scope.tbRequired = angular.isDefined(scope.tbRequired) ? scope.tbRequired : false;
+        scope.entityTypeCurrentTenant = types.aliasEntityType.current_tenant;
 
         var entityTypes = entityService.prepareAllowedEntityTypesList(scope.allowedEntityTypes, scope.useAliasEntityTypes);
 
@@ -48,7 +49,8 @@ export default function EntitySelect($compile, $templateCache, entityService) {
         scope.updateView = function () {
             if (!scope.disabled) {
                 var value = ngModelCtrl.$viewValue;
-                if (scope.model && scope.model.entityType && scope.model.entityId) {
+                if (scope.model && scope.model.entityType &&
+                    (scope.model.entityId || scope.model.entityType === scope.entityTypeCurrentTenant)) {
                     if (!value) {
                         value = {};
                     }
diff --git a/ui/src/app/entity/entity-select.tpl.html b/ui/src/app/entity/entity-select.tpl.html
index 59133d541d..8800f9760f 100644
--- a/ui/src/app/entity/entity-select.tpl.html
+++ b/ui/src/app/entity/entity-select.tpl.html
@@ -25,11 +25,11 @@
                            allowed-entity-types="allowedEntityTypes"
                            ng-model="model.entityType">
     </tb-entity-type-select>
-    <tb-entity-autocomplete flex ng-if="model.entityType"
+    <tb-entity-autocomplete flex ng-if="model.entityType && model.entityType !== entityTypeCurrentTenant"
                             the-form="theForm"
                             ng-disabled="disabled"
                             tb-required="tbRequired"
                             entity-type="model.entityType"
                             ng-model="model.entityId">
     </tb-entity-autocomplete>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/locale/locale.constant-cs_CZ.json b/ui/src/app/locale/locale.constant-cs_CZ.json
index 0006afc74b..2a297cd9bb 100644
--- a/ui/src/app/locale/locale.constant-cs_CZ.json
+++ b/ui/src/app/locale/locale.constant-cs_CZ.json
@@ -770,6 +770,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {Jeden uzel pravidla} other {Seznam # uzlů pravidel} }",
         "rulenode-name-starts-with": "Uzly pravidel, jejichž název začíná '{{prefix}}'",
         "type-current-customer": "Stávající zákazník",
+        "type-current-tenant": "Stávající tenant",
         "search": "Vyhledat entity",
         "selected-entities": "{ count, plural, 1 {1 entita} other {# entit} } zvoleno",
         "entity-name": "Název entity",
diff --git a/ui/src/app/locale/locale.constant-en_US.json b/ui/src/app/locale/locale.constant-en_US.json
index f0dc673f84..d69778a787 100644
--- a/ui/src/app/locale/locale.constant-en_US.json
+++ b/ui/src/app/locale/locale.constant-en_US.json
@@ -50,7 +50,8 @@
         "export": "Export",
         "share-via": "Share via {{provider}}",
         "continue": "Continue",
-        "discard-changes": "Discard Changes"
+        "discard-changes": "Discard Changes",
+        "download": "Download"
     },
     "aggregation": {
         "aggregation": "Aggregation",
@@ -810,6 +811,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {One rule node} other {List of # rule nodes} }",
         "rulenode-name-starts-with": "Rule nodes whose names start with '{{prefix}}'",
         "type-current-customer": "Current Customer",
+        "type-current-tenant": "Current Tenant",
         "search": "Search entities",
         "selected-entities": "{ count, plural, 1 {1 entity} other {# entities} } selected",
         "entity-name": "Entity name",
diff --git a/ui/src/app/locale/locale.constant-es_ES.json b/ui/src/app/locale/locale.constant-es_ES.json
index 69d28426e3..8394e9ed65 100644
--- a/ui/src/app/locale/locale.constant-es_ES.json
+++ b/ui/src/app/locale/locale.constant-es_ES.json
@@ -1226,7 +1226,6 @@
         "remember-me": "Recordarme",
         "forgot-password": "¿Olvidó la contraseña?",
         "password-reset": "Restablecer contraseña",
-        "expired-password-reset-message": "",
         "new-password": "Nueva contraseña",
         "new-password-again": "Repita la nueva contraseña",
         "password-link-sent-message": "¡El enlace para el restablecer la contraseña fue enviado correctamente!",
@@ -1556,7 +1555,6 @@
         "export": "Exportar widget"
     },
     "widget-action": {
-        "custom-pretty": "",
         "header-button": "Botón del encabezado del widget",
         "open-dashboard-state": "Navegar a nuevo estado del panel",
         "update-dashboard-state": "Actualizar estado vigente del panel",
diff --git a/ui/src/app/locale/locale.constant-ru_RU.json b/ui/src/app/locale/locale.constant-ru_RU.json
index 47c70da48a..f86eb988ff 100644
--- a/ui/src/app/locale/locale.constant-ru_RU.json
+++ b/ui/src/app/locale/locale.constant-ru_RU.json
@@ -809,6 +809,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {Одно правило} other {Список из # правил} }",
         "rulenode-name-starts-with": "Правила, чьи названия начинаются с '{{prefix}}'",
         "type-current-customer": "Текущий клиент",
+        "type-current-tenant": "Текущий владелец",
         "search": "Поиск объектов",
         "selected-entities": "Выбран(ы) { count, plural, 1 {1 объект} few {# объекта} other {# объектов} }",
         "entity-name": "Название объекта",
diff --git a/ui/src/app/locale/locale.constant-uk_UA.json b/ui/src/app/locale/locale.constant-uk_UA.json
index 7b882423ed..5a0899014d 100644
--- a/ui/src/app/locale/locale.constant-uk_UA.json
+++ b/ui/src/app/locale/locale.constant-uk_UA.json
@@ -942,6 +942,7 @@
         "list-of-rulenodes": "{ count, plural, 1 {Одне правило} other {Список # правил} }",
         "rulenode-name-starts-with": "Список правил, імена яких починаються '{{prefix}}'",
         "type-current-customer": "Поточний клієнт",
+        "type-current-tenant": "Поточний власник",
         "search": "Пошук сутностей",
         "selected-entities": "{ count, plural, 1 {1 сутність} other {# сутності} } вибрано",
         "entity-name": "Ім'я сутності",
diff --git a/ui/src/app/login/login.controller.js b/ui/src/app/login/login.controller.js
index 8dcd2a9d8e..d749ea0936 100644
--- a/ui/src/app/login/login.controller.js
+++ b/ui/src/app/login/login.controller.js
@@ -20,7 +20,7 @@ import logoSvg from '../../svg/logo_title_white.svg';
 /* eslint-enable import/no-unresolved, import/default */
 
 /*@ngInject*/
-export default function LoginController(toast, loginService, userService, types, $state/*, $rootScope, $log, $translate*/) {
+export default function LoginController(toast, loginService, userService, types, $state, $stateParams/*, $rootScope, $log, $translate*/) {
     var vm = this;
 
     vm.logoSvg = logoSvg;
@@ -32,6 +32,12 @@ export default function LoginController(toast, loginService, userService, types,
 
     vm.login = login;
 
+    if ($stateParams.username && $stateParams.password) {
+        vm.user.name = $stateParams.username;
+        vm.user.password = $stateParams.password;
+        doLogin();
+    }
+
     function doLogin() {
         loginService.login(vm.user).then(function success(response) {
             var token = response.data.token;
diff --git a/ui/src/app/login/login.routes.js b/ui/src/app/login/login.routes.js
index ac9401147b..51121a782a 100644
--- a/ui/src/app/login/login.routes.js
+++ b/ui/src/app/login/login.routes.js
@@ -25,7 +25,7 @@ import createPasswordTemplate from './create-password.tpl.html';
 /*@ngInject*/
 export default function LoginRoutes($stateProvider) {
     $stateProvider.state('login', {
-        url: '/login',
+        url: '/login?username&password',
         module: 'public',
         views: {
             "@": {
diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js
index 3fc4084835..6f05c3ae03 100644
--- a/ui/src/app/widget/lib/map-widget2.js
+++ b/ui/src/app/widget/lib/map-widget2.js
@@ -584,51 +584,53 @@ export default class TbMapWidgetV2 {
 				var latData = data[location.latIndex].data;
 				var lngData = data[location.lngIndex].data;
 				var lat, lng, latLng;
-				if (latData.length > 0 && lngData.length > 0) {
-					if (tbMap.drawRoutes) {
-						// Create or update route
-						var latLngs = [];
-						for (var i = 0; i < latData.length; i++) {
-							lat = latData[i][1];
-							lng = lngData[i][1];
-							if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) {
-								latLng = tbMap.map.createLatLng(lat, lng);
-								if (i == 0 || !latLngs[latLngs.length - 1].equals(latLng)) {
-									latLngs.push(latLng);
-								}
-							}
-						}
-						if (latLngs.length > 0) {
-							var markerLocation = latLngs[latLngs.length - 1];
-							createOrUpdateLocationMarker(location, markerLocation, dataMap);
-						}
-						if (!location.polyline) {
-							location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
-							tbMap.polylines.push(location.polyline);
-							locationChanged = true;
-						} else {
-							var prevPath = tbMap.map.getPolylineLatLngs(location.polyline);
-							if (!prevPath || !arraysEqual(prevPath, latLngs)) {
-								tbMap.map.setPolylineLatLngs(location.polyline, latLngs);
-								locationChanged = true;
-							}
-						}
-					} else {
-						// Create or update marker
-						lat = latData[latData.length - 1][1];
-						lng = lngData[lngData.length - 1][1];
+
+				if (tbMap.drawRoutes) {
+					// Create or update route
+					var latLngs = [];
+					for (var i = 0; i < latData.length; i++) {
+						lat = latData[i][1];
+						lng = lngData[i][1];
 						if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) {
 							latLng = tbMap.map.createLatLng(lat, lng);
-							if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
-								locationChanged = true;
+							if (i == 0 || !latLngs[latLngs.length - 1].equals(latLng)) {
+								latLngs.push(latLng);
 							}
 						}
 					}
-					if (location.marker) {
-						updateLocationStyle(location, dataMap);
+					if (latLngs.length > 0) {
+						var markerLocation = latLngs[latLngs.length - 1];
+						createOrUpdateLocationMarker(location, markerLocation, dataMap);
+					} else if (location.marker) {
+						tbMap.map.removeMarker(location.marker);
+						delete location.marker;
 					}
-
+					if (!location.polyline) {
+						location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
+						tbMap.polylines.push(location.polyline);
+						locationChanged = true;
+					} else {
+						var prevPath = tbMap.map.getPolylineLatLngs(location.polyline);
+						if (!prevPath || !arraysEqual(prevPath, latLngs)) {
+							tbMap.map.setPolylineLatLngs(location.polyline, latLngs);
+							locationChanged = true;
+						}
+					}
+				} else if (latData.length > 0 && lngData.length > 0) {
+					// Create or update marker
+					lat = latData[latData.length - 1][1];
+					lng = lngData[lngData.length - 1][1];
+					if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) {
+						latLng = tbMap.map.createLatLng(lat, lng);
+						if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
+							locationChanged = true;
+						}
+					}
+				}
+				if (location.marker) {
+					updateLocationStyle(location, dataMap);
 				}
+
 			}
 			return locationChanged;
 		}
diff --git a/ui/src/app/widget/lib/timeseries-table-widget.scss b/ui/src/app/widget/lib/timeseries-table-widget.scss
index 4381ee7f1e..9e8ed9ea3a 100644
--- a/ui/src/app/widget/lib/timeseries-table-widget.scss
+++ b/ui/src/app/widget/lib/timeseries-table-widget.scss
@@ -31,10 +31,6 @@ tb-timeseries-table-widget {
     z-index: 10;
   }
 
-  md-table-container {
-    overflow-x: visible;
-  }
-
   md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
     min-height: 0;
   }
diff --git a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
index b41bdf7d5c..1a7194b3f9 100644
--- a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
@@ -38,56 +38,58 @@
             </div>
         </md-toolbar>
 
-        <md-tabs flex md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
+        <md-tabs md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
                  id="tabs" md-border-bottom flex>
             <md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}">
-                <md-table-container class="flex">
-                    <table md-table>
-                        <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
-                            <tr md-row>
-                                <th ng-show="vm.showTimestamp"
-                                    md-column md-order-by="0"
-                                >
-                                    <span>Timestamp</span>
-                                </th>
-                                <th md-column
-                                    md-order-by="{{ h.index }}"
-                                    ng-repeat="h in source.ts.header"
-                                >
-                                    <span>{{ h.dataKey.label }}</span>
-                                </th>
-                            </tr>
-                        </thead>
+                <div class="tb-absolute-fill" layout="column">
+                    <md-table-container flex>
+                        <table md-table>
+                            <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
+                                <tr md-row>
+                                    <th ng-show="vm.showTimestamp"
+                                        md-column md-order-by="0"
+                                    >
+                                        <span>Timestamp</span>
+                                    </th>
+                                    <th md-column
+                                        md-order-by="{{ h.index }}"
+                                        ng-repeat="h in source.ts.header"
+                                    >
+                                        <span>{{ h.dataKey.label }}</span>
+                                    </th>
+                                </tr>
+                            </thead>
 
-                        <tbody md-body>
-                            <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
-                                <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
-                                    md-cell
-                                    ng-repeat="d in row track by $index"
-                                    ng-style="vm.cellStyle(source, $index, d)"
-                                    ng-bind-html="vm.cellContent(source, $index, row, d)"
-                                ></td>
-                                <td md-cell class="tb-action-cell"
-                                    ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
-                                               maxWidth: vm.actionCellDescriptors.length*36+'px',
-                                               width: vm.actionCellDescriptors.length*36+'px'}">
-                                    <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
-                                               aria-label="{{ actionDescriptor.displayName }}"
-                                               ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
-                                       <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
-                                       <md-tooltip md-direction="top">
-                                           {{ actionDescriptor.displayName }}
-                                       </md-tooltip>
-                                    </md-button>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <md-divider></md-divider>
-                    <span ng-show="!vm.sources[vm.sourceIndex].data.length"
-                          layout-align="center center"
-                          class="no-data-found" translate>widget.no-data-found</span>
-                </md-table-container>
+                            <tbody md-body>
+                                <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
+                                    <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
+                                        md-cell
+                                        ng-repeat="d in row track by $index"
+                                        ng-style="vm.cellStyle(source, $index, d)"
+                                        ng-bind-html="vm.cellContent(source, $index, row, d)"
+                                    ></td>
+                                    <td md-cell class="tb-action-cell"
+                                        ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
+                                                   maxWidth: vm.actionCellDescriptors.length*36+'px',
+                                                   width: vm.actionCellDescriptors.length*36+'px'}">
+                                        <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
+                                                   aria-label="{{ actionDescriptor.displayName }}"
+                                                   ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
+                                           <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
+                                           <md-tooltip md-direction="top">
+                                               {{ actionDescriptor.displayName }}
+                                           </md-tooltip>
+                                        </md-button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <md-divider></md-divider>
+                        <span ng-show="!vm.sources[vm.sourceIndex].data.length"
+                              layout-align="center center"
+                              class="no-data-found" translate>widget.no-data-found</span>
+                    </md-table-container>
+                </div>
             </md-tab>
         </md-tabs>
         <md-table-pagination ng-if="vm.displayPagination"