homeContext refactoring

Close #2062

Squashed commit of the following:

commit a1a1d4fe74dd414f83477d972bc07062e2c890ab
Merge: 9535e109 84938c56
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 8 10:21:47 2020 +0300

    Merge branch 'master' into fix/2062

commit 9535e10934c57c2592df234a030bad183c0086cd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 13:59:57 2020 +0300

    Fix translation

commit e6f912d1d2793fd008c22b4418681abcc54896d0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 12:03:45 2020 +0300

    - client: Add link to 'update_failed' error toast

.twosky.json

@@ -13,6 +13,7 @@
       "hr": "Hrvatski",
       "id": "Indonesian",
       "it": "Italiano",
+      "hu": "Magyar",
       "no": "Norsk",
       "pl": "Polski",
       "pt-br": "Português (BR)",
@@ -32,7 +33,8 @@
       "zh-tw": "正體中文",
       "zh-cn": "简体中文",
       "ko": "한국어",
-      "th": "ภาษาไทย"
+      "th": "ภาษาไทย",
+      "si-lk": "සිංහල"
     }
   }
 ]

AGHTechDoc.md

@@ -12,6 +12,7 @@ Contents:
 * Updating
 	* Get version command
 	* Update command
+* API: Get global status
 * TLS
 	* API: Get TLS configuration
 	* API: Set TLS configuration
@@ -24,11 +25,13 @@ Contents:
 	* API: Find clients by IP
 * DHCP server
 	* DHCP server in DNS
-	* "Show DHCP status" command
-	* "Check DHCP" command
-	* "Enable DHCP" command
+	* DHCP Custom Options
+	* API: Show DHCP interfaces
+	* API: Show DHCP status
+	* API: Check DHCP
+	* API: Enable DHCP
 	* Static IP check/set
-	* Add a static lease
+	* API: Add a static lease
 	* API: Reset DHCP configuration
 * DNS general settings
 	* API: Get DNS general settings
@@ -66,6 +69,7 @@ Contents:
 	* API: Log out
 	* API: Get current user info
 * Safe services
+* ipset
 
 
 ## Relations between subsystems
@@ -376,6 +380,28 @@ Error response:
 UI shows error message "Auto-update has failed"
 
 
+## API: Get global status
+
+Request:
+
+	GET /control/status
+
+Response:
+
+	200 OK
+
+	{
+	"dns_addresses":["..."],
+	"dns_port":53,
+	"http_port":3000,
+	"language":"en",
+	"protection_enabled":true,
+	"running":true,
+	"dhcp_available":true,
+	"version":"undefined"
+	}
+
+
 ## DHCP server
 
 Enable DHCP server algorithm:
@@ -405,7 +431,43 @@ DHCP leases are used in several ways by DNS module.
 		> PTR 100.1.168.192.in-addr.arpa. = bills-notebook.
 
 
-### "Show DHCP status" command
+### DHCP Custom Options
+
+Option with arbitrary hexadecimal data:
+
+	DEC_CODE hex HEX_DATA
+
+where DEC_CODE is a decimal DHCPv4 option code in range [1..255]
+
+Option with IP data (only 1 IP is supported):
+
+	DEC_CODE ip IP_ADDR
+
+
+### API: Show DHCP interfaces
+
+Request:
+
+	GET /control/dhcp/interfaces
+
+Response:
+
+	200 OK
+
+	{
+		"iface_name":{
+			"name":"iface_name",
+			"hardware_address":"...",
+			"ipv4_addresses":["ipv4 addr", ...],
+			"ipv6_addresses":["ipv6 addr", ...],
+			"gateway_ip":"...",
+			"flags":"up|broadcast|multicast"
+		}
+		...
+	}
+
+
+### API: Show DHCP status
 
 Request:
 
@@ -416,16 +478,19 @@ Response:
 	200 OK
 
 	{
-		"config":{
-			"enabled":false,
-			"interface_name":"...",
+		"enabled":false,
+		"interface_name":"...",
+		"v4":{
 			"gateway_ip":"...",
 			"subnet_mask":"...",
-			"range_start":"...",
+			"range_start":"...", // if empty: DHCPv4 won't be enabled
 			"range_end":"...",
 			"lease_duration":60,
-			"icmp_timeout_msec":0
 		},
+		"v6":{
+			"range_start":"...", // if empty: DHCPv6 won't be enabled
+			"lease_duration":60,
+		}
 		"leases":[
 			{"ip":"...","mac":"...","hostname":"...","expires":"..."}
 			...
@@ -437,7 +502,7 @@ Response:
 	}
 
 
-### "Check DHCP" command
+### API: Check DHCP
 
 Request:
 
@@ -450,13 +515,21 @@ Response:
 	200 OK
 
 	{
-		"other_server": {
-			"found": "yes|no|error",
-			"error": "Error message", // set if found=error
-		},
-		"static_ip": {
-			"static": "yes|no|error",
-			"ip": "<Current dynamic IP address>", // set if static=no
+		v4: {
+			"other_server": {
+				"found": "yes|no|error",
+				"error": "Error message", // set if found=error
+			},
+			"static_ip": {
+				"static": "yes|no|error",
+				"ip": "<Current dynamic IP address>", // set if static=no
+			}
+		}
+		v6: {
+			"other_server": {
+				"found": "yes|no|error",
+				"error": "Error message", // set if found=error
+			},
 		}
 	}
 
@@ -477,21 +550,26 @@ If `static_ip.static` is:
 		In order to use DHCP server a static IP address must be set.  We failed to determine if this network interface is configured using static IP address.  Please set a static IP address manually.
 
 
-### "Enable DHCP" command
+### API: Enable DHCP
 
 Request:
 
 	POST /control/dhcp/set_config
 
 	{
-		"enabled":true,
-		"interface_name":"vboxnet0",
+	"enabled":true,
+	"interface_name":"vboxnet0",
+	"v4":{
 		"gateway_ip":"192.169.56.1",
 		"subnet_mask":"255.255.255.0",
-		"range_start":"192.169.56.3",
-		"range_end":"192.169.56.3",
+		"range_start":"192.169.56.100",
+		"range_end":"192.169.56.200", // Note: first 3 octects must match "range_start"
 		"lease_duration":60,
-		"icmp_timeout_msec":0
+	},
+	"v6":{
+		"range_start":"...",
+		"lease_duration":60,
+	}
 	}
 
 Response:
@@ -500,6 +578,10 @@ Response:
 
 	OK
 
+For v4, if range_start = "1.2.3.4", the range_end must be "1.2.3.X" where X > 4.
+
+For v6, if range_start = "2001::1", the last IP is "2001:ff".
+
 
 ### Static IP check/set
 
@@ -595,7 +677,7 @@ or:
 	systemctl restart system-networkd
 
 
-### Add a static lease
+### API: Add a static lease
 
 Request:
 
@@ -1357,6 +1439,11 @@ When UI asks for data from query log (see "API: Get query log"), server reads th
 
 We store data for a limited amount of time - the log file is automatically rotated.
 
+* On AGH startup read the first line from query logs and store its time value
+* If there's no log file yet, set the time value of the first log event when the file is created
+* If this time value is older than our time limit, perform file rotate procedure
+* While AGH is running, check the previous condition every 24 hours
+
 
 ### API: Get query log
 
@@ -1801,3 +1888,25 @@ Check if host name is blocked by SB/PC service:
 		sha256(host.com)[0..1] -> hashes[0],hashes[1],...
 		sha256(sub.host.com)[0..1] -> hashes[2],...
 		...
+
+
+## ipset
+
+AGH can add IP addresses of the specified in configuration domain names to an ipset list.
+
+Prepare: user creates an ipset list and configures AGH for using it.
+
+	1. User --( ipset create my_ipset hash:ip ) -> OS
+	2. User --( ipset: host.com,host2.com/my_ipset )-> AGH
+
+		Syntax:
+
+			ipset: "DOMAIN[,DOMAIN].../IPSET1_NAME[,IPSET2_NAME]..."
+
+		IPv4 addresses are added to an ipset list with `ipv4` family, IPv6 addresses - to `ipv6` ipset list.
+
+Run-time: AGH adds IP addresses of a domain name to a corresponding ipset list.
+
+	1. AGH --( resolve host.com )-> upstream
+	2. AGH <-( host.com:[1.1.1.1,2.2.2.2] )-- upstream
+	3. AGH --( ipset.add(my_ipset, [1.1.1.1,2.2.2.2] ))-> OS

Makefile

@@ -108,6 +108,12 @@ ifndef DOCKER_IMAGE_NAME
 $(error DOCKER_IMAGE_NAME value is not set)
 endif
 
+# OS-specific flags
+TEST_FLAGS := -race
+ifeq ($(OS),Windows_NT)
+	TEST_FLAGS :=
+endif
+
 .PHONY: all build client client-watch docker lint lint-js lint-go test dependencies clean release docker-multi-arch
 all: build
 
@@ -146,7 +152,7 @@ docker:
 
 lint: lint-js lint-go
 
-lint-js:
+lint-js: dependencies
 	@echo Running js linter
 	npm --prefix client run lint
 
@@ -158,7 +164,7 @@ test:
 	@echo Running JS unit-tests
 	npm run test --prefix client
 	@echo Running Go unit-tests
-	go test -race -v -bench=. -coverprofile=coverage.txt -covermode=atomic ./...
+	go test $(TEST_FLAGS) -v -coverprofile=coverage.txt -covermode=atomic ./...
 
 ci: client_with_deps
 	go mod download

README.md

@@ -20,8 +20,11 @@
     <a href="https://goreportcard.com/report/AdguardTeam/AdGuardHome">
       <img src="https://goreportcard.com/badge/github.com/AdguardTeam/AdGuardHome" alt="Go Report Card" />
     </a>
-    <a href="https://golangci.com/r/github.com/AdguardTeam/AdGuardHome">
-      <img src="https://golangci.com/badges/github.com/AdguardTeam/AdGuardHome.svg" alt="GolangCI" />
+    <a href="https://hub.docker.com/r/adguard/adguardhome">
+        <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/adguard/adguardhome.svg?maxAge=604800" />
+    </a>
+    <a href="https://hub.docker.com/r/adguard/adguardhome">
+        <img alt="Docker Stars" src="https://img.shields.io/docker/stars/adguard/adguardhome.svg?maxAge=604800" />
     </a>
     <br />
     <a href="https://github.com/AdguardTeam/AdGuardHome/releases">
@@ -30,12 +33,6 @@
     <a href="https://snapcraft.io/adguard-home">
         <img alt="adguard-home" src="https://snapcraft.io/adguard-home/badge.svg" />
     </a>
-    <a href="https://hub.docker.com/r/adguard/adguardhome">
-        <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/adguard/adguardhome.svg?maxAge=604800" />
-    </a>
-    <a href="https://hub.docker.com/r/adguard/adguardhome">
-        <img alt="Docker Stars" src="https://img.shields.io/docker/stars/adguard/adguardhome.svg?maxAge=604800" />
-    </a>
 </p>
 
 <br />
@@ -217,7 +214,7 @@ You may need to prepare before using these builds:
 
 You are welcome to fork this repository, make your changes and submit a pull request — https://github.com/AdguardTeam/AdGuardHome/pulls
 
-Please note, that we don't expect people to contribute to both UI and golang parts of the program simultaneously. Ideally, the golang part is implemented first, i.e. configuration, API, and the functionality itself. The UI part can be implemented later in a different pull request by a different person.
+Please note that we don't expect people to contribute to both UI and golang parts of the program simultaneously. Ideally, the golang part is implemented first, i.e. configuration, API, and the functionality itself. The UI part can be implemented later in a different pull request by a different person.
 
 <a id="test-unstable-versions"></a>
 ### Test unstable versions
@@ -235,7 +232,7 @@ There are three options how you can install an unstable version:
 
 There are three options how you can install an unstable version.
 
-1. You can either install a beta or edge version of AdGuard Home which we update periodically. If you're already using stable version of AdGuard Home, just replace the executable with a new one.
+1. You can either install AdGuard Home from "beta" or "edge" distribution channel which we update periodically. If you're already using stable version of AdGuard Home, just replace the executable file with a new one.
 2. You can use the Docker image from the `edge` tag, which is synced with the repo master branch.
 3. You can install AdGuard Home from `beta` or `edge` channels on the Snap Store.
 

client/.eslintrc.json

@@ -1,18 +1,15 @@
 {
     "parser": "babel-eslint",
-
     "extends": [
         "plugin:react/recommended",
         "airbnb-base"
     ],
-
     "env": {
         "jest": true,
         "node": true,
         "browser": true,
         "commonjs": true
     },
-
     "settings": {
         "react": {
             "pragma": "React",
@@ -24,35 +21,65 @@
             }
         }
     },
-
     "rules": {
-        "indent": ["error", 4, {
-            "SwitchCase": 1,
-            "VariableDeclarator": 1,
-            "outerIIFEBody": 1,
-            "FunctionDeclaration": {
-                "parameters": 1,
-                "body": 1
-            },
-            "FunctionExpression": {
-                "parameters": 1,
-                "body": 1
-            },
-            "CallExpression": {
-                "arguments": 1
-            },
-            "ArrayExpression": 1,
-            "ObjectExpression": 1,
-            "ImportDeclaration": 1,
-            "flatTernaryExpressions": false,
-            "ignoredNodes": ["JSXElement", "JSXElement > *", "JSXAttribute", "JSXIdentifier", "JSXNamespacedName", "JSXMemberExpression", "JSXSpreadAttribute", "JSXExpressionContainer", "JSXOpeningElement", "JSXClosingElement", "JSXText", "JSXEmptyExpression", "JSXSpreadChild"],
-            "ignoreComments": false
-        }],
+        "indent": [
+            "error",
+            4,
+            {
+                "SwitchCase": 1,
+                "VariableDeclarator": 1,
+                "outerIIFEBody": 1,
+                "FunctionDeclaration": {
+                    "parameters": 1,
+                    "body": 1
+                },
+                "FunctionExpression": {
+                    "parameters": 1,
+                    "body": 1
+                },
+                "CallExpression": {
+                    "arguments": 1
+                },
+                "ArrayExpression": 1,
+                "ObjectExpression": 1,
+                "ImportDeclaration": 1,
+                "flatTernaryExpressions": false,
+                "ignoredNodes": [
+                    "JSXElement",
+                    "JSXElement > *",
+                    "JSXAttribute",
+                    "JSXIdentifier",
+                    "JSXNamespacedName",
+                    "JSXMemberExpression",
+                    "JSXSpreadAttribute",
+                    "JSXExpressionContainer",
+                    "JSXOpeningElement",
+                    "JSXClosingElement",
+                    "JSXText",
+                    "JSXEmptyExpression",
+                    "JSXSpreadChild"
+                ],
+                "ignoreComments": false
+            }
+        ],
         "class-methods-use-this": "off",
         "no-shadow": "off",
         "camelcase": "off",
-        "no-console": ["warn", { "allow": ["warn", "error"] }],
-        "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+        "no-console": [
+            "warn",
+            {
+                "allow": [
+                    "warn",
+                    "error"
+                ]
+            }
+        ],
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": true
+            }
+        ],
         "import/prefer-default-export": "off",
         "no-alert": "off"
     }

client/package-lock.json

@@ -1356,17 +1356,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
-    "@hot-loader/react-dom": {
-      "version": "16.13.0",
-      "resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.13.0.tgz",
-      "integrity": "sha512-lJZrmkucz2MrQJTQtJobx5MICXcfQvKihszqv655p557HPi0hMOWxrNpiHv3DWD8ugNWjtWcVWqRnFvwsHq1mQ==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.0"
-      }
-    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -7412,11 +7401,21 @@
       "dev": true
     },
     "i18next": {
-      "version": "19.4.4",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.4.4.tgz",
-      "integrity": "sha512-ofaHtdsDdX3A5nYur1HWblB7J4hIcjr2ACdnwTAJgc8hTfPbyzZfGX0hVkKpI3vzDIgO6Uzc4v1ffW2W6gG6zw==",
+      "version": "19.6.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.6.2.tgz",
+      "integrity": "sha512-Zyd/Z32FY+sD+Eg6sLj5DeDSlrIN3WZ4onuOBRGcjDx/rvodsyUZ9TJ2Y+3aD9Vu8MPbiMU2WesIER/rs1ioyw==",
       "requires": {
-        "@babel/runtime": "^7.3.1"
+        "@babel/runtime": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
+          "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
       }
     },
     "i18next-browser-languagedetector": {
@@ -10774,6 +10773,24 @@
         "yallist": "^4.0.0"
       }
     },
+    "mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.5.0",
+        "duplexify": "^3.4.2",
+        "end-of-stream": "^1.1.0",
+        "flush-write-stream": "^1.0.0",
+        "from2": "^2.1.0",
+        "parallel-transform": "^1.1.0",
+        "pump": "^3.0.0",
+        "pumpify": "^1.3.3",
+        "stream-each": "^1.1.0",
+        "through2": "^2.0.0"
+      }
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -12159,9 +12176,9 @@
       }
     },
     "pump": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
       "dev": true,
       "requires": {
         "end-of-stream": "^1.1.0",
@@ -12177,6 +12194,18 @@
         "duplexify": "^3.6.0",
         "inherits": "^2.0.3",
         "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
       }
     },
     "punycode": {
@@ -12348,9 +12377,9 @@
       }
     },
     "react-i18next": {
-      "version": "11.4.0",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.4.0.tgz",
-      "integrity": "sha512-lyOZSSQkif4H9HnHN3iEKVkryLI+WkdZSEw3VAZzinZLopfYRMHVY5YxCopdkXPLEHs6S5GjKYPh3+j0j336Fg==",
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.7.2.tgz",
+      "integrity": "sha512-Djj3K3hh5Tecla2CI9rLO3TZBYGMFrGilm0JY4cLofAQONCi5TK6nVmUPKoB59n1ZffgjfgJt6zlbE9aGF6Q0Q==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "html-parse-stringify2": "2.0.1"
@@ -13271,10 +13300,13 @@
       }
     },
     "serialize-javascript": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
-      "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
-      "dev": true
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+      "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
     },
     "serve-index": {
       "version": "1.9.1",
@@ -14609,16 +14641,16 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz",
-      "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
       "dev": true,
       "requires": {
         "cacache": "^12.0.2",
         "find-cache-dir": "^2.1.0",
         "is-wsl": "^1.1.0",
         "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^4.0.0",
         "source-map": "^0.6.1",
         "terser": "^4.1.2",
         "webpack-sources": "^1.4.0",
@@ -14678,15 +14710,6 @@
             "path-exists": "^3.0.0"
           }
         },
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
         "make-dir": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -14697,24 +14720,6 @@
             "semver": "^5.6.0"
           }
         },
-        "mississippi": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-          "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
-          "dev": true,
-          "requires": {
-            "concat-stream": "^1.5.0",
-            "duplexify": "^3.4.2",
-            "end-of-stream": "^1.1.0",
-            "flush-write-stream": "^1.0.0",
-            "from2": "^2.1.0",
-            "parallel-transform": "^1.1.0",
-            "pump": "^3.0.0",
-            "pumpify": "^1.3.3",
-            "stream-each": "^1.1.0",
-            "through2": "^2.0.0"
-          }
-        },
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -14754,22 +14759,15 @@
             "find-up": "^3.0.0"
           }
         },
-        "pump": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
           "dev": true,
           "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
+            "randombytes": "^2.1.0"
           }
         },
-        "serialize-javascript": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -14784,12 +14782,6 @@
           "requires": {
             "figgy-pudding": "^3.5.1"
           }
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
         }
       }
     },

client/package.json

@@ -13,12 +13,11 @@
         "test:watch": "jest --watch"
     },
     "dependencies": {
-        "@hot-loader/react-dom": "^16.13.0",
         "@nivo/line": "^0.49.1",
         "axios": "^0.19.2",
         "classnames": "^2.2.6",
         "date-fns": "^1.29.0",
-        "i18next": "^19.4.4",
+        "i18next": "^19.6.2",
         "i18next-browser-languagedetector": "^4.2.0",
         "ipaddr.js": "^1.9.1",
         "js-yaml": "^3.14.0",
@@ -29,7 +28,7 @@
         "react": "^16.13.1",
         "react-click-outside": "^3.0.1",
         "react-dom": "^16.13.1",
-        "react-i18next": "^11.4.0",
+        "react-i18next": "^11.7.2",
         "react-modal": "^3.11.2",
         "react-popper-tooltip": "^2.11.1",
         "react-redux": "^7.2.0",

client/src/__locales/bg.json

@@ -139,8 +139,8 @@
     "page_table_footer_text": "Страница",
     "rows_table_footer_text": "редове",
     "updated_custom_filtering_toast": "Обновени местни правила за филтриране",
-    "rule_removed_from_custom_filtering_toast": "Премахнато от местни правила за филтриране",
-    "rule_added_to_custom_filtering_toast": "Добавено до местни правила за филтриране",
+    "rule_removed_from_custom_filtering_toast": "Премахнато от местни правила за филтриране: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Добавено до местни правила за филтриране: {{rule}}",
     "plain_dns": "Обикновен DNS",
     "source_label": "Източник",
     "found_in_known_domain_db": "Намерен в списъците с домейни.",

client/src/__locales/cs.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Stránka",
     "rows_table_footer_text": "řádky",
     "updated_custom_filtering_toast": "Aktualizovaná vlastní pravidla filtrování",
-    "rule_removed_from_custom_filtering_toast": "Pravidlo odstraněno z vlastních pravidel filtrování",
-    "rule_added_to_custom_filtering_toast": "Pravidlo přidáno do vlastních pravidel filtrování",
+    "rule_removed_from_custom_filtering_toast": "Pravidlo odstraněno z vlastních pravidel filtrování: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Pravidlo přidáno do vlastních pravidel filtrování: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrováno pomocí {{filter}}",
     "query_log_confirm_clear": "Opravdu chcete vymazat celý protokol dotazů?",
@@ -564,4 +564,4 @@
     "original_response": "Původní odezva",
     "click_to_view_queries": "Klikněte pro zobrazení dotazů",
     "port_53_faq_link": "Port 53 je často obsazen službami \"DNSStubListener\" nebo \"systemd-resolved\". Přečtěte si <0>tento návod</0> o tom, jak to vyřešit."
-}
+}

client/src/__locales/da.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Side",
     "rows_table_footer_text": "rækker",
     "updated_custom_filtering_toast": "De brugerdefinerede filtreringsregler er blevet opdateret",
-    "rule_removed_from_custom_filtering_toast": "Regel fjernet fra de brugerdefinerede filtreringsregler",
-    "rule_added_to_custom_filtering_toast": "Regel tilføjet til de brugerdefinerede filtreringsregler",
+    "rule_removed_from_custom_filtering_toast": "Regel fjernet fra de brugerdefinerede filtreringsregler: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regel tilføjet til de brugerdefinerede filtreringsregler: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtreret af {{filter}}",
     "query_log_confirm_clear": "Er du sikker på, at du vil rydde hele forespørgselsloggen?",
@@ -564,4 +564,4 @@
     "original_response": "Oprindeligt svar",
     "click_to_view_queries": "Klik for at se forespørgsler",
     "port_53_faq_link": "Port 53 optages ofte af \"DNSStubListener\" eller \"systemd-resolved\" tjenester. Læs <0>denne instruktion</0> om, hvordan du løser dette."
-}
+}

client/src/__locales/de.json

@@ -45,7 +45,7 @@
     "dhcp_warning": "Wenn Sie den DHCP-Server trotzdem aktivieren möchten, stellen Sie sicher, dass sich in Ihrem Netzwerk kein anderer aktiver DHCP-Server befindet. Andernfalls kann es bei angeschlossenen Geräten zu einem Ausfall des Internets kommen!",
     "dhcp_error": "Es konnte nicht ermittelt werden, ob es einen anderen DHCP-Server im Netzwerk gibt.",
     "dhcp_static_ip_error": "Um den DHCP-Server nutzen zu können, muss eine statische IP-Adresse festgelegt werden. Es konnte nicht ermittelt werden, ob diese Netzwerkschnittstelle mit statischer IP-Adresse konfiguriert ist. Bitte legen Sie eine statische IP-Adresse manuell fest.",
-    "dhcp_dynamic_ip_found": "Ihr System verwendet die dynamische Konfiguration der IP-Adresse für die Schnittstelle <0>{{interfaceName}}</0>. Um den DHCP-Server nutzen zu können, muss eine statische IP-Adresse festgelegt werden. Ihre aktuelle IP-Adresse ist <0>{{ipAddress}}}</0>. Diese IP-Adresse wird automatisch als statisch festgelegt, sobald Sie auf die Schaltfläche „DHCP aktivieren” klicken.",
+    "dhcp_dynamic_ip_found": "Ihr System verwendet die dynamische Konfiguration der IP-Adresse für die Schnittstelle <0>{{interfaceName}}</0>. Um den DHCP-Server nutzen zu können, muss eine statische IP-Adresse festgelegt werden. Ihre aktuelle IP-Adresse ist <0>{{ipAddress}}</0>. Diese IP-Adresse wird automatisch als statisch festgelegt, sobald Sie auf die Schaltfläche „DHCP aktivieren” klicken.",
     "dhcp_lease_added": "Statischer Lease „{{key}}” erfolgreich hinzugefügt",
     "dhcp_lease_deleted": "Statischer Lease „{{key}}” erfolgreich entfernt",
     "dhcp_new_static_lease": "Neuer statischer Lease",
@@ -99,7 +99,7 @@
     "no_clients_found": "Keine Clients gefunden",
     "general_statistics": "Allgemeine Statistiken",
     "number_of_dns_query_days": "Anzahl der in den letzten {{count}} Tagen verarbeiteten DNS-Anfragen",
-    "number_of_dns_query_days_plural": "Anzahl der DNS-Abfragen, die in den letzten {{count}}} Tagen verarbeitet wurden",
+    "number_of_dns_query_days_plural": "Anzahl der DNS-Abfragen, die in den letzten {{count}} Tagen verarbeitet wurden",
     "number_of_dns_query_24_hours": "Anzahl der in den letzten 24 Stunden durchgeführten DNS-Anfragen",
     "number_of_dns_query_blocked_24_hours": "Anzahl der durch Werbefilter und Host-Blocklisten geblockten DNS-Anfragen",
     "number_of_dns_query_blocked_24_hours_by_sec": "Anzahl der durch das AdGuard-Modul für Internet-Sicherheit blockierten DNS-Anfragen",
@@ -208,8 +208,8 @@
     "page_table_footer_text": "Seite",
     "rows_table_footer_text": "Reihen",
     "updated_custom_filtering_toast": "Die benutzerdefinierten Filterregeln wurden aktualisiert",
-    "rule_removed_from_custom_filtering_toast": "Regel wurde aus den benutzerdefinierten Filterregeln entfernt",
-    "rule_added_to_custom_filtering_toast": "Regel wurde zu den benutzerdefinierten Filterregeln hinzugefügt",
+    "rule_removed_from_custom_filtering_toast": "Regel wurde aus den benutzerdefinierten Filterregeln entfernt: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regel wurde zu den benutzerdefinierten Filterregeln hinzugefügt: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Gefiltert nach {{filter}}",
     "query_log_confirm_clear": "Möchten Sie wirklich das Abfrageprotokoll vollständig löschen?",
@@ -564,4 +564,4 @@
     "original_response": "Ursprüngliche Antwort",
     "click_to_view_queries": "Anklicken, um Abfragen anzuzeigen",
     "port_53_faq_link": "Port 53 wird oft von Diensten wie „DNSStubListener” oder „systemresolved” belegt. Bitte lesen Sie <0>diese Anweisung</0>, wie dies behoben werden kann."
-}
+}

client/src/__locales/en.json

@@ -11,6 +11,8 @@
     "save_config": "Save config",
     "enabled_dhcp": "DHCP server enabled",
     "disabled_dhcp": "DHCP server disabled",
+    "unavailable_dhcp": "DHCP is unavailable",
+    "unavailable_dhcp_desc": "AdGuard Home cannot run a DHCP server on your OS",
     "dhcp_title": "DHCP server (experimental!)",
     "dhcp_description": "If your router does not provide DHCP settings, you can use AdGuard's own built-in DHCP server.",
     "dhcp_enable": "Enable DHCP server",
@@ -21,6 +23,8 @@
     "dhcp_static_leases": "DHCP static leases",
     "dhcp_leases_not_found": "No DHCP leases found",
     "dhcp_config_saved": "DHCP config successfully saved",
+    "dhcp_ipv4_settings": "DHCP IPv4 Settings",
+    "dhcp_ipv6_settings": "DHCP IPv6 Settings",
     "form_error_required": "Required field",
     "form_error_ip4_format": "Invalid IPv4 format",
     "form_error_ip6_format": "Invalid IPv6 format",
@@ -29,6 +33,7 @@
     "form_error_client_id_format": "Invalid client ID format",
     "form_error_positive": "Must be greater than 0",
     "form_error_negative": "Must be equal to 0 or greater",
+    "range_end_error": "Must be greater than range start",
     "dhcp_form_gateway_input": "Gateway IP",
     "dhcp_form_subnet_input": "Subnet mask",
     "dhcp_form_range_title": "Range of IP addresses",
@@ -189,6 +194,10 @@
     "dns_test_not_ok_toast": "Server \"{{key}}\": could not be used, please check that you've written it correctly",
     "unblock": "Unblock",
     "block": "Block",
+    "disallow_this_client": "Disallow this client",
+    "allow_this_client": "Allow this client",
+    "block_for_this_client_only": "Block for this client only",
+    "unblock_for_this_client_only": "Unblock for this client only",
     "time_table_header": "Time",
     "date": "Date",
     "domain_name_table_header": "Domain name",
@@ -208,8 +217,8 @@
     "page_table_footer_text": "Page",
     "rows_table_footer_text": "rows",
     "updated_custom_filtering_toast": "Updated the custom filtering rules",
-    "rule_removed_from_custom_filtering_toast": "Rule removed from the custom filtering rules",
-    "rule_added_to_custom_filtering_toast": "Rule added to the custom filtering rules",
+    "rule_removed_from_custom_filtering_toast": "Rule removed from the custom filtering rules: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Rule added to the custom filtering rules: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtered by {{filter}}",
     "query_log_confirm_clear": "Are you sure you want to clear the entire query log?",
@@ -354,7 +363,7 @@
     "fix": "Fix",
     "dns_providers": "Here is a <0>list of known DNS providers</0> to choose from.",
     "update_now": "Update now",
-    "update_failed": "Auto-update failed. Please <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>follow the steps</a> to update manually.",
+    "update_failed": "Auto-update failed. Please <a>follow these steps</a> to update manually.",
     "processing_update": "Please wait, AdGuard Home is being updated",
     "clients_title": "Clients",
     "clients_desc": "Configure devices connected to AdGuard Home",
@@ -561,7 +570,9 @@
     "filter_category_security_desc": "Lists that specialize on blocking malware, phishing or scam domains",
     "filter_category_regional_desc": "Lists that focus on regional ads and tracking servers",
     "filter_category_other_desc": "Other blocklists",
+    "setup_config_to_enable_dhcp_server": "Setup config to enable DHCP server",
     "original_response": "Original response",
     "click_to_view_queries": "Click to view queries",
-    "port_53_faq_link": "Port 53 is often occupied by \"DNSStubListener\" or \"systemd-resolved\" services. Please read <0>this instruction</0> on how to resolve this."
-}
+    "port_53_faq_link": "Port 53 is often occupied by \"DNSStubListener\" or \"systemd-resolved\" services. Please read <0>this instruction</0> on how to resolve this.",
+    "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client."
+}

client/src/__locales/es.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Página",
     "rows_table_footer_text": "filas",
     "updated_custom_filtering_toast": "Reglas de filtrado personalizado actualizadas",
-    "rule_removed_from_custom_filtering_toast": "Regla eliminada de las reglas de filtrado personalizado",
-    "rule_added_to_custom_filtering_toast": "Regla añadida a las reglas de filtrado personalizado",
+    "rule_removed_from_custom_filtering_toast": "Regla eliminada de las reglas de filtrado personalizado: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regla añadida a las reglas de filtrado personalizado: {{rule}}",
     "query_log_response_status": "Estado: {{value}}",
     "query_log_filtered": "Filtrado por {{filter}}",
     "query_log_confirm_clear": "¿Está seguro de que desea borrar todo el registro de consultas?",
@@ -564,4 +564,4 @@
     "original_response": "Respuesta original",
     "click_to_view_queries": "Clic para ver las consultas",
     "port_53_faq_link": "El puerto 53 suele estar ocupado por los servicios \"DNSStubListener\" o \"systemd-resolved\". Por favor lee <0>esta instrucción</0> sobre cómo resolver esto."
-}
+}

client/src/__locales/fa.json

@@ -202,8 +202,8 @@
     "page_table_footer_text": "صفحه",
     "rows_table_footer_text": "سطر",
     "updated_custom_filtering_toast": "دستورات فیلترینگ دستی بروز رسانی شده است",
-    "rule_removed_from_custom_filtering_toast": "دستور از دستورات فیلترینگ دستی حذف شد",
-    "rule_added_to_custom_filtering_toast": "دستور به دستورات فیلترینگ دستی اضافه شد",
+    "rule_removed_from_custom_filtering_toast": "دستور از دستورات فیلترینگ دستی حذف شد {{rule}}",
+    "rule_added_to_custom_filtering_toast": "دستور به دستورات فیلترینگ دستی اضافه شد {{rule}}",
     "query_log_response_status": "وضعیت: {{value}}",
     "query_log_filtered": "فیلتر شده با {{filter}}",
     "query_log_confirm_clear": "آیا واقعا میخواهید کل وقایع جستار را پاک کنید؟",

client/src/__locales/fr.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Page",
     "rows_table_footer_text": "lignes",
     "updated_custom_filtering_toast": "Règles de filtrage d'utilisateur mises à jour",
-    "rule_removed_from_custom_filtering_toast": "Règle retirée des règles d'utilisateur",
-    "rule_added_to_custom_filtering_toast": "Règle ajoutée aux règles d'utilisateur",
+    "rule_removed_from_custom_filtering_toast": "Règle retirée des règles d'utilisateur: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Règle ajoutée aux règles d'utilisateur: {{rule}}",
     "query_log_response_status": "Statut : {{value}}",
     "query_log_filtered": "Filtré par {{filter}}",
     "query_log_confirm_clear": "Êtes-vous sûr de vouloir effacer tout le journal des requêtes ?",
@@ -561,4 +561,4 @@
     "filter_category_other_desc": "Autres listes noires",
     "click_to_view_queries": "Cliquez pour voir les requêtes",
     "port_53_faq_link": "Le port 53 est souvent occupé par les services « DNSStubListener » ou « systemd-resolved ». Veuillez lire <0>cette instruction</0> pour savoir comment résoudre ce problème."
-}
+}

client/src/__locales/hr.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Stranica",
     "rows_table_footer_text": "redova",
     "updated_custom_filtering_toast": "Ažurirana su prilagođena pravila filtriranja",
-    "rule_removed_from_custom_filtering_toast": "Pravilo je uklonjeno iz prilagođenih pravila filtriranja",
-    "rule_added_to_custom_filtering_toast": "Pravilo je dodano u prilagođena pravila filtriranja",
+    "rule_removed_from_custom_filtering_toast": "Pravilo je uklonjeno iz prilagođenih pravila filtriranja: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Pravilo je dodano u prilagođena pravila filtriranja: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrirao {{filter}}",
     "query_log_confirm_clear": "Jeste li sigurni da želite ukloniti zapise upita?",
@@ -564,4 +564,4 @@
     "original_response": "Originalni odgovor",
     "click_to_view_queries": "Kliknite za pregled upita",
     "port_53_faq_link": "Port 53 često zauzimaju usluge \"DNSStubListener\" ili \"systemd-resolved\". Molimo pročitajte <0>ove upute</0> o tome kako to riješiti."
-}
+}

client/src/__locales/hu.json

@@ -0,0 +1,565 @@
+{
+    "client_settings": "Kliens beállítások",
+    "example_upstream_reserved": "megadhat egy DNS-t <0> felfelé egy adott tartományhoz </0>",
+    "upstream_parallel": "A párhuzamos lekérdezések segítségével felgyorsíthatja a megoldást az összes upstream kiszolgáló egyidejű lekérdezésével",
+    "parallel_requests": "Párhuzamos kérelmek",
+    "load_balancing": "Terheléselosztás",
+    "load_balancing_desc": "Egyszerre csak egy szerverről történjen lekérdezés. Az AdGuard Home egy súlyozott, véletlenszerű algoritmust fog használni a megfelelő szerver kiválasztására, így a leggyorsabb szervert gyakrabban fogja használni.",
+    "bootstrap_dns": "Bootstrap DNS kiszolgálók",
+    "bootstrap_dns_desc": "A Bootstrap DNS-kiszolgálók a DoH / DoT-megoldók IP-címeinek feloldására szolgálnak",
+    "check_dhcp_servers": "Ellenőrizze a DHCP-kiszolgálókat",
+    "save_config": "Konfiguráció mentése",
+    "enabled_dhcp": "A DHCP-kiszolgáló engedélyezve van",
+    "disabled_dhcp": "A DHCP-kiszolgáló le van tiltva",
+    "dhcp_title": "DHCP-kiszolgáló (kísérleti!)",
+    "dhcp_description": "Ha az útválasztó nem nyújt DHCP-beállításokat, akkor az AdGuard saját beépített DHCP-kiszolgálóját használhatod",
+    "dhcp_enable": "A DHCP-kiszolgáló engedélyezése",
+    "dhcp_disable": "A DHCP-kiszolgáló letiltása",
+    "dhcp_not_found": "Biztonságos a beépített DHCP-kiszolgáló engedélyezése - nem találtunk aktív DHCP-kiszolgálókat a hálózaton. Javasoljuk azonban, hogy kézzel ellenőrizze, hogy az automatikus tesztünk jelenleg nem ad 100% -os garanciát.",
+    "dhcp_found": "Aktív DHCP-kiszolgáló található a hálózaton. Nem biztonságos a beépített DHCP-kiszolgáló engedélyezése.",
+    "dhcp_leases": "DHCP bérlés",
+    "dhcp_static_leases": "Statikus DHCP",
+    "dhcp_leases_not_found": "Nem találhatóak DHCP kliensek",
+    "dhcp_config_saved": "DHCP beállítások elmentve",
+    "form_error_required": "Kötelező mező",
+    "form_error_ip4_format": "Helytelen IPv4 formátum",
+    "form_error_ip6_format": "Érvénytelen IPv6 formátum",
+    "form_error_ip_format": "Érvénytelen IPv4 formátum",
+    "form_error_mac_format": "Érvénytelen MAC formátum",
+    "form_error_client_id_format": "Érvénytelen kliens ID formátum",
+    "form_error_positive": "Legfeljebb nulla legyen",
+    "form_error_negative": "Legalább 0-nak kell lennie",
+    "dhcp_form_gateway_input": "Átjáró IP",
+    "dhcp_form_subnet_input": "Alhálózati maszk",
+    "dhcp_form_range_title": "IP címtartomány",
+    "dhcp_form_range_start": "Tartomány kezdete",
+    "dhcp_form_range_end": "Tartomány vége",
+    "dhcp_form_lease_title": "DHCP bérlési ideje (másodpercben)",
+    "dhcp_form_lease_input": "Bérlési idő",
+    "dhcp_interface_select": "Válaszd ki a DHCP interface-t",
+    "dhcp_hardware_address": "Hardvercím",
+    "dhcp_ip_addresses": "Ip címek",
+    "ip": "IP",
+    "dhcp_table_hostname": "Host név",
+    "dhcp_table_expires": "Lejár",
+    "dhcp_warning": "Ha egyébként engedélyezni szeretné a DHCP-kiszolgálót, győződjön meg arról, hogy nincs-e más aktív DHCP-kiszolgáló a hálózaton. Ellenkező esetben a csatlakoztatott eszközöket megszakíthatja az interneten!",
+    "dhcp_error": "Nem tudtuk meghatározni, hogy van-e másik DHCP-kiszolgáló a hálózaton.",
+    "dhcp_static_ip_error": "A DHCP-kiszolgáló használatához statikus IP-címet kell beállítani. Nem sikerült meghatározni, hogy ez a hálózati interfész statikus IP-cím használatával van-e beállítva. Állítsa be kézzel egy statikus IP-címet.",
+    "dhcp_dynamic_ip_found": "A rendszer dinamikus IP-címkonfigurációt használ az <0> {{interfaceName}} </0> interfészhez. A DHCP-kiszolgáló használatához statikus IP-címet kell beállítani. Jelenlegi IP-címe <0> {{ipAddress}} </0>. Ha automatikusan megnyomja az Enable DHCP gombot, automatikusan beállítjuk ezt az IP-címet statikusnak.",
+    "dhcp_lease_added": "Statikus bérlet \"{{key}}\" sikeresen hozzáadva",
+    "dhcp_lease_deleted": "Statikus bérlet \"{{key}}\" sikeresen törölve",
+    "dhcp_new_static_lease": "Új statikus bérlet",
+    "dhcp_static_leases_not_found": "Nincs DHCP statikus bérlet",
+    "dhcp_add_static_lease": "Statikus bérlet hozzáadása",
+    "dhcp_reset": "Biztosan visszaállítod a DHCP beállításokat?",
+    "country": "Ország",
+    "city": "Város",
+    "delete_confirm": "Biztosan törli a \"{{key}}\" -t?",
+    "form_enter_hostname": "Adja meg a hosztnevet",
+    "error_details": "Hiba részletei",
+    "response_details": "Válasz adatai",
+    "request_details": "Kérés adatai",
+    "client_details": "Kliens részletei",
+    "details": "Részletek",
+    "back": "Vissza",
+    "dashboard": "Irányítópult",
+    "settings": "Beállítások",
+    "filters": "Szűrők",
+    "filter": "Szűrő",
+    "query_log": "Lekérdezési napló",
+    "compact": "Kompakt",
+    "nothing_found": "Nincs találat",
+    "faq": "GYIK",
+    "version": "verzió",
+    "address": "Cím",
+    "protocol": "Protokoll",
+    "on": "Be",
+    "off": "Ki",
+    "copyright": "Szerzői jog",
+    "homepage": "Honlap",
+    "report_an_issue": "Probléma bejelentése",
+    "privacy_policy": "Adatvédelmi irányelvek",
+    "enable_protection": "Védelem engedélyezése",
+    "enabled_protection": "Engedélyezett védelem",
+    "disable_protection": "Védelem letiltása",
+    "disabled_protection": "Letiltott védelem",
+    "refresh_statics": "Statisztikák frissítése",
+    "dns_query": "DNS lekérdezések",
+    "blocked_by": "<0>Szűrők által blokkolt</0>",
+    "stats_malware_phishing": "Blokkolt vírusok/adathalászat",
+    "stats_adult": "Blokkolt felnőtt tartalmak",
+    "stats_query_domain": "A legjobban lekérdezett területek",
+    "for_last_24_hours": "Utolsó 24 órában",
+    "for_last_days": "a legutolsó {{count}} napra",
+    "for_last_days_plural": "a legutolsó {{count}} napra",
+    "no_domains_found": "Nem található domain",
+    "requests_count": "Kérések száma",
+    "top_blocked_domains": "A legjobban blokkolt tartományok",
+    "top_clients": "Legaktívabb kliensek",
+    "no_clients_found": "Nem található kliens",
+    "general_statistics": "Általános statisztikák",
+    "number_of_dns_query_days": "Lekérdezések száma az utolsó {{count}} napban",
+    "number_of_dns_query_days_plural": "Feldolgozott lekérdezések száma az utolsó {{count}} napban",
+    "number_of_dns_query_24_hours": "Számos DNS lekérdezések feldolgozása az elmúlt 24 órában",
+    "number_of_dns_query_blocked_24_hours": "Számos DNS-kérés blokkolva van az adblock-szűrők által, és blokklistákat tartalmaz",
+    "number_of_dns_query_blocked_24_hours_by_sec": "Számos DNS-kérés blokkolva van az AdGuard böngésző biztonsági moduljában",
+    "number_of_dns_query_blocked_24_hours_adult": "Blokkolt felnőtt tartalmak száma",
+    "enforced_save_search": "Erősített biztonságos keresés",
+    "number_of_dns_query_to_safe_search": "Számos DNS-kérelem olyan keresőmotorokhoz, amelyekre a Biztonságos keresés érvényesült",
+    "average_processing_time": "Átlagos feldolgozási idő",
+    "average_processing_time_hint": "Átlagos idő milliszekundumban a DNS-kérelem feldolgozásakor",
+    "block_domain_use_filters_and_hosts": "A tartományok blokkolása szűrőkkel és házigazdákkal",
+    "filters_block_toggle_hint": "A <a href='#filters'> Szűrők </a> beállításaiban beállíthatja a blokkolási szabályokat.",
+    "use_adguard_browsing_sec": "Használja az AdGuard böngészés biztonsági webszolgáltatását",
+    "use_adguard_browsing_sec_hint": "Az AdGuard Home ellenőrzi, hogy a böngésző biztonsági webszolgáltatás a tartományt feketelistára tette-e. Az ellenőrzés elvégzéséhez adatvédelmi keresési API-t fog használni: az SHA256-os hash-név csak egy rövid előtagot küld a kiszolgálónak.",
+    "use_adguard_parental": "Használja az AdGuard szülői felügyelet webszolgáltatását",
+    "use_adguard_parental_hint": "Az AdGuard Home ellenőrzi, hogy a domain tartalmaz-e felnőtt anyagokat. Ugyanazokat az adatvédelmi API-kat használja, mint a böngésző biztonsági webszolgáltatás.",
+    "enforce_safe_search": "A biztonságos keresés végrehajtása",
+    "enforce_save_search_hint": "Az AdGuard Home a következő keresőmotorokban biztosíthatja a biztonságos keresést: Google, Youtube, Bing, DuckDuckGo és Yandex.",
+    "no_servers_specified": "Nincsenek megadott kiszolgálók",
+    "general_settings": "Általános beállítások",
+    "dns_settings": "DNS beállítások",
+    "dns_blocklists": "DNS blokkolási listák",
+    "dns_allowlists": "DNS engedélyezési listák",
+    "dns_blocklists_desc": "Az AdGuard Home blokkolni fogja azokat a domaineket, amik szerepelnek a blokkolási listán.",
+    "dns_allowlists_desc": "A DNS engedélyezési listán szereplő domainek engedélyezve lesznek, akkor is, ha szerepelnek bármelyik blokkolási listán.",
+    "custom_filtering_rules": "Egyéni szűrési szabályok",
+    "encryption_settings": "Titkosítási beállítások",
+    "dhcp_settings": "DHCP beállítások",
+    "upstream_dns": "Upstream DNS-kiszolgálók",
+    "upstream_dns_hint": "Ha üresen hagyod ezt a mezőt, az AdGuard a(z) <a href='https://www.quad9.net/' target='_blank'>Quad9</a>-t fogja használni.",
+    "test_upstream_btn": "Upstreamek tesztelése",
+    "upstreams": "Feltöltés",
+    "apply_btn": "Alkalmaz",
+    "disabled_filtering_toast": "Letiltott szűrés",
+    "enabled_filtering_toast": "Engedélyezett szűrés",
+    "disabled_safe_browsing_toast": "Letiltott biztonságos böngészés",
+    "enabled_safe_browsing_toast": "Engedélyezett biztonságos böngészés",
+    "disabled_parental_toast": "Letiltott szülői felügyelet",
+    "enabled_parental_toast": "Engedélyezett szülői felügyelet",
+    "disabled_safe_search_toast": "Letiltott biztonságos keresés",
+    "enabled_save_search_toast": "Engedélyezett biztonságos keresés",
+    "enabled_table_header": "Engedélyezve",
+    "name_table_header": "Név",
+    "list_url_table_header": "Lista URL-je",
+    "rules_count_table_header": "Szabályok száma",
+    "last_time_updated_table_header": "Utoljára frissítve",
+    "actions_table_header": "Akciók",
+    "request_table_header": "Kérelem",
+    "edit_table_action": "Szerkesztés",
+    "delete_table_action": "Törlés",
+    "elapsed": "Eltelt időtartam",
+    "filters_and_hosts_hint": "Az AdGuard Home megérti az alapvető adblock szabályokat és a fájlokat tartalmazó szintaxist.",
+    "no_blocklist_added": "Nincsnek blokkolási listák hozzáadva",
+    "no_whitelist_added": "Nincsenek engedélyezési listák hozzáadva",
+    "add_blocklist": "Blokkolási lista hozzáadása",
+    "add_allowlist": "Engedélyezési lista hozzáadása",
+    "cancel_btn": "Megszünteti",
+    "enter_name_hint": "Adja meg a nevet",
+    "enter_url_or_path_hint": "Írjon be egy URL-t vagy egy útvonalat a listához",
+    "check_updates_btn": "Frissítések keresése",
+    "new_blocklist": "Új blokkolási lista",
+    "new_allowlist": "Új engedélyezési lista",
+    "edit_blocklist": "Blokkolási lista módosítása",
+    "edit_allowlist": "Engedélyezési lista módosítása",
+    "choose_blocklist": "Blokkolási lista választás",
+    "choose_allowlist": "Engedélyezési lista választás",
+    "enter_valid_blocklist": "Adjon meg egy érvényes URL-t a blokkolási listához.",
+    "enter_valid_allowlist": "Adjon meg egy érvényes URL-t az engedélyezési listához.",
+    "form_error_url_format": "Egyedi URL formátum",
+    "form_error_url_or_path_format": "Helytelen URL vagy elérési út a listához",
+    "custom_filter_rules": "Egyéni szűrési szabályok",
+    "custom_filter_rules_hint": "Adjon meg egy szabályt egy sorban. Használhatja az adblock szabályokat vagy a fájlokat tartalmazó szintaxist.",
+    "examples_title": "Példák",
+    "example_meaning_filter_block": "blokkolja a example.org domain és az összes aldomain hozzáférését",
+    "example_meaning_filter_whitelist": "example.org tartomány és az összes aldomain hozzáférésének feloldása",
+    "example_meaning_host_block": "Az AdGuard Home most visszatér a 127.0.0.1 címre a example.org domainhez (de nem az aldomainjeihez).",
+    "example_comment": "! Ide írhat egy megjegyzést",
+    "example_comment_meaning": "Csak egy megjegyzés",
+    "example_comment_hash": "# Megjegyzés is",
+    "example_regex_meaning": "megakadályozza a hozzáférést a reguláris kifejezéssel egyező domainek-nél",
+    "example_upstream_regular": "rendszeres DNS (UDP felett)",
+    "example_upstream_dot": "titkosított <0>DNS-over-TLS</0>",
+    "example_upstream_doh": "titkosított <0>DNS-over-HTTPS</0>",
+    "example_upstream_sdns": "a <0> DNS bélyegek </0> használatával <1> DNSCrypt </1> vagy <2> DNS-over-HTTPS </2>",
+    "example_upstream_tcp": "hagyományos DNS (TCP felett)",
+    "all_lists_up_to_date_toast": "Már minden lista naprakész",
+    "updated_upstream_dns_toast": "Frissítette az upstream DNS-kiszolgálókat",
+    "dns_test_ok_toast": "A megadott DNS-kiszolgálók megfelelően működnek",
+    "dns_test_not_ok_toast": "Szerver \"{{key}}\": nem használható, ellenőrizze, hogy helyesen írta-e be",
+    "unblock": "Blokkolás feloldása",
+    "block": "Blokkolás",
+    "time_table_header": "Idő",
+    "date": "Dátum",
+    "domain_name_table_header": "Domain név",
+    "domain_or_client": "Webcím vagy kliens",
+    "type_table_header": "Típus",
+    "response_table_header": "Válasz",
+    "response_code": "Válaszkód",
+    "client_table_header": "Kliens",
+    "empty_response_status": "Üres",
+    "show_all_filter_type": "Mutasd az összeset",
+    "show_filtered_type": "Szűrés megjelenítése",
+    "no_logs_found": "Nem található napló",
+    "refresh_btn": "Frissítés",
+    "previous_btn": "Előző",
+    "next_btn": "Következő",
+    "loading_table_status": "Töltés...",
+    "page_table_footer_text": "Oldal",
+    "rows_table_footer_text": "sor",
+    "updated_custom_filtering_toast": "Egyéni szűrési módok frissítése",
+    "rule_removed_from_custom_filtering_toast": "Szabály eltávolítva az egyedi szűrési módok közül",
+    "rule_added_to_custom_filtering_toast": "Szabály hozzáadva az egyedi szűrési módokhoz",
+    "query_log_response_status": "Státusz: {{value}}",
+    "query_log_filtered": "{{filter}} által szűrve",
+    "query_log_confirm_clear": "Biztosan törlöd a lekérdezési naplót?",
+    "query_log_cleared": "A lekérdezési napló sikeresen törölve",
+    "query_log_updated": "A lekérdezési napló sikeresen frissítve lett",
+    "query_log_clear": "Lekérdezési napló törlése",
+    "query_log_retention": "Lekérdezési naplók megtartása",
+    "query_log_enable": "Naplózás engedélyezése",
+    "query_log_configuration": "Naplózás beállítása",
+    "query_log_disabled": "Lekérdezési napló kikapcsolva. Bekapcsolható a <0>Beállítások</0>ban",
+    "query_log_strict_search": "Használj \"dupla idézőjelet\" a pontos kereséshez",
+    "query_log_retention_confirm": "Biztos benne, hogy megváltoztatja a kérések naplójának megőrzési idejét? Ha csökkentette az értéket, a megadottnál korábbi adatok elvesznek",
+    "anonymize_client_ip": "Kliens IP-címének anonimizálása",
+    "anonymize_client_ip_desc": "Ne mentse el a kliens teljes IP-címét a naplókban és a statisztikákban",
+    "dns_config": "DNS szerver beállításai",
+    "dns_cache_config": "DNS gyorsítótár beállításai",
+    "dns_cache_config_desc": "Itt tudja konfigurálni a DNS gyorsítótárat",
+    "blocking_mode": "Blokkolás módja",
+    "default": "Alapértelmezett",
+    "nxdomain": "NXDOMAIN",
+    "null_ip": "Null IP-cím",
+    "custom_ip": "Egyedi IP",
+    "blocking_ipv4": "IPv4 blokkolása",
+    "blocking_ipv6": "IPv6 blokkolása",
+    "dns_over_https": "DNS-over-HTTPS",
+    "dns_over_tls": "DNS-over-TLS",
+    "plain_dns": "Egyszerű DNS",
+    "form_enter_rate_limit": "Adja meg a kérések maximális számát",
+    "rate_limit": "Kérések korlátozása",
+    "edns_enable": "EDNS kliens alhálózat engedélyezése",
+    "edns_cs_desc": "Ha engedélyezve van, az AdGuard Home a kliensek alhálózatait küldi el a DNS-kiszolgálóknak.",
+    "rate_limit_desc": "Maximálisan hány kérést küldhet egy kliens másodpercenként (0: korlátlan)",
+    "blocking_ipv4_desc": "A blokkolt A kéréshez visszaadandó IP-cím",
+    "blocking_ipv6_desc": "A blokkolt AAAA kéréshez visszaadandó IP-cím",
+    "blocking_mode_default": "Alapértelmezés: Adblock-stílusú szabály esetén NXDOMAIN válasz küldése, /etc/hosts-stílusú szabály esetén pedig a szabályban meghatározott IP-címmel való válasz küldése",
+    "blocking_mode_nxdomain": "NXDOMAIN: Az NXDOMAIN kóddal fog válaszolni",
+    "blocking_mode_null_ip": "Null IP: Nullákból álló IP-címmel válaszol (0.0.0.0 for A; :: for AAAA)",
+    "blocking_mode_custom_ip": "Egyedi IP: Válasz egy kézzel beállított IP címmel",
+    "upstream_dns_client_desc": "Ha üresen hagyja ezt a mezőt, az AdGuard Home azokat a szervereket fogja használni, amik a <0>DNS beállításokban</0> vannak beállítva.",
+    "tracker_source": "Követő forrása",
+    "source_label": "Forrás",
+    "found_in_known_domain_db": "Benne van az ismert domainek listájában.",
+    "category_label": "Kategória",
+    "rule_label": "Szabály",
+    "list_label": "Lista",
+    "unknown_filter": "Ismeretlen szűrő: {{filterId}}",
+    "known_tracker": "Ismert követő",
+    "install_welcome_title": "Üdvözli az AdGuard Home!",
+    "install_welcome_desc": "Az AdGuard Home egy, a teljes hálózatot lefedő hirdetés és követő blokkoló DNS szerver. Az a célja, hogy lehetővé tegye a teljes hálózat és az összes eszköz vezérlését, és nem igényel kliensoldali programot.",
+    "install_settings_title": "Webes admin felület",
+    "install_settings_listen": "Figyelő felület",
+    "install_settings_port": "Port",
+    "install_settings_interface_link": "Az AdGuard Home webes admin felülete elérhető a következő címe(ke)n:",
+    "form_error_port": "Adjon meg egy érvényes portot",
+    "install_settings_dns": "DNS szerver",
+    "install_settings_dns_desc": "Be kell állítania az eszközeit vagy a routerét, hogy használni tudja a DNS szervert a következő címeken:",
+    "install_settings_all_interfaces": "Minden felület",
+    "install_auth_title": "Hitelesítés",
+    "install_auth_desc": "Erősen ajánlott a jelszavas hitelesítés beállítása az AdGuard Home webes admin felületéhez. Még akkor is, ha csak a helyi hálózaton érhető el, óvja meg az illetéktelen hozzáférésektől.",
+    "install_auth_username": "Felhasználónév",
+    "install_auth_password": "Jelszó",
+    "install_auth_confirm": "Jelszó megerősítése",
+    "install_auth_username_enter": "Felhasználónév megadása",
+    "install_auth_password_enter": "Jelszó megadása",
+    "install_step": "Lépés",
+    "install_devices_title": "Állítsa be az eszközeit",
+    "install_devices_desc": "Az AdGuard Home használatának megkezdéséhez be kell állítania az eszközeit, hogy azok használni tudják.",
+    "install_submit_title": "Gratulálunk!",
+    "install_submit_desc": "A telepítési folyamat befejeződött, minden készen áll az AdGuard Home használatára.",
+    "install_devices_router": "Router",
+    "install_devices_router_desc": "Ez a beállítás lefed minden eszközt, amik az Ön routeréhez csatlakoznak, így azokat nem kell külön, kézzel beállítania.",
+    "install_devices_address": "Az AdGuard DNS szerver a következő címeket figyeli",
+    "install_devices_router_list_1": "Nyissa meg a router beállításait. Ez általában a böngészőn keresztül történik egy URL megadásával (pl. http://192.168.0.1/ vagy http://192.168.1.1/). Ez az oldal valószínűleg felhasználónevet és jelszót fog kérni. Ha nem tudja a belépési adatokat, nézze meg a router dobozát, a router alján levő fehér címkét vagy a technikai dokumentációt az interneten, végső esetben pedig visszaállíthatja a routert. Néhány router speciális alkalmazást igényel, amik lehetséges, hogy már telepítve vannak a számítógépére vagy a mobil eszközére.",
+    "install_devices_router_list_2": "Keresse meg a DHCP/DNS beállításokat. Keresse a DNS szót egy olyan mező mellett, amely egy 4 csoportból álló, 1-3 számjegyű számsort vár.",
+    "install_devices_router_list_3": "Adja meg az AdGuard Home szerver címét itt.",
+    "install_devices_router_list_4": "Bizonyos típusú routereknél nem állíthat be egyéni DNS-kiszolgálót. Ebben az esetben segíthet, ha az AdGuard Home-t DHCP-szerverként állítja be. Ellenkező esetben keresse meg az adott router kézikönyvében a DNS-kiszolgálók testreszabását.",
+    "install_devices_windows_list_1": "Nyissa meg a Vezérlőpultot a Start menün vagy a Windows keresőn keresztül.",
+    "install_devices_windows_list_2": "Válassza a Hálózat és internet kategóriát, majd pedig a Hálózati és megosztási központot.",
+    "install_devices_windows_list_3": "A képernyő bal oldalán keresse meg az Adapterbeállítások módosítása lehetőséget és kattintson rá.",
+    "install_devices_windows_list_4": "Válassza ki a jelenleg is használt kapcsolatot, majd jobb egérgombbal kattintson rá és a megjelenő menüből válassza a Tulajdonságok elemet.",
+    "install_devices_windows_list_5": "Keresse meg az Internet Protocol Version 4 (TCP/IP) elemet a listában, válassza ki, majd ismét kattintson a Tulajdonságokra.",
+    "install_devices_windows_list_6": "Válassza a Következő DNS címek használata lehetőséget és adja meg az AdGuard Home szerver címeit.",
+    "install_devices_macos_list_1": "Kattintson az Apple ikonra és válassza a Rendszerbeállításokat.",
+    "install_devices_macos_list_2": "Kattintson a Hálózat lehetőségre.",
+    "install_devices_macos_list_3": "Válassza ki az első kapcsolatot a listából és kattintson a Haladó beállításokra.",
+    "install_devices_macos_list_4": "Válassza ki a DNS fület és adja meg az AdGuard Home szerver címeit.",
+    "install_devices_android_list_1": "Az Android kezdőképernyőjén érintse meg a Beállítások gombot.",
+    "install_devices_android_list_2": "Érintse meg a Wi-Fi gombot a menüben. Ekkor a képernyőre kerül az összes elérhető hálózat (mobilinternethez nem lehet egyedi DNS-t megadni).",
+    "install_devices_android_list_3": "Nyomjon hosszan arra a hálózatra a listából, amelyikre éppen csatlakozva van, majd válassza a Hálózat módosítása lehetőséget.",
+    "install_devices_android_list_4": "Egyes eszközökön előfordulhat, hogy a további beállítások megtekintéséhez a Speciális/haladó beállítások részt kell megnyitni. Az Android DNS-beállításainak módosításához ekkor az IP-beállításokat DHCP-ről statikusra kell váltania.",
+    "install_devices_android_list_5": "Változtassa meg a DNS 1 és a DNS 2 értékét az AdGuard Home szerver címeire.",
+    "install_devices_ios_list_1": "A kezdőképernyőn érintse meg a Beállítások gombot.",
+    "install_devices_ios_list_2": "Válassza ki a Wi-Fi-t a bal oldali menüből (mobilinternetnél nem lehetséges a DNS beállítása).",
+    "install_devices_ios_list_3": "Érintse meg a jelenleg használt hálózat nevét.",
+    "install_devices_ios_list_4": "A DNS mezőbe adja meg az AdGuard Home szerver címeit.",
+    "get_started": "Kezdés",
+    "next": "Következő",
+    "open_dashboard": "Irányítópult megnyitása",
+    "install_saved": "Sikeres mentés",
+    "encryption_title": "Titkosítás",
+    "encryption_desc": "Titkosítás (HTTPS/TLS) támogatása mind a DNS, mind pedig a webes admin felület számára",
+    "encryption_config_saved": "Titkosítási beállítások mentve",
+    "encryption_server": "Szerver neve",
+    "encryption_server_enter": "Adja meg az Ön domain címét",
+    "encryption_server_desc": "A HTTPS használatához be kell írnia egy, az SSL-tanúsítvánnyal megegyező kiszolgálónevet.",
+    "encryption_redirect": "Automatikus átirányítás HTTPS kapcsolatra",
+    "encryption_redirect_desc": "Ha be van jelölve, az AdGuard Home automatikusan átirányítja a HTTP kapcsolatokat a biztonságos HTTPS protokollra.",
+    "encryption_https": "HTTPS port",
+    "encryption_https_desc": "Ha a HTTPS port konfigurálva van, akkor az AdGuard Home admin felülete elérhető lesz a HTTPS-en keresztül, és ezenkívül DNS-over-HTTPS-t is biztosít a '/dns-query' helyen.",
+    "encryption_dot": "DNS-over-TLS port",
+    "encryption_dot_desc": "Ha ez a port be van állítva, az AdGuard Home DNS-over-TLS szerverként tud futni ezen a porton.",
+    "encryption_certificates": "Tanúsítványok",
+    "encryption_certificates_desc": "A titkosítás használatához érvényes SSL tanúsítványláncot kell megadnia a domainjéhez. Ingyenes tanúsítványt kaphat a <0>{{link}}</0> webhelyen, vagy megvásárolhatja az egyik megbízható tanúsítványkibocsátó hatóságtól.",
+    "encryption_certificates_input": "Másolja be ide a PEM-kódolt tanúsítványt.",
+    "encryption_status": "Állapot",
+    "encryption_expire": "Lejár",
+    "encryption_key": "Privát kulcs",
+    "encryption_key_input": "Másolja ki és illessze be ide a tanúsítványa PEM-kódolt privát kulcsát.",
+    "encryption_enable": "Titkosítás engedélyezése (HTTPS, DNS-over-HTTPS, és DNS-over-TLS)",
+    "encryption_enable_desc": "Ha a titkosítás engedélyezve van, az AdGuard Home admin felülete működik HTTPS-en keresztül, és a DNS szerver is várja a kéréseket DNS-over-HTTPS-en, valamint DNS-over-TLS-en keresztül.",
+    "encryption_chain_valid": "A tanúsítványlánc érvényes",
+    "encryption_chain_invalid": "A tanúsítványlánc érvénytelen",
+    "encryption_key_valid": "Ez egy érvényes {{type}} privát kulcs",
+    "encryption_key_invalid": "Ez egy érvénytelen {{type}} privát kulcs",
+    "encryption_subject": "Tárgy",
+    "encryption_issuer": "Kibocsátó",
+    "encryption_hostnames": "Hosztnevek",
+    "encryption_reset": "Biztosan visszaállítja a titkosítási beállításokat?",
+    "topline_expiring_certificate": "Az SSL-tanúsítványa hamarosan lejár. Frissítse a <0>Titkosítási beállításokat</0>.",
+    "topline_expired_certificate": "Az SSL-tanúsítványa lejárt. Frissítse a <0>Titkosítási beállításokat</0>.",
+    "form_error_port_range": "A port értékét a 80-65535 tartományban adja meg",
+    "form_error_port_unsafe": "Ez a port nem biztonságos",
+    "form_error_equal": "Nem egyezhetnek",
+    "form_error_password": "A jelszavak nem egyeznek",
+    "reset_settings": "Beállítások visszaállítása",
+    "update_announcement": "Az AdGuard Home {{version}} verziója elérhető! <0>Kattintson ide</0> további információkért.",
+    "setup_guide": "Beállítási útmutató",
+    "dns_addresses": "DNS címek",
+    "dns_start": "A DNS szerver indul",
+    "dns_status_error": "Hiba történt a DNS szerver állapotának ellenőrzésekor",
+    "down": "Nem elérhető",
+    "fix": "Állandó",
+    "dns_providers": "Itt van az <0>ismert DNS szolgáltatók listája</0>, amelyekből választhat.",
+    "update_now": "Frissítés most",
+    "update_failed": "Az automatikus frissítés nem sikerült. Kérjük, hogy <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>kövesse ezeket a lépéseket</a> a manuális frissítéshez.",
+    "processing_update": "Kérjük várjon, az AdGuard Home frissítése folyamatban van",
+    "clients_title": "Kliensek",
+    "clients_desc": "Az AdGuard Home-hoz csatlakozó eszközök kezelése",
+    "settings_global": "Globális",
+    "settings_custom": "Egyéni",
+    "table_client": "Kliens",
+    "table_name": "Név",
+    "save_btn": "Mentés",
+    "client_add": "Kliens hozzáadása",
+    "client_new": "Új kliens",
+    "client_edit": "Kliens módosítása",
+    "client_identifier": "Azonosító",
+    "ip_address": "IP cím",
+    "client_identifier_desc": "A klienseket be lehet azonosítani IP-cím, CIDR, valamint MAC-cím alapján. Kérjük, vegye figyelembe, hogy a MAC-cím alapján történő azonosítás csak akkor működik, ha az AdGuard Home egyben <0>DHCP szerverként</0> is funkcionál",
+    "form_enter_ip": "IP-cím megadása",
+    "form_enter_mac": "MAC-cím megadása",
+    "form_enter_id": "Azonosító megadása",
+    "form_add_id": "Azonosító hozzáadása",
+    "form_client_name": "Adja meg a kliens nevét",
+    "name": "Név",
+    "client_global_settings": "Globális beállítások használata",
+    "client_deleted": "A(z) \"{{key}}\" kliens sikeresen el lett távolítva",
+    "client_added": "A(z) \"{{key}}\" kliens sikeresen hozzá lett adva",
+    "client_updated": "A(z) \"{{key}}\" kliens sikeresen frissítve lett",
+    "clients_not_found": "Nem található kliens",
+    "client_confirm_delete": "Biztosan törölni szeretné az \"{{key}}\" klienst?",
+    "list_confirm_delete": "Biztosan törölni kívánja ezt a listát?",
+    "auto_clients_title": "Kliensek (futási idő)",
+    "auto_clients_desc": "Az AdGuard Home-ot használó, de a konfigurációban nem tárolt ügyfelek adatai",
+    "access_title": "Hozzáférési beállítások",
+    "access_desc": "Itt konfigurálhatja az AdGuard Home DNS-kiszolgáló hozzáférési szabályait.",
+    "access_allowed_title": "Engedélyezett kliensek",
+    "access_allowed_desc": "A CIDR vagy IP címek listája. Ha konfigurálva van, az AdGuard Home csak az alábbi IP-címekről fogadja el a kéréseket.",
+    "access_disallowed_title": "Nem engedélyezett kliensek",
+    "access_disallowed_desc": "A CIDR vagy IP címek listája. Ha konfigurálva van, az AdGuard Home ebből az IP-címből lekéri a kéréseket.",
+    "access_blocked_title": "Blokkolt tartományok",
+    "access_blocked_desc": "Ne keverje össze ezt a szűrőkkel. Az AdGuard Home a DNS-lekérdezéseket a lekérdezés kérdésében el fogja hagyni ezeken a tartományokon",
+    "access_settings_saved": "A hozzáférési beállítások sikeresen mentésre kerültek",
+    "updates_checked": "A frissítések sikeresen ellenőrizve lettek",
+    "updates_version_equal": "Az AdGuard Home naprakész",
+    "check_updates_now": "Frissítések ellenőrzése most",
+    "dns_privacy": "DNS Adatvédelem",
+    "setup_dns_privacy_1": "<0>DNS-over-TLS:</0> Használja a(z) <1>{{address}}</1> szöveget.",
+    "setup_dns_privacy_2": "<0>DNS-over-HTTPS:</0> Használja a(z) <1>{{address}}</1> szöveget.",
+    "setup_dns_privacy_3": "<0>Kérjük, vegye figyelembe, hogy a titkosított DNS protokollok csak Android 9-től vannak támogatva. Tehát további szoftvert kell telepítenie más operációs rendszerekhez.</0><0>Itt megtalálja azon szoftverek listáját, amelyeket használhat.</0>",
+    "setup_dns_privacy_android_1": "Az Android 9 natív módon támogatja a DNS-over-TLS-t. A beállításához menjen a Beállítások → Hálózat & internet → Speciális → Privát DNS menübe, és adja meg itt a domaint.",
+    "setup_dns_privacy_android_2": "Az <0>AdGuard for Android</0> támogatja a <1>DNS-over-HTTPS</1>-t és a <1>DNS-over-TLS</1>-t.",
+    "setup_dns_privacy_android_3": "Az <0>Intra</0> hozzáadja a <1>DNS-over-HTTPS</1> támogatást az Androidhoz.",
+    "setup_dns_privacy_ios_1": "A <0>DNSCloak</0> támogatja a <1>DNS-over-HTTPS</1>-t, de ahhoz, hogy a saját szerverhez konfigurálhassa, létre kell hoznia egy <2>DNS bélyeget</2> hozzá.",
+    "setup_dns_privacy_ios_2": "Az <0>AdGuard for iOS</0> támogatja a <1>DNS-over-HTTPS</1> és a <1>DNS-over-TLS</1> beállításokat.",
+    "setup_dns_privacy_other_title": "Egyéb megvalósítások",
+    "setup_dns_privacy_other_1": "Maga az AdGuard Home bármilyen platformon biztonságos DNS-kliens lehet.",
+    "setup_dns_privacy_other_2": "A <0>dnsproxy</0> támogatja az összes ismert biztonságos DNS protokollt.",
+    "setup_dns_privacy_other_3": "A <0>dnscrypt-proxy</0> támogatja a <1>DNS-over-HTTPS</1>-t.",
+    "setup_dns_privacy_other_4": "A <0>Mozilla Firefox</0> támogatja a <1>DNS-over-HTTPS</1>-t.",
+    "setup_dns_privacy_other_5": "További megvalósításokat találhat <0>ide</0> és <1>ide</1> kattintva.",
+    "setup_dns_notice": "Ahhoz, hogy a <1>DNS-over-HTTPS</1> vagy a <1>DNS-over-TLS</1> valamelyikét használja, muszáj <0>beállítania a titkosítást</0> az AdGuard Home beállításaiban.",
+    "rewrite_added": "DNS átírás a(z) \"{{key}}\" kulcshoz sikeresen hozzáadva",
+    "rewrite_deleted": "DNS átírás a(z) \"{{key}}\" kulcshoz sikeresen törölve",
+    "rewrite_add": "DNS átírás hozzáadása",
+    "rewrite_not_found": "Nem találhatók DNS átírások",
+    "rewrite_confirm_delete": "Biztosan törölni szeretné a DNS átírást ehhez: \"{{key}}\"?",
+    "rewrite_desc": "Lehetővé teszi, hogy egyszerűen beállítson egyéni DNS választ egy adott domain névhez.",
+    "rewrite_applied": "Alkalmazott átírási szabály",
+    "rewrite_hosts_applied": "Átírt a gazda fájl szabálya által",
+    "dns_rewrites": "DNS átírások",
+    "form_domain": "Adja meg a domain nevet vagy a helyettesítő karaktert",
+    "form_answer": "Adjon meg egy IP-címet vagy egy domain nevet",
+    "form_error_domain_format": "Érvénytelen domain formátum",
+    "form_error_answer_format": "Érvénytelen válasz formátum",
+    "configure": "Beállítás",
+    "main_settings": "Fő beállítások",
+    "block_services": "Speciális szolgáltatások blokkolása",
+    "blocked_services": "Blokkolt szolgáltatások",
+    "blocked_services_desc": "Lehetővé teszi a népszerű oldalak és szolgáltatások blokkolását.",
+    "blocked_services_saved": "Blokkolt szolgáltatások sikeresen mentve",
+    "blocked_services_global": "A globálisan tiltott szolgáltatások használata",
+    "blocked_service": "Blokkolt szolgáltatás",
+    "block_all": "Összes blokkolása",
+    "unblock_all": "Összes feloldása",
+    "encryption_certificate_path": "Tanúsítvány útvonala",
+    "encryption_private_key_path": "Privát kulcs útvonala",
+    "encryption_certificates_source_path": "Tanúsítványfájl útvonalának megadása",
+    "encryption_certificates_source_content": "Tanúsítvány tartalmának megadása",
+    "encryption_key_source_path": "Privát kulcsfájl beállítása",
+    "encryption_key_source_content": "Privát kulcs tartalmának megadása",
+    "stats_params": "Statisztikai beállítások",
+    "config_successfully_saved": "A beállítások sikeresen el lettek mentve",
+    "interval_24_hour": "24 óra",
+    "interval_days": "{{count}} nap",
+    "interval_days_plural": "{{count}} nap",
+    "domain": "Domain",
+    "answer": "Válasz",
+    "filter_added_successfully": "A lista sikeresen hozzá lett adva",
+    "filter_removed_successfully": "A lista sikeresen el lett távolítva",
+    "filter_updated": "A lista sikeresen frissítve lett",
+    "statistics_configuration": "Statisztikai beállítások",
+    "statistics_retention": "Statisztika megőrzése",
+    "statistics_retention_desc": "Ha csökkenti az intervallum értékét, az előtte levő adatok elvesznek",
+    "statistics_clear": " Statisztikák visszaállítása",
+    "statistics_clear_confirm": "Biztosan vissza akarja állítani a statisztikákat?",
+    "statistics_retention_confirm": "Biztos benne, hogy megváltoztatja a statisztika megőrzési idejét? Ha csökkentette az értéket, a megadottnál korábbi adatok elvesznek",
+    "statistics_cleared": "A statisztikák sikeresen vissza lettek állítva",
+    "interval_hours": "{{count}} óra",
+    "interval_hours_plural": "{{count}} óra",
+    "filters_configuration": "Szűrők beállításai",
+    "filters_enable": "Szűrők engedélyezése",
+    "filters_interval": "Szűrőfrissítési gyakoriság",
+    "disabled": "Kikapcsolva",
+    "username_label": "Felhasználónév",
+    "username_placeholder": "Felhasználónév megadása",
+    "password_label": "Jelszó",
+    "password_placeholder": "Jelszó megadása",
+    "sign_in": "Bejelentkezés",
+    "sign_out": "Kijelentkezés",
+    "forgot_password": "Elfelejtette a jelszót?",
+    "forgot_password_desc": "Kérjük, hogy kövesse <0>ezeket a lépéseket</0> a jelszó visszaállításához.",
+    "location": "Helyzet",
+    "orgname": "Szervezet neve",
+    "netname": "Hálózat neve",
+    "network": "Hálózat",
+    "descr": "Leírás",
+    "whois": "Whois",
+    "filtering_rules_learn_more": "<0>Tudjon meg többet</0> a saját hosztlisták létrehozásáról.",
+    "blocked_by_response": "Blokkolva a CNAME vagy a válasz IP-címe alapján",
+    "blocked_by_cname_or_ip": "CNAME vagy IP által blokkolva",
+    "try_again": "Próbálja újra",
+    "domain_desc": "Adja meg a domain nevet vagy a helyettesítő karaktert ahhoz a címhez, amit át kíván íratni.",
+    "example_rewrite_domain": "csak ehhez a domainhez írja át a válaszokat.",
+    "example_rewrite_wildcard": "az <0>example.org</0> összes aldomainjéhez átírja a válaszokat.",
+    "rewrite_ip_address": "IP-cím: használja ezt az IP-t A vagy AAAA válaszban",
+    "rewrite_domain_name": "Domain név: CNAME rekord hozzáadása",
+    "rewrite_A": "<0>A</0>: speciális érték, megtartja az upstream felől érkező <0>A</0> rekordokat",
+    "rewrite_AAAA": "<0>AAAA</0>: speciális érték, megtartja az upstream felől érkező <0>AAAA</0> rekordokat",
+    "disable_ipv6": "IPv6 letiltása",
+    "disable_ipv6_desc": "Ha ez a szolgáltatás engedélyezve van, akkor az összes IPv6-cím (AAAA típus) DNS-lekérdezése elveszik.",
+    "fastest_addr": "Leggyorsabb IP-cím",
+    "fastest_addr_desc": "Kérdezze le az összes DNS szervert és küldje vissza a leggyorsabb IP-címet az összes válasz alapján",
+    "autofix_warning_text": "Ha a \"Javítás\" lehetőségre kattint, az AdGuard Home megpróbálja beállítani a rendszerét, hogy használja az AdGuard Home DNS szervert.",
+    "autofix_warning_list": "A következő feladatokat hajtja végre: <0>A DNSStubListener rendszer kikapcsolása</0><0>Beállítja a DNS-kiszolgáló címét 127.0.0.1-re.</0><0>Lecseréli az /etc/resolv.conf szimbolikus útvonalat erre: /run/systemd/resolve/resolv.conf</0><0>A DNSStubListener leállítása (a rendszer által feloldott szolgáltatás újratöltése)</0>",
+    "autofix_warning_result": "Mindennek eredményeként az Ön rendszeréből származó összes DNS-kérést alapértelmezés szerint az AdGuard Home dolgozza fel.",
+    "tags_title": "Címkék",
+    "tags_desc": "Kiválaszthatja a klienseknek megfelelő címkéket. A címkék beilleszthetők a szűrési szabályokba, és lehetővé teszik azok pontosabb alkalmazását. <0>További információ</0>",
+    "form_select_tags": "Válasszon kliens címkéket",
+    "check_title": "Szűrés ellenőrzése",
+    "check_desc": "Ellenőrzi, hogy a hosztnév szűrve van-e",
+    "check": "Ellenőrzés",
+    "form_enter_host": "Adja meg a hosztnevet",
+    "filtered_custom_rules": "Szűrve van az egyéni szűrési szabályok alapján",
+    "choose_from_list": "Választás a listából",
+    "add_custom_list": "Egyedi lista hozzáadása",
+    "host_whitelisted": "Ez a hoszt a kivételek között szerepel",
+    "check_ip": "IP-címek: {{ip}}",
+    "check_cname": "CNAME: {{cname}}",
+    "check_reason": "Indok: {{reason}}",
+    "check_rule": "Szabály: {{rule}}",
+    "check_service": "Szolgáltatás neve: {{service}}",
+    "check_not_found": "Nem található az Ön szűrőlistái között",
+    "client_confirm_block": "Biztosan blokkolni szeretné a(z) \"{{ip}}\" klienst?",
+    "client_confirm_unblock": "Biztosan fel szeretné oldani a(z) \"{{ip}}\" kliens blokkolását?",
+    "client_blocked": "A(z) \"{{ip}}\" kliens sikeresen blokkolva",
+    "client_unblocked": "A(z) \"{{ip}}\" kliens blokkolása sikeresen feloldva",
+    "static_ip": "Statikus IP-cím",
+    "static_ip_desc": "Az AdGuard Home egy szerver, tehát statikus IP-címre van szüksége a megfelelő működéshez. Ellenkező esetben a router valamikor más IP-címet rendelhet ehhez az eszközhöz.",
+    "set_static_ip": "Statikus IP-cím beállítása",
+    "install_static_ok": "Jó hír! A statikus IP-cím már be van állítva",
+    "install_static_error": "Az AdGuard Home nem tudja automatikusan konfigurálni ezt a hálózati felületet. Kérjük, nézzen utána, hogyan kell ezt manuálisan elvégezni.",
+    "install_static_configure": "Úgy észleltük, hogy dinamikus IP-cím van használatban — <0>{{ip}}</0>. Szeretné ezt statikus IP-címként használni?",
+    "confirm_static_ip": "Az AdGuard Home beállítja az {{ip}} IP-címet az Ön statikus IP-címének. Biztosan folytatni kívánja?",
+    "list_updated": "{{count}} lista frissítve lett",
+    "list_updated_plural": "{{count}} lista frissítve lett",
+    "dnssec_enable": "DNSSEC engedélyezése",
+    "dnssec_enable_desc": "Állítsa be a DNSSEC jelzőt a kimenő DNS-lekérdezésekbe, és ellenőrizze az eredményt (szükséges a DNSSEC-kompatibilis feloldás)",
+    "validated_with_dnssec": "DNSSEC-kel ellenőrizve",
+    "all_queries": "Minden kérés",
+    "show_blocked_responses": "Tiltva",
+    "show_whitelisted_responses": "Kivételezett",
+    "show_processed_responses": "Feldolgozott",
+    "blocked_safebrowsing": "Blokkolva a biztonságos böngészés által",
+    "blocked_adult_websites": "Blokkolva a felnőtt tartalmak által",
+    "blocked_threats": "Blokkolt fenyegetések",
+    "allowed": "Engedélyezve",
+    "filtered": "Megszűrt",
+    "rewritten": "Átírt",
+    "safe_search": "Biztonságos keresés",
+    "blocklist": "Tiltási lista",
+    "milliseconds_abbreviation": "ms",
+    "cache_size": "Gyorsítótár mérete",
+    "cache_size_desc": "DNS gyorsítótár mérete (bájtokban)",
+    "enter_cache_size": "Adja meg a gyorsítótár méretét",
+    "enter_cache_ttl_min_override": "Adja meg a minimális TTL-t",
+    "enter_cache_ttl_max_override": "Adja meg a maximális TTL-t",
+    "cache_ttl_min_override_desc": "Felülbírálja az upstream kiszolgálótól kapott (minimális) TTL értéket. Ez az érték nem lehet nagyobb, mint 3600 másodperc (vagyis 1 óra)",
+    "cache_ttl_max_override_desc": "Felülbírálja az upstream kiszolgálótól kapott (maximális) TTL értéket",
+    "min_exceeds_max_value": "A minimális érték meghaladja a maximális értéket",
+    "value_not_larger_than": "Az érték nem lehet nagyobb, mint {{maximum}}",
+    "filter_category_general": "Általános",
+    "filter_category_security": "Biztonság",
+    "filter_category_regional": "Regionális",
+    "filter_category_other": "Egyéb",
+    "filter_category_general_desc": "Olyan listák, amelyek blokkolják a nyomkövetést és a hirdetéseket a legtöbb eszközön",
+    "filter_category_security_desc": "Olyan listák, amelyek a kártékony, adathalász vagy átverős oldalak tiltására vannak kifejlesztve",
+    "filter_category_regional_desc": "Olyan listák, amelyek a regionális hirdetések, valamint a nyomkövető szerverek ellen vannak kifejlesztve",
+    "filter_category_other_desc": "További tiltólisták",
+    "original_response": "Eredeti válasz",
+    "click_to_view_queries": "Kattintson a lekérésekért",
+    "port_53_faq_link": "Az 53-as portot gyakran a \"DNSStubListener\" vagy a \"systemd-resolved\" (rendszer által feloldott) szolgáltatások használják. Kérjük, olvassa el <0>ezt az útmutatót</0> a probléma megoldásához."
+}

client/src/__locales/id.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Halaman",
     "rows_table_footer_text": "baris",
     "updated_custom_filtering_toast": "Perbarui aturan penyaringan khusus",
-    "rule_removed_from_custom_filtering_toast": "Aturan dihapus dari aturan penyaringan khusus",
-    "rule_added_to_custom_filtering_toast": "Aturan ditambah ke aturan penyaringan khusus",
+    "rule_removed_from_custom_filtering_toast": "Aturan dihapus dari aturan penyaringan khusus: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Aturan ditambah ke aturan penyaringan khusus: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Difilter oleh {{filter}}",
     "query_log_confirm_clear": "Apakah Anda yakin ingin menghapus seluruh kueri log?",
@@ -564,4 +564,4 @@
     "original_response": "Respon asli",
     "click_to_view_queries": "Klik untuk lihat permintaan",
     "port_53_faq_link": "Port 53 sering ditempati oleh layanan \"DNSStubListener\" atau \"systemd-resolved\". Silakan baca <0>instruksi ini</0> tentang cara menyelesaikan ini."
-}
+}

client/src/__locales/it.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Pagina",
     "rows_table_footer_text": "righe",
     "updated_custom_filtering_toast": "Le regole dei filtri personalizzate sono state aggiornate",
-    "rule_removed_from_custom_filtering_toast": "Regola rimossa dalle regole dei filtri personalizzate",
-    "rule_added_to_custom_filtering_toast": "Regola aggiunta alle regole dei filtri personalizzate",
+    "rule_removed_from_custom_filtering_toast": "Regola rimossa dalle regole dei filtri personalizzate: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regola aggiunta alle regole dei filtri personalizzate: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrato da {{filter}}",
     "query_log_confirm_clear": "Sei sicuro di voler eliminare la query log?",
@@ -560,4 +560,4 @@
     "filter_category_regional_desc": "Liste focalizzare su pubblicità regionali e server traccianti",
     "filter_category_other_desc": "Altre liste di blocco",
     "click_to_view_queries": "Clicca per visualizzare query"
-}
+}

client/src/__locales/ja.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "ページ",
     "rows_table_footer_text": "行",
     "updated_custom_filtering_toast": "カスタム・フィルタリングルールを更新しました",
-    "rule_removed_from_custom_filtering_toast": "ルールをカスタム・フィルタリングルールから除去しました",
-    "rule_added_to_custom_filtering_toast": "ルールをカスタム・フィルタリングルールに追加しました",
+    "rule_removed_from_custom_filtering_toast": "ルールをカスタム・フィルタリングルールから除去しました {{rule}}",
+    "rule_added_to_custom_filtering_toast": "ルールをカスタム・フィルタリングルールに追加しました {{rule}}",
     "query_log_response_status": "ステータス: {{value}}",
     "query_log_filtered": "{{filter}}によるフィルタ",
     "query_log_confirm_clear": "クエリ・ログ全体を消去してもよろしいですか？",
@@ -564,4 +564,4 @@
     "original_response": "当初の応答",
     "click_to_view_queries": "クエリを表示するにはクリックしてください",
     "port_53_faq_link": "多くの場合、ポート53は \"DNSStubListener\" または \"systemd-resolved\" サービスによって利用されています。これを解決する方法については、<0>この手順</0>をお読みください。"
-}
+}

client/src/__locales/ko.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "페이지",
     "rows_table_footer_text": "행",
     "updated_custom_filtering_toast": "사용자 정의 필터링 규칙 업데이트",
-    "rule_removed_from_custom_filtering_toast": "사용자 정의 필터링 규칙에서 규칙 제거",
-    "rule_added_to_custom_filtering_toast": "사용자 정의 필터링 규칙에 추가된 규칙",
+    "rule_removed_from_custom_filtering_toast": "사용자 정의 필터링 규칙에서 규칙 제거 {{rule}}",
+    "rule_added_to_custom_filtering_toast": "사용자 정의 필터링 규칙에 추가된 규칙 {{rule}}",
     "query_log_response_status": "상태: {{value}}",
     "query_log_filtered": "필터: {{filter}}",
     "query_log_confirm_clear": "정말로 모든 쿼리 로그를 비우시겠습니까?",
@@ -563,4 +563,4 @@
     "filter_category_other_desc": "기타 차단 목록",
     "original_response": "원래 응답",
     "click_to_view_queries": "쿼리를 보려면 클릭합니다"
-}
+}

client/src/__locales/nl.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Pagina",
     "rows_table_footer_text": "rijen",
     "updated_custom_filtering_toast": "Aangepaste filter regels zijn bijgewerkt",
-    "rule_removed_from_custom_filtering_toast": "Regel verwijderd uit de aangepaste filterregels",
-    "rule_added_to_custom_filtering_toast": "Regel toegevoegd aan de aangepaste filterregels",
+    "rule_removed_from_custom_filtering_toast": "Regel verwijderd uit de aangepaste filterregels: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regel toegevoegd aan de aangepaste filterregels: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Gefilterd door {{filter}}",
     "query_log_confirm_clear": "Weet u zeker dat u het hele query logboek wilt legen?",
@@ -564,4 +564,4 @@
     "original_response": "Oorspronkelijke reactie",
     "click_to_view_queries": "Klik om queries te bekijken",
     "port_53_faq_link": "Poort 53 wordt vaak gebruikt door services als DNSStubListener- of de systeem DNS-resolver. Lees a.u.b. <0>deze instructie</0> hoe dit is op te lossen."
-}
+}

client/src/__locales/no.json

@@ -207,8 +207,8 @@
     "page_table_footer_text": "Side",
     "rows_table_footer_text": "rekker",
     "updated_custom_filtering_toast": "Oppdaterte de selvvalgte filtreringsreglene",
-    "rule_removed_from_custom_filtering_toast": "Oppføringen ble fjernet fra de selvvalgte filtreringsreglene",
-    "rule_added_to_custom_filtering_toast": "Oppføringen ble lagt til i de selvvalgte filtreringsreglene",
+    "rule_removed_from_custom_filtering_toast": "Oppføringen ble fjernet fra de selvvalgte filtreringsreglene: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Oppføringen ble lagt til i de selvvalgte filtreringsreglene: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrert av {{filter}}",
     "query_log_confirm_clear": "Er du sikker på at du vil slette hele forespørselsloggen?",

client/src/__locales/pl.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Strona",
     "rows_table_footer_text": "wierszy",
     "updated_custom_filtering_toast": "Zaktualizowano niestandardowe reguły filtrowania",
-    "rule_removed_from_custom_filtering_toast": "Reguła usunięta z niestandardowych reguł filtrowania",
-    "rule_added_to_custom_filtering_toast": "Reguła dodana do niestandardowych reguł filtrowania",
+    "rule_removed_from_custom_filtering_toast": "Reguła usunięta z niestandardowych reguł filtrowania: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Reguła dodana do niestandardowych reguł filtrowania: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrowane przez {{filter}}",
     "query_log_confirm_clear": "Czy na pewno chcesz wyczyścić cały dziennik zapytań?",
@@ -564,4 +564,4 @@
     "original_response": "Oryginalna odpowiedź",
     "click_to_view_queries": "Kliknij, aby wyświetlić zapytania",
     "port_53_faq_link": "Port 53 jest często zajęty przez usługi \"DNSStubListener\" lub \"systemd-resolved\". Przeczytaj <0>tę instrukcję</0> jak to rozwiązać."
-}
+}

client/src/__locales/pt-br.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Página",
     "rows_table_footer_text": "linhas",
     "updated_custom_filtering_toast": "Regras de filtragem personalizadas atualizadas",
-    "rule_removed_from_custom_filtering_toast": "Regra removida das regras de filtragem personalizadas",
-    "rule_added_to_custom_filtering_toast": "Regra adicionada às regras de filtragem personalizadas",
+    "rule_removed_from_custom_filtering_toast": "Regra removida das regras de filtragem personalizadas: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regra adicionada às regras de filtragem personalizadas: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrado por {{filter}}",
     "query_log_confirm_clear": "Você tem certeza que deseja limpar o registro de consulta?",
@@ -560,4 +560,4 @@
     "filter_category_regional_desc": "Listas focadas em anúncios regionais e servidores de rastreamento",
     "filter_category_other_desc": "Outras listas negras",
     "click_to_view_queries": "Clique para ver as consultas"
-}
+}

client/src/__locales/pt-pt.json

@@ -168,8 +168,8 @@
     "page_table_footer_text": "Página",
     "rows_table_footer_text": "linhas",
     "updated_custom_filtering_toast": "Regras de filtragem personalizadas actualizadas",
-    "rule_removed_from_custom_filtering_toast": "Regra removida das regras de filtragem personalizadas",
-    "rule_added_to_custom_filtering_toast": "Regra adicionada às regras de filtragem personalizadas",
+    "rule_removed_from_custom_filtering_toast": "Regra removida das regras de filtragem personalizadas: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regra adicionada às regras de filtragem personalizadas: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrado por {{filter}}",
     "query_log_confirm_clear": "Tem a certeza de que deseja limpar todo o registo de consulta?",

client/src/__locales/ro.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Pagina",
     "rows_table_footer_text": "linii",
     "updated_custom_filtering_toast": "Reguli personalizate de filtrare aduse la zi",
-    "rule_removed_from_custom_filtering_toast": "Regulă scoasă din regullei personalizate de filtrare",
-    "rule_added_to_custom_filtering_toast": "Regulă adăugată la regulile de filtrare personalizate",
+    "rule_removed_from_custom_filtering_toast": "Regulă scoasă din regullei personalizate de filtrare: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regulă adăugată la regulile de filtrare personalizate: {{rule}}",
     "query_log_response_status": "Statut: {{value}}",
     "query_log_filtered": "Filtrat de {{filter}}",
     "query_log_confirm_clear": "Sunteți sigur că doriți să ștergeți întregul jurnal de interogări?",
@@ -564,4 +564,4 @@
     "original_response": "Răspuns original",
     "click_to_view_queries": "Clicați pentru a vizualiza interogări",
     "port_53_faq_link": "Portul 53 este adesea ocupat de serviciile \"DNSStubListener\" sau \"systemd-resolved\". Vă rugăm să citiți <0>această instrucțiune</0> despre cum să rezolvați aceasta."
-}
+}

client/src/__locales/ru.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Страница",
     "rows_table_footer_text": "строк",
     "updated_custom_filtering_toast": "Внесены изменения в пользовательские правила",
-    "rule_removed_from_custom_filtering_toast": "Правило удалено из авторского списка правил фильтрации",
-    "rule_added_to_custom_filtering_toast": "Пользовательское правило добавлено",
+    "rule_removed_from_custom_filtering_toast": "Пользовательское правило удалено: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Пользовательское правило добавлено: {{rule}}",
     "query_log_response_status": "Статус: {{value}}",
     "query_log_filtered": "Отфильтровано с помощью {{filter}}",
     "query_log_confirm_clear": "Вы уверены, что хотите очистить весь журнал запросов?",
@@ -564,4 +564,4 @@
     "original_response": "Первоначальный ответ",
     "click_to_view_queries": "Нажмите, чтобы просмотреть запросы",
     "port_53_faq_link": "Порт 53 часто занят службами \"DNSStubListener\" или \"systemd-resolved\". Ознакомьтесь с <0>инструкцией</0> о том, как это разрешить."
-}
+}

client/src/__locales/si-lk.json

@@ -0,0 +1,443 @@
+{
+    "client_settings": "අනුග්‍රාහක සැකසුම්",
+    "check_dhcp_servers": "DHCP සේවාදායකයන්  සඳහා පරීක්ෂා කරන්න",
+    "save_config": "වින්‍යාසය සුරකින්න",
+    "enabled_dhcp": "DHCP සේවාදායකය සබල කර ඇත",
+    "disabled_dhcp": "DHCP සේවාදායකය අබල කර ඇත",
+    "dhcp_title": "ග.ධා.වි.කෙ. සේවාදායකය (පර්යේෂණාත්මක!)",
+    "dhcp_description": "ඔබගේ මාර්ගකාරකය ග.ධා.වි.කෙ. (DHCP) සැකසුම් ලබා නොදෙන්නේ නම්, ඔබට AdGuardHome හි ඇති ග.ධා.වි.කෙ. සේවාදායකය භාවිතා කළ හැකිය.",
+    "dhcp_enable": "DHCP සේවාදායකය සබල කරන්න",
+    "dhcp_disable": "DHCP සේවාදායකය අබල කරන්න",
+    "dhcp_config_saved": "DHCP වින්‍යාසය සාර්ථකව සුරකින ලදි",
+    "form_error_required": "අවශ්‍ය ක්ෂේත්‍රයකි",
+    "form_error_ip4_format": "වලංගු නොවන IPv4 ආකෘතියකි",
+    "form_error_ip6_format": "වලංගු නොවන IPv6 ආකෘතියකි",
+    "form_error_ip_format": "වලංගු නොවන අ.ජා. කෙ. (IP) ආකෘතියකි",
+    "form_error_mac_format": "වලංගු නොවන MAC ආකෘතියකි",
+    "form_error_client_id_format": "වලංගු නොවන අනුග්‍රාහක හැඳුනුම් ආකෘතියකි",
+    "form_error_positive": "0 ට වඩා වැඩි විය යුතුය",
+    "form_error_negative": "0 හෝ ඊට වැඩි විය යුතුය",
+    "dhcp_form_range_title": "අ.ජා. කෙ. (IP) ලිපින පරාසය",
+    "dhcp_form_range_start": "පරාසය ආරම්භය",
+    "dhcp_form_range_end": "පරාසය අවසානය",
+    "dhcp_interface_select": "ග.ධා.වි.කෙ. (DHCP) අතුරුමුහුණත තෝරන්න",
+    "dhcp_hardware_address": "දෘඩාංග ලිපිනය",
+    "dhcp_ip_addresses": "අ.ජා. කෙ. (IP) ලිපින",
+    "ip": "අ.ජා. කෙ. (IP)",
+    "dhcp_table_hostname": "ධාරක නාමය",
+    "dhcp_table_expires": "කල් ඉකුත් වීම",
+    "dhcp_warning": "ඔබට කෙසේ හෝ ග.ධා.වි.කෙ. (DHCP) සේවාදායකය සබල කිරීමට අවශ්‍ය නම්, ඔබේ ජාලයේ වෙනත් ක්‍රියාකාරී ග.ධා.වි.කෙ. සේවාදායකයක් නොමැති බව තහවුරු කරගන්න. එසේ නොමැති නම්, එය සම්බන්ධිත උපාංග සඳහා අන්තර්ජාලය බිඳ දැමිය හැකිය!",
+    "dhcp_error": "ජාලයේ තවත් ග.ධා.වි.කෙ. (DHCP) සේවාදායකයක් තිබේද යන්න අපට තීරණය කළ නොහැකි විය.",
+    "dhcp_static_ip_error": "ග.ධා.වි.කෙ. (DHCP) සේවාදායකය භාවිතා කිරීම සඳහා ස්ථිතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනයක් සැකසිය යුතුය. මෙම ජාල අතුරුමුහුණත ස්ථිතික අ.ජා. කෙ. ලිපිනයක් භාවිතයෙන් වින්‍යාසගත කර තිබේද යන්න තීරණය කිරීමට අප අසමත් විය. කරුණාකර ස්ථිතික අ.ජා. කෙ. ලිපිනයක් අතින් සකසන්න.",
+    "dhcp_dynamic_ip_found": "ඔබේ පද්ධතිය <0>{{interfaceName}}</0> අතුරු මුහුණත සඳහා ගතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපින වින්‍යාසය භාවිතා කරයි. ග.ධා.වි.කෙ. (DHCP) සේවාදායකය භාවිතා කිරීම සඳහා ස්ථිතික අ.ජා. කෙ. ලිපිනයක් සැකසිය යුතුය. ඔබගේ වර්තමාන අ.ජා. කෙ. ලිපිනය <0>{{ipAddress}}</0> වේ. ඔබ ග.ධා.වි.කෙ. සබල කරන්න බොත්තම එබුවහොත් අපි ස්වයංක්‍රීයව මෙම අ.ජා. කෙ. ලිපිනය ස්ථිතික ලෙස සකසන්නෙමු.",
+    "dhcp_reset": "ග.ධා.වි.කෙ. (DHCP) වින්‍යාසය යළි පිහිටුවීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "country": "රට",
+    "city": "නගරය",
+    "delete_confirm": "\"{{key}}\" මකා දැමීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "form_enter_hostname": "ධාරක නාමය ඇතුළත් කරන්න",
+    "error_details": "දෝෂ විස්තර",
+    "response_details": "ප්‍රතිචාරය‌ෙහි විස්තර",
+    "request_details": "ඉල්ලීමෙහි විස්තර",
+    "client_details": "අනුග්‍රාහකයේ විස්තර",
+    "details": "විස්තර",
+    "back": "ආපසු",
+    "dashboard": "උපකරණ පුවරුව",
+    "settings": "සැකසුම්",
+    "filters": "පෙරහන්",
+    "filter": "පෙරහන",
+    "query_log": "විමසුම් ලොගය",
+    "nothing_found": "කිසිවක් සොයාගත නොහැක",
+    "faq": "නිති අසන පැණ",
+    "version": "අනුවාදය",
+    "address": "ලිපිනය",
+    "protocol": "කෙටුම්පත",
+    "on": "සක්‍රියයි",
+    "off": "අක්‍රියයි",
+    "copyright": "ප්‍රකාශන හිමිකම",
+    "homepage": "මුල්  පිටුව",
+    "report_an_issue": "ගැටලුවක් වාර්තා කරන්න",
+    "privacy_policy": "රහස්‍යතා ප්‍රතිපත්තිය",
+    "enable_protection": "ආරක්ෂණය සබල කරන්න",
+    "enabled_protection": "ආරක්ෂණය සබල කර ඇත",
+    "disable_protection": "ආරක්ෂණය අබල කරන්න",
+    "disabled_protection": "ආරක්ෂණය අබල කර ඇත",
+    "refresh_statics": "සංඛ්‍යාලේඛන නැවුම් කරන්න",
+    "dns_query": "ව.නා.ප. (DNS) විමසුම්",
+    "blocked_by": "<0>පෙරහන් මගින් අවහිර කරන ලද</0>",
+    "stats_malware_phishing": "අවහිර කළ ද්වේශාංග/තතුබෑම්",
+    "stats_adult": "අවහිර කළ වැඩිහිටි වෙබ් අඩවි",
+    "stats_query_domain": "ජනප්‍රිය විමසන ලද වසම්",
+    "for_last_24_hours": "පසුගිය පැය 24 සඳහා",
+    "for_last_days": "පසුගිය දින {{count}} සඳහා",
+    "for_last_days_plural": "පසුගිය දින {{count}} සඳහා",
+    "no_domains_found": "වසම් කිසිවක් සොයා ගත නොහැකි විය",
+    "requests_count": "ඉල්ලීම් ගණන",
+    "top_blocked_domains": "ජනප්‍රිය අවහිර කළ වසම්",
+    "top_clients": "ජනප්‍රිය අනුග්‍රාහකයන්",
+    "general_statistics": "පොදු සංඛ්යාලේඛන",
+    "number_of_dns_query_blocked_24_hours": "දැන්වීම් වාරණ පෙරහන් සහ ධාරක වාරණ ලැයිස්තු මගින් අවහිර කරන ලද DNS ඉල්ලීම් ගණන",
+    "number_of_dns_query_blocked_24_hours_by_sec": "AdGuard browsing security ඒකකය මගින් අවහිර කරන ලද DNS ඉල්ලීම් ගණන",
+    "number_of_dns_query_blocked_24_hours_adult": "අවහිර කළ වැඩිහිටි වෙබ් අඩවි ගණන",
+    "enforced_save_search": "ආරක්ෂිත සෙවීම බලාත්මක කරන ලද",
+    "number_of_dns_query_to_safe_search": "ආරක්ෂිත සෙවීම බලාත්මක කළ සෙවුම් යන්ත්‍ර සඳහා DNS ඉල්ලීම් ගණන",
+    "average_processing_time": "සාමාන්‍ය සැකසුම් කාලය",
+    "average_processing_time_hint": "DNS ඉල්ලීමක් සැකසීමේ සාමාන්‍ය කාලය මිලි තත්පර වලින්",
+    "block_domain_use_filters_and_hosts": "පෙරහන් සහ ධාරක ගොනු භාවිතා කරමින් වසම් අවහිර කරන්න",
+    "filters_block_toggle_hint": "ඔබට අවහිර කිරීමේ නීති <a href='#filters'>පෙරහන්</a> තුළ පිහිටුවිය හැකිය.",
+    "use_adguard_browsing_sec": "AdGuard browsing security web service භාවිතා කරන්න",
+    "use_adguard_parental": "AdGuard parental control වෙබ් සේවාව භාවිතා කරන්න",
+    "use_adguard_parental_hint": "වසමේ වැඩිහිටියන්ට අදාල කරුණු අඩංගු දැයි AdGuard Home විසින් පරීක්ෂා කරනු ඇත. එය browsing security වෙබ් සේවාව මෙන් රහස්‍යතා හිතකාමී API භාවිතා කරයි.",
+    "enforce_safe_search": "ආරක්ෂිත සෙවීම බලාත්මක කරන්න",
+    "enforce_save_search_hint": "AdGuard Home හට පහත සෙවුම් යන්ත්‍ර තුළ ආරක්ෂිත සෙවීම බලාත්මක කළ හැකිය: Google, Youtube, Bing, DuckDuckGo සහ Yandex.",
+    "no_servers_specified": "සේවාදායක කිසිවක් නිශ්චිතව දක්වා නැත",
+    "general_settings": "පොදු සැකසුම්",
+    "dns_settings": "DNS සැකසුම්",
+    "dns_blocklists": "DNS අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තු",
+    "dns_allowlists": "DNS අවසර දීමේ ලැයිස්තු",
+    "dns_allowlists_desc": "DNS අවසර දීමේ ලැයිස්තුවල වසම් කිසියම් අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව අඩංගු වුවද එය න‌ොසලකා හැර අවසර දෙනු ලැබේ.",
+    "custom_filtering_rules": "අභිරුචි පෙරීමේ නීති",
+    "encryption_settings": "සංකේතාංකන සැකසුම්",
+    "dhcp_settings": "DHCP සැකසුම්",
+    "disabled_filtering_toast": "පෙරීම අබල කර ඇත",
+    "enabled_filtering_toast": "පෙරීම සබල කර ඇත",
+    "disabled_parental_toast": "Parental control අබල කර ඇත",
+    "enabled_parental_toast": "Parental control සබල කර ඇත",
+    "disabled_safe_search_toast": "ආරක්ෂිත සෙවීම අබල කර ඇත",
+    "enabled_save_search_toast": "ආරක්ෂිත සෙවීම සබල කර ඇත",
+    "enabled_table_header": "සබල කර ඇත",
+    "name_table_header": "නම",
+    "list_url_table_header": "URL ලැයිස්තුව",
+    "rules_count_table_header": "නීති ගණන",
+    "last_time_updated_table_header": "අවසන් වරට යාවත්කාලීන කරන ලද",
+    "actions_table_header": "ක්‍රියාමාර්ග",
+    "request_table_header": "ඉල්ලීම",
+    "edit_table_action": "සංස්කරණය කරන්න",
+    "delete_table_action": "මකන්න",
+    "no_blocklist_added": "අවහිර කිරීමේ ලැයිස්තු එකතු කර නැත",
+    "no_whitelist_added": "අවසර දීමේ ලැයිස්තු එකතු කර නැත",
+    "add_blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුවක් එකතු කරන්න",
+    "add_allowlist": "අවසර දීමේ ලැයිස්තුවක් එකතු කරන්න",
+    "cancel_btn": "අහෝසි කරන්න",
+    "enter_name_hint": "නම ඇතුළත් කරන්න",
+    "enter_url_or_path_hint": "ලැයිස්තුවක URL හෝ ස්ථීර මාර්ගයක් ඇතුළත් කරන්න",
+    "check_updates_btn": "යාවත්කාල පරීක්ෂා කරන්න",
+    "new_blocklist": "නව අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව",
+    "new_allowlist": "නව අවසර දීමේ ලැයිස්තුව",
+    "edit_blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව සංස්කරණය කරන්න",
+    "edit_allowlist": "අවසර දීමේ ලැයිස්තුව සංස්කරණය කරන්න",
+    "enter_valid_blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුවට වලංගු URL ලිපිනයක් ඇතුළත් කරන්න.",
+    "enter_valid_allowlist": "අවසර දීමේ ලැයිස්තුවට වලංගු URL ලිපිනයක් ඇතුළත් කරන්න.",
+    "form_error_url_format": "වලංගු නොවන URL ආකෘතියකි",
+    "form_error_url_or_path_format": "ලැයිස්තුවක වලංගු නොවන URL හෝ ස්ථීර මාර්ගයකි",
+    "custom_filter_rules": "අභිරුචි පෙරීමේ නීති",
+    "examples_title": "උදාහරණ",
+    "example_meaning_filter_block": "example.org වසමට සහ එහි සියලුම උප වසම් වලට පිවිසීම අවහිර කරන්න",
+    "example_meaning_filter_whitelist": "example.org වසමට සහ එහි සියලුම උප වසම් වලට ප්‍රවේශය අවහිර නොකරන්න",
+    "example_meaning_host_block": "AdGuard Home දැන් example.org වසම සඳහා 127.0.0.1 ලිපිනය ලබා දෙනු ඇත (නමුත් එහි උප ලිපින නොවේ).",
+    "example_comment": "! මෙතැන අදහස් දැක්වීමක්",
+    "example_comment_meaning": "විස්තර කිිරීමක්",
+    "example_comment_hash": "# එසේම අදහස් දැක්වීමක්",
+    "example_regex_meaning": "නිශ්චිතව දක්වා ඇති නිත්‍ය වාක්‍යවිධියට ගැලපෙන වසම් වෙත පිවිසීම අවහිර කරන්න",
+    "example_upstream_regular": "සාමාන්‍ය DNS (UDP හරහා)",
+    "example_upstream_dot": "සංකේතාංකනය කළ <0>DNS-over-TLS</0>",
+    "example_upstream_doh": "සංකේතාංකනය කළ <0>DNS-over-HTTPS</0>",
+    "example_upstream_tcp": "සාමාන්‍ය DNS (TCP හරහා)",
+    "all_lists_up_to_date_toast": "සියලුම ලැයිස්තු දැනටමත් යාවත්කාලීනයි",
+    "dns_test_ok_toast": "සඳහන් කළ DNS සේවාදායකයන් නිවැරදිව ක්‍රියා කරයි",
+    "dns_test_not_ok_toast": "සේවාදායකය \"{{key}}\": භාවිතා කළ නොහැකි විය, කරුණාකර ඔබ එය නිවැරදිව ලියා ඇත්දැයි පරීක්ෂා කරන්න",
+    "unblock": "අනවහිර කරන්න",
+    "block": "අවහිර කරන්න",
+    "time_table_header": "වේලාව",
+    "date": "දිනය",
+    "domain_name_table_header": "වසම් නාමය",
+    "domain_or_client": "වසම හෝ අනුග්‍රාහකය",
+    "type_table_header": "වර්ගය",
+    "response_table_header": "ප්‍රතිචාරය",
+    "response_code": "ප්‍රතිචාර කේතය",
+    "client_table_header": "අනුග්‍රාහකය",
+    "empty_response_status": "හිස්",
+    "show_all_filter_type": "සියල්ල පෙන්වන්න",
+    "refresh_btn": "නැවුම් කරන්න",
+    "previous_btn": "පෙර",
+    "next_btn": "ඊළඟ",
+    "loading_table_status": "පූරණය ‌වෙමින්...",
+    "page_table_footer_text": "පිටුව",
+    "rows_table_footer_text": "පේළි",
+    "updated_custom_filtering_toast": "අභිරුචි පෙරීමේ නීති යාවත්කාල කරන ලදි",
+    "rule_removed_from_custom_filtering_toast": "අභිරුචි පෙරීමේ නීති තුළින් නීතියක් ඉවත් කරන ලදි",
+    "rule_added_to_custom_filtering_toast": "අභිරුචි පෙරීමේ නීති තුළට මෙම නීතිය එකතු කරන ලදි",
+    "query_log_response_status": "තත්ත්වය: {{value}}",
+    "query_log_filtered": "{{filter}} මගින් පෙරහන් කරන ලදි",
+    "query_log_confirm_clear": "සම්පූර්ණ විමසුම් ලොගය ඉවත් කිරීමට අවශ්‍ය යැයි ඔබට විශ්වාසද?",
+    "query_log_clear": "විමසුම් ලොග ඉවත් කරන්න",
+    "query_log_retention": "විමසුම් ලොග රඳවා තබා ගැනීම",
+    "query_log_enable": "ලොගය සබල කරන්න",
+    "query_log_configuration": "ලොග වින්‍යාසය",
+    "query_log_disabled": "විමසුම් ලොගය අබල කර ඇති අතර එය <0>සැකසුම්</0> තුළ වින්‍යාසගත කළ හැකිය",
+    "query_log_strict_search": "ඉතා නිවැරදිව සෙවීම සඳහා ද්විත්ව උද්ධෘතය භාවිතා කරන්න",
+    "query_log_retention_confirm": "විමසුම් ලොගය රඳවා තබා ගැනීම වෙනස් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද? ඔබ කාල පරතරයෙහි අගය අඩු කළහොත් සමහර දත්ත නැති වී යනු ඇත",
+    "anonymize_client_ip": "අනුග්‍රාහකයෙහි අ.ජා. කෙ. (IP) නිර්නාමික කරන්න",
+    "dns_config": "DNS සේවාදායක වින්‍යාසය",
+    "default": "සුපුරුදු",
+    "nxdomain": "නොපවතින වසම",
+    "null_ip": "අභිශූන්‍යය අ.ජා. කෙ. (IP)",
+    "custom_ip": "අභිරුචි අ.ජා. කෙ. (IP)",
+    "dns_over_https": "DNS-over-HTTPS",
+    "dns_over_tls": "DNS-over-TLS",
+    "form_enter_rate_limit": "අනුපාත සීමාව ඇතුළත් කරන්න",
+    "rate_limit": "අනුපාත සීමාව",
+    "edns_enable": "EDNS අනුග්‍රාහක අනුජාලය සබල කරන්න",
+    "blocking_ipv4_desc": "අවහිර කළ A ඉල්ලීමක් සඳහා ආපසු එවිය යුතු අ.ජා. කෙ. (IP) ලිපිනය",
+    "blocking_ipv6_desc": "අවහිර කළ AAAA ඉල්ලීමක් සඳහා ආපසු එවිය යුතු අ.ජා. කෙ. (IP) ලිපිනය",
+    "blocking_mode_nxdomain": "නොපවතින වසම (NXDOMAIN): NXDOMAIN කේතය සමඟ ප්‍රතිචාර දක්වයි",
+    "blocking_mode_null_ip": "අභිශූන්‍යය අන්තර්ජාල කෙටුම්පත: ශුන්‍ය අ.ජා. කෙ. (IP) ලිපිනය සමඟ ප්‍රතිචාර දක්වයි (A සඳහා 0.0.0.0; AAAA සඳහා ::)",
+    "blocking_mode_custom_ip": "අභිරුචි අන්තර්ජාල කෙටුම්පත: අතින් සැකසූ අ.ජා. කෙ. (IP) ලිපිනයක් සමඟ ප්‍රතිචාර දක්වයි",
+    "upstream_dns_client_desc": "ඔබ මෙම ක්ෂේත්‍රය හිස්ව තබා ගන්නේ නම්, AdGuard Home විසින් <0>DNS සැකසුම්</0> හි වින්‍යාසගත කර ඇති සේවාදායකයන් භාවිතා කරනු ඇත.",
+    "source_label": "මූලාශ්‍රය",
+    "category_label": "ප්‍රවර්ගය",
+    "rule_label": "නීතිය",
+    "list_label": "ලැයිස්තුව",
+    "unknown_filter": "{{filterId}} නොදන්නා පෙරහනකි",
+    "known_tracker": "දන්නා ලුහුබැඳීමක්",
+    "install_welcome_title": "AdGuard Home වෙත සාදරයෙන් පිළිගනිමු!",
+    "install_welcome_desc": "AdGuard Home යනු ජාලය පුරා ඇති දැන්වීම් සහ ලුහුබැඳීම අවහිර කරන DNS සේවාදායකි. ඔබගේ මුළු ජාලය සහ සියලුම උපාංග පාලනය කිරීමට ඉඩ සලසා දීම එහි පරමාර්ථය යි, එයට අනුග්‍රාහක පාර්ශවීය වැඩසටහනක් භාවිතා කිරීම අවශ්‍ය නොවේ.",
+    "install_settings_title": "පරිපාලක වෙබ් අතුරු මුහුණත",
+    "install_settings_listen": "සවන් දෙන අතුරු මුහුණත",
+    "install_settings_port": "කවුළුව",
+    "form_error_port": "වලංගු කවුළුවක අගයක් ඇතුළත් කරන්න",
+    "install_settings_dns": "DNS සේවාදායකය",
+    "install_settings_all_interfaces": "සියලුම අතුරුමුහුණත්",
+    "install_auth_title": "සත්‍යාපනය",
+    "install_auth_desc": "ඔබගේ AdGuard Home පරිපාලක වෙබ් අතුරු මුහුණතට මුරපද සත්‍යාපනය වින්‍යාසගත කිරීම අතිශයින් නිර්දේශ කෙරේ. එය ඔබගේ ස්ථානීය ජාල‌ය‌ෙ‌න් පමණක් ප්‍රවේශ විය හැකි වුවද, එය තව දුරටත් සීමා රහිත ප්‍රවේශයකින් ආරක්ෂා කර ගැනීම වැදගත් ය.",
+    "install_auth_username": "පරිශීලක නාමය",
+    "install_auth_password": "මුරපදය",
+    "install_auth_confirm": "මුරපදය තහවුරු කරන්න",
+    "install_auth_username_enter": "පරිශීලක නාමය ඇතුළත් කරන්න",
+    "install_auth_password_enter": "මුරපදය ඇතුළත් කරන්න",
+    "install_step": "පියවර",
+    "install_devices_title": "ඔබගේ උපාංග වින්‍යාසගත කරන්න",
+    "install_devices_desc": "AdGuard Home භාවිතා කිරීම ආරම්භයට, ඔබගේ උපාංග එය පරිශ්‍රීලනයට වින්‍යාසගත කිරීම අවශ්‍ය වේ.",
+    "install_submit_title": "සුභ පැතුම්!",
+    "install_submit_desc": "පිහිටුවීමේ ක්‍රියා පටිපාටිය අවසන් වී ඇති අතර ඔබ AdGuard Home භාවිතය ආරම්භ කිරීමට සූදානම්ය.",
+    "install_devices_router": "මාර්ගකාරකය",
+    "install_devices_router_desc": "මෙම පිහිටුම ඔබගේ නිවසේ මාර්ගකාරකයට සම්බන්ධ සියලුම උපාංග ස්වයංක්‍රීයව ආවරණය කරන අතර ඔබට ඒවා අතින් වින්‍යාසගත කිරීමට අවශ්‍ය නොවනු ඇත.",
+    "install_devices_router_list_3": "ඔබගේ AdGuard Home සේවාදායක ලිපින එහි ඇතුළත් කරන්න.",
+    "install_devices_router_list_4": "ඔබට සමහර වර්ගයේ රවුටර වල අභිරුචි ව.නා.ප. (DNS) සේවාදායකයක් සැකසිය නොහැක. මෙම අවස්ථාවේදී AdGuard Home <0>ග.ධා.වි.කෙ. (DHCP) සේවාදායකයක්</0> ලෙස පිහිටුවන්නේ නම් එය උපකාර වනු ඇත. එසේ නොමැතිනම්, ඔබග‌ේ විශේෂිත මාර්ගකාරක මාදිළිය සඳහා වූ ව.නා.ප. සේවාදායකයන් රිසිකරණය කරන්නේ කෙසේද යන්න පිළිබඳ අත්පොත සෙවිය යුතුය.",
+    "install_devices_windows_list_1": "ආරම්භක මෙනුව හෝ වින්ඩෝස් සෙවුම හරහා පාලක පැනලය විවෘත කරන්න.",
+    "install_devices_windows_list_2": "ජාල සහ අන්තර්ජාල ප්‍රවර්ගයට ගොස් පසුව ජාල සහ බෙදාගැනීමේ මධ්‍යස්ථානය වෙත යන්න.",
+    "install_devices_windows_list_3": "උපයුක්තක‌‌‌යෙහි සැකසුම් වෙනස් කිරීම තිරයේ වම් පසින් සොයාගෙන එය මත ක්ලික් කරන්න.",
+    "install_devices_windows_list_4": "ඔබගේ ක්‍රියාකාරී සම්බන්ධතාවය තෝරන්න, එය මත දකුණු-ක්ලික් කර ගුණාංග තෝරන්න.",
+    "install_devices_windows_list_5": "ලැයිස්තුවේ ඇති අන්තර්ජාල කෙටුම්පත් අනුවාදය 4 (TCP/IP) සොයාගෙන එය තෝරා ඉන්පසු ගුණාංග මත නැවත ක්ලික් කරන්න.",
+    "install_devices_windows_list_6": "'පහත දැක්වෙන DNS සේවාදායක ලිපින භාවිතා කරන්න' යන්න තෝරා ඔබගේ AdGuard Home සේවාදායක ලිපින ඇතුළත් කරන්න.",
+    "install_devices_macos_list_1": "ඇපල් අයිකනය මත ක්ලික් කර පද්ධති මනාපයන් වෙත යන්න.",
+    "install_devices_macos_list_2": "ජාලය මත ක්ලික් කරන්න.",
+    "install_devices_macos_list_3": "ඔබගේ ලැයිස්තුවේ පළමු සම්බන්ධතාවය තෝරා උසස් මත ක්ලික් කරන්න.",
+    "install_devices_macos_list_4": "DNS තීරුව තෝරා ඔබගේ AdGuard Home සේවාදායක ලිපින ඇතුළත් කරන්න.",
+    "install_devices_android_list_1": "ඇන්ඩ්‍රොයිඩ් මෙනුවෙහි මුල් තිරයෙන්, සැකසීම් මත තට්ටු කරන්න.",
+    "install_devices_android_list_2": "මෙනුවේ Wi-Fi මත තට්ටු කරන්න. පවතින සියලුම ජාල ලැයිස්තුගත කර ඇති තිරය පෙන්වනු ඇත (ජංගම සම්බන්ධතාවය සඳහා අභිරුචි DNS සැකසිය නොහැක).",
+    "install_devices_android_list_3": "ඔබ සම්බන්ධ වී ඇති ජාලය මත දිගු වේලාවක් ඔබන්න, ඉන්පසුව ජාලය වෙනස් කිරීම මත තට්ටු කරන්න.",
+    "install_devices_android_list_4": "ඔබට සමහර උපාංගවල වැඩිදුර සැකසුම් බැලීමට \"උසස්\" සඳහා වූ කොටුව සලකුණු කිරීමට අවශ්‍ය විය හැකිය. එමෙන්ම ඔබගේ ඇන්ඩ්‍රොයිඩ් DNS සැකසුම් වෙනස් කිරීමට, අ.ජා. කෙ. (IP) සැකසුම් ග.ධා.වි.කෙ. (DHCP) සිට ස්ථිතික වෙත මාරු කළ යුතුය.",
+    "install_devices_android_list_5": "DNS 1 සහ DNS 2 පිහිටුවීම් අගයන් ඔබගේ AdGuard Home සේවාදායක ලිපින වලට වෙනස් කරන්න.",
+    "install_devices_ios_list_1": "මුල් තිරයේ සිට, සැකසුම් මත තට්ටු කරන්න.",
+    "install_devices_ios_list_2": "වම්පස මෙනුවෙහි Wi-Fi තෝරන්න (ජංගම දුරකථන සඳහා DNS වින්‍යාසගත කිරීමට නොහැකිය).",
+    "install_devices_ios_list_3": "දැනට ක්‍රියාකාරී ජාලයයහෙි නම මත තට්ටු කරන්න.",
+    "install_devices_ios_list_4": "DNS ක්ෂේත්‍රය තුළ ඔබගේ AdGuard Home සේවාදායක ලිපින ඇතුළත් කරන්න.",
+    "get_started": "ආරම්භ කර ගන්න",
+    "next": "ඊළඟ",
+    "open_dashboard": "උපකරණ පුවරුව විවෘත කරන්න",
+    "install_saved": "සාර්ථකව සුරකින ලදි",
+    "encryption_title": "සංකේතාංකනය",
+    "encryption_desc": "ගුප්තකේතනය (HTTPS/TLS) සඳහා DNS සහ පරිපාලක වෙබ් අතුරු මුහුණත සහය දක්වයි",
+    "encryption_config_saved": "සංකේතාංකන වින්‍යාසය සුරකින ලදි",
+    "encryption_server": "සේවාදායක‌‌‌‌යේ නම",
+    "encryption_server_enter": "ඔබගේ වසම් නාමය ඇතුළත් කරන්න",
+    "encryption_redirect": "ස්වයංක්‍රීයව HTTPS වෙත හරවා යවන්න",
+    "encryption_redirect_desc": "සබල කර ඇත්නම්, AdGuard Home ඔබව ස්වයංක්‍රීයව HTTP සිට HTTPS ලිපින වෙත හරවා යවනු ඇත.",
+    "encryption_https": "HTTPS කවුළුව",
+    "encryption_https_desc": "HTTPS කවුළුව වින්‍යාසගත කර ඇත්නම්, AdGuard Home පරිපාලක අතුරුමුහුණත HTTPS හරහා ප්‍රවේශ විය හැකි අතර එය '/ dns-query' ස්ථානයේ DNS-over-HTTPS ද ලබා දෙනු ඇත.",
+    "encryption_dot": "DNS-over-TLS කවුළුව",
+    "encryption_dot_desc": "මෙම කවුළුව වින්‍යාසගත කර ඇත්නම්, AdGuard Home විසින් මෙම කවුළුව හරහා DNS-over-TLS සේවාදායකයක් ක්‍රියාත්මක කරනු ඇත.",
+    "encryption_certificates": "සහතික",
+    "encryption_certificates_input": "ඔබගේ PEM-කේතාංකනය කළ සහතික පිටපත් කර මෙහි අලවන්න.",
+    "encryption_status": "තත්ත්වය",
+    "encryption_expire": "කල් ඉකුත් වීම",
+    "encryption_key": "පුද්ගලික යතුර",
+    "encryption_key_input": "ඔබගේ සහතිකය සඳහා PEM-කේතාංකනය කළ පුද්ගලික යතුර පිටපත් කර මෙහි අලවන්න.",
+    "encryption_enable": "සංකේතාංකනය සබල කරන්න (HTTPS, DNS-over-HTTPS සහ DNS-over-TLS)",
+    "encryption_enable_desc": "සංකේතාංකනය සබල කර ඇත්නම්, AdGuard Home පරිපාලක අතුරුමුහුණත HTTPS හරහා ක්‍රියා කරනු ඇති අතර DNS සේවාදායකය DNS-over-HTTPS සහ DNS-over-TLS හරහා ලැබෙන ඉල්ලීම් සඳහා සවන් දෙනු ඇත.",
+    "encryption_key_valid": "මෙය වලංගු {{type}} පුද්ගලික යතුරකි",
+    "encryption_key_invalid": "මෙය වලංගු නොවන {{type}} පුද්ගලික යතුරකි",
+    "encryption_subject": "මාතෘකාව",
+    "encryption_issuer": "නිකුත් කරන්නා",
+    "encryption_hostnames": "ධාරක නාම",
+    "encryption_reset": "සංකේතාංකන සැකසුම් යළි පිහිටුවීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "topline_expiring_certificate": "ඔබගේ SSL සහතිකය කල් ඉකුත්වීමට ආසන්න වී ඇත. <0>සංකේතාංකන සැකසුම්</0> යාවත්කාල කරන්න.",
+    "topline_expired_certificate": "ඔබගේ SSL සහතිකය කල් ඉකුත් වී ඇත. <0>සංකේතාංකන සැකසුම්</0> යාවත්කාල කරන්න.",
+    "form_error_port_range": "80-65535 පරාසය‌ෙ‌හි කවුළුවක අගයක් ඇතුළත් කරන්න",
+    "form_error_port_unsafe": "මෙය අනාරක්ෂිත කවුළුවකි",
+    "form_error_equal": "සමාන නොවිය යුතුය",
+    "form_error_password": "මුරපදය නොගැලපුුුුුුණි",
+    "reset_settings": "සැකසුම් යළි පිහිටුවන්න",
+    "update_announcement": "AdGuard Home {{version}} දැන් ලබා ගත හැකිය! වැඩි විස්තර සඳහා <0>මෙහි ක්ලික් කරන්න</0>.",
+    "setup_guide": "පිහිටුවීමේ මාර්ගෝපදේශය",
+    "dns_addresses": "DNS ලිපින",
+    "dns_start": "DNS සේවාදායකය ආරම්භ වෙමින් පවතී",
+    "down": "පහත",
+    "fix": "නිරාකරණය කරන්න",
+    "dns_providers": "මෙහි තෝරා ගැනීමට <0>දන්නා DNS සපයන්නන්ගේ ලැයිස්තුවක්</0> ඇත.",
+    "update_now": "දැන් \tයාවත්කාල කරන්න",
+    "update_failed": "ස්වයංක්‍රීය යාවත්කාල කිරීම අසාර්ථක විය. අතින් යාවත්කාල කිරීමට කරුණාකර <a href='https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update'>පියවර අනුගමනය කරන්න</a>.",
+    "processing_update": "කරුණාකර රැඳී සිටින්න, AdGuard Home යාවත්කාලීන වෙමින් පවතී",
+    "clients_title": "අනුග්‍රාහකයන්",
+    "clients_desc": "AdGuard Home වෙත සම්බන්ධ කර ඇති උපාංග වින්‍යාසගත කරන්න",
+    "settings_global": "ගෝලීය",
+    "settings_custom": "අභිරුචි",
+    "table_client": "අනුග්‍රාහකය",
+    "table_name": "නම",
+    "save_btn": "සුරකින්න",
+    "client_add": "අනුග්‍රාහකයක් එකතු කරන්න",
+    "client_new": "නව අනුග්‍රාහකය",
+    "client_edit": "අනුග්‍රාහකය සංස්කරණය කරන්න",
+    "client_identifier": "හඳුන්වනය",
+    "ip_address": "අ.ජා. කෙ. (IP) ලිපිනය",
+    "client_identifier_desc": "අනුග්‍රාහකයන් අ.ජා. කෙ. (IP) ලිපිනයක් හෝ මා.ප්‍ර.පා. (MAC) ලිපිනයක් මගින් හඳුනාගත හැකිය. මා.ප්‍ර.පා. හඳුන්වනයක් ලෙස  භාවිතා කළ හැක්කේ AdGuard Home ද <0>DHCP සේවාදායකයක්</0> නම් පමණක් බව කරුණාවෙන් සලකන්න. ",
+    "form_enter_ip": "අ.ජා. කෙ. (IP) ඇතුළත් කරන්න",
+    "form_enter_mac": "MAC ඇතුළත් කරන්න",
+    "form_enter_id": "හඳුන්වනය ඇතුළත් කරන්න",
+    "form_add_id": "හඳුන්වනයක් එක් කරන්න",
+    "form_client_name": "අනුග්‍රාහකයේ නම ඇතුළත් කරන්න",
+    "name": "නම",
+    "client_global_settings": "ගෝලීය සැකසුම් භාවිතා කරන්න",
+    "client_deleted": "\"{{key}}\" අනුග්‍රාහකය සාර්ථකව ඉවත් කරන ලදි",
+    "client_added": "\"{{key}}\" අනුග්‍රාහකය සාර්ථකව එකතු කරන ලදි",
+    "client_updated": "\"{{key}}\" අනුග්‍රාහකය සාර්ථකව යාවත්කාල කරන ලදි",
+    "client_confirm_delete": "\"{{key}}\" අනුග්‍රාහකය ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "list_confirm_delete": "මෙම ලැයිස්තුව ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "auto_clients_desc": "AdGuard Home භාවිතා කරන අනුග්‍රාහකයන්‌ග‌ේ දත්ත, නමුත් වින්‍යාසය තුළ ගබඩා කර නොමැති",
+    "access_title": "ප්‍රවේශවීමට සැකසුම්",
+    "access_desc": "මෙහිදී ඔබට AdGuard Home DNS සේවාදායකය සඳහා ප්‍රවේශ වී‌‌‌‌මේ නීති වින්‍යාසගත කළ හැකිය.",
+    "access_allowed_title": "අවසර ලත් අනුග්‍රාහකයන්",
+    "access_allowed_desc": "CIDR හෝ අ.ජා. කෙ. (IP) ලිපින ලැයිස්තුවක් වින්‍යාසගත කර ඇත්නම්, AdGuard Home විසින් එම අ.ජා. කෙ. ලිපින වලින් පමණක් ඉල්ලීම් පිළිගනු ඇත.",
+    "access_disallowed_title": "අවසර නොලත් අනුග්‍රාහකයන්",
+    "access_disallowed_desc": "CIDR හෝ අ.ජා. කෙ. (IP) ලිපින ලැයිස්තුවක් වින්‍යාසගත කර ඇත්නම්, AdGuard Home විසින් එම අ.ජා. කෙ. ලිපින වලින් ඉල්ලීම් අත්හරිනු ඇත.",
+    "access_blocked_title": "අවහිර කළ වසම්",
+    "access_settings_saved": "ප්‍රවේශ වීමේ සැකසුම් සාර්ථකව සුරකින ලදි",
+    "updates_checked": "යාවත්කාලීන කිරීම් සාර්ථකව පරික්ෂා කර ඇත",
+    "updates_version_equal": "AdGuard Home යාවත්කාලීනයි",
+    "check_updates_now": "යාවත්කාල කිරීම සඳහා දැන් පරීක්ෂා කරන්න",
+    "dns_privacy": "DNS රහස්‍යතා",
+    "setup_dns_privacy_1": "<0>DNS-over-TLS:</0> <1>{{address}}</1> තන්තුව භාවිතා කරයි.",
+    "setup_dns_privacy_2": "<0>DNS-over-HTTPS:</0> <1>{{address}}</1> තන්තුව භාවිතා කරයි.",
+    "setup_dns_privacy_3": "<0>සංකේතාංකන ව.නා.ප. (DNS) කෙටුම්පත් සඳහා සහය දක්වන්නේ ඇන්ඩ්‍රොයිඩ් 9 පමණක් බව කරුණාවෙන් සලකන්න. එබැවින් ඔබ වෙනත් මෙහෙයුම් පද්ධති සඳහා අතිරේක මෘදුකාංග ස්ථාපනය කළ යුතුය.</0><0> ඔබට භාවිතා කළ හැකි මෘදුකාංග ලැයිස්තුවක් පහත දැක්‌වේ.</0>",
+    "setup_dns_privacy_android_2": "<1>DNS-over-HTTPS</1> සහ <1>DNS-over-TLS</1> සඳහා <0>AdGuard for Android</0> සහය දක්වයි.",
+    "setup_dns_privacy_ios_2": "<1>DNS-over-HTTPS</1> සහ <1>DNS-over-TLS</1> පිහිටුවීම් සඳහා <0>AdGuard for iOS</0> සහය දක්වයි.",
+    "setup_dns_privacy_other_2": "<0>dnsproxy</0> දන්නා සියලුම ආරක්ෂිත DNS කෙටුම්පත් සඳහා සහය දක්වයි.",
+    "setup_dns_privacy_other_3": "<1>DNS-over-HTTPS</1> සඳහා <0>dnscrypt-පෙරකලාසිය</0> සහය දක්වයි.",
+    "setup_dns_privacy_other_4": "<1>DNS-over-HTTPS</1> සඳහා <0>මොසිල්ලා ෆයර්ෆොක්ස්</0> සහය දක්වයි.",
+    "setup_dns_notice": "ඔබට <1>DNS-over-HTTPS</1> හෝ <1>DNS-over-TLS</1> භාවිතා කිරීම සඳහා AdGuard Home සැකසුම් තුළ <0>සංකේතාංකනය වින්‍යාසගත</0> කිරීමට අවශ්‍ය වේ.",
+    "rewrite_add": "DNS නැවත ලිවීමක් එකතු කරන්න",
+    "rewrite_confirm_delete": "\"{{key}}\" සඳහා DNS නැවත ලිවීම ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "dns_rewrites": "DNS නැවත ලිවීම්",
+    "form_domain": "වසම ඇතුළත් කරන්න",
+    "form_answer": "අ.ජා. කෙ. (IP) ලිපිනය ‌හෝ වසම ඇතුළත් කරන්න ",
+    "form_error_domain_format": "වලංගු නොවන වසම් ආකෘතියකි",
+    "form_error_answer_format": "වලංගු නොවන පිළිතුරු ආකෘතියකි",
+    "configure": "වින්‍යාසගත කරන්න",
+    "main_settings": "ප්‍රධාන සැකසුම්",
+    "block_services": "විශේෂිත සේවාවන් අවහිර කරන්න",
+    "blocked_services": "අවහිර කළ සේවාවන්",
+    "blocked_services_desc": "ජනප්‍රිය අඩවි සහ සේවාවන් ඉක්මනින් අවහිර කිරීමට ඉඩ දෙයි.",
+    "blocked_services_saved": "අවහිර කළ සේවාවන් සාර්ථකව සුරකින ලදි",
+    "blocked_services_global": "ගෝලීය අවහිර කළ සේවාවන් භාවිතා කරන්න",
+    "blocked_service": "අවහිර කළ සේවාව",
+    "block_all": "සියල්ල අවහිර කරන්න",
+    "unblock_all": "සියල්ල අනවහිර කරන්න",
+    "encryption_certificate_path": "සහතිකයේ මාර්ගය",
+    "encryption_private_key_path": "පුද්ගලික යතුරෙහි මාර්ගය",
+    "encryption_certificates_source_path": "සහතික ගොනු‌ව‌ෙහි මාර්ගය සකසන්න",
+    "encryption_certificates_source_content": "සහතිකවල අන්තර්ගත අලවන්න",
+    "encryption_key_source_path": "පුද්ගලික යතුරක ගොනුවක් සකසන්න",
+    "encryption_key_source_content": "පුද්ගලික යතු‌රෙහි අන්තර්ගත අලවන්න",
+    "stats_params": "සංඛ්‍යාලේඛන වින්‍යාසය",
+    "config_successfully_saved": "වින්‍යාසය සාර්ථකව සුරකින ලදි",
+    "interval_24_hour": "පැය 24",
+    "interval_days": "{{count}} දිනය",
+    "interval_days_plural": "දින {{count}}",
+    "domain": "වසම",
+    "answer": "පිළිතුර",
+    "filter_added_successfully": "පෙරහන සාර්ථකව එකතු කරන ලදි",
+    "filter_updated": "ලැයිස්තුව සාර්ථකව යාවත්කාලීන කර ඇත",
+    "statistics_configuration": "සංඛ්‍යාලේඛන වින්‍යාසය",
+    "statistics_retention": "සංඛ්‍යාලේඛන රඳවා තබා ගැනීම",
+    "statistics_retention_desc": "ඔබ කාල පරතරය අඩු කළහොත් සමහර දත්ත නැති වනු ඇත",
+    "statistics_clear": " සංඛ්‍යාලේඛන ඉවත් කරන්න",
+    "statistics_clear_confirm": "සංඛ්‍යාලේඛන ඉවත් කිරීමට අවශ්‍ය බව ඔබට විශ්වාස ද?",
+    "statistics_retention_confirm": "සංඛ්‍යාලේඛන රඳවා තබා ගැනීම වෙනස් කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද? ඔබ කාල පරතරයෙහි අගය අඩු කළහොත් සමහර දත්ත නැති වී යනු ඇත",
+    "statistics_cleared": "සංඛ්‍යාලේඛන සාර්ථකව ඉවත් කරන ලදි",
+    "interval_hours": "පැය {{count}}",
+    "interval_hours_plural": "පැය {{count}}",
+    "filters_configuration": "පෙරහන් වින්‍යාසය",
+    "filters_enable": "පෙරහන් සබල කරන්න",
+    "filters_interval": "පෙරහන් යාවත්කාල කාල පරතරය",
+    "disabled": "අබල කර ඇත",
+    "username_label": "පරිශීලක නාමය",
+    "username_placeholder": "පරිශීලක නාමය ඇතුළත් කරන්න",
+    "password_label": "මුරපදය",
+    "password_placeholder": "මුරපදය ඇතුළත් කරන්න",
+    "sign_in": "පුරන්න",
+    "sign_out": "වරන්න",
+    "forgot_password": "මුරපදය අමතක වුණා ද?",
+    "forgot_password_desc": "ඔබගේ පරිශීලක ගිණුම සඳහා නව මුරපදයක් සෑදීමට කරුණාකර <0>මෙම පියවර</0> අනුගමනය කරන්න.",
+    "location": "ස්ථානය",
+    "orgname": "සංවිධානයේ නම",
+    "netname": "ජාල‌යේ  නම",
+    "network": "ජාලය",
+    "descr": "විස්තරය",
+    "whois": "Whois",
+    "blocked_by_response": "ප්‍රතිචාරය අන්වර්ථ නාමයක් (CNAME) හෝ අ.ජා. කෙ. (IP) මගින් අවහිර කර ඇත",
+    "try_again": "නැවත උත්සහා කරන්න",
+    "example_rewrite_domain": "මෙම වසම් නාමය සඳහා පමණක් ප්‍රතිචාර නැවත ලියන්න.",
+    "example_rewrite_wildcard": "<0>example.org</0> සහ එහි සියලුම උප වසම් සඳහා ප්‍රතිචාර නැවත ලියන්න.",
+    "disable_ipv6": "IPv6 අබල කරන්න",
+    "disable_ipv6_desc": "මෙම අංගය සක්‍රීය කර ඇත්නම්, IPv6 ලිපින සඳහා වන සියලුම DNS විමසුම් (AAAA වර්ගය) අතහැර දමනු ලැබේ.",
+    "fastest_addr": "වේගවත්ම අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනය",
+    "autofix_warning_text": "ඔබ \"නිරාකරණය කරන්න\" මත ක්ලික් කළහොත්, AdGuard Home ඔබගේ පද්ධතිය AdGuard Home DNS සේවාදායකය භාවිතා කිරීමට වින්‍යාසගත කරනු ඇත.",
+    "tags_title": "හැඳුනුම් සංකේත",
+    "tags_desc": "අනුග්‍රාහකයට අනුරූප වන හැඳුනුම් සංකේත ඔබට තෝරා ගත හැකිය. පෙරහන් නීති වලට හැඳුනුම් සංකේත ඇතුළත් කළ හැකි අතර ඒවා වඩාත් නිවැරදිව යෙදීමට ඔබට ඉඩ සලසයි. <0>වැඩිදුර ඉගෙන ගන්න</0>",
+    "form_select_tags": "අනුග්‍රාහක හැඳුනුම් සංකේත",
+    "check_title": "පෙරීම පරීක්ෂා කරන්න",
+    "check": "පරීක්ෂා කරන්න",
+    "form_enter_host": "ධාරක නාමයක් ඇතුළත් කරන්න",
+    "filtered_custom_rules": "අභිරුචි පෙරීමේ නීති මගින් පෙරහන් කරන ලදි",
+    "check_ip": "අ.ජා. කෙ. (IP) ලිපින: {{ip}}",
+    "check_cname": "CNAME: {{cname}}",
+    "check_reason": "හේතුව: {{reason}}",
+    "check_rule": "නීතිය: {{rule}}",
+    "check_service": "සේවාවෙහි නම: {{service}}",
+    "check_not_found": "ඔබගේ පෙරහන් ලැයිස්තු තුළ සොයා ගත නොහැක",
+    "client_confirm_block": "{{ip}} අනුග්‍රාහකය අවහිර කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "client_confirm_unblock": "{{ip}} අනුග්‍රාහකය අනවහිර කිරීමට අවශ්‍ය බව ඔබට විශ්වාසද?",
+    "client_blocked": "අනුග්‍රාහකය \"{{ip}}\" සාර්ථකව අවහිර කරන ලදි",
+    "client_unblocked": "අනුග්‍රාහකය \"{{ip}}\" සාර්ථකව අනවහිර කරන ලදි",
+    "static_ip": "ස්ථිතික අ.ජා. කෙ. (IP) ලිපිනය",
+    "static_ip_desc": "AdGuard Home යනු සේවාදායකයක් බැවින් එය නිසි ලෙස ක්‍රියා කිරීමට ස්ථිතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනයක් අවශ්‍ය වේ. එසේ නොමැතිනම්, යම් අවස්ථාවක දී ඔබගේ මාර්ගකාරකය මෙම උපාංගයට වෙනත් අ.ජා. කෙ. ලිපිනයක් ලබා දිය හැකිය.",
+    "set_static_ip": "ස්ථිතික අ.ජා. කෙ. (IP) ලිපිනයක් සකසන්න",
+    "install_static_ok": "සුභ තොරතුරක්! ස්ථිතික අන්තර්ජාල කෙටුම්පත් (IP) ලිපිනය දැනටමත් වින්‍යාසගත කර ඇත",
+    "install_static_error": "මෙම ජාල අතුරුමුහුණත සඳහා AdGuard Home හට එය ස්වයංක්‍රීයව වින්‍යාසගත කළ නොහැක. කරුණාකර මෙය අතින් කරන්නේ කෙසේද යන්න පිළිබඳ උපදෙස් සොයා ගන්න.",
+    "install_static_configure": "ගතික අ.ජා. කෙ. (IP) ලිපිනයක් භාවිතා කරන බව අපි අනාවරණය කර ‌ග‌ෙන ඇත්තෙමු - <0>{{ip}}</0>. එය ඔබගේ ස්ථිතික ලිපිනය ලෙස භාවිතා කිරීමට අවශ්‍යද?",
+    "confirm_static_ip": "AdGuard Home ඔබේ ස්ථිතික අ.ජා. කෙ. (IP) ලිපිනය ලෙස {{ip}} වින්‍යාසගත කරනු ඇත. ඔබට ඉදිරියට යාමට අවශ්‍යද?",
+    "list_updated": "{{count}} ලැයිස්තුව යාවත්කාලීන කරන ලදි",
+    "list_updated_plural": "ලැයිස්තු {{count}} ක් යාවත්කාලීන කරන ලදි",
+    "dnssec_enable": "DNSSEC සබල කරන්න",
+    "validated_with_dnssec": "DNSSEC සමඟ තහවුරු කර ඇත",
+    "show_blocked_responses": "අවහිර කර ඇත",
+    "blocked_safebrowsing": "ආරක්ෂිත සෙවීම මගින් අවහිර කරන ලද",
+    "blocked_adult_websites": "අවහිර කළ වැඩිහිටි වෙබ් අඩවි",
+    "blocked_threats": "අවහිර කළ තර්ජන",
+    "allowed": "අවසර ලත්",
+    "filtered": "පෙරහන් කරන ලද",
+    "rewritten": "නැවත ලියන ලද",
+    "safe_search": "ආරක්ෂිත සෙවීම",
+    "blocklist": "අවහිර කිරී‌‌‌‌‌මේ ලැයිස්තුව",
+    "milliseconds_abbreviation": "මිලි තත්."
+}

client/src/__locales/sk.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Stránka",
     "rows_table_footer_text": "riadky",
     "updated_custom_filtering_toast": "Aktualizované vlastné filtračné pravidlá",
-    "rule_removed_from_custom_filtering_toast": "Pravidlo odstránené z vlastných filtračných pravidiel",
-    "rule_added_to_custom_filtering_toast": "Pravidlo pridané do vlastných filtračných pravidiel",
+    "rule_removed_from_custom_filtering_toast": "Pravidlo odstránené z vlastných filtračných pravidiel: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Pravidlo pridané do vlastných filtračných pravidiel: {{rule}}",
     "query_log_response_status": "Stav: {{value}}",
     "query_log_filtered": "Vyfiltrované pomocou {{filter}}",
     "query_log_confirm_clear": "Naozaj chcete vymazať celý denník dopytov?",
@@ -564,4 +564,4 @@
     "original_response": "Pôvodná odozva",
     "click_to_view_queries": "Kliknite pre zobrazenie dopytov",
     "port_53_faq_link": "Port 53 je často obsadený službami \"DNSStubListener\" alebo \"systemd-resolved\". Prečítajte si <0>tento návod</0> o tom, ako to vyriešiť."
-}
+}

client/src/__locales/sl.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Stran",
     "rows_table_footer_text": "vrstic",
     "updated_custom_filtering_toast": "Posodobljena pravila filtriranja po meri",
-    "rule_removed_from_custom_filtering_toast": "Pravilo je odstranjeno iz pravil filtriranja po meri",
-    "rule_added_to_custom_filtering_toast": "Pravilo je dodano pravilom filtriranja po meri",
+    "rule_removed_from_custom_filtering_toast": "Pravilo je odstranjeno iz pravil filtriranja po meri: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Pravilo je dodano pravilom filtriranja po meri: {{rule}}",
     "query_log_response_status": "Stanje: {{value}}",
     "query_log_filtered": "Filtriran z {{filter}}",
     "query_log_confirm_clear": "Ali ste prepričani, da želite počistiti celoten dnevnik poizvedb?",
@@ -564,4 +564,4 @@
     "original_response": "Izviren odgovor",
     "click_to_view_queries": "Kliknite za prikaz poizvedb",
     "port_53_faq_link": "Vrata 53 pogosto zasedajo storitve 'DNSStubListener' ali 'Sistemsko razrešene storitve'. Preberite <0>to navodilo</0> o tem, kako to rešiti."
-}
+}

client/src/__locales/sr-cs.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "Stranica",
     "rows_table_footer_text": "redovi",
     "updated_custom_filtering_toast": "Ažurirana prilagođena pravila filtriranja",
-    "rule_removed_from_custom_filtering_toast": "Pravilo uklonjeno iz prilagođenih pravila filtriranja",
-    "rule_added_to_custom_filtering_toast": "Pravilo dodato u prilagođena pravila filtriranja",
+    "rule_removed_from_custom_filtering_toast": "Pravilo uklonjeno iz prilagođenih pravila filtriranja: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Pravilo dodato u prilagođena pravila filtriranja: {{rule}}",
     "query_log_response_status": "Stanje: {{value}}",
     "query_log_filtered": "Filtrirano od {{filter}}",
     "query_log_confirm_clear": "Jeste li sigurni da želite da očistite ceo dnevnik unosa?",
@@ -564,4 +564,4 @@
     "original_response": "Izvorni odgovor",
     "click_to_view_queries": "Kliknite da pogledate zahteve",
     "port_53_faq_link": "Port 53 je najčešće zauzet od \"DNSStubListener\" ili \"systemd-resolved\" usluga. Pročitajte <0>ovo uputstvo</0> kako da to rešite."
-}
+}

client/src/__locales/sv.json

@@ -162,8 +162,8 @@
     "page_table_footer_text": "Sida",
     "rows_table_footer_text": "rader",
     "updated_custom_filtering_toast": "Uppdaterade de egna filterreglerna",
-    "rule_removed_from_custom_filtering_toast": "Regel borttagen från de egna filterreglerna",
-    "rule_added_to_custom_filtering_toast": "Regel tillagd till de egna filterreglerna",
+    "rule_removed_from_custom_filtering_toast": "Regel borttagen från de egna filterreglerna: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Regel tillagd till de egna filterreglerna: {{rule}}",
     "query_log_response_status": "Status: {{value}}",
     "query_log_filtered": "Filtrerat av {{filter}}",
     "query_log_confirm_clear": "Är du säker på att du vill rensa hela förfrågningsloggen?",

client/src/__locales/th.json

@@ -167,8 +167,8 @@
     "page_table_footer_text": "หน้า",
     "rows_table_footer_text": "ตาราง",
     "updated_custom_filtering_toast": "อัปเดตกฎการกรองที่กำหนดเอง",
-    "rule_removed_from_custom_filtering_toast": "ลบกฎออกจากกฎการกรองที่กำหนดเองแล้ว",
-    "rule_added_to_custom_filtering_toast": "เพิ่มกฎในกฎการกรองที่กำหนดเองแล้ว",
+    "rule_removed_from_custom_filtering_toast": "ลบกฎออกจากกฎการกรองที่กำหนดเองแล้ว {{rule}}",
+    "rule_added_to_custom_filtering_toast": "เพิ่มกฎในกฎการกรองที่กำหนดเองแล้ว {{rule}}",
     "query_log_response_status": "สถานะ: {{value}}",
     "query_log_filtered": "กรองโดย {{filter}}",
     "query_log_confirm_clear": "คุณแน่ใจหรือไม่ว่าต้องการลบบันทึกการใช้งานทั้งหมด?",

client/src/__locales/tr.json

@@ -197,8 +197,8 @@
     "page_table_footer_text": "Sayfa",
     "rows_table_footer_text": "satır",
     "updated_custom_filtering_toast": "İsteğe bağlı filtreleme kuralları güncellendi",
-    "rule_removed_from_custom_filtering_toast": "Kural isteğe bağlı filtreleme kurallarından kaldırıldı",
-    "rule_added_to_custom_filtering_toast": "Kural isteğe bağlı filtreleme kurallarına eklendi",
+    "rule_removed_from_custom_filtering_toast": "Özel filtreleme kurallarından kural kaldırıldı: {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Özel filtreleme kurallarına kural eklendi: {{rule}}",
     "query_log_response_status": "Durum: {{value}}",
     "query_log_filtered": "{{filter}} tarafından filtrelendi",
     "query_log_confirm_clear": "Tüm sorgu günlüğünü temizlemek istediğinizden emin misiniz?",
@@ -507,4 +507,4 @@
     "allowed": "İzin verildi",
     "blocklist": "Engellenen listesi",
     "port_53_faq_link": "Port 53 genellikle \"DNSStubListener\" veya \"sistemd-resolved\" hizmetler tarafından kullanılır. Lütfen problemin nasıl çözüleceğine ilişkin <0>bu talimatı</0> okuyun."
-}
+}

client/src/__locales/vi.json

@@ -172,8 +172,8 @@
     "page_table_footer_text": "Trang",
     "rows_table_footer_text": "hàng",
     "updated_custom_filtering_toast": "Đã cập nhật quy tắc lọc tuỳ chỉnh",
-    "rule_removed_from_custom_filtering_toast": "Quy tắc đã được xoá khỏi quy tắc lọc tuỳ chỉnh",
-    "rule_added_to_custom_filtering_toast": "Quy tắc đã được thêm vào quy tắc lọc tuỳ chỉnh",
+    "rule_removed_from_custom_filtering_toast": "Quy tắc đã được xoá khỏi quy tắc lọc tuỳ chỉnh {{rule}}",
+    "rule_added_to_custom_filtering_toast": "Quy tắc đã được thêm vào quy tắc lọc tuỳ chỉnh: {{rule}}",
     "query_log_response_status": "Trạng thái: {{value}}",
     "query_log_filtered": "Được lọc bởi {{filter}}",
     "query_log_confirm_clear": "Bạn có chắc chắn muốn xóa toàn bộ nhật ký truy vấn không?",
@@ -445,4 +445,4 @@
     "blocked_threats": "Mối nguy hiểm đã chặn",
     "allowed": "Được phép",
     "safe_search": "Tìm kiếm an toàn"
-}
+}

client/src/__locales/zh-cn.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "页",
     "rows_table_footer_text": "行",
     "updated_custom_filtering_toast": "自定义过滤规则已更新",
-    "rule_removed_from_custom_filtering_toast": "规则已从自定义过滤规则列表中移除",
-    "rule_added_to_custom_filtering_toast": "规则已添加到自定义过滤规则列表中",
+    "rule_removed_from_custom_filtering_toast": "规则已从自定义过滤规则列表中移除 {{rule}}",
+    "rule_added_to_custom_filtering_toast": "规则已添加到自定义过滤规则列表中 {{rule}}",
     "query_log_response_status": "状态： {{value}}",
     "query_log_filtered": "被 {{filter}} 过滤",
     "query_log_confirm_clear": "你确定想要清除全部查询日志吗？",
@@ -564,4 +564,4 @@
     "original_response": "原始响应",
     "click_to_view_queries": "点击查看查询",
     "port_53_faq_link": "53端口常被DNSStubListener或systemdn解析的服务占用。请阅读<0>这份关于如何解决这一问题的说明</0>"
-}
+}

client/src/__locales/zh-tw.json

@@ -208,8 +208,8 @@
     "page_table_footer_text": "頁面",
     "rows_table_footer_text": "列",
     "updated_custom_filtering_toast": "已更新自訂的過濾規則",
-    "rule_removed_from_custom_filtering_toast": "規則從自訂的過濾規則中被移除",
-    "rule_added_to_custom_filtering_toast": "規則被加至自訂的過濾規則中",
+    "rule_removed_from_custom_filtering_toast": "規則從自訂的過濾規則中被移除 {{rule}}",
+    "rule_added_to_custom_filtering_toast": "規則被加至自訂的過濾規則中 {{rule}}",
     "query_log_response_status": "狀態：{{value}}",
     "query_log_filtered": "被 {{filter}} 過濾",
     "query_log_confirm_clear": "您確定您想要清除整個查詢記錄嗎？",
@@ -564,4 +564,4 @@
     "original_response": "原始的回應",
     "click_to_view_queries": "點擊以檢視查詢",
     "port_53_faq_link": "連接埠 53 常被 \"DNSStubListener\" 或 \"systemd-resolved\" 服務佔用。請閱讀有關如何解決這個的<0>用法說明</0>。"
-}
+}

client/src/actions/index.js

@@ -2,12 +2,18 @@ import { createAction } from 'redux-actions';
 import i18next from 'i18next';
 import axios from 'axios';
 
+import endsWith from 'lodash/endsWith';
+import escapeRegExp from 'lodash/escapeRegExp';
+import React from 'react';
 import { splitByNewLine, sortClients } from '../helpers/helpers';
-import { CHECK_TIMEOUT, SETTINGS_NAMES } from '../helpers/constants';
+import {
+    BLOCK_ACTIONS, CHECK_TIMEOUT, STATUS_RESPONSE, SETTINGS_NAMES, FORM_NAME, GETTING_STARTED_LINK,
+} from '../helpers/constants';
 import { areEqualVersions } from '../helpers/version';
 import { getTlsStatus } from './encryption';
 import apiClient from '../api/Api';
 import { addErrorToast, addNoticeToast, addSuccessToast } from './toasts';
+import { getFilteringStatus, setRules } from './filtering';
 
 export const toggleSettingStatus = createAction('SETTING_STATUS_TOGGLE');
 export const showSettingsFailure = createAction('SETTINGS_FAILURE_SHOW');
@@ -179,7 +185,14 @@ export const getUpdate = () => async (dispatch, getState) => {
 
     dispatch(getUpdateRequest());
     const handleRequestError = () => {
-        dispatch(addNoticeToast({ error: 'update_failed' }));
+        const options = {
+            components: {
+                a: <a href={GETTING_STARTED_LINK} target="_blank"
+                      rel="noopener noreferrer" />,
+            },
+        };
+
+        dispatch(addNoticeToast({ error: 'update_failed', options }));
         dispatch(getUpdateFailure());
     };
 
@@ -342,6 +355,8 @@ export const getDhcpStatus = () => async (dispatch) => {
     dispatch(getDhcpStatusRequest());
     try {
         const status = await apiClient.getDhcpStatus();
+        const globalStatus = await apiClient.getGlobalStatus();
+        status.dhcp_available = globalStatus.dhcp_available;
         dispatch(getDhcpStatusSuccess(status));
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -368,11 +383,69 @@ export const findActiveDhcpRequest = createAction('FIND_ACTIVE_DHCP_REQUEST');
 export const findActiveDhcpSuccess = createAction('FIND_ACTIVE_DHCP_SUCCESS');
 export const findActiveDhcpFailure = createAction('FIND_ACTIVE_DHCP_FAILURE');
 
-export const findActiveDhcp = (name) => async (dispatch) => {
+export const findActiveDhcp = (name) => async (dispatch, getState) => {
     dispatch(findActiveDhcpRequest());
     try {
         const activeDhcp = await apiClient.findActiveDhcp(name);
         dispatch(findActiveDhcpSuccess(activeDhcp));
+        const { check, interface_name, interfaces } = getState().dhcp;
+        const selectedInterface = getState().form[FORM_NAME.DHCP_INTERFACES].values.interface_name;
+        const v4 = check?.v4 ?? { static_ip: {}, other_server: {} };
+        const v6 = check?.v6 ?? { other_server: {} };
+
+        let isError = false;
+        let isStaticIPError = false;
+
+        const hasV4Interface = !!interfaces[selectedInterface]?.ipv4_addresses;
+        const hasV6Interface = !!interfaces[selectedInterface]?.ipv6_addresses;
+
+        if (hasV4Interface && v4.other_server.found === STATUS_RESPONSE.ERROR) {
+            isError = true;
+            if (v4.other_server.error) {
+                dispatch(addErrorToast({ error: v4.other_server.error }));
+            }
+        }
+
+        if (hasV6Interface && v6.other_server.found === STATUS_RESPONSE.ERROR) {
+            isError = true;
+            if (v6.other_server.error) {
+                dispatch(addErrorToast({ error: v6.other_server.error }));
+            }
+        }
+
+        if (hasV4Interface && v4.static_ip.static === STATUS_RESPONSE.ERROR) {
+            isStaticIPError = true;
+            dispatch(addErrorToast({ error: 'dhcp_static_ip_error' }));
+        }
+
+
+        if (isError) {
+            dispatch(addErrorToast({ error: 'dhcp_error' }));
+        }
+
+        if (isStaticIPError || isError) {
+            // No need to proceed if there was an error discovering DHCP server
+            return;
+        }
+
+        if ((hasV4Interface && v4.other_server.found === STATUS_RESPONSE.YES)
+                || (hasV6Interface && v6.other_server.found === STATUS_RESPONSE.YES)) {
+            dispatch(addErrorToast({ error: 'dhcp_found' }));
+        } else if (hasV4Interface && v4.static_ip.static === STATUS_RESPONSE.NO
+                && v4.static_ip.ip
+                && interface_name) {
+            const warning = i18next.t('dhcp_dynamic_ip_found', {
+                interfaceName: interface_name,
+                ipAddress: v4.static_ip.ip,
+                interpolation: {
+                    prefix: '<0>{{',
+                    suffix: '}}</0>',
+                },
+            });
+            dispatch(addErrorToast({ error: warning }));
+        } else {
+            dispatch(addSuccessToast('dhcp_not_found'));
+        }
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(findActiveDhcpFailure());
@@ -383,14 +456,11 @@ export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST');
 export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS');
 export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE');
 
-export const setDhcpConfig = (values) => async (dispatch, getState) => {
-    const { config } = getState().dhcp;
-    const updatedConfig = { ...config, ...values };
+export const setDhcpConfig = (values) => async (dispatch) => {
     dispatch(setDhcpConfigRequest());
-    dispatch(findActiveDhcp(values.interface_name));
     try {
-        await apiClient.setDhcpConfig(updatedConfig);
-        dispatch(setDhcpConfigSuccess(updatedConfig));
+        await apiClient.setDhcpConfig(values);
+        dispatch(setDhcpConfigSuccess(values));
         dispatch(addSuccessToast('dhcp_config_saved'));
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -416,7 +486,6 @@ export const toggleDhcp = (values) => async (dispatch) => {
             enabled: true,
         };
         successMessage = 'enabled_dhcp';
-        dispatch(findActiveDhcp(values.interface_name));
     }
 
     try {
@@ -483,3 +552,44 @@ export const removeStaticLease = (config) => async (dispatch) => {
 };
 
 export const removeToast = createAction('REMOVE_TOAST');
+
+export const toggleBlocking = (
+    type, domain, baseRule, baseUnblocking,
+) => async (dispatch, getState) => {
+    const baseBlockingRule = baseRule || `||${domain}^$important`;
+    const baseUnblockingRule = baseUnblocking || `@@${baseBlockingRule}`;
+    const { userRules } = getState().filtering;
+
+    const lineEnding = !endsWith(userRules, '\n') ? '\n' : '';
+
+    const blockingRule = type === BLOCK_ACTIONS.BLOCK ? baseUnblockingRule : baseBlockingRule;
+    const unblockingRule = type === BLOCK_ACTIONS.BLOCK ? baseBlockingRule : baseUnblockingRule;
+    const preparedBlockingRule = new RegExp(`(^|\n)${escapeRegExp(blockingRule)}($|\n)`);
+    const preparedUnblockingRule = new RegExp(`(^|\n)${escapeRegExp(unblockingRule)}($|\n)`);
+
+    const matchPreparedBlockingRule = userRules.match(preparedBlockingRule);
+    const matchPreparedUnblockingRule = userRules.match(preparedUnblockingRule);
+
+    if (matchPreparedBlockingRule) {
+        dispatch(setRules(userRules.replace(`${blockingRule}`, '')));
+        dispatch(addSuccessToast(i18next.t('rule_removed_from_custom_filtering_toast', { rule: blockingRule })));
+    } else if (!matchPreparedUnblockingRule) {
+        dispatch(setRules(`${userRules}${lineEnding}${unblockingRule}\n`));
+        dispatch(addSuccessToast(i18next.t('rule_added_to_custom_filtering_toast', { rule: unblockingRule })));
+    } else if (matchPreparedUnblockingRule) {
+        dispatch(addSuccessToast(i18next.t('rule_added_to_custom_filtering_toast', { rule: unblockingRule })));
+        return;
+    } else if (!matchPreparedBlockingRule) {
+        dispatch(addSuccessToast(i18next.t('rule_removed_from_custom_filtering_toast', { rule: blockingRule })));
+        return;
+    }
+
+    dispatch(getFilteringStatus());
+};
+
+export const toggleBlockingForClient = (type, domain, client) => {
+    const baseRule = `||${domain}^$client='${client.replace(/'/g, '/\'')}'`;
+    const baseUnblocking = `@@${baseRule}`;
+
+    return toggleBlocking(type, domain, baseRule, baseUnblocking);
+};

client/src/actions/login.js

@@ -2,6 +2,7 @@ import { createAction } from 'redux-actions';
 
 import apiClient from '../api/Api';
 import { addErrorToast } from './toasts';
+import { HTML_PAGES } from '../helpers/constants';
 
 export const processLoginRequest = createAction('PROCESS_LOGIN_REQUEST');
 export const processLoginFailure = createAction('PROCESS_LOGIN_FAILURE');
@@ -11,7 +12,8 @@ export const processLogin = (values) => async (dispatch) => {
     dispatch(processLoginRequest());
     try {
         await apiClient.login(values);
-        const dashboardUrl = window.location.origin + window.location.pathname.replace('/login.html', '/');
+        const dashboardUrl = window.location.origin
+                + window.location.pathname.replace(HTML_PAGES.LOGIN, HTML_PAGES.MAIN);
         window.location.replace(dashboardUrl);
         dispatch(processLoginSuccess());
     } catch (error) {

client/src/actions/queryLogs.js

@@ -3,9 +3,7 @@ import { createAction } from 'redux-actions';
 import apiClient from '../api/Api';
 import { normalizeLogs, getParamsForClientsSearch, addClientInfo } from '../helpers/helpers';
 import {
-    DEFAULT_LOGS_FILTER,
-    TABLE_DEFAULT_PAGE_SIZE,
-    TABLE_FIRST_PAGE,
+    DEFAULT_LOGS_FILTER, FORM_NAME, QUERY_LOGS_PAGE_LIMIT,
 } from '../helpers/constants';
 import { addErrorToast, addSuccessToast } from './toasts';
 
@@ -37,15 +35,22 @@ export const getAdditionalLogsRequest = createAction('GET_ADDITIONAL_LOGS_REQUES
 export const getAdditionalLogsFailure = createAction('GET_ADDITIONAL_LOGS_FAILURE');
 export const getAdditionalLogsSuccess = createAction('GET_ADDITIONAL_LOGS_SUCCESS');
 
-const checkFilteredLogs = async (data, filter, dispatch, total) => {
+const shortPollQueryLogs = async (data, filter, dispatch, getState, total) => {
     const { logs, oldest } = data;
     const totalData = total || { logs };
 
-    const needToGetAdditionalLogs = (logs.length < TABLE_DEFAULT_PAGE_SIZE
-        || totalData.logs.length < TABLE_DEFAULT_PAGE_SIZE)
-        && oldest !== '';
+    const queryForm = getState().form[FORM_NAME.LOGS_FILTER];
+    const currentQuery = queryForm && queryForm.values.search;
+    const previousQuery = filter?.search;
+    const isQueryTheSame = typeof previousQuery === 'string'
+            && typeof currentQuery === 'string'
+            && previousQuery === currentQuery;
 
-    if (needToGetAdditionalLogs) {
+    const isShortPollingNeeded = (logs.length < QUERY_LOGS_PAGE_LIMIT
+            || totalData.logs.length < QUERY_LOGS_PAGE_LIMIT)
+            && oldest !== '' && isQueryTheSame;
+
+    if (isShortPollingNeeded) {
         dispatch(getAdditionalLogsRequest());
 
         try {
@@ -54,7 +59,7 @@ const checkFilteredLogs = async (data, filter, dispatch, total) => {
                 filter,
             });
             if (additionalLogs.oldest.length > 0) {
-                return await checkFilteredLogs(additionalLogs, filter, dispatch, {
+                return await shortPollQueryLogs(additionalLogs, filter, dispatch, getState, {
                     logs: [...totalData.logs, ...additionalLogs.logs],
                     oldest: additionalLogs.oldest,
                 });
@@ -71,31 +76,25 @@ const checkFilteredLogs = async (data, filter, dispatch, total) => {
     return totalData;
 };
 
-export const setLogsPagination = createAction('LOGS_PAGINATION');
-export const setLogsPage = createAction('SET_LOG_PAGE');
 export const toggleDetailedLogs = createAction('TOGGLE_DETAILED_LOGS');
 
 export const getLogsRequest = createAction('GET_LOGS_REQUEST');
 export const getLogsFailure = createAction('GET_LOGS_FAILURE');
 export const getLogsSuccess = createAction('GET_LOGS_SUCCESS');
 
-export const getLogs = (config) => async (dispatch, getState) => {
+export const getLogs = () => async (dispatch, getState) => {
     dispatch(getLogsRequest());
     try {
-        const { isFiltered, filter, page } = getState().queryLogs;
+        const { isFiltered, filter, oldest } = getState().queryLogs;
         const data = await getLogsWithParams({
-            ...config,
+            older_than: oldest,
             filter,
         });
 
         if (isFiltered) {
-            const additionalData = await checkFilteredLogs(data, filter, dispatch);
+            const additionalData = await shortPollQueryLogs(data, filter, dispatch, getState);
             const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
             dispatch(getLogsSuccess(updatedData));
-            dispatch(setLogsPagination({
-                page,
-                pageSize: TABLE_DEFAULT_PAGE_SIZE,
-            }));
         } else {
             dispatch(getLogsSuccess(data));
         }
@@ -111,7 +110,7 @@ export const setLogsFilterRequest = createAction('SET_LOGS_FILTER_REQUEST');
  *
  * @param filter
  * @param {string} filter.search
- * @param {string} filter.response_status query field of RESPONSE_FILTER object
+ * @param {string} filter.response_status 'QUERY' field of RESPONSE_FILTER object
  * @returns function
  */
 export const setLogsFilter = (filter) => setLogsFilterRequest(filter);
@@ -120,21 +119,20 @@ export const setFilteredLogsRequest = createAction('SET_FILTERED_LOGS_REQUEST');
 export const setFilteredLogsFailure = createAction('SET_FILTERED_LOGS_FAILURE');
 export const setFilteredLogsSuccess = createAction('SET_FILTERED_LOGS_SUCCESS');
 
-export const setFilteredLogs = (filter) => async (dispatch) => {
+export const setFilteredLogs = (filter) => async (dispatch, getState) => {
     dispatch(setFilteredLogsRequest());
     try {
         const data = await getLogsWithParams({
             older_than: '',
             filter,
         });
-        const additionalData = await checkFilteredLogs(data, filter, dispatch);
+        const additionalData = await shortPollQueryLogs(data, filter, dispatch, getState);
         const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
 
         dispatch(setFilteredLogsSuccess({
             ...updatedData,
             filter,
         }));
-        dispatch(setLogsPage(TABLE_FIRST_PAGE));
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(setFilteredLogsFailure(error));

client/src/api/Api.js

@@ -1,26 +1,32 @@
 import axios from 'axios';
 
 import { getPathWithQueryString } from '../helpers/helpers';
-import { R_PATH_LAST_PART } from '../helpers/constants';
+import { QUERY_LOGS_PAGE_LIMIT, HTML_PAGES, R_PATH_LAST_PART } from '../helpers/constants';
 import { BASE_URL } from '../../constants';
 
 class Api {
     baseUrl = BASE_URL;
 
     async makeRequest(path, method = 'POST', config) {
+        const url = `${this.baseUrl}/${path}`;
+
         try {
             const response = await axios({
-                url: `${this.baseUrl}/${path}`,
+                url,
                 method,
                 ...config,
             });
             return response.data;
         } catch (error) {
-            console.error(error);
-            const errorPath = `${this.baseUrl}/${path}`;
+            const errorPath = url;
             if (error.response) {
-                if (error.response.status === 403) {
-                    const loginPageUrl = window.location.href.replace(R_PATH_LAST_PART, '/login.html');
+                const { pathname } = document.location;
+                const shouldRedirect = pathname !== HTML_PAGES.LOGIN
+                        && pathname !== HTML_PAGES.INSTALL;
+
+                if (error.response.status === 403 && shouldRedirect) {
+                    const loginPageUrl = window.location.href
+                        .replace(R_PATH_LAST_PART, HTML_PAGES.LOGIN);
                     window.location.replace(loginPageUrl);
                     return false;
                 }
@@ -32,25 +38,13 @@ class Api {
     }
 
     // Global methods
-    GLOBAL_STATUS = {
-        path: 'status',
-        method: 'GET',
-    };
+    GLOBAL_STATUS = { path: 'status', method: 'GET' }
 
-    GLOBAL_TEST_UPSTREAM_DNS = {
-        path: 'test_upstream_dns',
-        method: 'POST',
-    };
+    GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
 
-    GLOBAL_VERSION = {
-        path: 'version.json',
-        method: 'POST',
-    };
+    GLOBAL_VERSION = { path: 'version.json', method: 'POST' };
 
-    GLOBAL_UPDATE = {
-        path: 'update',
-        method: 'POST',
-    };
+    GLOBAL_UPDATE = { path: 'update', method: 'POST' };
 
     getGlobalStatus() {
         const { path, method } = this.GLOBAL_STATUS;
@@ -81,45 +75,21 @@ class Api {
     }
 
     // Filtering
-    FILTERING_STATUS = {
-        path: 'filtering/status',
-        method: 'GET',
-    };
+    FILTERING_STATUS = { path: 'filtering/status', method: 'GET' };
 
-    FILTERING_ADD_FILTER = {
-        path: 'filtering/add_url',
-        method: 'POST',
-    };
+    FILTERING_ADD_FILTER = { path: 'filtering/add_url', method: 'POST' };
 
-    FILTERING_REMOVE_FILTER = {
-        path: 'filtering/remove_url',
-        method: 'POST',
-    };
+    FILTERING_REMOVE_FILTER = { path: 'filtering/remove_url', method: 'POST' };
 
-    FILTERING_SET_RULES = {
-        path: 'filtering/set_rules',
-        method: 'POST',
-    };
+    FILTERING_SET_RULES = { path: 'filtering/set_rules', method: 'POST' };
 
-    FILTERING_REFRESH = {
-        path: 'filtering/refresh',
-        method: 'POST',
-    };
+    FILTERING_REFRESH = { path: 'filtering/refresh', method: 'POST' };
 
-    FILTERING_SET_URL = {
-        path: 'filtering/set_url',
-        method: 'POST',
-    };
+    FILTERING_SET_URL = { path: 'filtering/set_url', method: 'POST' };
 
-    FILTERING_CONFIG = {
-        path: 'filtering/config',
-        method: 'POST',
-    };
+    FILTERING_CONFIG = { path: 'filtering/config', method: 'POST' };
 
-    FILTERING_CHECK_HOST = {
-        path: 'filtering/check_host',
-        method: 'GET',
-    };
+    FILTERING_CHECK_HOST = { path: 'filtering/check_host', method: 'GET' };
 
     getFilteringStatus() {
         const { path, method } = this.FILTERING_STATUS;
@@ -190,20 +160,11 @@ class Api {
     }
 
     // Parental
-    PARENTAL_STATUS = {
-        path: 'parental/status',
-        method: 'GET',
-    };
+    PARENTAL_STATUS = { path: 'parental/status', method: 'GET' };
 
-    PARENTAL_ENABLE = {
-        path: 'parental/enable',
-        method: 'POST',
-    };
+    PARENTAL_ENABLE = { path: 'parental/enable', method: 'POST' };
 
-    PARENTAL_DISABLE = {
-        path: 'parental/disable',
-        method: 'POST',
-    };
+    PARENTAL_DISABLE = { path: 'parental/disable', method: 'POST' };
 
     getParentalStatus() {
         const { path, method } = this.PARENTAL_STATUS;
@@ -226,20 +187,11 @@ class Api {
     }
 
     // Safebrowsing
-    SAFEBROWSING_STATUS = {
-        path: 'safebrowsing/status',
-        method: 'GET',
-    };
+    SAFEBROWSING_STATUS = { path: 'safebrowsing/status', method: 'GET' };
 
-    SAFEBROWSING_ENABLE = {
-        path: 'safebrowsing/enable',
-        method: 'POST',
-    };
+    SAFEBROWSING_ENABLE = { path: 'safebrowsing/enable', method: 'POST' };
 
-    SAFEBROWSING_DISABLE = {
-        path: 'safebrowsing/disable',
-        method: 'POST',
-    };
+    SAFEBROWSING_DISABLE = { path: 'safebrowsing/disable', method: 'POST' };
 
     getSafebrowsingStatus() {
         const { path, method } = this.SAFEBROWSING_STATUS;
@@ -257,20 +209,11 @@ class Api {
     }
 
     // Safesearch
-    SAFESEARCH_STATUS = {
-        path: 'safesearch/status',
-        method: 'GET',
-    };
+    SAFESEARCH_STATUS = { path: 'safesearch/status', method: 'GET' };
 
-    SAFESEARCH_ENABLE = {
-        path: 'safesearch/enable',
-        method: 'POST',
-    };
+    SAFESEARCH_ENABLE = { path: 'safesearch/enable', method: 'POST' };
 
-    SAFESEARCH_DISABLE = {
-        path: 'safesearch/disable',
-        method: 'POST',
-    };
+    SAFESEARCH_DISABLE = { path: 'safesearch/disable', method: 'POST' };
 
     getSafesearchStatus() {
         const { path, method } = this.SAFESEARCH_STATUS;
@@ -288,15 +231,9 @@ class Api {
     }
 
     // Language
-    CURRENT_LANGUAGE = {
-        path: 'i18n/current_language',
-        method: 'GET',
-    };
+    CURRENT_LANGUAGE = { path: 'i18n/current_language', method: 'GET' };
 
-    CHANGE_LANGUAGE = {
-        path: 'i18n/change_language',
-        method: 'POST',
-    };
+    CHANGE_LANGUAGE = { path: 'i18n/change_language', method: 'POST' };
 
     getCurrentLanguage() {
         const { path, method } = this.CURRENT_LANGUAGE;
@@ -313,40 +250,19 @@ class Api {
     }
 
     // DHCP
-    DHCP_STATUS = {
-        path: 'dhcp/status',
-        method: 'GET',
-    };
+    DHCP_STATUS = { path: 'dhcp/status', method: 'GET' };
 
-    DHCP_SET_CONFIG = {
-        path: 'dhcp/set_config',
-        method: 'POST',
-    };
+    DHCP_SET_CONFIG = { path: 'dhcp/set_config', method: 'POST' };
 
-    DHCP_FIND_ACTIVE = {
-        path: 'dhcp/find_active_dhcp',
-        method: 'POST',
-    };
+    DHCP_FIND_ACTIVE = { path: 'dhcp/find_active_dhcp', method: 'POST' };
 
-    DHCP_INTERFACES = {
-        path: 'dhcp/interfaces',
-        method: 'GET',
-    };
+    DHCP_INTERFACES = { path: 'dhcp/interfaces', method: 'GET' };
 
-    DHCP_ADD_STATIC_LEASE = {
-        path: 'dhcp/add_static_lease',
-        method: 'POST',
-    };
+    DHCP_ADD_STATIC_LEASE = { path: 'dhcp/add_static_lease', method: 'POST' };
 
-    DHCP_REMOVE_STATIC_LEASE = {
-        path: 'dhcp/remove_static_lease',
-        method: 'POST',
-    };
+    DHCP_REMOVE_STATIC_LEASE = { path: 'dhcp/remove_static_lease', method: 'POST' };
 
-    DHCP_RESET = {
-        path: 'dhcp/reset',
-        method: 'POST',
-    };
+    DHCP_RESET = { path: 'dhcp/reset', method: 'POST' };
 
     getDhcpStatus() {
         const { path, method } = this.DHCP_STATUS;
@@ -400,20 +316,11 @@ class Api {
     }
 
     // Installation
-    INSTALL_GET_ADDRESSES = {
-        path: 'install/get_addresses',
-        method: 'GET',
-    };
+    INSTALL_GET_ADDRESSES = { path: 'install/get_addresses', method: 'GET' };
 
-    INSTALL_CONFIGURE = {
-        path: 'install/configure',
-        method: 'POST',
-    };
+    INSTALL_CONFIGURE = { path: 'install/configure', method: 'POST' };
 
-    INSTALL_CHECK_CONFIG = {
-        path: 'install/check_config',
-        method: 'POST',
-    };
+    INSTALL_CHECK_CONFIG = { path: 'install/check_config', method: 'POST' };
 
     getDefaultAddresses() {
         const { path, method } = this.INSTALL_GET_ADDRESSES;
@@ -439,20 +346,11 @@ class Api {
     }
 
     // DNS-over-HTTPS and DNS-over-TLS
-    TLS_STATUS = {
-        path: 'tls/status',
-        method: 'GET',
-    };
+    TLS_STATUS = { path: 'tls/status', method: 'GET' };
 
-    TLS_CONFIG = {
-        path: 'tls/configure',
-        method: 'POST',
-    };
+    TLS_CONFIG = { path: 'tls/configure', method: 'POST' };
 
-    TLS_VALIDATE = {
-        path: 'tls/validate',
-        method: 'POST',
-    };
+    TLS_VALIDATE = { path: 'tls/validate', method: 'POST' };
 
     getTlsStatus() {
         const { path, method } = this.TLS_STATUS;
@@ -478,30 +376,15 @@ class Api {
     }
 
     // Per-client settings
-    GET_CLIENTS = {
-        path: 'clients',
-        method: 'GET',
-    };
+    GET_CLIENTS = { path: 'clients', method: 'GET' };
 
-    FIND_CLIENTS = {
-        path: 'clients/find',
-        method: 'GET',
-    };
+    FIND_CLIENTS = { path: 'clients/find', method: 'GET' };
 
-    ADD_CLIENT = {
-        path: 'clients/add',
-        method: 'POST',
-    };
+    ADD_CLIENT = { path: 'clients/add', method: 'POST' };
 
-    DELETE_CLIENT = {
-        path: 'clients/delete',
-        method: 'POST',
-    };
+    DELETE_CLIENT = { path: 'clients/delete', method: 'POST' };
 
-    UPDATE_CLIENT = {
-        path: 'clients/update',
-        method: 'POST',
-    };
+    UPDATE_CLIENT = { path: 'clients/update', method: 'POST' };
 
     getClients() {
         const { path, method } = this.GET_CLIENTS;
@@ -542,15 +425,9 @@ class Api {
     }
 
     // DNS access settings
-    ACCESS_LIST = {
-        path: 'access/list',
-        method: 'GET',
-    };
+    ACCESS_LIST = { path: 'access/list', method: 'GET' };
 
-    ACCESS_SET = {
-        path: 'access/set',
-        method: 'POST',
-    };
+    ACCESS_SET = { path: 'access/set', method: 'POST' };
 
     getAccessList() {
         const { path, method } = this.ACCESS_LIST;
@@ -567,20 +444,11 @@ class Api {
     }
 
     // DNS rewrites
-    REWRITES_LIST = {
-        path: 'rewrite/list',
-        method: 'GET',
-    };
+    REWRITES_LIST = { path: 'rewrite/list', method: 'GET' };
 
-    REWRITE_ADD = {
-        path: 'rewrite/add',
-        method: 'POST',
-    };
+    REWRITE_ADD = { path: 'rewrite/add', method: 'POST' };
 
-    REWRITE_DELETE = {
-        path: 'rewrite/delete',
-        method: 'POST',
-    };
+    REWRITE_DELETE = { path: 'rewrite/delete', method: 'POST' };
 
     getRewritesList() {
         const { path, method } = this.REWRITES_LIST;
@@ -606,15 +474,9 @@ class Api {
     }
 
     // Blocked services
-    BLOCKED_SERVICES_LIST = {
-        path: 'blocked_services/list',
-        method: 'GET',
-    };
+    BLOCKED_SERVICES_LIST = { path: 'blocked_services/list', method: 'GET' };
 
-    BLOCKED_SERVICES_SET = {
-        path: 'blocked_services/set',
-        method: 'POST',
-    };
+    BLOCKED_SERVICES_SET = { path: 'blocked_services/set', method: 'POST' };
 
     getBlockedServices() {
         const { path, method } = this.BLOCKED_SERVICES_LIST;
@@ -631,25 +493,13 @@ class Api {
     }
 
     // Settings for statistics
-    GET_STATS = {
-        path: 'stats',
-        method: 'GET',
-    };
+    GET_STATS = { path: 'stats', method: 'GET' };
 
-    STATS_INFO = {
-        path: 'stats_info',
-        method: 'GET',
-    };
+    STATS_INFO = { path: 'stats_info', method: 'GET' };
 
-    STATS_CONFIG = {
-        path: 'stats_config',
-        method: 'POST',
-    };
+    STATS_CONFIG = { path: 'stats_config', method: 'POST' };
 
-    STATS_RESET = {
-        path: 'stats_reset',
-        method: 'POST',
-    };
+    STATS_RESET = { path: 'stats_reset', method: 'POST' };
 
     getStats() {
         const { path, method } = this.GET_STATS;
@@ -676,28 +526,18 @@ class Api {
     }
 
     // Query log
-    GET_QUERY_LOG = {
-        path: 'querylog',
-        method: 'GET',
-    };
+    GET_QUERY_LOG = { path: 'querylog', method: 'GET' };
 
-    QUERY_LOG_CONFIG = {
-        path: 'querylog_config',
-        method: 'POST',
-    };
+    QUERY_LOG_CONFIG = { path: 'querylog_config', method: 'POST' };
 
-    QUERY_LOG_INFO = {
-        path: 'querylog_info',
-        method: 'GET',
-    };
+    QUERY_LOG_INFO = { path: 'querylog_info', method: 'GET' };
 
-    QUERY_LOG_CLEAR = {
-        path: 'querylog_clear',
-        method: 'POST',
-    };
+    QUERY_LOG_CLEAR = { path: 'querylog_clear', method: 'POST' };
 
     getQueryLog(params) {
         const { path, method } = this.GET_QUERY_LOG;
+        // eslint-disable-next-line no-param-reassign
+        params.limit = QUERY_LOGS_PAGE_LIMIT;
         const url = getPathWithQueryString(path, params);
         return this.makeRequest(url, method);
     }
@@ -722,10 +562,7 @@ class Api {
     }
 
     // Login
-    LOGIN = {
-        path: 'login',
-        method: 'POST',
-    };
+    LOGIN = { path: 'login', method: 'POST' };
 
     login(data) {
         const { path, method } = this.LOGIN;
@@ -737,10 +574,7 @@ class Api {
     }
 
     // Profile
-    GET_PROFILE = {
-        path: 'profile',
-        method: 'GET',
-    };
+    GET_PROFILE = { path: 'profile', method: 'GET' };
 
     getProfile() {
         const { path, method } = this.GET_PROFILE;
@@ -748,15 +582,9 @@ class Api {
     }
 
     // DNS config
-    GET_DNS_CONFIG = {
-        path: 'dns_info',
-        method: 'GET',
-    };
+    GET_DNS_CONFIG = { path: 'dns_info', method: 'GET' };
 
-    SET_DNS_CONFIG = {
-        path: 'dns_config',
-        method: 'POST',
-    };
+    SET_DNS_CONFIG = { path: 'dns_config', method: 'POST' };
 
     getDnsConfig() {
         const { path, method } = this.GET_DNS_CONFIG;

client/src/components/App/index.css

@@ -42,13 +42,6 @@ body {
     background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
 }
 
-@media (max-width: 575px) {
-    .container {
-        padding-right: 0;
-        padding-left: 0;
-    }
-}
-
 .modal-body--medium {
     max-height: 20rem;
     overflow-y: scroll;
@@ -65,3 +58,20 @@ body {
 .mw-75 {
     max-width: 75% !important;
 }
+
+.cursor--not-allowed {
+    cursor: not-allowed;
+}
+
+.select--no-warning {
+    margin-bottom: 1.375rem;
+}
+
+.button-action {
+    visibility: hidden;
+}
+
+.logs__row:hover .button-action,
+.button-action--active {
+    visibility: visible;
+}

client/src/components/App/index.js

@@ -26,18 +26,19 @@ import Header from '../Header';
 import { changeLanguage, getDnsStatus } from '../../actions';
 
 import Dashboard from '../../containers/Dashboard';
-import Logs from '../../containers/Logs';
 import SetupGuide from '../../containers/SetupGuide';
 import Settings from '../../containers/Settings';
 import Dns from '../../containers/Dns';
 import Encryption from '../../containers/Encryption';
-import Dhcp from '../../containers/Dhcp';
+import Dhcp from '../Settings/Dhcp';
 import Clients from '../../containers/Clients';
 import DnsBlocklist from '../../containers/DnsBlocklist';
 import DnsAllowlist from '../../containers/DnsAllowlist';
 import DnsRewrites from '../../containers/DnsRewrites';
 import CustomRules from '../../containers/CustomRules';
 import Services from '../Filters/Services';
+import Logs from '../Logs';
+
 
 const ROUTES = [
     {
@@ -96,10 +97,10 @@ const ROUTES = [
 ];
 
 const renderRoute = ({ path, component, exact }, idx) => <Route
-    key={idx}
-    exact={exact}
-    path={path}
-    component={component}
+        key={idx}
+        exact={exact}
+        path={path}
+        component={component}
 />;
 
 const App = () => {
@@ -142,34 +143,28 @@ const App = () => {
         window.location.reload();
     };
 
-    return (
-        <HashRouter hashType="noslash">
-            <>
-                {updateAvailable && <>
-                    <UpdateTopline />
-                    <UpdateOverlay />
-                </>}
-                {!processingEncryption && <EncryptionTopline />}
-                <LoadingBar className="loading-bar" updateTime={1000} />
-                <Header />
-                <div className="container container--wrap pb-5">
-                    {processing && <Loading />}
-                    {!isCoreRunning && (
-                        <div className="row row-cards">
-                            <div className="col-lg-12">
-                                <Status reloadPage={reloadPage} message="dns_start" />
-                                <Loading />
-                            </div>
-                        </div>
-                    )}
-                    {!processing && isCoreRunning && ROUTES.map(renderRoute)}
+    return <HashRouter hashType="noslash">
+        {updateAvailable && <>
+            <UpdateTopline />
+            <UpdateOverlay />
+        </>}
+        {!processingEncryption && <EncryptionTopline />}
+        <LoadingBar className="loading-bar" updateTime={1000} />
+        <Header />
+        <div className="container container--wrap pb-5">
+            {processing && <Loading />}
+            {!isCoreRunning && <div className="row row-cards">
+                <div className="col-lg-12">
+                    <Status reloadPage={reloadPage} message="dns_start" />
+                    <Loading />
                 </div>
-                <Footer />
-                <Toasts />
-                <Icons />
-            </>
-        </HashRouter>
-    );
+            </div>}
+            {!processing && isCoreRunning && ROUTES.map(renderRoute)}
+        </div>
+        <Footer />
+        <Toasts />
+        <Icons />
+    </HashRouter>;
 };
 
 renderRoute.propTypes = {

client/src/components/Dashboard/Clients.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
 import { getPercent, getIpMatchListStatus, sortIp } from '../../helpers/helpers';
-import { IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
-import { formatClientCell } from '../../helpers/formatClientCell';
+import { BLOCK_ACTIONS, IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
+import { toggleClientBlock } from '../../actions/access';
+import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
 
 const getClientsPercentColor = (percent) => {
     if (percent > 50) {
@@ -20,126 +23,132 @@ const getClientsPercentColor = (percent) => {
     return STATUS_COLORS.red;
 };
 
-const countCell = (dnsQueries) => function cell(row) {
-    const { value } = row;
-    const percent = getPercent(dnsQueries, value);
+const CountCell = (row) => {
+    const { value, original: { ip } } = row;
+    const numDnsQueries = useSelector((state) => state.stats.numDnsQueries, shallowEqual);
+
+    const percent = getPercent(numDnsQueries, value);
     const percentColor = getClientsPercentColor(percent);
 
-    return <Cell value={value} percent={percent} color={percentColor} search={row.original.ip} />;
+    return <Cell value={value} percent={percent} color={percentColor} search={ip} />;
 };
 
-const renderBlockingButton = (ipMatchListStatus, ip, handleClick, processing) => {
-    const buttonProps = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND
-        ? {
-            className: 'btn-outline-danger',
-            text: 'block',
-            type: 'block',
+const renderBlockingButton = (ip) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const processingSet = useSelector((state) => state.access.processingSet);
+    const disallowed_clients = useSelector(
+        (state) => state.access.disallowed_clients, shallowEqual,
+    );
+
+    const ipMatchListStatus = getIpMatchListStatus(ip, disallowed_clients);
+
+    if (ipMatchListStatus === IP_MATCH_LIST_STATUS.CIDR) {
+        return null;
+    }
+
+    const isNotFound = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND;
+    const type = isNotFound ? BLOCK_ACTIONS.BLOCK : BLOCK_ACTIONS.UNBLOCK;
+    const text = type;
+
+    const buttonClass = classNames('button-action button-action--main', {
+        'button-action--unblock': !isNotFound,
+    });
+
+    const toggleClientStatus = (type, ip) => {
+        const confirmMessage = type === BLOCK_ACTIONS.BLOCK
+            ? `${t('adg_will_drop_dns_queries')} ${t('client_confirm_block', { ip })}`
+            : t('client_confirm_unblock', { ip });
+
+        if (window.confirm(confirmMessage)) {
+            dispatch(toggleClientBlock(type, ip));
         }
-        : {
-            className: 'btn-outline-secondary',
-            text: 'unblock',
-            type: 'unblock',
-        };
+    };
 
-    return (
-        <div className="table__action button__action">
-            <button
-                type="button"
-                className={`btn btn-sm ${buttonProps.className}`}
-                onClick={() => handleClick(buttonProps.type, ip)}
-                disabled={processing}
-            >
-                <Trans>{buttonProps.text}</Trans>
-            </button>
-        </div>
-    );
+    const onClick = () => toggleClientStatus(type, ip);
+
+    return <div className="table__action pl-4">
+                <button
+                        type="button"
+                        className={buttonClass}
+                        onClick={onClick}
+                        disabled={processingSet}
+                >
+                    <Trans>{text}</Trans>
+                </button>
+            </div>;
 };
 
-const clientCell = (t, toggleClientStatus, processing, disallowedClients) => function cell(row) {
-    const { value } = row;
-    const ipMatchListStatus = getIpMatchListStatus(value, disallowedClients);
+const ClientCell = (row) => {
+    const { value, original: { info } } = row;
 
-    return (
-        <>
-            <div className="logs__row logs__row--overflow logs__row--column">
-                {formatClientCell(row, true, false)}
-            </div>
-            {ipMatchListStatus !== IP_MATCH_LIST_STATUS.CIDR
-            && renderBlockingButton(ipMatchListStatus, value, toggleClientStatus, processing)}
-        </>
-    );
+    return <>
+        <div className="logs__row logs__row--overflow logs__row--column d-flex align-items-center">
+            {renderFormattedClientCell(value, info, true)}
+            {renderBlockingButton(value)}
+        </div>
+    </>;
 };
 
 const Clients = ({
-    t,
     refreshButton,
-    topClients,
     subtitle,
-    dnsQueries,
-    toggleClientStatus,
-    processingAccessSet,
-    disallowedClients,
-}) => (
-    <Card
-        title={t('top_clients')}
-        subtitle={subtitle}
-        bodyType="card-table"
-        refresh={refreshButton}
+}) => {
+    const { t } = useTranslation();
+    const topClients = useSelector((state) => state.stats.topClients, shallowEqual);
+    const disallowedClients = useSelector((state) => state.access.disallowed_clients, shallowEqual);
+
+    return <Card
+            title={t('top_clients')}
+            subtitle={subtitle}
+            bodyType="card-table"
+            refresh={refreshButton}
     >
         <ReactTable
-            data={topClients.map(({
-                name: ip, count, info, blocked,
-            }) => ({
-                ip,
-                count,
-                info,
-                blocked,
-            }))}
-            columns={[
-                {
-                    Header: 'IP',
-                    accessor: 'ip',
-                    sortMethod: sortIp,
-                    Cell: clientCell(t, toggleClientStatus, processingAccessSet, disallowedClients),
-                },
-                {
-                    Header: <Trans>requests_count</Trans>,
-                    accessor: 'count',
-                    minWidth: 180,
-                    maxWidth: 200,
-                    Cell: countCell(dnsQueries),
-                },
-            ]}
-            showPagination={false}
-            noDataText={t('no_clients_found')}
-            minRows={6}
-            defaultPageSize={100}
-            className="-highlight card-table-overflow--limited clients__table"
-            getTrProps={(_state, rowInfo) => {
-                if (!rowInfo) {
-                    return {};
-                }
+                data={topClients.map(({
+                    name: ip, count, info, blocked,
+                }) => ({
+                    ip,
+                    count,
+                    info,
+                    blocked,
+                }))}
+                columns={[
+                    {
+                        Header: 'IP',
+                        accessor: 'ip',
+                        sortMethod: sortIp,
+                        Cell: ClientCell,
+                    },
+                    {
+                        Header: <Trans>requests_count</Trans>,
+                        accessor: 'count',
+                        minWidth: 180,
+                        maxWidth: 200,
+                        Cell: CountCell,
+                    },
+                ]}
+                showPagination={false}
+                noDataText={t('no_clients_found')}
+                minRows={6}
+                defaultPageSize={100}
+                className="-highlight card-table-overflow--limited clients__table"
+                getTrProps={(_state, rowInfo) => {
+                    if (!rowInfo) {
+                        return {};
+                    }
 
-                const { ip } = rowInfo.original;
+                    const { ip } = rowInfo.original;
 
-                return getIpMatchListStatus(ip, disallowedClients)
-                === IP_MATCH_LIST_STATUS.NOT_FOUND ? {} : { className: 'red' };
-            }}
+                    return getIpMatchListStatus(ip, disallowedClients) === IP_MATCH_LIST_STATUS.NOT_FOUND ? {} : { className: 'red' };
+                }}
         />
-    </Card>
-);
-
-Clients.propTypes = {
-    topClients: PropTypes.array.isRequired,
-    dnsQueries: PropTypes.number.isRequired,
-    refreshButton: PropTypes.node.isRequired,
-    clients: PropTypes.array.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    subtitle: PropTypes.string.isRequired,
-    t: PropTypes.func.isRequired,
-    toggleClientStatus: PropTypes.func.isRequired,
-    processingAccessSet: PropTypes.bool.isRequired,
-    disallowedClients: PropTypes.string.isRequired,
+    </Card>;
 };
 
-export default withTranslation()(Clients);
+Clients.propTypes = {
+    refreshButton: PropTypes.node.isRequired,
+    subtitle: PropTypes.string.isRequired,
+};
+
+export default Clients;

client/src/components/Dashboard/Counters.js

@@ -47,32 +47,32 @@ const Counters = ({ refreshButton, subtitle }) => {
             label: 'dns_query',
             count: numDnsQueries,
             tooltipTitle: interval === 1 ? 'number_of_dns_query_24_hours' : t('number_of_dns_query_days', { count: interval }),
-            response_status: RESPONSE_FILTER.ALL.query,
+            response_status: RESPONSE_FILTER.ALL.QUERY,
         },
         {
             label: 'blocked_by',
             count: numBlockedFiltering,
             tooltipTitle: 'number_of_dns_query_blocked_24_hours',
-            response_status: RESPONSE_FILTER.BLOCKED.query,
+            response_status: RESPONSE_FILTER.BLOCKED.QUERY,
             translationComponents: [<a href="#filters" key="0">link</a>],
         },
         {
             label: 'stats_malware_phishing',
             count: numReplacedSafebrowsing,
             tooltipTitle: 'number_of_dns_query_blocked_24_hours_by_sec',
-            response_status: RESPONSE_FILTER.BLOCKED_THREATS.query,
+            response_status: RESPONSE_FILTER.BLOCKED_THREATS.QUERY,
         },
         {
             label: 'stats_adult',
             count: numReplacedParental,
             tooltipTitle: 'number_of_dns_query_blocked_24_hours_adult',
-            response_status: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.query,
+            response_status: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY,
         },
         {
             label: 'enforced_save_search',
             count: numReplacedSafesearch,
             tooltipTitle: 'number_of_dns_query_to_safe_search',
-            response_status: RESPONSE_FILTER.SAFE_SEARCH.query,
+            response_status: RESPONSE_FILTER.SAFE_SEARCH.QUERY,
         },
         {
             label: 'average_processing_time',

client/src/components/Dashboard/index.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import Statistics from './Statistics';
 import Counters from './Counters';
@@ -10,147 +10,133 @@ import BlockedDomains from './BlockedDomains';
 
 import PageTitle from '../ui/PageTitle';
 import Loading from '../ui/Loading';
-import { BLOCK_ACTIONS } from '../../helpers/constants';
 import './Dashboard.css';
 
-class Dashboard extends Component {
-    componentDidMount() {
-        this.getAllStats();
-    }
+const Dashboard = ({
+    getAccessList,
+    getStats,
+    getStatsConfig,
+    dashboard,
+    toggleProtection,
+    stats,
+    access,
+}) => {
+    const { t } = useTranslation();
 
-    getAllStats = () => {
-        this.props.getAccessList();
-        this.props.getStats();
-        this.props.getStatsConfig();
+    const getAllStats = () => {
+        getAccessList();
+        getStats();
+        getStatsConfig();
     };
 
-    getToggleFilteringButton = () => {
-        const { protectionEnabled, processingProtection } = this.props.dashboard;
+    useEffect(() => {
+        getAllStats();
+    }, []);
+
+    const getToggleFilteringButton = () => {
+        const { protectionEnabled, processingProtection } = dashboard;
         const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
         const buttonClass = protectionEnabled ? 'btn-gray' : 'btn-success';
 
-        return (
-            <button
+        return <button
                 type="button"
                 className={`btn btn-sm mr-2 ${buttonClass}`}
-                onClick={() => this.props.toggleProtection(protectionEnabled)}
+                onClick={() => toggleProtection(protectionEnabled)}
                 disabled={processingProtection}
-            >
-                <Trans>{buttonText}</Trans>
-            </button>
-        );
+        >
+            <Trans>{buttonText}</Trans>
+        </button>;
     };
 
-    toggleClientStatus = (type, ip) => {
-        const confirmMessage = type === BLOCK_ACTIONS.BLOCK ? 'client_confirm_block' : 'client_confirm_unblock';
+    const refreshButton = <button
+            type="button"
+            className="btn btn-icon btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <svg className="icons">
+            <use xlinkHref="#refresh" />
+        </svg>
+    </button>;
 
-        if (window.confirm(this.props.t(confirmMessage, { ip }))) {
-            this.props.toggleClientBlock(type, ip);
-        }
-    };
+    const subtitle = stats.interval === 1
+        ? t('for_last_24_hours')
+        : t('for_last_days', { count: stats.interval });
 
-    render() {
-        const {
-            dashboard, stats, access, t,
-        } = this.props;
-        const statsProcessing = stats.processingStats
+    const refreshFullButton = <button
+            type="button"
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => getAllStats()}
+    >
+        <Trans>refresh_statics</Trans>
+    </button>;
+
+    const statsProcessing = stats.processingStats
             || stats.processingGetConfig
             || access.processing;
 
-        const subtitle = stats.interval === 1
-            ? t('for_last_24_hours')
-            : t('for_last_days', { count: stats.interval });
+    return <>
+        <PageTitle title={t('dashboard')}>
+            <div className="page-title__actions">
+                {getToggleFilteringButton()}
+                {refreshFullButton}
+            </div>
+        </PageTitle>
+        {statsProcessing && <Loading />}
+        {!statsProcessing && <div className="row row-cards">
+            <div className="col-lg-12">
+                <Statistics
+                        interval={stats.interval}
+                        dnsQueries={stats.dnsQueries}
+                        blockedFiltering={stats.blockedFiltering}
+                        replacedSafebrowsing={stats.replacedSafebrowsing}
+                        replacedParental={stats.replacedParental}
+                        numDnsQueries={stats.numDnsQueries}
+                        numBlockedFiltering={stats.numBlockedFiltering}
+                        numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        numReplacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Counters
+                        subtitle={subtitle}
 
-        const refreshFullButton = (
-            <button
-                type="button"
-                className="btn btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <Trans>refresh_statics</Trans>
-            </button>
-        );
-
-        const refreshButton = (
-            <button
-                type="button"
-                className="btn btn-icon btn-outline-primary btn-sm"
-                onClick={() => this.getAllStats()}
-            >
-                <svg className="icons">
-                    <use xlinkHref="#refresh" />
-                </svg>
-            </button>
-        );
-
-        return (
-            <Fragment>
-                <PageTitle title={t('dashboard')}>
-                    <div className="page-title__actions">
-                        {this.getToggleFilteringButton()}
-                        {refreshFullButton}
-                    </div>
-                </PageTitle>
-                {statsProcessing && <Loading />}
-                {!statsProcessing && (
-                    <div className="row row-cards">
-                        <div className="col-lg-12">
-                            <Statistics
-                                interval={stats.interval}
-                                dnsQueries={stats.dnsQueries}
-                                blockedFiltering={stats.blockedFiltering}
-                                replacedSafebrowsing={stats.replacedSafebrowsing}
-                                replacedParental={stats.replacedParental}
-                                numDnsQueries={stats.numDnsQueries}
-                                numBlockedFiltering={stats.numBlockedFiltering}
-                                numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                numReplacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Counters
-                                subtitle={subtitle}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <Clients
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topClients={stats.topClients}
-                                clients={dashboard.clients}
-                                autoClients={dashboard.autoClients}
-                                refreshButton={refreshButton}
-                                toggleClientStatus={this.toggleClientStatus}
-                                processingAccessSet={access.processingSet}
-                                disallowedClients={access.disallowed_clients}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <QueriedDomains
-                                subtitle={subtitle}
-                                dnsQueries={stats.numDnsQueries}
-                                topQueriedDomains={stats.topQueriedDomains}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                        <div className="col-lg-6">
-                            <BlockedDomains
-                                subtitle={subtitle}
-                                topBlockedDomains={stats.topBlockedDomains}
-                                blockedFiltering={stats.numBlockedFiltering}
-                                replacedSafebrowsing={stats.numReplacedSafebrowsing}
-                                replacedParental={stats.numReplacedParental}
-                                refreshButton={refreshButton}
-                            />
-                        </div>
-                    </div>
-                )}
-            </Fragment>
-        );
-    }
-}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <Clients
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topClients={stats.topClients}
+                        clients={dashboard.clients}
+                        autoClients={dashboard.autoClients}
+                        refreshButton={refreshButton}
+                        processingAccessSet={access.processingSet}
+                        disallowedClients={access.disallowed_clients}
+                />
+            </div>
+            <div className="col-lg-6">
+                <QueriedDomains
+                        subtitle={subtitle}
+                        dnsQueries={stats.numDnsQueries}
+                        topQueriedDomains={stats.topQueriedDomains}
+                        refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <BlockedDomains
+                        subtitle={subtitle}
+                        topBlockedDomains={stats.topBlockedDomains}
+                        blockedFiltering={stats.numBlockedFiltering}
+                        replacedSafebrowsing={stats.numReplacedSafebrowsing}
+                        replacedParental={stats.numReplacedParental}
+                        refreshButton={refreshButton}
+                />
+            </div>
+        </div>}
+    </>;
+};
 
 Dashboard.propTypes = {
     dashboard: PropTypes.object.isRequired,
@@ -160,9 +146,7 @@ Dashboard.propTypes = {
     getStatsConfig: PropTypes.func.isRequired,
     toggleProtection: PropTypes.func.isRequired,
     getClients: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-    toggleClientBlock: PropTypes.func.isRequired,
     getAccessList: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Dashboard);
+export default Dashboard;

client/src/components/Filters/Check/Info.js

@@ -11,25 +11,10 @@ import {
     checkWhiteList,
     checkSafeSearch,
     checkSafeBrowsing,
-    checkParental,
+    checkParental, getFilterName,
 } from '../../../helpers/helpers';
 import { FILTERED } from '../../../helpers/constants';
 
-const getFilterName = (id, filters, whitelistFilters, t) => {
-    if (id === 0) {
-        return t('filtered_custom_rules');
-    }
-
-    const filter = filters.find((filter) => filter.id === id)
-        || whitelistFilters.find((filter) => filter.id === id);
-
-    if (filter && filter.name) {
-        return t('query_log_filtered', { filter: filter.name });
-    }
-
-    return '';
-};
-
 const getTitle = (reason, filterName, t, onlyFiltered) => {
     if (checkNotFilteredNotFound(reason)) {
         return t('check_not_found');
@@ -101,7 +86,12 @@ const Info = ({
     ip_addrs,
     t,
 }) => {
-    const filterName = getFilterName(filter_id, filters, whitelistFilters, t);
+    const filterName = getFilterName(filters,
+        whitelistFilters,
+        filter_id,
+        'filtered_custom_rules',
+        (filter) => (filter?.name ? t('query_log_filtered', { filter: filter.name }) : ''));
+
     const onlyFiltered = checkSafeSearch(reason)
         || checkSafeBrowsing(reason)
         || checkParental(reason);

client/src/components/Filters/Form.js

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import classNames from 'classnames';
 import { validatePath, validateRequiredValue } from '../../helpers/validators';
-import { renderInputField, renderSelectField } from '../../helpers/form';
+import { renderCheckboxField, renderInputField } from '../../helpers/form';
 import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
 
 const getIconsData = (homepage, source) => ([
@@ -60,7 +60,7 @@ const renderFilters = ({ categories, filters }, selectedSources, t) => Object.ke
                     <Field
                         name={`${filter.id}`}
                         type="checkbox"
-                        component={renderSelectField}
+                        component={renderCheckboxField}
                         placeholder={t(name)}
                         disabled={isSelected}
                         checked={isSelected}
@@ -148,13 +148,13 @@ const Form = (props) => {
             >
                 {t('cancel_btn')}
             </button>
-            <button
+            {modalType !== MODAL_TYPE.SELECT_MODAL_TYPE && <button
                 type="submit"
                 className="btn btn-success"
                 disabled={processingAddFilter || processingConfigFilter}
             >
                 {t('save_btn')}
-            </button>
+            </button>}
         </div>
     </form>;
 };

client/src/components/Filters/Table.js

@@ -48,7 +48,7 @@ class Table extends Component {
             accessor: 'url',
             minWidth: 200,
             Cell: ({ value }) => (
-                <div className="logs__row o-hidden">
+                <div className="logs__row">
                     {isValidAbsolutePath(value) ? value
                         : <a
                             href={value}

client/src/components/Header/Header.css

@@ -164,6 +164,10 @@
         color: #9aa0ac;
     }
 
+    .nav-icon--white {
+        color: #fff;
+    }
+
     .header-brand-img {
         height: 32px;
     }

client/src/components/Header/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { shallowEqual, useSelector } from 'react-redux';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import Menu from './Menu';
 import logo from '../ui/svg/logo.svg';
@@ -9,6 +9,7 @@ import './Header.css';
 
 const Header = () => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { t } = useTranslation();
 
     const {
         protectionEnabled,
@@ -33,45 +34,42 @@ const Header = () => {
         'badge-danger': !protectionEnabled,
     });
 
-    return (
-        <div className="header">
-            <div className="header__container">
-                <div className="header__row">
-                    <div
-                        className="header-toggler d-lg-none ml-lg-0 collapsed"
-                        onClick={toggleMenuOpen}
-                    >
-                        <span className="header-toggler-icon" />
+    return <div className="header">
+        <div className="header__container">
+            <div className="header__row">
+                <div
+                    className="header-toggler d-lg-none ml-lg-0 collapsed"
+                    onClick={toggleMenuOpen}
+                >
+                    <span className="header-toggler-icon" />
+                </div>
+                <div className="header__column">
+                    <div className="d-flex align-items-center">
+                        <Link to="/" className="nav-link pl-0 pr-1">
+                            <img src={logo} alt="" className="header-brand-img" />
+                        </Link>
+                        {!processing && isCoreRunning
+                        && <span className={badgeClass}
+                        >{t(protectionEnabled ? 'on' : 'off')}
+                        </span>}
                     </div>
-                    <div className="header__column">
-                        <div className="d-flex align-items-center">
-                            <Link to="/" className="nav-link pl-0 pr-1">
-                                <img src={logo} alt="" className="header-brand-img" />
-                            </Link>
-                            {!processing && isCoreRunning && (
-                                <span className={badgeClass}>
-                                        <Trans>{protectionEnabled ? 'on' : 'off'}</Trans>
-                                    </span>
-                            )}
-                        </div>
-                    </div>
-                    <Menu
-                        pathname={pathname}
-                        isMenuOpen={isMenuOpen}
-                        closeMenu={closeMenu}
-                    />
-                    <div className="header__column">
-                        <div className="header__right">
-                            {!processingProfile && name
-                            && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
-                                <Trans>sign_out</Trans>
-                            </a>}
-                        </div>
+                </div>
+                <Menu
+                    pathname={pathname}
+                    isMenuOpen={isMenuOpen}
+                    closeMenu={closeMenu}
+                />
+                <div className="header__column">
+                    <div className="header__right">
+                        {!processingProfile && name
+                        && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
+                            {t('sign_out')}
+                        </a>}
                     </div>
                 </div>
             </div>
         </div>
-    );
+    </div>;
 };
 
 export default Header;

client/src/components/Logs/Cells/ClientCell.js

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { nanoid } from 'nanoid';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import propTypes from 'prop-types';
+import { checkFiltered, getBlockingClientName } from '../../../helpers/helpers';
+import { BLOCK_ACTIONS } from '../../../helpers/constants';
+import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
+import IconTooltip from './IconTooltip';
+import { renderFormattedClientCell } from '../../../helpers/renderFormattedClientCell';
+import { toggleClientBlock } from '../../../actions/access';
+import { getBlockClientInfo } from './helpers';
+
+const ClientCell = ({
+    client,
+    domain,
+    info,
+    info: { name, whois_info },
+    reason,
+}) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
+    const processingRules = useSelector((state) => state.filtering.processingRules);
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+    const [isOptionsOpened, setOptionsOpened] = useState(false);
+
+    const disallowed_clients = useSelector(
+        (state) => state.access.disallowed_clients,
+        shallowEqual,
+    );
+
+    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
+    const source = autoClient?.source;
+    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
+
+    const id = nanoid();
+
+    const data = {
+        address: client,
+        name,
+        country: whois_info?.country,
+        city: whois_info?.city,
+        network: whois_info?.orgname,
+        source_label: source,
+    };
+
+    const processedData = Object.entries(data);
+
+    const isFiltered = checkFiltered(reason);
+
+    const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
+        'mt-2': isDetailed && !name && !whoisAvailable,
+        'white-space--nowrap': isDetailed,
+    });
+
+    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
+        'my-3': isDetailed,
+    });
+
+    const renderBlockingButton = (isFiltered, domain) => {
+        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
+        const clients = useSelector((state) => state.dashboard.clients);
+
+        const {
+            confirmMessage,
+            buttonKey: blockingClientKey,
+            type,
+        } = getBlockClientInfo(client, disallowed_clients);
+
+        const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
+        const clientNameBlockingFor = getBlockingClientName(clients, client);
+
+        const BUTTON_OPTIONS_TO_ACTION_MAP = {
+            [blockingForClientKey]: () => {
+                dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
+            },
+            [blockingClientKey]: () => {
+                const message = `${type === BLOCK_ACTIONS.BLOCK ? t('adg_will_drop_dns_queries') : ''} ${t(confirmMessage, { ip: client })}`;
+                if (window.confirm(message)) {
+                    dispatch(toggleClientBlock(type, client));
+                }
+            },
+        };
+
+        const onClick = () => dispatch(toggleBlocking(buttonType, domain));
+
+        const getOptions = (optionToActionMap) => {
+            const options = Object.entries(optionToActionMap);
+            if (options.length === 0) {
+                return null;
+            }
+            return <>{options
+                .map(([name, onClick]) => <div
+                    key={name}
+                    className="button-action--arrow-option px-4 py-2"
+                    onClick={onClick}
+            >{t(name)}
+            </div>)}</>;
+        };
+
+        const content = getOptions(BUTTON_OPTIONS_TO_ACTION_MAP);
+
+        const buttonClass = classNames('button-action button-action--main', {
+            'button-action--unblock': isFiltered,
+            'button-action--with-options': content,
+            'button-action--active': isOptionsOpened,
+        });
+
+        const buttonArrowClass = classNames('button-action button-action--arrow', {
+            'button-action--unblock': isFiltered,
+            'button-action--active': isOptionsOpened,
+        });
+
+        const containerClass = classNames('button-action__container', {
+            'button-action__container--detailed': isDetailed,
+        });
+
+        return <div className={containerClass}>
+            <button type="button"
+                    className={buttonClass}
+                    onClick={onClick}
+                    disabled={processingRules}
+            >
+                {t(buttonType)}
+            </button>
+            {content && <button className={buttonArrowClass} disabled={processingRules}>
+                <IconTooltip
+                        className='h-100'
+                        tooltipClass='button-action--arrow-option-container'
+                        xlinkHref='chevron-down'
+                        triggerClass='button-action--icon'
+                        content={content} placement="bottom-end" trigger="click"
+                        onVisibilityChange={setOptionsOpened}
+                />
+            </button>}
+        </div>;
+    };
+
+    return <div className="o-hidden h-100 logs__cell logs__cell--client" role="gridcell">
+        <IconTooltip className={hintClass} columnClass='grid grid--limited' tooltipClass='px-5 pb-5 pt-4 mw-75'
+                     xlinkHref='question' contentItemClass="contentItemClass" title="client_details"
+                     content={processedData} placement="bottom" />
+        <div className={nameClass}>
+            <div data-tip={true} data-for={id}>
+                {renderFormattedClientCell(client, info, isDetailed, true)}
+            </div>
+            {isDetailed && name && !whoisAvailable
+            && <div className="detailed-info d-none d-sm-block logs__text"
+                    title={name}>{name}</div>}
+        </div>
+        {renderBlockingButton(isFiltered, domain)}
+    </div>;
+};
+
+ClientCell.propTypes = {
+    client: propTypes.string.isRequired,
+    domain: propTypes.string.isRequired,
+    info: propTypes.oneOfType([
+        propTypes.string,
+        propTypes.shape({
+            name: propTypes.string.isRequired,
+            whois_info: propTypes.shape({
+                country: propTypes.string,
+                city: propTypes.string,
+                orgname: propTypes.string,
+            }),
+        }),
+    ]),
+    reason: propTypes.string.isRequired,
+};
+
+export default ClientCell;

client/src/components/Logs/Cells/DateCell.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import propTypes from 'prop-types';
+import { formatDateTime, formatTime } from '../../../helpers/helpers';
+import { DEFAULT_SHORT_DATE_FORMAT_OPTIONS, DEFAULT_TIME_FORMAT } from '../../../helpers/constants';
+
+const DateCell = ({ time }) => {
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    if (!time) {
+        return '–';
+    }
+
+    const formattedTime = formatTime(time, DEFAULT_TIME_FORMAT);
+    const formattedDate = formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS);
+
+    return <div className="logs__cell logs__cell logs__cell--date text-truncate" role="gridcell">
+        <div className="logs__time" title={formattedTime}>{formattedTime}</div>
+        {isDetailed
+        && <div className="detailed-info d-none d-sm-block text-truncate"
+                title={formattedDate}>{formattedDate}</div>}
+    </div>;
+};
+
+DateCell.propTypes = {
+    time: propTypes.string.isRequired,
+};
+
+export default DateCell;

client/src/components/Logs/Cells/DomainCell.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import getIconTooltip from './getIconTooltip';
+import propTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import {
     DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
     LONG_TIME_FORMAT,
@@ -9,15 +10,20 @@ import {
 } from '../../../helpers/constants';
 import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
 import { getSourceData } from '../../../helpers/trackers/trackers';
+import IconTooltip from './IconTooltip';
 
-const getDomainCell = (props) => {
-    const {
-        row, t, isDetailed, dnssec_enabled,
-    } = props;
-
-    const {
-        tracker, type, answer_dnssec, client_proto, domain, time,
-    } = row.original;
+const DomainCell = ({
+    answer_dnssec,
+    service_name,
+    client_proto,
+    domain,
+    time,
+    tracker,
+    type,
+}) => {
+    const { t } = useTranslation();
+    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
 
     const hasTracker = !!tracker;
 
@@ -44,14 +50,18 @@ const getDomainCell = (props) => {
         protocol,
     };
 
+    if (service_name) {
+        requestDetailsObj.check_service = service_name;
+    }
+
     const sourceData = getSourceData(tracker);
 
     const knownTrackerDataObj = {
         name_table_header: tracker?.name,
         category_label: hasTracker && captitalizeWords(tracker.category),
         source_label: sourceData
-            && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
-                  className="link--green">{sourceData.name}</a>,
+                && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
+                      className="link--green">{sourceData.name}</a>,
     };
 
     const renderGrid = (content, idx) => {
@@ -72,51 +82,43 @@ const getDomainCell = (props) => {
 
     const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;
 
-    const trackerHint = getIconTooltip({
-        className: privacyIconClass,
-        tooltipClass: 'pt-4 pb-5 px-5 mw-75',
-        xlinkHref: 'privacy',
-        contentItemClass: 'key-colon',
-        renderContent,
-        place: 'bottom',
-    });
-
-    const valueClass = classNames('w-100', {
+    const valueClass = classNames('w-100 text-truncate', {
         'px-2 d-flex justify-content-center flex-column': isDetailed,
     });
 
     const details = [ip, protocol].filter(Boolean)
         .join(', ');
 
-    return (
-        <div className="logs__row o-hidden">
-            {dnssec_enabled && getIconTooltip({
-                className: lockIconClass,
-                tooltipClass: 'py-4 px-5 pb-45',
-                canShowTooltip: answer_dnssec,
-                xlinkHref: 'lock',
-                columnClass: 'w-100',
-                content: 'validated_with_dnssec',
-                placement: 'bottom',
-            })}
-            {trackerHint}
-            <div className={valueClass}>
-                <div className="text-truncate" title={domain}>{domain}</div>
-                {details && isDetailed
-                && <div className="detailed-info d-none d-sm-block text-truncate"
-                        title={details}>{details}</div>}
-            </div>
+    return <div className="d-flex o-hidden logs__cell logs__cell logs__cell--domain" role="gridcell">
+        {dnssec_enabled && <IconTooltip
+                className={lockIconClass}
+                tooltipClass='py-4 px-5 pb-45'
+                canShowTooltip={!!answer_dnssec}
+                xlinkHref='lock'
+                columnClass='w-100'
+                content='validated_with_dnssec'
+                placement='bottom'
+        />}
+        <IconTooltip className={privacyIconClass} tooltipClass='pt-4 pb-5 px-5 mw-75'
+                     xlinkHref='privacy' contentItemClass='key-colon' renderContent={renderContent}
+                     place='bottom' />
+        <div className={valueClass}>
+            <div className="text-truncate" title={domain}>{service_name || domain}</div>
+            {details && isDetailed
+            && <div className="detailed-info d-none d-sm-block text-truncate"
+                    title={details}>{details}</div>}
         </div>
-    );
+    </div>;
 };
 
-getDomainCell.propTypes = {
-    row: PropTypes.object.isRequired,
-    t: PropTypes.func.isRequired,
-    isDetailed: PropTypes.bool.isRequired,
-    toggleBlocking: PropTypes.func.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    dnssec_enabled: PropTypes.bool.isRequired,
+DomainCell.propTypes = {
+    answer_dnssec: propTypes.bool.isRequired,
+    client_proto: propTypes.string.isRequired,
+    domain: propTypes.string.isRequired,
+    time: propTypes.string.isRequired,
+    type: propTypes.string.isRequired,
+    service_name: propTypes.string,
+    tracker: propTypes.object,
 };
 
-export default getDomainCell;
+export default DomainCell;

client/src/components/Logs/Cells/Header.js

@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import { toggleDetailedLogs } from '../../../actions/queryLogs';
+import HeaderCell from './HeaderCell';
+
+const Header = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+    const disableDetailedMode = () => dispatch(toggleDetailedLogs(false));
+    const enableDetailedMode = () => dispatch(toggleDetailedLogs(true));
+
+    const HEADERS = [
+        {
+            className: 'logs__cell--date',
+            content: 'time_table_header',
+        },
+        {
+            className: 'logs__cell--domain',
+            content: 'request_table_header',
+        },
+        {
+            className: 'logs__cell--response',
+            content: 'response_table_header',
+        },
+        {
+            className: 'logs__cell--client',
+            content: <>
+                {t('client_table_header')}
+                {<span>
+                    <svg className={classNames('icons icon--24 icon--green cursor--pointer mr-2', { 'icon--selected': !isDetailed })}
+                         onClick={disableDetailedMode}
+                    >
+                    <title>{t('compact')}</title>
+                    <use xlinkHref='#list' /></svg>
+                <svg className={classNames('icons icon--24 icon--green cursor--pointer', { 'icon--selected': isDetailed })}
+                     onClick={enableDetailedMode}
+                >
+                    <title>{t('default')}</title>
+                    <use xlinkHref='#detailed_list' />
+                    </svg>
+            </span>}
+            </>,
+        },
+    ];
+
+    return <div className="logs__cell--header__container px-5" role="row">
+        {HEADERS.map(HeaderCell)}
+    </div>;
+};
+
+export default Header;

client/src/components/Logs/Cells/HeaderCell.js

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import propTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const HeaderCell = ({ content, className }, idx) => {
+    const { t } = useTranslation();
+    return <div
+            key={idx}
+            className={classNames('logs__cell--header__item logs__cell logs__text--bold', className)}
+            role="columnheader"
+    >
+        {typeof content === 'string' ? t(content) : content}
+    </div>;
+};
+
+HeaderCell.propTypes = {
+    content: propTypes.oneOfType([propTypes.string, propTypes.element]).isRequired,
+    className: propTypes.string,
+};
+
+export default HeaderCell;

client/src/components/Logs/Cells/IconTooltip.js

@@ -6,17 +6,21 @@ import { processContent } from '../../../helpers/helpers';
 import Tooltip from '../../ui/Tooltip';
 import 'react-popper-tooltip/dist/styles.css';
 import './IconTooltip.css';
+import { SHOW_TOOLTIP_DELAY } from '../../../helpers/constants';
 
-const getIconTooltip = ({
+const IconTooltip = ({
     className,
     contentItemClass,
     columnClass,
+    triggerClass,
     canShowTooltip = true,
     xlinkHref,
     title,
     placement,
     tooltipClass,
     content,
+    trigger,
+    onVisibilityChange,
     renderContent = content ? React.Children.map(
         processContent(content),
         (item, idx) => <div key={idx} className={contentItemClass}>
@@ -36,6 +40,10 @@ const getIconTooltip = ({
         className={tooltipClassName}
         content={tooltipContent}
         placement={placement}
+        triggerClass={triggerClass}
+        trigger={trigger}
+        onVisibilityChange={onVisibilityChange}
+        delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
     >
         {xlinkHref && <svg className={className}>
             <use xlinkHref={`#${xlinkHref}`} />
@@ -43,20 +51,20 @@ const getIconTooltip = ({
     </Tooltip>;
 };
 
-getIconTooltip.propTypes = {
+IconTooltip.propTypes = {
     className: PropTypes.string,
+    trigger: PropTypes.string,
+    triggerClass: PropTypes.string,
     contentItemClass: PropTypes.string,
     columnClass: PropTypes.string,
     tooltipClass: PropTypes.string,
     title: PropTypes.string,
     placement: PropTypes.string,
-    canShowTooltip: PropTypes.string,
+    canShowTooltip: PropTypes.bool,
     xlinkHref: PropTypes.string,
-    content: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array,
-    ]),
+    content: PropTypes.node,
     renderContent: PropTypes.arrayOf(PropTypes.element),
+    onVisibilityChange: PropTypes.func,
 };
 
-export default getIconTooltip;
+export default IconTooltip;

client/src/components/Logs/Cells/ResponseCell.js

@@ -0,0 +1,101 @@
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import propTypes from 'prop-types';
+import { formatElapsedMs, getFilterName } from '../../../helpers/helpers';
+import { FILTERED_STATUS, FILTERED_STATUS_TO_META_MAP } from '../../../helpers/constants';
+import IconTooltip from './IconTooltip';
+
+const ResponseCell = ({
+    elapsedMs,
+    originalResponse,
+    reason,
+    response,
+    status,
+    upstream,
+    rule,
+    filterId,
+}) => {
+    const { t } = useTranslation();
+    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
+    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
+
+    const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
+            || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+
+    const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
+
+    const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
+    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
+    const filter = getFilterName(filters, whitelistFilters, filterId);
+
+    const renderResponses = (responseArr) => {
+        if (!responseArr || responseArr.length === 0) {
+            return '';
+        }
+
+        return <div>{responseArr.map((response) => {
+            const className = classNames('white-space--nowrap', {
+                'overflow-break': response.length > 100,
+            });
+
+            return <div key={response} className={className}>{`${response}\n`}</div>;
+        })}</div>;
+    };
+
+    const COMMON_CONTENT = {
+        encryption_status: boldStatusLabel,
+        install_settings_dns: upstream,
+        elapsed: formattedElapsedMs,
+        response_code: status,
+        filter,
+        rule_label: rule,
+        response_table_header: renderResponses(response),
+        original_response: renderResponses(originalResponse),
+    };
+
+    const content = rule
+        ? Object.entries(COMMON_CONTENT)
+        : Object.entries({
+            ...COMMON_CONTENT,
+            filter: '',
+        });
+    const detailedInfo = isBlocked ? filter : formattedElapsedMs;
+
+
+    return <div className="logs__cell logs__cell--response" role="gridcell">
+        <IconTooltip
+                className={classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed })}
+                columnClass='grid grid--limited'
+                tooltipClass='px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details'
+                contentItemClass='text-truncate key-colon o-hidden'
+                xlinkHref='question'
+                title='response_details'
+                content={content}
+                placement='bottom'
+        />
+        <div className="text-truncate">
+            <div className="text-truncate" title={statusLabel}>{statusLabel}</div>
+            {isDetailed && <div
+                    className="detailed-info d-none d-sm-block pt-1 text-truncate"
+                    title={detailedInfo}>{detailedInfo}</div>}
+        </div>
+    </div>;
+};
+
+ResponseCell.propTypes = {
+    elapsedMs: propTypes.string.isRequired,
+    originalResponse: propTypes.array.isRequired,
+    reason: propTypes.string.isRequired,
+    response: propTypes.array.isRequired,
+    status: propTypes.string.isRequired,
+    upstream: propTypes.string.isRequired,
+    rule: propTypes.string,
+    filterId: propTypes.number,
+};
+
+export default ResponseCell;

client/src/components/Logs/Cells/getClientCell.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import { nanoid } from 'nanoid';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { formatClientCell } from '../../../helpers/formatClientCell';
-import getIconTooltip from './getIconTooltip';
-import { checkFiltered } from '../../../helpers/helpers';
-import { BLOCK_ACTIONS } from '../../../helpers/constants';
-
-const getClientCell = ({
-    row, t, isDetailed, toggleBlocking, autoClients, processingRules,
-}) => {
-    const {
-        reason, client, domain, info: { name, whois_info },
-    } = row.original;
-
-    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
-    const source = autoClient?.source;
-    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
-
-    const id = nanoid();
-
-    const data = {
-        address: client,
-        name,
-        country: whois_info?.country,
-        city: whois_info?.city,
-        network: whois_info?.orgname,
-        source_label: source,
-    };
-
-    const processedData = Object.entries(data);
-
-    const isFiltered = checkFiltered(reason);
-
-    const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
-        'mt-2': isDetailed && !name && !whoisAvailable,
-        'white-space--nowrap': isDetailed,
-    });
-
-    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
-        'my-3': isDetailed,
-    });
-
-    const renderBlockingButton = (isFiltered, domain) => {
-        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
-
-        const buttonClass = classNames('logs__action button__action', {
-            'btn-outline-secondary': isFiltered,
-            'btn-outline-danger': !isFiltered,
-            'logs__action--detailed': isDetailed,
-        });
-
-        const onClick = () => toggleBlocking(buttonType, domain);
-
-        return (
-            <div className={buttonClass}>
-                <button
-                    type="button"
-                    className={`btn btn-sm ${buttonClass}`}
-                    onClick={onClick}
-                    disabled={processingRules}
-                >
-                    {t(buttonType)}
-                </button>
-            </div>
-        );
-    };
-
-    return (
-        <div className="logs__row o-hidden h-100">
-            {getIconTooltip({
-                className: hintClass,
-                columnClass: 'grid grid--limited',
-                tooltipClass: 'px-5 pb-5 pt-4 mw-75',
-                xlinkHref: 'question',
-                contentItemClass: 'text-truncate key-colon',
-                title: 'client_details',
-                content: processedData,
-                placement: 'bottom',
-            })}
-            <div className={nameClass}>
-                <div data-tip={true} data-for={id}>
-                    {formatClientCell(row, isDetailed)}
-                </div>
-
-                {isDetailed && name && !whoisAvailable && (
-                    <div
-                        className="detailed-info d-none d-sm-block logs__text"
-                        title={name}
-                    >
-                        {name}
-                    </div>
-                )}
-            </div>
-            {renderBlockingButton(isFiltered, domain)}
-        </div>
-    );
-};
-
-getClientCell.propTypes = {
-    row: PropTypes.object.isRequired,
-    t: PropTypes.func.isRequired,
-    isDetailed: PropTypes.bool.isRequired,
-    toggleBlocking: PropTypes.func.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    processingRules: PropTypes.bool.isRequired,
-};
-
-export default getClientCell;

client/src/components/Logs/Cells/getDateCell.js

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { formatTime, formatDateTime } from '../../../helpers/helpers';
-import {
-    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
-    DEFAULT_TIME_FORMAT,
-} from '../../../helpers/constants';
-
-const getDateCell = (row, isDetailed) => {
-    const { time } = row.original;
-
-    if (!time) {
-        return '–';
-    }
-
-    const formattedTime = formatTime(time, DEFAULT_TIME_FORMAT);
-    const formattedDate = formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS);
-
-    return (
-        <div className="logs__cell">
-            <div className="logs__time" title={formattedTime}>{formattedTime}</div>
-            {isDetailed && <div className="detailed-info d-none d-sm-block text-truncate"
-                                title={formattedDate}>{formattedDate}</div>}
-        </div>
-    );
-};
-
-export default getDateCell;

client/src/components/Logs/Cells/getResponseCell.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { formatElapsedMs } from '../../../helpers/helpers';
-import {
-    FILTERED_STATUS,
-    FILTERED_STATUS_TO_META_MAP,
-} from '../../../helpers/constants';
-import getIconTooltip from './getIconTooltip';
-
-const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
-    const {
-        reason, filterId, rule, status, upstream, elapsedMs, response, originalResponse,
-    } = row.original;
-
-    const { filters, whitelistFilters } = filtering;
-    const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
-
-    const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
-        || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
-
-    const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
-
-    const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
-    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
-    const filter = getFilterName(filters, whitelistFilters, filterId, t);
-
-    const renderResponses = (responseArr) => {
-        if (responseArr?.length === 0) {
-            return '';
-        }
-
-        return <div>{responseArr.map((response) => {
-            const className = classNames('white-space--nowrap', {
-                'overflow-break': response.length > 100,
-            });
-
-            return <div key={response} className={className}>{`${response}\n`}</div>;
-        })}</div>;
-    };
-
-    const COMMON_CONTENT = {
-        encryption_status: boldStatusLabel,
-        install_settings_dns: upstream,
-        elapsed: formattedElapsedMs,
-        response_code: status,
-        filter,
-        rule_label: rule,
-        response_table_header: renderResponses(response),
-        original_response: renderResponses(originalResponse),
-    };
-
-    const content = rule
-        ? Object.entries(COMMON_CONTENT)
-        : Object.entries({ ...COMMON_CONTENT, filter: '' });
-    const detailedInfo = isBlocked ? filter : formattedElapsedMs;
-
-    return (
-        <div className="logs__row">
-            {getIconTooltip({
-                className: classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed }),
-                columnClass: 'grid grid--limited',
-                tooltipClass: 'px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details',
-                contentItemClass: 'text-truncate key-colon o-hidden',
-                xlinkHref: 'question',
-                title: 'response_details',
-                content,
-                placement: 'bottom',
-            })}
-            <div className="text-truncate">
-                <div className="text-truncate" title={statusLabel}>{statusLabel}</div>
-                {isDetailed && <div
-                    className="detailed-info d-none d-sm-block pt-1 text-truncate"
-                    title={detailedInfo}>{detailedInfo}</div>}
-            </div>
-        </div>
-    );
-};
-
-export default getResponseCell;

client/src/components/Logs/Cells/helpers/index.js

@@ -0,0 +1,19 @@
+import { getIpMatchListStatus } from '../../../../helpers/helpers';
+import { BLOCK_ACTIONS, IP_MATCH_LIST_STATUS } from '../../../../helpers/constants';
+
+export const BUTTON_PREFIX = 'btn_';
+
+export const getBlockClientInfo = (client, disallowed_clients) => {
+    const ipMatchListStatus = getIpMatchListStatus(client, disallowed_clients);
+
+    const isNotFound = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND;
+    const type = isNotFound ? BLOCK_ACTIONS.BLOCK : BLOCK_ACTIONS.UNBLOCK;
+
+    const confirmMessage = isNotFound ? 'client_confirm_block' : 'client_confirm_unblock';
+    const buttonKey = isNotFound ? 'disallow_this_client' : 'allow_this_client';
+    return {
+        confirmMessage,
+        buttonKey,
+        type,
+    };
+};

client/src/components/Logs/Cells/index.js

@@ -0,0 +1,229 @@
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import propTypes from 'prop-types';
+import {
+    captitalizeWords,
+    checkFiltered,
+    formatDateTime,
+    formatElapsedMs,
+    formatTime,
+    getBlockingClientName,
+    getFilterName,
+    processContent,
+} from '../../../helpers/helpers';
+import {
+    BLOCK_ACTIONS,
+    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
+    FILTERED_STATUS,
+    FILTERED_STATUS_TO_META_MAP,
+    LONG_TIME_FORMAT,
+    QUERY_STATUS_COLORS,
+    SCHEME_TO_PROTOCOL_MAP,
+} from '../../../helpers/constants';
+import { getSourceData } from '../../../helpers/trackers/trackers';
+import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
+import DateCell from './DateCell';
+import DomainCell from './DomainCell';
+import ResponseCell from './ResponseCell';
+import ClientCell from './ClientCell';
+import '../Logs.css';
+import { toggleClientBlock } from '../../../actions/access';
+import { getBlockClientInfo, BUTTON_PREFIX } from './helpers';
+
+const Row = memo(({
+    style,
+    rowProps,
+    rowProps: { reason },
+    isSmallScreen,
+    setDetailedDataCurrent,
+    setButtonType,
+    setModalOpened,
+}) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
+    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
+    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
+    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
+
+    const disallowed_clients = useSelector(
+        (state) => state.access.disallowed_clients,
+        shallowEqual,
+    );
+
+    const clients = useSelector((state) => state.dashboard.clients);
+
+    const onClick = () => {
+        if (!isSmallScreen) { return; }
+        const {
+            answer_dnssec,
+            client,
+            domain,
+            elapsedMs,
+            info,
+            reason,
+            response,
+            time,
+            tracker,
+            upstream,
+            type,
+            client_proto,
+            filterId,
+            rule,
+            originalResponse,
+            status,
+        } = rowProps;
+
+        const hasTracker = !!tracker;
+
+        const autoClient = autoClients
+            .find((autoClient) => autoClient.name === client);
+
+        const { whois_info } = info;
+        const country = whois_info?.country;
+        const city = whois_info?.city;
+        const network = whois_info?.orgname;
+
+        const source = autoClient?.source;
+
+        const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
+        const isFiltered = checkFiltered(reason);
+
+        const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
+                    || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+
+        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
+        const onToggleBlock = () => {
+            dispatch(toggleBlocking(buttonType, domain));
+        };
+
+        const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
+        const requestStatus = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
+
+        const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
+
+        const sourceData = getSourceData(tracker);
+
+        const filter = getFilterName(filters, whitelistFilters, filterId);
+
+        const {
+            confirmMessage,
+            buttonKey: blockingClientKey,
+            type: blockType,
+        } = getBlockClientInfo(client, disallowed_clients);
+
+        const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
+        const clientNameBlockingFor = getBlockingClientName(clients, client);
+
+        const onBlockingForClientClick = () => {
+            dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
+        };
+
+        const onBlockingClientClick = () => {
+            const message = `${blockType === BLOCK_ACTIONS.BLOCK ? t('adg_will_drop_dns_queries') : ''} ${t(confirmMessage, { ip: client })}`;
+            if (window.confirm(message)) {
+                dispatch(toggleClientBlock(blockType, client));
+            }
+        };
+
+        const detailedData = {
+            time_table_header: formatTime(time, LONG_TIME_FORMAT),
+            date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
+            encryption_status: isBlocked
+                ? <div className="bg--danger">{requestStatus}</div> : requestStatus,
+            domain,
+            type_table_header: type,
+            protocol,
+            known_tracker: hasTracker && 'title',
+            table_name: tracker?.name,
+            category_label: hasTracker && captitalizeWords(tracker.category),
+            tracker_source: hasTracker && sourceData
+                        && <a
+                                href={sourceData.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="link--green">{sourceData.name}
+                        </a>,
+            response_details: 'title',
+            install_settings_dns: upstream,
+            elapsed: formattedElapsedMs,
+            filter: rule ? filter : null,
+            rule_label: rule,
+            response_table_header: response?.join('\n'),
+            response_code: status,
+            client_details: 'title',
+            ip_address: client,
+            name: info?.name,
+            country,
+            city,
+            network,
+            source_label: source,
+            validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
+            original_response: originalResponse?.join('\n'),
+            [BUTTON_PREFIX + buttonType]: <div onClick={onToggleBlock}
+                                               className={classNames('title--border text-center', {
+                                                   'bg--danger': isBlocked,
+                                               })}>{t(buttonType)}</div>,
+            [BUTTON_PREFIX + blockingForClientKey]: <div onClick={onBlockingForClientClick} className='text-center font-weight-bold py-2'>{t(blockingForClientKey)}</div>,
+            [BUTTON_PREFIX + blockingClientKey]: <div onClick={onBlockingClientClick} className='text-center font-weight-bold py-2'>{t(blockingClientKey)}</div>,
+        };
+
+        setDetailedDataCurrent(processContent(detailedData));
+        setButtonType(buttonType);
+        setModalOpened(true);
+    };
+
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const className = classNames('d-flex px-5 logs__row',
+        `logs__row--${FILTERED_STATUS_TO_META_MAP?.[reason]?.COLOR ?? QUERY_STATUS_COLORS.WHITE}`, {
+            'logs__cell--detailed': isDetailed,
+        });
+
+    return <div style={style} className={className} onClick={onClick} role="row">
+        <DateCell {...rowProps} />
+        <DomainCell {...rowProps} />
+        <ResponseCell {...rowProps} />
+        <ClientCell {...rowProps} />
+    </div>;
+});
+
+Row.displayName = 'Row';
+
+Row.propTypes = {
+    style: propTypes.object,
+    rowProps: propTypes.shape({
+        reason: propTypes.string.isRequired,
+        answer_dnssec: propTypes.bool.isRequired,
+        client: propTypes.string.isRequired,
+        domain: propTypes.string.isRequired,
+        elapsedMs: propTypes.string.isRequired,
+        info: propTypes.oneOfType([
+            propTypes.string,
+            propTypes.shape({
+                whois_info: propTypes.shape({
+                    country: propTypes.string,
+                    city: propTypes.string,
+                    orgname: propTypes.string,
+                }),
+            })]),
+        response: propTypes.array.isRequired,
+        time: propTypes.string.isRequired,
+        tracker: propTypes.object,
+        upstream: propTypes.string.isRequired,
+        type: propTypes.string.isRequired,
+        client_proto: propTypes.string.isRequired,
+        filterId: propTypes.number,
+        rule: propTypes.string,
+        originalResponse: propTypes.array,
+        status: propTypes.string.isRequired,
+    }).isRequired,
+    isSmallScreen: propTypes.bool.isRequired,
+    setDetailedDataCurrent: propTypes.func.isRequired,
+    setButtonType: propTypes.func.isRequired,
+    setModalOpened: propTypes.func.isRequired,
+};
+
+export default Row;

client/src/components/Logs/Filters/Form.js

@@ -107,7 +107,7 @@ const Form = (props) => {
 
     const {
         response_status, search,
-    } = useSelector((state) => state.form[FORM_NAME.LOGS_FILTER].values, shallowEqual);
+    } = useSelector((state) => state?.form[FORM_NAME.LOGS_FILTER].values, shallowEqual);
 
     const [
         debouncedSearch,
@@ -171,14 +171,14 @@ const Form = (props) => {
                 >
                     {Object.values(RESPONSE_FILTER)
                         .map(({
-                            query, label, disabled,
+                            QUERY, LABEL, disabled,
                         }) => (
                             <option
-                                key={label}
-                                value={query}
+                                key={LABEL}
+                                value={QUERY}
                                 disabled={disabled}
                             >
-                                {t(label)}
+                                {t(LABEL)}
                             </option>
                         ))
                     }
@@ -197,5 +197,4 @@ Form.propTypes = {
 
 export default reduxForm({
     form: FORM_NAME.LOGS_FILTER,
-    enableReinitialize: true,
 })(Form);

client/src/components/Logs/Filters/index.js

@@ -1,33 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import Form from './Form';
+import { refreshFilteredLogs } from '../../../actions/queryLogs';
+import { addSuccessToast } from '../../../actions/toasts';
 
-const Filters = ({ filter, refreshLogs, setIsLoading }) => (
-        <div className="page-header page-header--logs">
-            <h1 className="page-title page-title--large">
-                <Trans>query_log</Trans>
-                <button
+const Filters = ({ filter, setIsLoading }) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const refreshLogs = async () => {
+        setIsLoading(true);
+        await dispatch(refreshFilteredLogs());
+        dispatch(addSuccessToast('query_log_updated'));
+        setIsLoading(false);
+    };
+
+    return <div className="page-header page-header--logs">
+        <h1 className="page-title page-title--large">
+            {t('query_log')}
+            <button
                     type="button"
                     className="btn btn-icon--green logs__refresh"
                     onClick={refreshLogs}
-                >
-                    <svg className="icons icon--24">
-                        <use xlinkHref="#update" />
-                    </svg>
-                </button>
-            </h1>
-            <Form
+            >
+                <svg className="icons icon--24">
+                    <use xlinkHref="#update" />
+                </svg>
+            </button>
+        </h1>
+        <Form
                 responseStatusClass="d-sm-block"
                 initialValues={filter}
                 setIsLoading={setIsLoading}
-            />
-        </div>
-);
+        />
+    </div>;
+};
 
 Filters.propTypes = {
     filter: PropTypes.object.isRequired,
-    refreshLogs: PropTypes.func.isRequired,
     processingGetLogs: PropTypes.bool.isRequired,
     setIsLoading: PropTypes.func.isRequired,
 };

client/src/components/Logs/InfiniteTable.js

@@ -0,0 +1,87 @@
+import React, {
+    useCallback,
+    useEffect,
+    useRef,
+} from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import propTypes from 'prop-types';
+import throttle from 'lodash/throttle';
+import Loading from '../ui/Loading';
+import Header from './Cells/Header';
+import { getLogs } from '../../actions/queryLogs';
+import Row from './Cells';
+import { isScrolledIntoView } from '../../helpers/helpers';
+import { QUERY_LOGS_PAGE_LIMIT } from '../../helpers/constants';
+
+const InfiniteTable = ({
+    isLoading,
+    items,
+    isSmallScreen,
+    setDetailedDataCurrent,
+    setButtonType,
+    setModalOpened,
+}) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const loader = useRef(null);
+
+    const {
+        isEntireLog,
+        processingGetLogs,
+    } = useSelector((state) => state.queryLogs, shallowEqual);
+
+    const loading = isLoading || processingGetLogs;
+
+    const listener = useCallback(() => {
+        if (loader.current && isScrolledIntoView(loader.current)) {
+            dispatch(getLogs());
+        }
+    }, [loader.current, isScrolledIntoView, getLogs]);
+
+    useEffect(() => {
+        listener();
+    }, [items.length < QUERY_LOGS_PAGE_LIMIT]);
+
+    useEffect(() => {
+        const THROTTLE_TIME = 100;
+        const throttledListener = throttle(listener, THROTTLE_TIME);
+
+        window.addEventListener('scroll', throttledListener);
+        return () => {
+            window.removeEventListener('scroll', throttledListener);
+        };
+    }, []);
+
+    const renderRow = (row, idx) => <Row
+                    key={idx}
+                    rowProps={row}
+                    isSmallScreen={isSmallScreen}
+                    setDetailedDataCurrent={setDetailedDataCurrent}
+                    setButtonType={setButtonType}
+                    setModalOpened={setModalOpened}
+            />;
+
+    const isNothingFound = items.length === 0 && !processingGetLogs;
+
+    return <div className='logs__table' role='grid'>
+        {loading && <Loading />}
+        <Header />
+        {isNothingFound
+            ? <label className="logs__no-data">{t('nothing_found')}</label>
+            : <>{items.map(renderRow)}
+                    {!isEntireLog && <div ref={loader} className="logs__loading text-center">{t('loading_table_status')}</div>}
+            </>}
+    </div>;
+};
+
+InfiniteTable.propTypes = {
+    isLoading: propTypes.bool.isRequired,
+    items: propTypes.array.isRequired,
+    isSmallScreen: propTypes.bool.isRequired,
+    setDetailedDataCurrent: propTypes.func.isRequired,
+    setButtonType: propTypes.func.isRequired,
+    setModalOpened: propTypes.func.isRequired,
+};
+
+export default InfiniteTable;

client/src/components/Logs/Logs.css

@@ -1,44 +1,32 @@
 :root {
+    --blue: #e5effd;
+    --green-pale: rgba(103, 178, 121, 0.1);
+    --red: rgba(223, 56, 18, 0.05);
+    --white: #fff;
+    --yellow: rgba(247, 181, 0, 0.1);
+    --size-date: 70;
+    --size-domain: 180;
+    --size-response: 150;
+    --size-client: 123;
+    --gray-216: rgba(216, 216, 216, 0.23);
     --gray-4d: #4D4D4D;
+    --gray-f3: #F3F3F3;
     --gray-8: #888;
     --danger: #DF3812;
+    --white80: rgba(255, 255, 255, 0.8);
+
+    --btn-block: #C23814;
+    --btn-block-disabled: #E3B3A6;
+    --btn-block-active: #A62200;
+
+    --btn-unblock: #888888;
+    --btn-unblock-disabled: #D8D8D8;
+    --btn-unblock-active: #4D4D4D;
+
+    --option-border-radius: 4px;
 }
 
-.logs__row {
-    position: relative;
-    display: flex;
-    min-height: 26px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.card-table .logs__row {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.logs__row--center {
-    justify-content: center;
-}
-
-.logs__row--column {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-}
-
-.logs__row--icons {
-    max-width: 180px;
-    flex-flow: row wrap;
-}
-
-.logs__row .list-unstyled {
-    margin-bottom: 0;
-    overflow: hidden;
-}
-
-.logs__text,
-.logs__row .list-unstyled li {
+.logs__text {
     padding: 0 1px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -54,237 +42,6 @@
     font-weight: bold;
 }
 
-.logs__text--full {
-    width: 100%;
-}
-
-.logs__text--wrap {
-    line-height: 1.4;
-    white-space: normal;
-}
-
-.logs__text--nowrap {
-    line-height: 1.4;
-    white-space: nowrap;
-}
-
-.logs__text--whois {
-    line-height: 1.2;
-    color: #9aa0ac;
-}
-
-.logs__row .tooltip-custom {
-    top: 0;
-    margin-left: 0;
-    margin-right: 5px;
-}
-
-.tooltip__option {
-    height: 2.5rem !important;
-    width: 10.5rem;
-    padding: 0.3125rem 1.5rem 0.6875rem;
-}
-
-.tooltip__option:hover {
-    background-color: var(--gray-f3);
-    cursor: pointer;
-}
-
-.button__action {
-    background-color: #fff;
-    border-radius: 4px;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
-    visibility: hidden;
-    opacity: 0;
-}
-
-.table__action {
-    position: absolute;
-    top: 11px;
-    right: 15px;
-}
-
-.logs__action {
-    position: absolute;
-    top: 0;
-    right: 1rem;
-}
-
-.logs__action--detailed {
-    top: 5px;
-}
-
-.logs__table .rt-td,
-.clients__table .rt-td {
-    position: relative;
-}
-
-.logs__table .rt-thead, .logs__table .rt-tbody {
-    min-width: 100% !important;
-}
-
-.logs__table .rt-tr:hover .logs__action,
-.clients__table .rt-tr:hover .table__action {
-    visibility: visible;
-    opacity: 1;
-}
-
-.logs__table .rt-tr-group:first-child .tooltip-custom:before {
-    top: calc(100% + 12px);
-    bottom: initial;
-    z-index: 1;
-}
-
-.logs__table .rt-tr-group:first-child .tooltip-custom:after {
-    top: initial;
-    bottom: -4px;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid #585965;
-}
-
-.logs__table .rt-tr-group:first-child .popover__body {
-    top: calc(100% + 5px);
-    bottom: initial;
-    z-index: 1;
-}
-
-.logs__table .rt-tr-group:first-child .popover__body:after {
-    top: -11px;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid #585965;
-}
-
-.logs__table .rt-thead.-filters input,
-.logs__table .rt-thead.-filters select {
-    padding: 6px 7px;
-    border-radius: 3px;
-    font-size: 0.9375rem;
-    line-height: 1.6;
-    color: #495057;
-    border: 1px solid rgba(0, 40, 100, 0.12);
-}
-
-.logs__table .rt-thead.-filters select {
-    background: #fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
-    background-size: 8px 10px;
-}
-
-.logs__table .rt-thead.-filters input:focus,
-.logs__table .rt-thead.-filters select:focus {
-    border-color: #1991eb;
-    box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-}
-
-.logs__text-wrap {
-    display: flex;
-    align-items: center;
-    max-width: 100%;
-}
-
-.logs__list-wrap {
-    display: flex;
-    max-width: 100%;
-}
-
-.logs__list-item {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.logs__input-wrap {
-    position: relative;
-}
-
-.logs__whois {
-    display: inline;
-    font-size: 12px;
-    white-space: nowrap;
-}
-
-.logs__whois::after {
-    content: "|";
-    padding: 0 5px;
-    opacity: 0.3;
-}
-
-.logs__whois:last-child::after {
-    content: "";
-}
-
-.logs__whois-icon.icons {
-    position: relative;
-    top: -2px;
-    width: 12px;
-    height: 12px;
-    margin-right: 1px;
-    opacity: 0.5;
-}
-
-/* New logs */
-.logs__table {
-    background-color: #fff;
-    border: 0;
-    border-radius: 8px;
-    min-height: 42rem;
-    max-width: 100%;
-}
-
-.logs__table--detailed {
-    min-height: 50rem;
-}
-
-.logs__table .rt-thead.-header {
-    box-shadow: none;
-    font-weight: bold;
-}
-
-.logs__table .rt-thead .rt-th {
-    padding: 0.9375rem 0.9375rem 0.875rem 0;
-    text-align: left;
-    border-right: 0;
-}
-
-.logs__table .rt-tbody .rt-td {
-    padding: 1rem 1rem 0.5rem 0;
-    border-right: 0;
-}
-
-.logs__table .rt-thead .rt-th:last-child,
-.logs__table .rt-tbody .rt-td:last-child {
-    padding-right: 0;
-}
-
-.logs__table .rt-tbody .rt-tr-group {
-    border-bottom: 0;
-}
-
-.logs__table .rt-tr {
-    position: relative;
-    padding: 0 24px;
-}
-
-.logs__table .rt-tr {
-    position: relative;
-    padding: 0 1.5rem;
-}
-
-.logs__table .rt-tr-group:not(:first-child) .rt-tr:before {
-    content: "";
-    position: absolute;
-    left: 1.5rem;
-    right: 1.5rem;
-    top: 0;
-    width: calc(100% - 3rem);
-    height: 2px;
-    background-color: rgba(216, 216, 216, 0.23);
-}
-
-.logs__table .rt-tr-group:last-child .rt-tr:after,
-.logs__table .rt-thead .rt-tr:after {
-    display: none;
-}
-
 .logs__time {
     font-size: 1rem;
     line-height: 1.5;
@@ -302,132 +59,24 @@
     border-radius: 4px;
 }
 
-/* Hide 3 and 4 column on mobile */
-.logs__table .rt-thead .rt-th:nth-child(3),
-.logs__table .rt-thead .rt-th:nth-child(4),
-.logs__table .rt-tbody .rt-td:nth-child(3),
-.logs__table .rt-tbody .rt-td:nth-child(4) {
-    display: none;
-}
-
-@media screen and (min-width: 768px) {
-    .logs__table .rt-thead .rt-th:nth-child(3),
-    .logs__table .rt-thead .rt-th:nth-child(4),
-    .logs__table .rt-tbody .rt-td:nth-child(3),
-    .logs__table .rt-tbody .rt-td:nth-child(4) {
-        display: block;
-    }
-}
-
 .text-pre {
     white-space: pre-wrap !important;
     overflow-wrap: break-word;
     overflow: visible;
 }
 
-.custom-pagination {
-    width: 11.875rem !important;
-    background-color: transparent;
-    box-shadow: none !important;
-    border: none !important;
-    align-items: center !important;
-}
-
-.custom-pagination--padding {
-    padding: 2.5rem 0 2.5rem !important;
-}
-
-.custom-pagination .-btn {
-    --side-size: 2rem;
-    background-color: transparent !important;
-    border: 1px solid var(--gray-d8) !important;
-    border-radius: 4px !important;
-    width: var(--side-size) !important;
-    height: var(--side-size) !important;
-}
-
-.custom-pagination .-btn:enabled:hover {
-    background-color: var(--gray-f3) !important;
-}
-
-.custom-pagination .-previous {
-    flex: 0 1 !important;
-}
-
-.custom-pagination .-next {
-    flex: 0 1 !important;
-}
-
-.custom-pagination .-btn {
-    display: flex !important;
-}
-
-.logs__table .-pageInfo {
-    --side-size: 2rem;
-    font-variant-numeric: tabular-nums !important;
-    background-color: transparent !important;
-    border: 1px solid var(--gray-d8) !important;
-    border-radius: 4px !important;
-    width: var(--side-size) !important;
-    height: var(--side-size) !important;
-    margin: 0 !important;
-    display: flex !important;
-    justify-content: center;
-    align-items: center;
-}
-
-.logs__table .pagination-bottom {
-    justify-content: center !important;
-    display: flex !important;
-}
-
-.logs__table .-center:before {
-    content: '...';
-    transform: translateY(-0.25rem);
-    margin: auto;
-}
-
-.logs__table .-center:after {
-    content: '...';
-    transform: translateY(-0.25rem);
-    margin: auto;
-}
-
-.icon--detailed-info {
-    position: absolute;
-    right: 0;
-    top: 0.5rem;
-}
-
 .link--green {
     color: var(--green79);
 }
 
-.row--detailed {
-    height: 4.9rem
-}
-
 .w-90 {
     max-width: 90% !important;
 }
 
-.h-85 {
-    height: 85% !important;
-}
-
-.pt-45 {
-    padding-top: 1.25rem !important;
-}
-
 .pb-45 {
     padding-bottom: 1.25rem !important;
 }
 
-.py-45 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important;
-}
-
 .mh-100 {
     max-height: 100% !important;
 }
@@ -493,14 +142,6 @@
 }
 
 @media (max-width: 767.98px) {
-    .rt-tr .logs__row .logs__text {
-        max-width: calc(100% - 1.5rem);
-    }
-
-    .ml-small {
-        margin-left: 1.5rem;
-    }
-
     .form-control--container {
         width: 100%;
         flex-direction: column;
@@ -517,38 +158,258 @@
     }
 }
 
-@media (max-width: 575px) {
-    .logs__table .rt-tr {
-        height: 3.125rem;
+@media screen and (max-width: 767.98px) {
+    .logs__table .logs__cell--response,
+    .logs__table .logs__cell--client {
+        display: none !important;
     }
-
-    .logs__table .rt-tbody .rt-td {
-        padding: 0.625rem 1rem 0.875rem 0;
-    }
-
-    .logs__table {
-        min-height: 42rem;
-    }
-}
-
-.loading__container > .-loading-inner {
-    top: 10rem !important;
-    bottom: initial !important;
-}
-
-.loading__text {
-    transform: translateY(3rem);
 }
 
 .logs__refresh {
+    --size: 2.5rem;
     position: relative;
     top: 3px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: var(--size);
+    height: var(--size);
     padding: 0;
-    margin-left: 15px;
+    margin-left: 0.9375rem;
     background-color: transparent;
 }
+
+.logs__cell {
+    padding: 1rem 1rem 0.5rem 0;
+}
+
+.logs__cell--date {
+    width: 4.375rem;
+    flex: var(--size-date) 0 auto;
+}
+
+.logs__cell--domain {
+    width: 11.25rem;
+    flex: var(--size-domain) 0 auto;
+}
+
+.logs__cell--response {
+    width: 9.375rem;
+    flex: var(--size-response) 0 auto;
+}
+
+.logs__cell--client {
+    width: 7.6875rem;
+    flex: var(--size-client) 0 auto;
+    padding-right: 0;
+    position: relative;
+}
+
+.logs__cell--header__container > .logs__cell--header__item {
+    border-right: 0;
+    font-size: 1rem;
+}
+
+.logs__cell--header__container > .logs__cell--header__item:last-child {
+    padding-right: 0;
+}
+
+.button-action__container {
+    display: flex;
+    position: absolute;
+    right: 0;
+    bottom: 0.5rem;
+    height: 1.6rem;
+}
+
+.button-action__container--detailed {
+    bottom: 1.3rem;
+}
+
+.button-action {
+    outline: 0 !important;
+    background: var(--btn-block);
+    border-radius: var(--option-border-radius);
+    font-size: 0.8rem;
+    color: var(--white);
+    letter-spacing: 0;
+    text-align: center;
+    line-height: 28px;
+    border: 0;
+}
+
+.button-action--unblock {
+    background: var(--btn-unblock);
+}
+
+.button-action--main {
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+}
+
+.button-action--with-options {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.button-action--arrow {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 1px solid var(--white);
+    width: 1.5625rem;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button-action:hover {
+    cursor: pointer;
+}
+
+.button-action--arrow .button-action--icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button-action:active {
+    background: var(--btn-block-active);
+}
+
+.button-action--unblock:active {
+    background: var(--btn-unblock-active);
+}
+
+.button-action:disabled {
+    background: var(--btn-block-disabled);
+    cursor: default;
+}
+
+.button-action--unblock:disabled {
+    background: var(--btn-unblock-disabled);
+}
+
+.button-action--arrow-option:hover {
+    cursor: pointer;
+    background: var(--gray-f3);
+    overflow: hidden;
+}
+
+.button-action--arrow-option-container {
+    overflow: visible;
+    transform-origin: left;
+    padding: 1rem 0;
+}
+
+.logs__row {
+    position: relative;
+    display: flex;
+    min-height: 26px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.logs__table .logs__row {
+    border-bottom: 2px solid var(--gray-216);
+}
+
+/* QUERY_STATUS_COLORS */
+.logs__row--blue {
+    background-color: var(--blue);
+}
+
+.logs__row--green {
+    background-color: var(--green-pale);
+}
+
+.logs__row--red {
+    background-color: var(--red);
+}
+
+.logs__row--white {
+    background-color: var(--white);
+}
+
+.logs__row--yellow {
+    background-color: var(--yellow);
+}
+
+.logs__no-data {
+    color: var(--gray-4d);
+    background-color: var(--white80);
+    pointer-events: none;
+    font-weight: bold;
+    text-align: center;
+    padding-top: 21rem;
+    display: block;
+}
+
+.logs__loading {
+    padding: 1rem 0;
+}
+
+.logs__table {
+    background-color: var(--white);
+    border: 0;
+    border-radius: 8px;
+    min-height: 43rem;
+    max-width: 100%;
+    align-items: stretch;
+    width: 100%;
+    border-collapse: collapse;
+    contain: layout;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    will-change: scroll-position;
+}
+
+.logs__table .logs__cell--response,
+.logs__table .logs__cell--client {
+    display: flex;
+}
+
+.logs__cell--header__container {
+    display: flex;
+}
+
+.logs__table > .logs__cell--header__container > .logs__cell--client {
+    display: flex;
+    justify-content: space-between;
+}
+
+.logs__table .loading:after {
+    top: 10%;
+}
+
+.logs__table .loading:before {
+    min-height: 100%;
+}
+
+.logs__whois {
+    display: inline;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.logs__whois::after {
+    content: "|";
+    padding: 0 5px;
+    opacity: 0.3;
+}
+
+.logs__whois:last-child::after {
+    content: "";
+}
+
+.logs__whois-icon.icons {
+    position: relative;
+    top: -2px;
+    width: 12px;
+    height: 12px;
+    margin-right: 1px;
+    opacity: 0.5;
+}

client/src/components/Logs/Table.js

@@ -1,414 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation, Trans } from 'react-i18next';
-import ReactTable from 'react-table';
-import classNames from 'classnames';
-import endsWith from 'lodash/endsWith';
-import escapeRegExp from 'lodash/escapeRegExp';
-import {
-    BLOCK_ACTIONS,
-    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
-    LONG_TIME_FORMAT,
-    FILTERED_STATUS_TO_META_MAP,
-    TABLE_DEFAULT_PAGE_SIZE,
-    SCHEME_TO_PROTOCOL_MAP,
-    CUSTOM_FILTERING_RULES_ID, FILTERED_STATUS,
-} from '../../helpers/constants';
-import getDateCell from './Cells/getDateCell';
-import getDomainCell from './Cells/getDomainCell';
-import getClientCell from './Cells/getClientCell';
-import getResponseCell from './Cells/getResponseCell';
-
-import {
-    captitalizeWords,
-    checkFiltered,
-    formatDateTime,
-    formatElapsedMs,
-    formatTime,
-    processContent,
-} from '../../helpers/helpers';
-import Loading from '../ui/Loading';
-import { getSourceData } from '../../helpers/trackers/trackers';
-
-const Table = (props) => {
-    const {
-        setDetailedDataCurrent,
-        setButtonType,
-        setModalOpened,
-        isSmallScreen,
-        setIsLoading,
-        filtering,
-        isDetailed,
-        toggleDetailedLogs,
-        setLogsPage,
-        setLogsPagination,
-        processingGetLogs,
-        logs,
-        pages,
-        page,
-        isLoading,
-    } = props;
-
-    const { t } = useTranslation();
-
-    const toggleBlocking = (type, domain) => {
-        const {
-            setRules, getFilteringStatus, addSuccessToast,
-        } = props;
-        const { userRules } = filtering;
-
-        const lineEnding = !endsWith(userRules, '\n') ? '\n' : '';
-        const baseRule = `||${domain}^$important`;
-        const baseUnblocking = `@@${baseRule}`;
-
-        const blockingRule = type === BLOCK_ACTIONS.BLOCK ? baseUnblocking : baseRule;
-        const unblockingRule = type === BLOCK_ACTIONS.BLOCK ? baseRule : baseUnblocking;
-        const preparedBlockingRule = new RegExp(`(^|\n)${escapeRegExp(blockingRule)}($|\n)`);
-        const preparedUnblockingRule = new RegExp(`(^|\n)${escapeRegExp(unblockingRule)}($|\n)`);
-
-        const matchPreparedBlockingRule = userRules.match(preparedBlockingRule);
-        const matchPreparedUnblockingRule = userRules.match(preparedUnblockingRule);
-
-        if (matchPreparedBlockingRule) {
-            setRules(userRules.replace(`${blockingRule}`, ''));
-            addSuccessToast(`${t('rule_removed_from_custom_filtering_toast')}: ${blockingRule}`);
-        } else if (!matchPreparedUnblockingRule) {
-            setRules(`${userRules}${lineEnding}${unblockingRule}\n`);
-            addSuccessToast(`${t('rule_added_to_custom_filtering_toast')}: ${unblockingRule}`);
-        } else if (matchPreparedUnblockingRule) {
-            addSuccessToast(`${t('rule_added_to_custom_filtering_toast')}: ${unblockingRule}`);
-            return;
-        } else if (!matchPreparedBlockingRule) {
-            addSuccessToast(`${t('rule_removed_from_custom_filtering_toast')}: ${blockingRule}`);
-            return;
-        }
-
-        getFilteringStatus();
-    };
-
-    const getFilterName = (filters, whitelistFilters, filterId, t) => {
-        if (filterId === CUSTOM_FILTERING_RULES_ID) {
-            return t('custom_filter_rules');
-        }
-
-        const filter = filters.find((filter) => filter.id === filterId)
-            || whitelistFilters.find((filter) => filter.id === filterId);
-        let filterName = '';
-
-        if (filter) {
-            filterName = filter.name;
-        }
-
-        if (!filterName) {
-            filterName = t('unknown_filter', { filterId });
-        }
-
-        return filterName;
-    };
-
-
-    const columns = [
-        {
-            Header: t('time_table_header'),
-            accessor: 'time',
-            Cell: (row) => getDateCell(row, isDetailed),
-            minWidth: 70,
-            maxHeight: 60,
-            headerClassName: 'logs__text',
-        },
-        {
-            Header: t('request_table_header'),
-            accessor: 'domain',
-            Cell: (row) => {
-                const {
-                    isDetailed,
-                    autoClients,
-                    dnssec_enabled,
-                } = props;
-
-                return getDomainCell({
-                    row,
-                    t,
-                    isDetailed,
-                    toggleBlocking,
-                    autoClients,
-                    dnssec_enabled,
-                });
-            },
-            minWidth: 180,
-            maxHeight: 60,
-            headerClassName: 'logs__text',
-        },
-        {
-            Header: t('response_table_header'),
-            accessor: 'response',
-            Cell: (row) => getResponseCell(
-                row,
-                filtering,
-                t,
-                isDetailed,
-                getFilterName,
-            ),
-            minWidth: 150,
-            maxHeight: 60,
-            headerClassName: 'logs__text',
-        },
-        {
-            Header: function Header() {
-                return <div className="d-flex justify-content-between">
-                    {t('client_table_header')}
-                    {<span>
-                        <svg
-                            className={classNames('icons icon--24 icon--green mr-2 cursor--pointer', {
-                                'icon--selected': !isDetailed,
-                            })}
-                            onClick={() => toggleDetailedLogs(false)}
-                        >
-                            <title><Trans>compact</Trans></title>
-                            <use xlinkHref='#list' />
-                        </svg>
-                    <svg
-                        className={classNames('icons icon--24 icon--green cursor--pointer', {
-                            'icon--selected': isDetailed,
-                        })}
-                        onClick={() => toggleDetailedLogs(true)}
-                    >
-                        <title><Trans>default</Trans></title>
-                        <use xlinkHref='#detailed_list' />
-                    </svg>
-                        </span>}
-                </div>;
-            },
-            accessor: 'client',
-            Cell: (row) => {
-                const {
-                    isDetailed,
-                    autoClients,
-                    filtering: { processingRules },
-                } = props;
-
-                return getClientCell({
-                    row,
-                    t,
-                    isDetailed,
-                    toggleBlocking,
-                    autoClients,
-                    processingRules,
-                });
-            },
-            minWidth: 123,
-            maxHeight: 60,
-            headerClassName: 'logs__text',
-            className: 'pb-0',
-        },
-    ];
-
-    const changePage = async (page) => {
-        setIsLoading(true);
-
-        const { oldest, getLogs, pages } = props;
-        const isLastPage = pages && (page + 1 === pages);
-
-        await Promise.all([
-            setLogsPage(page),
-            setLogsPagination({
-                page,
-                pageSize: TABLE_DEFAULT_PAGE_SIZE,
-            }),
-        ].concat(isLastPage ? getLogs(oldest, page) : []));
-
-        setIsLoading(false);
-    };
-
-    const tableClass = classNames('logs__table', {
-        'logs__table--detailed': isDetailed,
-    });
-
-    return (
-        <ReactTable
-            manual
-            minRows={0}
-            page={page}
-            pages={pages}
-            columns={columns}
-            filterable={false}
-            sortable={false}
-            resizable={false}
-            data={logs || []}
-            loading={isLoading || processingGetLogs}
-            showPageJump={false}
-            showPageSizeOptions={false}
-            onPageChange={changePage}
-            className={tableClass}
-            defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
-            loadingText={
-                <>
-                    <Loading />
-                    <h6 className="loading__text">{t('loading_table_status')}</h6>
-                </>
-            }
-            getLoadingProps={() => ({ className: 'loading__container' })}
-            rowsText={t('rows_table_footer_text')}
-            noDataText={!processingGetLogs
-            && <label className="logs__text logs__text--bold">{t('nothing_found')}</label>}
-            pageText=''
-            ofText=''
-            showPagination={logs.length > 0}
-            getPaginationProps={() => ({ className: 'custom-pagination custom-pagination--padding' })}
-            getTbodyProps={() => ({ className: 'd-block' })}
-            previousText={
-                <svg className="icons icon--24 icon--gray w-100 h-100 cursor--pointer">
-                    <title><Trans>previous_btn</Trans></title>
-                    <use xlinkHref="#arrow-left" />
-                </svg>}
-            nextText={
-                <svg className="icons icon--24 icon--gray w-100 h-100 cursor--pointer">
-                    <title><Trans>next_btn</Trans></title>
-                    <use xlinkHref="#arrow-right" />
-                </svg>}
-            renderTotalPagesCount={() => false}
-            getTrGroupProps={(_state, rowInfo) => {
-                if (!rowInfo) {
-                    return {};
-                }
-
-                const { reason } = rowInfo.original;
-                const colorClass = FILTERED_STATUS_TO_META_MAP[reason] ? FILTERED_STATUS_TO_META_MAP[reason].color : 'white';
-
-                return { className: colorClass };
-            }}
-            getTrProps={(state, rowInfo) => ({
-                className: isDetailed ? 'row--detailed' : '',
-                onClick: () => {
-                    if (isSmallScreen) {
-                        const { dnssec_enabled, autoClients } = props;
-                        const {
-                            answer_dnssec,
-                            client,
-                            domain,
-                            elapsedMs,
-                            info,
-                            reason,
-                            response,
-                            time,
-                            tracker,
-                            upstream,
-                            type,
-                            client_proto,
-                            filterId,
-                            rule,
-                            originalResponse,
-                            status,
-                        } = rowInfo.original;
-
-                        const hasTracker = !!tracker;
-
-                        const autoClient = autoClients
-                            .find((autoClient) => autoClient.name === client);
-
-                        const { whois_info } = info;
-                        const country = whois_info?.country;
-                        const city = whois_info?.city;
-                        const network = whois_info?.orgname;
-
-                        const source = autoClient?.source;
-
-                        const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
-                        const isFiltered = checkFiltered(reason);
-
-                        const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
-                            || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
-
-                        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
-                        const onToggleBlock = () => {
-                            toggleBlocking(buttonType, domain);
-                        };
-
-                        const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
-                        const requestStatus = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
-
-                        const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
-
-                        const sourceData = getSourceData(tracker);
-
-                        const { filters, whitelistFilters } = filtering;
-                        const filter = getFilterName(filters, whitelistFilters, filterId, t);
-
-                        const detailedData = {
-                            time_table_header: formatTime(time, LONG_TIME_FORMAT),
-                            date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
-                            encryption_status: isBlocked
-                                ? <div className="bg--danger">{requestStatus}</div> : requestStatus,
-                            domain,
-                            type_table_header: type,
-                            protocol,
-                            known_tracker: hasTracker && 'title',
-                            table_name: tracker?.name,
-                            category_label: hasTracker && captitalizeWords(tracker.category),
-                            tracker_source: hasTracker && sourceData
-                                && <a
-                                    href={sourceData.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="link--green">{sourceData.name}
-                                </a>,
-                            response_details: 'title',
-                            install_settings_dns: upstream,
-                            elapsed: formattedElapsedMs,
-                            filter: rule ? filter : null,
-                            rule_label: rule,
-                            response_table_header: response?.join('\n'),
-                            response_code: status,
-                            client_details: 'title',
-                            ip_address: client,
-                            name: info?.name,
-                            country,
-                            city,
-                            network,
-                            source_label: source,
-                            validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
-                            original_response: originalResponse?.join('\n'),
-                            [buttonType]: <div onClick={onToggleBlock}
-                                               className={classNames('title--border text-center', {
-                                                   'bg--danger': isBlocked,
-                                               })}>{t(buttonType)}</div>,
-                        };
-
-                        setDetailedDataCurrent(processContent(detailedData));
-                        setButtonType(buttonType);
-                        setModalOpened(true);
-                    }
-                },
-            })}
-        />
-    );
-};
-
-Table.propTypes = {
-    logs: PropTypes.array.isRequired,
-    pages: PropTypes.number.isRequired,
-    page: PropTypes.number.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    defaultPageSize: PropTypes.number,
-    oldest: PropTypes.string.isRequired,
-    filtering: PropTypes.object.isRequired,
-    processingGetLogs: PropTypes.bool.isRequired,
-    processingGetConfig: PropTypes.bool.isRequired,
-    isDetailed: PropTypes.bool.isRequired,
-    setLogsPage: PropTypes.func.isRequired,
-    setLogsPagination: PropTypes.func.isRequired,
-    getLogs: PropTypes.func.isRequired,
-    toggleDetailedLogs: PropTypes.func.isRequired,
-    setRules: PropTypes.func.isRequired,
-    addSuccessToast: PropTypes.func.isRequired,
-    getFilteringStatus: PropTypes.func.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    setIsLoading: PropTypes.func.isRequired,
-    dnssec_enabled: PropTypes.bool.isRequired,
-    setDetailedDataCurrent: PropTypes.func.isRequired,
-    setButtonType: PropTypes.func.isRequired,
-    setModalOpened: PropTypes.func.isRequired,
-    isSmallScreen: PropTypes.bool.isRequired,
-};
-
-export default Table;

client/src/components/Logs/index.js

@@ -1,5 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import Modal from 'react-modal';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
@@ -8,34 +7,32 @@ import queryString from 'query-string';
 import classNames from 'classnames';
 import {
     BLOCK_ACTIONS,
-    TABLE_DEFAULT_PAGE_SIZE,
-    TABLE_FIRST_PAGE,
     SMALL_SCREEN_SIZE,
 } from '../../helpers/constants';
 import Loading from '../ui/Loading';
 import Filters from './Filters';
-import Table from './Table';
 import Disabled from './Disabled';
 import { getFilteringStatus } from '../../actions/filtering';
 import { getClients } from '../../actions';
 import { getDnsConfig } from '../../actions/dnsConfig';
 import {
     getLogsConfig,
-    refreshFilteredLogs,
     resetFilteredLogs,
     setFilteredLogs,
+    toggleDetailedLogs,
 } from '../../actions/queryLogs';
-import { addSuccessToast } from '../../actions/toasts';
+import InfiniteTable from './InfiniteTable';
 import './Logs.css';
+import { BUTTON_PREFIX } from './Cells/helpers';
 
-const processContent = (data, buttonType) => Object.entries(data)
+const processContent = (data) => Object.entries(data)
     .map(([key, value]) => {
         if (!value) {
             return null;
         }
 
         const isTitle = value === 'title';
-        const isButton = key === buttonType;
+        const isButton = key.startsWith(BUTTON_PREFIX);
         const isBoolean = typeof value === 'boolean';
         const isHidden = isBoolean && value === false;
 
@@ -48,21 +45,20 @@ const processContent = (data, buttonType) => Object.entries(data)
             keyClass = '';
         }
 
-        return isHidden ? null : <Fragment key={key}>
+        return isHidden ? null : <div key={key}>
             <div
-                className={classNames(`key__${key}`, keyClass, {
-                    'font-weight-bold': isBoolean && value === true,
-                })}>
+                    className={classNames(`key__${key}`, keyClass, {
+                        'font-weight-bold': isBoolean && value === true,
+                    })}>
                 <Trans>{isButton ? value : key}</Trans>
             </div>
             <div className={`value__${key} text-pre text-truncate`}>
                 <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
             </div>
-        </Fragment>;
+        </div>;
     });
 
-
-const Logs = (props) => {
+const Logs = () => {
     const dispatch = useDispatch();
     const history = useHistory();
 
@@ -71,7 +67,14 @@ const Logs = (props) => {
         search: search_url_param = '',
     } = queryString.parse(history.location.search);
 
-    const { filter } = useSelector((state) => state.queryLogs, shallowEqual);
+    const {
+        enabled,
+        processingGetConfig,
+        processingAdditionalLogs,
+        processingGetLogs,
+    } = useSelector((state) => state.queryLogs, shallowEqual);
+    const filter = useSelector((state) => state.queryLogs.filter, shallowEqual);
+    const logs = useSelector((state) => state.queryLogs.logs, shallowEqual);
 
     const search = filter?.search || search_url_param;
     const response_status = filter?.response_status || response_status_url_param;
@@ -82,6 +85,7 @@ const Logs = (props) => {
     const [isModalOpened, setModalOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
 
+    const closeModal = () => setModalOpened(false);
 
     useEffect(() => {
         (async () => {
@@ -94,44 +98,11 @@ const Logs = (props) => {
         })();
     }, [response_status, search]);
 
-    const {
-        filtering,
-        setLogsPage,
-        setLogsPagination,
-        toggleDetailedLogs,
-        dashboard,
-        dnsConfig,
-        queryLogs: {
-            enabled,
-            processingGetConfig,
-            processingAdditionalLogs,
-            processingGetLogs,
-            oldest,
-            logs,
-            pages,
-            page,
-            isDetailed,
-        },
-    } = props;
-
     const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
     const mediaQueryHandler = (e) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {
-            toggleDetailedLogs(false);
-        }
-    };
-
-    const closeModal = () => setModalOpened(false);
-
-    const getLogs = (older_than, page, initial) => {
-        if (enabled) {
-            props.getLogs({
-                older_than,
-                page,
-                pageSize: TABLE_DEFAULT_PAGE_SIZE,
-                initial,
-            });
+            dispatch(toggleDetailedLogs(false));
         }
     };
 
@@ -149,7 +120,6 @@ const Logs = (props) => {
 
         (async () => {
             setIsLoading(true);
-            dispatch(setLogsPage(TABLE_FIRST_PAGE));
             dispatch(getFilteringStatus());
             dispatch(getClients());
             try {
@@ -169,6 +139,7 @@ const Logs = (props) => {
                 mediaQuery.removeEventListener('change', mediaQueryHandler);
             } catch (e1) {
                 try {
+                    // Safari 13.1 do not support mediaQuery.addEventListener('change', handler)
                     mediaQuery.removeListener(mediaQueryHandler);
                 } catch (e2) {
                     console.error(e2);
@@ -179,99 +150,53 @@ const Logs = (props) => {
         };
     }, []);
 
-    const refreshLogs = async () => {
-        setIsLoading(true);
-        await Promise.all([
-            dispatch(setLogsPage(TABLE_FIRST_PAGE)),
-            dispatch(refreshFilteredLogs()),
-        ]);
-        dispatch(addSuccessToast('query_log_updated'));
-        setIsLoading(false);
-    };
+    const renderPage = () => <>
+        <Filters
+                filter={{
+                    response_status,
+                    search,
+                }}
+                setIsLoading={setIsLoading}
+                processingGetLogs={processingGetLogs}
+                processingAdditionalLogs={processingAdditionalLogs}
+        />
+        <InfiniteTable
+                isLoading={isLoading}
+                items={logs}
+                isSmallScreen={isSmallScreen}
+                setDetailedDataCurrent={setDetailedDataCurrent}
+                setButtonType={setButtonType}
+                setModalOpened={setModalOpened}
+        />
+        <Modal portalClassName='grid' isOpen={isSmallScreen && isModalOpened}
+               onRequestClose={closeModal}
+               style={{
+                   content: {
+                       width: '100%',
+                       height: 'fit-content',
+                       left: 0,
+                       top: 47,
+                       padding: '1rem 1.5rem 1rem',
+                   },
+                   overlay: {
+                       backgroundColor: 'rgba(0,0,0,0.5)',
+                   },
+               }}
+        >
+            <svg
+                    className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
+                    onClick={closeModal}>
+                <use xlinkHref="#cross" />
+            </svg>
+            {processContent(detailedDataCurrent, buttonType)}
+        </Modal>
+    </>;
 
-    return (
-        <>
-            {enabled && processingGetConfig && <Loading />}
-            {enabled && !processingGetConfig && (
-                <>
-                    <Filters
-                        filter={{
-                            response_status,
-                            search,
-                        }}
-                        setIsLoading={setIsLoading}
-                        processingGetLogs={processingGetLogs}
-                        processingAdditionalLogs={processingAdditionalLogs}
-                        refreshLogs={refreshLogs}
-                    />
-                    <Table
-                        isLoading={isLoading}
-                        setIsLoading={setIsLoading}
-                        logs={logs}
-                        pages={pages}
-                        page={page}
-                        autoClients={dashboard.autoClients}
-                        oldest={oldest}
-                        filtering={filtering}
-                        processingGetLogs={processingGetLogs}
-                        processingGetConfig={processingGetConfig}
-                        isDetailed={isDetailed}
-                        setLogsPagination={setLogsPagination}
-                        setLogsPage={setLogsPage}
-                        toggleDetailedLogs={toggleDetailedLogs}
-                        getLogs={getLogs}
-                        setRules={props.setRules}
-                        addSuccessToast={props.addSuccessToast}
-                        getFilteringStatus={props.getFilteringStatus}
-                        dnssec_enabled={dnsConfig.dnssec_enabled}
-                        setDetailedDataCurrent={setDetailedDataCurrent}
-                        setButtonType={setButtonType}
-                        setModalOpened={setModalOpened}
-                        isSmallScreen={isSmallScreen}
-                    />
-                    <Modal portalClassName='grid' isOpen={isSmallScreen && isModalOpened}
-                           onRequestClose={closeModal}
-                           style={{
-                               content: {
-                                   width: '100%',
-                                   height: 'fit-content',
-                                   left: 0,
-                                   top: 47,
-                                   padding: '1rem 1.5rem 1rem',
-                               },
-                               overlay: {
-                                   backgroundColor: 'rgba(0,0,0,0.5)',
-                               },
-                           }}
-                    >
-                        <svg
-                            className="icon icon--24 icon-cross d-block d-md-none cursor--pointer"
-                            onClick={closeModal}>
-                            <use xlinkHref="#cross" />
-                        </svg>
-                        {processContent(detailedDataCurrent, buttonType)}
-                    </Modal>
-                </>
-            )}
-            {!enabled && !processingGetConfig && (
-                <Disabled />
-            )}
-        </>
-    );
-};
-
-Logs.propTypes = {
-    getLogs: PropTypes.func.isRequired,
-    queryLogs: PropTypes.object.isRequired,
-    dashboard: PropTypes.object.isRequired,
-    getFilteringStatus: PropTypes.func.isRequired,
-    filtering: PropTypes.object.isRequired,
-    setRules: PropTypes.func.isRequired,
-    addSuccessToast: PropTypes.func.isRequired,
-    setLogsPagination: PropTypes.func.isRequired,
-    setLogsPage: PropTypes.func.isRequired,
-    toggleDetailedLogs: PropTypes.func.isRequired,
-    dnsConfig: PropTypes.object.isRequired,
+    return <>
+        {enabled && processingGetConfig && <Loading />}
+        {enabled && !processingGetConfig && renderPage()}
+        {!enabled && !processingGetConfig && <Disabled />}
+    </>;
 };
 
 export default Logs;

client/src/components/Settings/Clients/Form.js

@@ -15,7 +15,7 @@ import { toggleAllServices } from '../../../helpers/helpers';
 import {
     renderInputField,
     renderGroupField,
-    renderSelectField,
+    renderCheckboxField,
     renderServiceField,
 } from '../../../helpers/form';
 import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
@@ -151,7 +151,7 @@ let Form = (props) => {
                         <Field
                             name={setting.name}
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t(setting.placeholder)}
                             disabled={
                                 setting.name !== 'use_global_settings'

client/src/components/Settings/Clients/whoisCell.js

@@ -14,7 +14,7 @@ const getFormattedWhois = (value, t) => {
                 <div key={key} title={t(key)}>
                     {icon && (
                         <Fragment>
-                            <svg className="logs__whois-icon text-muted-dark icons">
+                            <svg className="logs__whois-icon text-muted-dark icons icon--24">
                                 <use xlinkHref={`#${icon}`} />
                             </svg>
                             &nbsp;

client/src/components/Settings/Dhcp/Form.js

@@ -1,235 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-import { renderInputField, toNumber } from '../../../helpers/form';
-import { FORM_NAME } from '../../../helpers/constants';
-import { validateIpv4, validateIsPositiveValue, validateRequiredValue } from '../../../helpers/validators';
-
-const renderInterfaces = ((interfaces) => (
-    Object.keys(interfaces).map((item) => {
-        const option = interfaces[item];
-        const { name } = option;
-        const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
-        let interfaceIP = option.ip_addresses[0];
-
-        if (!onlyIPv6) {
-            option.ip_addresses.forEach((ip) => {
-                if (!ip.includes(':')) {
-                    interfaceIP = ip;
-                }
-            });
-        }
-
-        return (
-            <option value={name} key={name} disabled={onlyIPv6}>
-                {name} - {interfaceIP}
-            </option>
-        );
-    })
-));
-
-const renderInterfaceValues = ((interfaceValues) => (
-    <ul className="list-unstyled mt-1 mb-0">
-        <li>
-            <span className="interface__title">MTU: </span>
-            {interfaceValues.mtu}
-        </li>
-        <li>
-            <span className="interface__title"><Trans>dhcp_hardware_address</Trans>: </span>
-            {interfaceValues.hardware_address}
-        </li>
-        <li>
-            <span className="interface__title"><Trans>dhcp_ip_addresses</Trans>: </span>
-            {
-                interfaceValues.ip_addresses
-                    .map((ip) => <span key={ip} className="interface__ip">{ip}</span>)
-            }
-        </li>
-    </ul>
-));
-
-const clearFields = (change, resetDhcp, t) => {
-    const fields = {
-        interface_name: '',
-        gateway_ip: '',
-        subnet_mask: '',
-        range_start: '',
-        range_end: '',
-        lease_duration: 86400,
-    };
-
-    // eslint-disable-next-line no-alert
-    if (window.confirm(t('dhcp_reset'))) {
-        Object.keys(fields).forEach((field) => change(field, fields[field]));
-        resetDhcp();
-    }
-};
-
-let Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        submitting,
-        invalid,
-        enabled,
-        interfaces,
-        interfaceValue,
-        processingConfig,
-        processingInterfaces,
-        resetDhcp,
-        change,
-    } = props;
-
-    return (
-        <form onSubmit={handleSubmit}>
-            {!processingInterfaces && interfaces
-                && <div className="row">
-                    <div className="col-sm-12 col-md-6">
-                        <div className="form__group form__group--settings">
-                            <label>{t('dhcp_interface_select')}</label>
-                            <Field
-                                name="interface_name"
-                                component="select"
-                                className="form-control custom-select"
-                                validate={[validateRequiredValue]}
-                            >
-                                <option value="" disabled={enabled}>
-                                    {t('dhcp_interface_select')}
-                                </option>
-                                {renderInterfaces(interfaces)}
-                            </Field>
-                        </div>
-                    </div>
-                    {interfaceValue
-                        && <div className="col-sm-12 col-md-6">
-                            {interfaces[interfaceValue]
-                                && renderInterfaceValues(interfaces[interfaceValue])}
-                        </div>
-                    }
-                </div>
-            }
-            <hr/>
-            <div className="row">
-                <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_gateway_input')}</label>
-                        <Field
-                            id="gateway_ip"
-                            name="gateway_ip"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('dhcp_form_gateway_input')}
-                            validate={[validateIpv4, validateRequiredValue]}
-                        />
-                    </div>
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_subnet_input')}</label>
-                        <Field
-                            id="subnet_mask"
-                            name="subnet_mask"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('dhcp_form_subnet_input')}
-                            validate={[validateIpv4, validateRequiredValue]}
-                        />
-                    </div>
-                </div>
-                <div className="col-lg-6">
-                    <div className="form__group form__group--settings">
-                        <div className="row">
-                            <div className="col-12">
-                                <label>{t('dhcp_form_range_title')}</label>
-                            </div>
-                            <div className="col">
-                                <Field
-                                    id="range_start"
-                                    name="range_start"
-                                    component={renderInputField}
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t('dhcp_form_range_start')}
-                                    validate={[validateIpv4, validateRequiredValue]}
-                                />
-                            </div>
-                            <div className="col">
-                                <Field
-                                    id="range_end"
-                                    name="range_end"
-                                    component={renderInputField}
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={t('dhcp_form_range_end')}
-                                    validate={[validateIpv4, validateRequiredValue]}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="form__group form__group--settings">
-                        <label>{t('dhcp_form_lease_title')}</label>
-                        <Field
-                            name="lease_duration"
-                            component={renderInputField}
-                            type="number"
-                            className="form-control"
-                            placeholder={t('dhcp_form_lease_input')}
-                            validate={[validateRequiredValue, validateIsPositiveValue]}
-                            normalize={toNumber}
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <div className="btn-list">
-                <button
-                    type="submit"
-                    className="btn btn-success btn-standard"
-                    disabled={submitting || invalid || processingConfig}
-                >
-                    {t('save_config')}
-                </button>
-                <button
-                    type="button"
-                    className="btn btn-secondary btn-standart"
-                    disabled={submitting || processingConfig}
-                    onClick={() => clearFields(change, resetDhcp, t)}
-                >
-                    <Trans>reset_settings</Trans>
-                </button>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    submitting: PropTypes.bool.isRequired,
-    invalid: PropTypes.bool.isRequired,
-    interfaces: PropTypes.object.isRequired,
-    interfaceValue: PropTypes.string,
-    initialValues: PropTypes.object.isRequired,
-    processingConfig: PropTypes.bool.isRequired,
-    processingInterfaces: PropTypes.bool.isRequired,
-    enabled: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
-    resetDhcp: PropTypes.func.isRequired,
-    change: PropTypes.func.isRequired,
-};
-
-const selector = formValueSelector(FORM_NAME.DHCP);
-
-Form = connect((state) => {
-    const interfaceValue = selector(state, 'interface_name');
-    return {
-        interfaceValue,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.DHCP }),
-])(Form);

client/src/components/Settings/Dhcp/FormDHCPv4.js

@@ -0,0 +1,145 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import {
+    renderInputField,
+    toNumber,
+} from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
+import {
+    validateIpv4,
+    validateIsPositiveValue,
+    validateRequiredValue,
+    validateIpv4RangeEnd,
+} from '../../../helpers/validators';
+
+const FormDHCPv4 = ({
+    handleSubmit,
+    submitting,
+    processingConfig,
+    ipv4placeholders,
+}) => {
+    const { t } = useTranslation();
+    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
+    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv4 = useSelector(
+        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {})
+        .some(Boolean);
+
+    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv4
+        || isEmptyConfig || submitting || processingConfig;
+
+    const validateRequired = useCallback((value) => {
+        if (isEmptyConfig) {
+            return undefined;
+        }
+        return validateRequiredValue(value);
+    }, [isEmptyConfig]);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_gateway_input')}</label>
+                    <Field
+                        name="v4.gateway_ip"
+                        component={renderInputField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.gateway_ip)}
+                        validate={[validateIpv4, validateRequired]}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_subnet_input')}</label>
+                    <Field
+                        name="v4.subnet_mask"
+                        component={renderInputField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.subnet_mask)}
+                        validate={[validateIpv4, validateRequired]}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+            </div>
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <div className="row">
+                        <div className="col-12">
+                            <label>{t('dhcp_form_range_title')}</label>
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v4.range_start"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv4placeholders.range_start)}
+                                validate={[validateIpv4]}
+                                disabled={!isInterfaceIncludesIpv4}
+                            />
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v4.range_end"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv4placeholders.range_end)}
+                                validate={[validateIpv4, validateIpv4RangeEnd]}
+                                disabled={!isInterfaceIncludesIpv4}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="form__group form__group--settings">
+                    <label>{t('dhcp_form_lease_title')}</label>
+                    <Field
+                        name="v4.lease_duration"
+                        component={renderInputField}
+                        type="number"
+                        className="form-control"
+                        placeholder={t(ipv4placeholders.lease_duration)}
+                        validate={[validateIsPositiveValue, validateRequired]}
+                        normalize={toNumber}
+                        min={0}
+                        disabled={!isInterfaceIncludesIpv4}
+                    />
+                </div>
+            </div>
+        </div>
+        <div className="btn-list">
+            <button
+                type="submit"
+                className="btn btn-success btn-standard"
+                disabled={invalid}
+            >
+                {t('save_config')}
+            </button>
+        </div>
+    </form>;
+};
+
+FormDHCPv4.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingConfig: PropTypes.bool.isRequired,
+    change: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    ipv4placeholders: PropTypes.object.isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCPv4,
+})(FormDHCPv4);

client/src/components/Settings/Dhcp/FormDHCPv6.js

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+
+import {
+    renderInputField,
+    toNumber,
+} from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
+import {
+    validateIpv6,
+    validateIsPositiveValue,
+    validateRequiredValue,
+} from '../../../helpers/validators';
+
+const FormDHCPv6 = ({
+    handleSubmit,
+    submitting,
+    processingConfig,
+    ipv6placeholders,
+}) => {
+    const { t } = useTranslation();
+    const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv6], shallowEqual);
+    const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
+    const interface_name = interfaces?.values?.interface_name;
+
+    const isInterfaceIncludesIpv6 = useSelector(
+        (state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
+    );
+
+    const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {})
+        .some(Boolean);
+
+    const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv6
+        || isEmptyConfig || submitting || processingConfig;
+
+    const validateRequired = useCallback((value) => {
+        if (isEmptyConfig) {
+            return undefined;
+        }
+        return validateRequiredValue(value);
+    }, [isEmptyConfig]);
+
+    return <form onSubmit={handleSubmit}>
+        <div className="row">
+            <div className="col-lg-6">
+                <div className="form__group form__group--settings">
+                    <div className="row">
+                        <div className="col-12">
+                            <label>{t('dhcp_form_range_title')}</label>
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v6.range_start"
+                                component={renderInputField}
+                                type="text"
+                                className="form-control"
+                                placeholder={t(ipv6placeholders.range_start)}
+                                validate={[validateIpv6, validateRequired]}
+                                disabled={!isInterfaceIncludesIpv6}
+                            />
+                        </div>
+                        <div className="col">
+                            <Field
+                                name="v6.range_end"
+                                component="input"
+                                type="text"
+                                className="form-control disabled cursor--not-allowed"
+                                placeholder={t(ipv6placeholders.range_end)}
+                                value={t(ipv6placeholders.range_end)}
+                                disabled
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="row">
+            <div className="col-lg-6 form__group form__group--settings">
+                <label>{t('dhcp_form_lease_title')}</label>
+                <Field
+                    name="v6.lease_duration"
+                    component={renderInputField}
+                    type="number"
+                    className="form-control"
+                    placeholder={t(ipv6placeholders.lease_duration)}
+                    validate={[validateIsPositiveValue, validateRequired]}
+                    normalizeOnBlur={toNumber}
+                    min={0}
+                    disabled={!isInterfaceIncludesIpv6}
+                />
+            </div>
+        </div>
+        <div className="btn-list">
+            <button
+                type="submit"
+                className="btn btn-success btn-standard"
+                disabled={invalid}
+            >
+                {t('save_config')}
+            </button>
+        </div>
+    </form>;
+};
+
+FormDHCPv6.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    processingConfig: PropTypes.bool.isRequired,
+    change: PropTypes.func.isRequired,
+    reset: PropTypes.func.isRequired,
+    ipv6placeholders: PropTypes.object.isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCPv6,
+})(FormDHCPv6);

client/src/components/Settings/Dhcp/Interfaces.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
+import propTypes from 'prop-types';
+import { renderSelectField } from '../../../helpers/form';
+import { validateRequiredValue } from '../../../helpers/validators';
+import { FORM_NAME } from '../../../helpers/constants';
+
+const renderInterfaces = (interfaces) => Object.keys(interfaces)
+    .map((item) => {
+        const option = interfaces[item];
+        const { name } = option;
+
+        const [interfaceIPv4] = option?.ipv4_addresses ?? [];
+        const [interfaceIPv6] = option?.ipv6_addresses ?? [];
+
+        const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
+
+        return <option value={name} key={name}>{optionContent}</option>;
+    });
+
+
+const getInterfaceValues = ({
+    gateway_ip,
+    hardware_address,
+    ip_addresses,
+}) => [
+    {
+        name: 'dhcp_form_gateway_input',
+        value: gateway_ip,
+    },
+    {
+        name: 'dhcp_hardware_address',
+        value: hardware_address,
+    },
+    {
+        name: 'dhcp_ip_addresses',
+        value: ip_addresses,
+        render: (ip_addresses) => ip_addresses
+            .map((ip) => <span key={ip} className="interface__ip">{ip}</span>),
+    },
+];
+
+const renderInterfaceValues = ({
+    gateway_ip,
+    hardware_address,
+    ip_addresses,
+}) => <div className='d-flex align-items-end col-6'>
+    <ul className="list-unstyled m-0">
+        {getInterfaceValues({
+            gateway_ip,
+            hardware_address,
+            ip_addresses,
+        }).map(({ name, value, render }) => value && <li key={name}>
+            <span className="interface__title"><Trans>{name}</Trans>: </span>
+            {render?.(value) || value}
+        </li>)}
+    </ul>
+</div>;
+
+const Interfaces = () => {
+    const { t } = useTranslation();
+
+    const {
+        processingInterfaces,
+        interfaces,
+        enabled,
+    } = useSelector((store) => store.dhcp, shallowEqual);
+
+    const interface_name = useSelector(
+        (store) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
+    );
+
+    const interfaceValue = interface_name && interfaces[interface_name];
+
+    return !processingInterfaces
+            && interfaces
+            && <>
+                <div className="row align-items-center pb-2">
+                    <div className="col-6">
+                        <Field
+                                name="interface_name"
+                                component={renderSelectField}
+                                className="form-control custom-select"
+                                validate={[validateRequiredValue]}
+                                label='dhcp_interface_select'
+                        >
+                            <option value='' disabled={enabled}>
+                                {t('dhcp_interface_select')}
+                            </option>
+                            {renderInterfaces(interfaces)}
+                        </Field>
+                    </div>
+                    {interfaceValue
+                    && renderInterfaceValues(interfaceValue)}
+                </div>
+            </>;
+};
+
+renderInterfaceValues.propTypes = {
+    gateway_ip: propTypes.string.isRequired,
+    hardware_address: propTypes.string.isRequired,
+    ip_addresses: propTypes.arrayOf(propTypes.string).isRequired,
+};
+
+export default reduxForm({
+    form: FORM_NAME.DHCP_INTERFACES,
+})(Interfaces);

client/src/components/Settings/Dhcp/StaticLeases/Form.js

@@ -1,22 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { renderInputField } from '../../../../helpers/form';
 import { validateIpv4, validateMac, validateRequiredValue } from '../../../../helpers/validators';
 import { FORM_NAME } from '../../../../helpers/constants';
+import { toggleLeaseModal } from '../../../../actions';
 
-const Form = (props) => {
-    const {
-        t,
-        handleSubmit,
-        reset,
-        pristine,
-        submitting,
-        toggleLeaseModal,
-        processingAdding,
-    } = props;
+const Form = ({
+    handleSubmit,
+    reset,
+    pristine,
+    submitting,
+    processingAdding,
+}) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const onClick = () => {
+        reset();
+        dispatch(toggleLeaseModal());
+    };
 
     return (
         <form onSubmit={handleSubmit}>
@@ -61,10 +66,7 @@ const Form = (props) => {
                         type="button"
                         className="btn btn-secondary btn-standard"
                         disabled={submitting}
-                        onClick={() => {
-                            reset();
-                            toggleLeaseModal();
-                        }}
+                        onClick={onClick}
                     >
                         <Trans>cancel_btn</Trans>
                     </button>
@@ -86,12 +88,7 @@ Form.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     reset: PropTypes.func.isRequired,
     submitting: PropTypes.bool.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default flow([
-    withTranslation(),
-    reduxForm({ form: FORM_NAME.LEASE }),
-])(Form);
+export default reduxForm({ form: FORM_NAME.LEASE })(Form);

client/src/components/Settings/Dhcp/StaticLeases/Modal.js

@@ -2,36 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
-
+import { useDispatch } from 'react-redux';
 import Form from './Form';
+import { toggleLeaseModal } from '../../../../actions';
 
-const Modal = (props) => {
-    const {
-        isModalOpen,
-        handleSubmit,
-        toggleLeaseModal,
-        processingAdding,
-    } = props;
+const Modal = ({
+    isModalOpen,
+    handleSubmit,
+    processingAdding,
+}) => {
+    const dispatch = useDispatch();
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
 
     return (
         <ReactModal
             className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
             closeTimeoutMS={0}
             isOpen={isModalOpen}
-            onRequestClose={() => toggleLeaseModal()}
+            onRequestClose={toggleModal}
         >
             <div className="modal-content">
                 <div className="modal-header">
                     <h4 className="modal-title">
                         <Trans>dhcp_new_static_lease</Trans>
                     </h4>
-                    <button type="button" className="close" onClick={() => toggleLeaseModal()}>
+                    <button type="button" className="close" onClick={toggleModal}>
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
                 <Form
                     onSubmit={handleSubmit}
-                    toggleLeaseModal={toggleLeaseModal}
                     processingAdding={processingAdding}
                 />
             </div>
@@ -42,7 +43,6 @@ const Modal = (props) => {
 Modal.propTypes = {
     isModalOpen: PropTypes.bool.isRequired,
     handleSubmit: PropTypes.func.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
 };
 

client/src/components/Settings/Dhcp/StaticLeases/index.js

@@ -1,115 +1,116 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
 import { sortIp } from '../../../../helpers/helpers';
 import Modal from './Modal';
+import { addStaticLease, removeStaticLease } from '../../../../actions';
 
-class StaticLeases extends Component {
-    cellWrap = ({ value }) => (
-        <div className="logs__row o-hidden">
+const cellWrap = ({ value }) => (
+    <div className="logs__row o-hidden">
             <span className="logs__text" title={value}>
                 {value}
             </span>
-        </div>
-    );
+    </div>
+);
 
-    handleSubmit = (data) => {
-        this.props.addStaticLease(data);
+const StaticLeases = ({
+    isModalOpen,
+    processingAdding,
+    processingDeleting,
+    staticLeases,
+}) => {
+    const [t] = useTranslation();
+    const dispatch = useDispatch();
+
+    const handleSubmit = (data) => {
+        dispatch(addStaticLease(data));
     };
 
-    handleDelete = (ip, mac, hostname = '') => {
+    const handleDelete = (ip, mac, hostname = '') => {
         const name = hostname || ip;
         // eslint-disable-next-line no-alert
-        if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
-            this.props.removeStaticLease({ ip, mac, hostname });
+        if (window.confirm(t('delete_confirm', { key: name }))) {
+            dispatch(removeStaticLease({
+                ip,
+                mac,
+                hostname,
+            }));
         }
     };
 
-    render() {
-        const {
-            isModalOpen,
-            toggleLeaseModal,
-            processingAdding,
-            processingDeleting,
-            staticLeases,
-            t,
-        } = this.props;
-        return (
-            <Fragment>
-                <ReactTable
-                    data={staticLeases || []}
-                    columns={[
-                        {
-                            Header: 'MAC',
-                            accessor: 'mac',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: 'IP',
-                            accessor: 'ip',
-                            sortMethod: sortIp,
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: <Trans>dhcp_table_hostname</Trans>,
-                            accessor: 'hostname',
-                            Cell: this.cellWrap,
-                        },
-                        {
-                            Header: <Trans>actions_table_header</Trans>,
-                            accessor: 'actions',
-                            maxWidth: 150,
-                            Cell: (row) => {
-                                const { ip, mac, hostname } = row.original;
+    return (
+        <>
+            <ReactTable
+                data={staticLeases || []}
+                columns={[
+                    {
+                        Header: 'MAC',
+                        accessor: 'mac',
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: 'IP',
+                        accessor: 'ip',
+                        sortMethod: sortIp,
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: <Trans>dhcp_table_hostname</Trans>,
+                        accessor: 'hostname',
+                        Cell: cellWrap,
+                    },
+                    {
+                        Header: <Trans>actions_table_header</Trans>,
+                        accessor: 'actions',
+                        maxWidth: 150,
+                        // eslint-disable-next-line react/display-name
+                        Cell: (row) => {
+                            const { ip, mac, hostname } = row.original;
 
-                                return (
-                                    <div className="logs__row logs__row--center">
-                                        <button
-                                            type="button"
-                                            className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
-                                            title={t('delete_table_action')}
-                                            disabled={processingDeleting}
-                                            onClick={() => this.handleDelete(ip, mac, hostname)
-                                            }
+                            return <div className="logs__row logs__row--center">
+                                <button
+                                        type="button"
+                                        className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
+                                        title={t('delete_table_action')}
+                                        disabled={processingDeleting}
+                                        onClick={() => handleDelete(ip, mac, hostname)}
                                         >
                                             <svg className="icons">
                                                 <use xlinkHref="#delete"/>
                                             </svg>
                                         </button>
-                                    </div>
-                                );
-                            },
+                                    </div>;
                         },
-                    ]}
-                    pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
-                    showPageSizeOptions={false}
-                    showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
-                    noDataText={t('dhcp_static_leases_not_found')}
-                    className="-striped -highlight card-table-overflow"
-                    minRows={6}
-                />
-                <Modal
-                    isModalOpen={isModalOpen}
-                    toggleLeaseModal={toggleLeaseModal}
-                    handleSubmit={this.handleSubmit}
-                    processingAdding={processingAdding}
-                />
-            </Fragment>
-        );
-    }
-}
+                    },
+                ]}
+                pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
+                showPageSizeOptions={false}
+                showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
+                noDataText={t('dhcp_static_leases_not_found')}
+                className="-striped -highlight card-table-overflow"
+                minRows={6}
+            />
+            <Modal
+                isModalOpen={isModalOpen}
+                handleSubmit={handleSubmit}
+                processingAdding={processingAdding}
+            />
+        </>
+    );
+};
 
 StaticLeases.propTypes = {
     staticLeases: PropTypes.array.isRequired,
     isModalOpen: PropTypes.bool.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
-    removeStaticLease: PropTypes.func.isRequired,
-    addStaticLease: PropTypes.func.isRequired,
     processingAdding: PropTypes.bool.isRequired,
     processingDeleting: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(StaticLeases);
+cellWrap.propTypes = {
+    value: PropTypes.string.isRequired,
+};
+
+export default StaticLeases;

client/src/components/Settings/Dhcp/index.js

@@ -1,274 +1,277 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Trans, withTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
-import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
-import Form from './Form';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { destroy } from 'redux-form';
+import {
+    DHCP_DESCRIPTION_PLACEHOLDERS,
+    DHCP_FORM_NAMES,
+    STATUS_RESPONSE,
+    FORM_NAME,
+} from '../../../helpers/constants';
 import Leases from './Leases';
 import StaticLeases from './StaticLeases/index';
 import Card from '../../ui/Card';
-import Accordion from '../../ui/Accordion';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
+import {
+    findActiveDhcp,
+    getDhcpInterfaces,
+    getDhcpStatus,
+    resetDhcp,
+    setDhcpConfig,
+    toggleDhcp,
+    toggleLeaseModal,
+} from '../../../actions';
+import FormDHCPv4 from './FormDHCPv4';
+import FormDHCPv6 from './FormDHCPv6';
+import Interfaces from './Interfaces';
+import {
+    calculateDhcpPlaceholdersIpv4,
+    calculateDhcpPlaceholdersIpv6,
+} from '../../../helpers/helpers';
 
-class Dhcp extends Component {
-    componentDidMount() {
-        this.props.getDhcpStatus();
-        this.props.getDhcpInterfaces();
-    }
+const Dhcp = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const {
+        processingStatus,
+        processingConfig,
+        processing,
+        processingInterfaces,
+        check,
+        leases,
+        staticLeases,
+        isModalOpen,
+        processingAdding,
+        processingDeleting,
+        processingDhcp,
+        v4,
+        v6,
+        interface_name: interfaceName,
+        enabled,
+        dhcp_available,
+        interfaces,
+    } = useSelector((state) => state.dhcp, shallowEqual);
 
-    handleFormSubmit = (values) => {
-        if (values.interface_name) {
-            this.props.setDhcpConfig(values);
+    const interface_name = useSelector(
+        (state) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
+    );
+
+    const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
+    const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
+
+    useEffect(() => {
+        dispatch(getDhcpStatus());
+        dispatch(getDhcpInterfaces());
+    }, []);
+
+    useEffect(() => {
+        const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
+        const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
+        const gateway_ip = interfaces?.[interface_name]?.gateway_ip;
+
+        const v4placeholders = ipv4
+            ? calculateDhcpPlaceholdersIpv4(ipv4, gateway_ip)
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv4;
+
+        const v6placeholders = ipv6
+            ? calculateDhcpPlaceholdersIpv6()
+            : DHCP_DESCRIPTION_PLACEHOLDERS.ipv6;
+
+        setIpv4Placeholders(v4placeholders);
+        setIpv6Placeholders(v6placeholders);
+    }, [interface_name]);
+
+    const clear = () => {
+        // eslint-disable-next-line no-alert
+        if (window.confirm(t('dhcp_reset'))) {
+            Object.values(DHCP_FORM_NAMES)
+                .forEach((formName) => dispatch(destroy(formName)));
+            dispatch(resetDhcp());
         }
     };
 
-    handleToggle = (config) => {
-        this.props.toggleDhcp(config);
+    const handleSubmit = (values) => {
+        dispatch(setDhcpConfig({
+            interface_name,
+            ...values,
+        }));
     };
 
-    getToggleDhcpButton = () => {
-        const {
-            config, check, processingDhcp, processingConfig,
-        } = this.props.dhcp;
-        const otherDhcpFound = check?.otherServer
-            && check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
-        const filledConfig = Object.keys(config)
-            .every((key) => {
-                if (key === 'enabled' || key === 'icmp_timeout_msec') {
-                    return true;
-                }
+    const enteredSomeV4Value = Object.values(v4)
+        .some(Boolean);
+    const enteredSomeV6Value = Object.values(v6)
+        .some(Boolean);
+    const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
 
-                return config[key];
-            });
+    const getToggleDhcpButton = () => {
+        const otherDhcpFound = check && (check.v4.other_server.found === STATUS_RESPONSE.YES
+                || check.v6.other_server.found === STATUS_RESPONSE.YES);
 
-        if (config.enabled) {
-            return (
-                <button
-                    type="button"
-                    className="btn btn-standard mr-2 btn-gray"
-                    onClick={() => this.props.toggleDhcp(config)}
-                    disabled={processingDhcp || processingConfig}
-                >
-                    <Trans>dhcp_disable</Trans>
-                </button>
-            );
-        }
+        const filledConfig = interface_name && (Object.values(v4)
+            .every(Boolean) || Object.values(v6)
+            .every(Boolean));
 
-        return (
-            <button
-                type="button"
-                className="btn btn-standard mr-2 btn-success"
-                onClick={() => this.handleToggle(config)}
-                disabled={
-                    !filledConfig || !check || otherDhcpFound || processingDhcp || processingConfig
-                }
-            >
-                <Trans>dhcp_enable</Trans>
-            </button>
-        );
-    };
-
-    getActiveDhcpMessage = (t, check) => {
-        const { found } = check.otherServer;
-
-        if (found === DHCP_STATUS_RESPONSE.ERROR) {
-            return (
-                <div className="text-danger mb-2">
-                    <Trans>dhcp_error</Trans>
-                    <div className="mt-2 mb-2">
-                        <Accordion label={t('error_details')}>
-                            <span>{check.otherServer.error}</span>
-                        </Accordion>
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div className="mb-2">
-                {found === DHCP_STATUS_RESPONSE.YES ? (
-                    <div className="text-danger">
-                        <Trans>dhcp_found</Trans>
-                    </div>
-                ) : (
-                    <div className="text-secondary">
-                        <Trans>dhcp_not_found</Trans>
-                    </div>
-                )}
-            </div>
-        );
-    };
-
-    getDhcpWarning = (check) => {
-        if (check.otherServer.found === DHCP_STATUS_RESPONSE.NO) {
-            return '';
-        }
-
-        return (
-            <div className="text-danger">
-                <Trans>dhcp_warning</Trans>
-            </div>
-        );
-    };
-
-    getStaticIpWarning = (t, check, interfaceName) => {
-        if (check.staticIP.static === DHCP_STATUS_RESPONSE.ERROR) {
-            return <>
-                <div className="text-danger mb-2">
-                    <Trans>dhcp_static_ip_error</Trans>
-                    <div className="mt-2 mb-2">
-                        <Accordion label={t('error_details')}>
-                            <span>{check.staticIP.error}</span>
-                        </Accordion>
-                    </div>
-                </div>
-                <hr className="mt-4 mb-4" />
-            </>;
-        }
-        if (check.staticIP.static === DHCP_STATUS_RESPONSE.NO
-            && check.staticIP.ip
-            && interfaceName) {
-            return <>
-                <div className="text-secondary mb-2">
-                    <Trans
-                        components={[<strong key="0">example</strong>]}
-                        values={{
-                            interfaceName,
-                            ipAddress: check.staticIP.ip,
-                        }}
-                    >
-                        dhcp_dynamic_ip_found
-                    </Trans>
-                </div>
-                <hr className="mt-4 mb-4" />
-            </>;
-        }
-
-        return '';
-    };
-
-    render() {
-        const {
-            t,
-            dhcp,
-            resetDhcp,
-            findActiveDhcp,
-            addStaticLease,
-            removeStaticLease,
-            toggleLeaseModal,
-        } = this.props;
-
-        const statusButtonClass = classnames({
-            'btn btn-primary btn-standard': true,
-            'btn btn-primary btn-standard btn-loading': dhcp.processingStatus,
+        const className = classNames('btn btn-sm mr-2', {
+            'btn-gray': enabled,
+            'btn-outline-success': !enabled,
         });
-        const { enabled, interface_name, ...values } = dhcp.config;
 
-        return <>
-            <PageTitle title={t('dhcp_settings')} />
-            {(dhcp.processing || dhcp.processingInterfaces) && <Loading />}
-            {!dhcp.processing && !dhcp.processingInterfaces && <>
-                <Card
-                    title={t('dhcp_title')}
-                    subtitle={t('dhcp_description')}
-                    bodyType="card-body box-body--settings"
-                >
-                    <div className="dhcp">
-                        <>
-                            <Form
-                                onSubmit={this.handleFormSubmit}
-                                initialValues={{
-                                    interface_name,
-                                    ...values,
-                                }}
-                                interfaces={dhcp.interfaces}
-                                processingConfig={dhcp.processingConfig}
-                                processingInterfaces={dhcp.processingInterfaces}
-                                enabled={enabled}
-                                resetDhcp={resetDhcp}
-                            />
-                            <hr />
-                            <div className="card-actions mb-3">
-                                {this.getToggleDhcpButton()}
-                                <button
-                                    type="button"
-                                    className={statusButtonClass}
-                                    onClick={() => findActiveDhcp(interface_name)}
-                                    disabled={
-                                        enabled || !interface_name || dhcp.processingConfig
-                                    }
-                                >
-                                    <Trans>check_dhcp_servers</Trans>
-                                </button>
-                            </div>
-                            {!enabled && dhcp.check && (
-                                <>
-                                    {this.getStaticIpWarning(t, dhcp.check, interface_name)}
-                                    {this.getActiveDhcpMessage(t, dhcp.check)}
-                                    {this.getDhcpWarning(dhcp.check)}
-                                </>
-                            )}
-                        </>
-                    </div>
-                </Card>
-                {dhcp.config.enabled && (
-                    <Card
-                        title={t('dhcp_leases')}
-                        bodyType="card-body box-body--settings"
-                    >
-                        <div className="row">
-                            <div className="col">
-                                <Leases leases={dhcp.leases} />
-                            </div>
-                        </div>
-                    </Card>
-                )}
-                <Card
-                    title={t('dhcp_static_leases')}
-                    bodyType="card-body box-body--settings"
-                >
-                    <div className="row">
-                        <div className="col-12">
-                            <StaticLeases
-                                staticLeases={dhcp.staticLeases}
-                                isModalOpen={dhcp.isModalOpen}
-                                addStaticLease={addStaticLease}
-                                removeStaticLease={removeStaticLease}
-                                toggleLeaseModal={toggleLeaseModal}
-                                processingAdding={dhcp.processingAdding}
-                                processingDeleting={dhcp.processingDeleting}
-                            />
-                        </div>
-                        <div className="col-12">
-                            <button
-                                type="button"
-                                className="btn btn-success btn-standard mt-3"
-                                onClick={() => toggleLeaseModal()}
-                            >
-                                <Trans>dhcp_add_static_lease</Trans>
-                            </button>
-                        </div>
-                    </div>
-                </Card>
-            </>}
-        </>;
+        const onClickDisable = () => dispatch(toggleDhcp({ enabled }));
+        const onClickEnable = () => {
+            const values = {
+                enabled,
+                interface_name,
+                v4: enteredSomeV4Value ? v4 : {},
+                v6: enteredSomeV6Value ? v6 : {},
+            };
+            dispatch(toggleDhcp(values));
+        };
+
+        return <button
+            type="button"
+            className={className}
+            onClick={enabled ? onClickDisable : onClickEnable}
+            disabled={processingDhcp || processingConfig
+            || (!enabled && (!filledConfig || !check || otherDhcpFound))}
+        >
+            <Trans>{enabled ? 'dhcp_disable' : 'dhcp_enable'}</Trans>
+        </button>;
+    };
+
+    const statusButtonClass = classNames('btn btn-sm mx-2', {
+        'btn-loading btn-primary': processingStatus,
+        'btn-outline-primary': !processingStatus,
+    });
+
+    const onClick = () => dispatch(findActiveDhcp(interface_name));
+
+    const toggleModal = () => dispatch(toggleLeaseModal());
+
+    const initialV4 = enteredSomeV4Value ? v4 : {};
+    const initialV6 = enteredSomeV6Value ? v6 : {};
+
+    if (processing || processingInterfaces) {
+        return <Loading />;
     }
-}
 
-Dhcp.propTypes = {
-    dhcp: PropTypes.object.isRequired,
-    toggleDhcp: PropTypes.func.isRequired,
-    getDhcpStatus: PropTypes.func.isRequired,
-    setDhcpConfig: PropTypes.func.isRequired,
-    findActiveDhcp: PropTypes.func.isRequired,
-    addStaticLease: PropTypes.func.isRequired,
-    removeStaticLease: PropTypes.func.isRequired,
-    toggleLeaseModal: PropTypes.func.isRequired,
-    getDhcpInterfaces: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-    resetDhcp: PropTypes.func.isRequired,
+    if (!processing && !dhcp_available) {
+        return <div className="text-center pt-5">
+            <h2>
+                <Trans>unavailable_dhcp</Trans>
+            </h2>
+            <h4>
+                <Trans>unavailable_dhcp_desc</Trans>
+            </h4>
+        </div>;
+    }
+
+    const toggleDhcpButton = getToggleDhcpButton();
+
+    return <>
+        <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')}>
+            <div className="page-title__actions">
+                <div className="mb-3">
+                    {toggleDhcpButton}
+                    <button
+                        type="button"
+                        className={statusButtonClass}
+                        onClick={onClick}
+                        disabled={enabled || !interface_name || processingConfig}
+                    >
+                        <Trans>check_dhcp_servers</Trans>
+                    </button>
+                    <button
+                        type="button"
+                        className='btn btn-sm mx-2 btn-outline-secondary'
+                        disabled={!enteredSomeValue || processingConfig}
+                        onClick={clear}
+                    >
+                        <Trans>reset_settings</Trans>
+                    </button>
+                </div>
+            </div>
+        </PageTitle>
+        {!processing && !processingInterfaces
+        && <>
+            {!enabled
+            && check
+            && (check.v4.other_server.found !== STATUS_RESPONSE.NO
+                    || check.v6.other_server.found !== STATUS_RESPONSE.NO)
+            && <div className="mb-5">
+                <hr />
+                <div className="text-danger">
+                    <Trans>dhcp_warning</Trans>
+                </div>
+            </div>}
+            <Interfaces
+                initialValues={{ interface_name: interfaceName }}
+            />
+            <Card
+                title={t('dhcp_ipv4_settings')}
+                bodyType="card-body box-body--settings"
+            >
+                <div>
+                    <FormDHCPv4
+                        onSubmit={handleSubmit}
+                        initialValues={{ v4: initialV4 }}
+                        processingConfig={processingConfig}
+                        ipv4placeholders={ipv4placeholders}
+                    />
+                </div>
+            </Card>
+            <Card
+                title={t('dhcp_ipv6_settings')}
+                bodyType="card-body box-body--settings"
+            >
+                <div>
+                    <FormDHCPv6
+                        onSubmit={handleSubmit}
+                        initialValues={{ v6: initialV6 }}
+                        processingConfig={processingConfig}
+                        ipv6placeholders={ipv6placeholders}
+                    />
+                </div>
+            </Card>
+            {enabled
+            && <Card
+                title={t('dhcp_leases')}
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col">
+                        <Leases leases={leases} />
+                    </div>
+                </div>
+            </Card>}
+            <Card
+                title={t('dhcp_static_leases')}
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col-12">
+                        <StaticLeases
+                            staticLeases={staticLeases}
+                            isModalOpen={isModalOpen}
+                            processingAdding={processingAdding}
+                            processingDeleting={processingDeleting}
+                        />
+                    </div>
+                    <div className="col-12">
+                        <button
+                            type="button"
+                            className="btn btn-success btn-standard mt-3"
+                            onClick={toggleModal}
+                        >
+                            <Trans>dhcp_add_static_lease</Trans>
+                        </button>
+                    </div>
+                </div>
+            </Card>
+        </>}
+    </>;
 };
 
-export default withTranslation()(Dhcp);
+export default Dhcp;

client/src/components/Settings/Dns/Config/Form.js

@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import {
     renderInputField,
     renderRadioField,
-    renderSelectField,
+    renderCheckboxField,
     toNumber,
 } from '../../../../helpers/form';
 import {
@@ -96,7 +96,7 @@ const Form = ({
                     <Field
                         name={name}
                         type="checkbox"
-                        component={renderSelectField}
+                        component={renderCheckboxField}
                         placeholder={t(placeholder)}
                         disabled={processing}
                         subtitle={t(subtitle)}

client/src/components/Settings/Encryption/Form.js

@@ -7,7 +7,7 @@ import flow from 'lodash/flow';
 
 import {
     renderInputField,
-    renderSelectField,
+    renderCheckboxField,
     renderRadioField,
     toNumber,
 } from '../../../helpers/form';
@@ -15,7 +15,7 @@ import { validateIsSafePort, validatePort, validatePortTLS } from '../../../help
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
-import { FORM_NAME } from '../../../helpers/constants';
+import { DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -36,8 +36,8 @@ const clearFields = (change, setTlsConfig, t) => {
         certificate_chain: '',
         private_key_path: '',
         certificate_path: '',
-        port_https: 443,
-        port_dns_over_tls: 853,
+        port_https: STANDARD_HTTPS_PORT,
+        port_dns_over_tls: DNS_OVER_TLS_PORT,
         server_name: '',
         force_https: false,
         enabled: false,
@@ -96,7 +96,7 @@ let Form = (props) => {
                         <Field
                             name="enabled"
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('encryption_enable')}
                             onChange={handleChange}
                         />
@@ -133,7 +133,7 @@ let Form = (props) => {
                         <Field
                             name="force_https"
                             type="checkbox"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('encryption_redirect')}
                             onChange={handleChange}
                             disabled={!isEnabled}

client/src/components/Settings/FiltersConfig/Form.js

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderSelectField, toNumber } from '../../../helpers/form';
+import { renderCheckboxField, toNumber } from '../../../helpers/form';
 import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
@@ -49,7 +49,7 @@ const Form = (props) => {
                             name="enabled"
                             type="checkbox"
                             modifier="checkbox--settings"
-                            component={renderSelectField}
+                            component={renderCheckboxField}
                             placeholder={t('block_domain_use_filters_and_hosts')}
                             subtitle={t('filters_block_toggle_hint')}
                             onChange={handleChange}

client/src/components/Settings/LogsConfig/Form.js

@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
+import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
 import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
@@ -35,7 +35,7 @@ const Form = (props) => {
                 <Field
                     name="enabled"
                     type="checkbox"
-                    component={renderSelectField}
+                    component={renderCheckboxField}
                     placeholder={t('query_log_enable')}
                     disabled={processing}
                 />
@@ -44,7 +44,7 @@ const Form = (props) => {
                 <Field
                     name="anonymize_client_ip"
                     type="checkbox"
-                    component={renderSelectField}
+                    component={renderCheckboxField}
                     placeholder={t('anonymize_client_ip')}
                     subtitle={t('anonymize_client_ip_desc')}
                     disabled={processing}

client/src/components/Settings/Settings.css

@@ -54,7 +54,11 @@
 }
 
 .form__message--error {
-    color: #cd201f;
+    color: var(--red);
+}
+
+.form__message--left-pad {
+    padding-left: 0.85rem;
 }
 
 .interface__title {
@@ -70,10 +74,6 @@
     content: "";
 }
 
-.dhcp {
-    min-height: 450px;
-}
-
 .form__desc {
     margin-top: 10px;
     font-size: 13px;

client/src/components/Toasts/Toast.js

@@ -1,71 +1,56 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
-import { FAILURE_TOAST_TIMEOUT, SUCCESS_TOAST_TIMEOUT } from '../../helpers/constants';
+import { Trans } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { TOAST_TIMEOUTS } from '../../helpers/constants';
+import { removeToast } from '../../actions';
 
-class Toast extends Component {
-    state = {
-        timerId: null,
+const Toast = ({
+    id,
+    message,
+    type,
+    options,
+}) => {
+    const dispatch = useDispatch();
+    const [timerId, setTimerId] = useState(null);
+
+    const clearRemoveToastTimeout = () => clearTimeout(timerId);
+    const removeCurrentToast = () => dispatch(removeToast(id));
+    const setRemoveToastTimeout = () => {
+        const timeout = TOAST_TIMEOUTS[type];
+        const timerId = setTimeout(removeCurrentToast, timeout);
+
+        setTimerId(timerId);
     };
 
-    componentDidMount() {
-        this.setRemoveToastTimeout();
-    }
+    useEffect(() => {
+        setRemoveToastTimeout();
+    }, []);
 
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    clearRemoveToastTimeout = () => clearTimeout(this.state.timerId);
-
-    setRemoveToastTimeout = () => {
-        const timeout = this.props.type === 'success' ? SUCCESS_TOAST_TIMEOUT : FAILURE_TOAST_TIMEOUT;
-
-        const timerId = setTimeout(() => {
-            this.props.removeToast(this.props.id);
-        }, timeout);
-
-        this.setState({ timerId });
-    };
-
-    showMessage(t, type, message) {
-        if (type === 'notice') {
-            return <span dangerouslySetInnerHTML={{ __html: t(message) }} />;
-        }
-
-        return <Trans>{message}</Trans>;
-    }
-
-    render() {
-        const {
-            type, id, t, message,
-        } = this.props;
-
-        return (
-            <div className={`toast toast--${type}`}
-                 onMouseOver={this.clearRemoveToastTimeout}
-                 onMouseOut={this.setRemoveToastTimeout}>
-                <p className="toast__content">
-                    {this.showMessage(t, type, message)}
-                </p>
-                <button className="toast__dismiss" onClick={() => this.props.removeToast(id)}>
-                    <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2"
-                         viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path d="m18 6-12 12" />
-                        <path d="m6 6 12 12" />
-                    </svg>
-                </button>
-            </div>
-        );
-    }
-}
+    return <div className={`toast toast--${type}`}
+                onMouseOver={clearRemoveToastTimeout}
+                onMouseOut={setRemoveToastTimeout}>
+        <p className="toast__content">
+            <Trans
+                    i18nKey={message}
+                    {...options}
+            />
+        </p>
+        <button className="toast__dismiss" onClick={removeCurrentToast}>
+            <svg stroke="#fff" fill="none" width="20" height="20" strokeWidth="2"
+                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="m18 6-12 12" />
+                <path d="m6 6 12 12" />
+            </svg>
+        </button>
+    </div>;
+};
 
 Toast.propTypes = {
-    t: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
-    removeToast: PropTypes.func.isRequired,
+    options: PropTypes.object,
 };
 
-export default withTranslation()(Toast);
+export default Toast;

client/src/components/Toasts/index.js

@@ -1,41 +1,25 @@
-import { connect } from 'react-redux';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { useSelector, shallowEqual } from 'react-redux';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import * as actionCreators from '../../actions';
+import { TOAST_TRANSITION_TIMEOUT } from '../../helpers/constants';
 import Toast from './Toast';
-
 import './Toast.css';
 
-const Toasts = (props) => (
-        <TransitionGroup className="toasts">
-            {props.toasts.notices?.map((toast) => {
-                const { id } = toast;
-                return (
-                    <CSSTransition
-                        key={id}
-                        timeout={500}
-                        classNames="toast"
-                    >
-                        <Toast removeToast={props.removeToast} {...toast} />
-                    </CSSTransition>
-                );
-            })}
-        </TransitionGroup>
-);
+const Toasts = () => {
+    const toasts = useSelector((state) => state.toasts, shallowEqual);
 
-Toasts.propTypes = {
-    toasts: PropTypes.object,
-    removeToast: PropTypes.func,
+    return <TransitionGroup className="toasts">
+        {toasts.notices?.map((toast) => {
+            const { id } = toast;
+            return <CSSTransition
+                    key={id}
+                    timeout={TOAST_TRANSITION_TIMEOUT}
+                    classNames="toast"
+            >
+                <Toast {...toast} />
+            </CSSTransition>;
+        })}
+    </TransitionGroup>;
 };
 
-const mapStateToProps = (state) => {
-    const { toasts } = state;
-    const props = { toasts };
-    return props;
-};
-
-export default connect(
-    mapStateToProps,
-    actionCreators,
-)(Toasts);
+export default Toasts;

client/src/components/ui/Accordion.js

@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import './Accordion.css';
-
-class Accordion extends Component {
-    state = {
-        isOpen: false,
-    };
-
-    handleClick = () => {
-        this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
-    };
-
-    render() {
-        const accordionClass = this.state.isOpen
-            ? 'accordion__label accordion__label--open'
-            : 'accordion__label';
-
-        return (
-            <div className="accordion">
-                <div
-                    className={accordionClass}
-                    onClick={this.handleClick}
-                >
-                    {this.props.label}
-                </div>
-                {this.state.isOpen && (
-                    <div className="accordion__content">
-                        {this.props.children}
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-Accordion.propTypes = {
-    children: PropTypes.node.isRequired,
-    label: PropTypes.string.isRequired,
-};
-
-export default Accordion;

client/src/components/ui/Card.css

@@ -16,7 +16,11 @@
 
 .card-table-overflow--limited {
     overflow-y: auto;
-    max-height: 280px;
+    max-height: 17.5rem;
+}
+
+.card-table-overflow--limited.clients__table {
+    max-height: 18rem;
 }
 
 .card-actions {
@@ -118,14 +122,14 @@
     }
 }
 
-.card .red {
+.card .logs__cell--red {
     background-color: #fff4f2;
 }
 
-.card .green {
+.card .logs__cell--green {
     background-color: #f1faf3;
 }
 
-.card .blue {
+.card .logs__row--blue {
     background-color: #ecf7ff;
 }

client/src/components/ui/Icons.js

@@ -344,6 +344,14 @@ const Icons = () => (
                 <path d="M60 54.5h8v40h-8zM60 35.5h8v8h-8z" />
             </svg>
         </symbol>
+
+        <symbol id="chevron-down" viewBox="0 0 24 24">
+            <g fill="none" fillRule="evenodd">
+                <path d="M0 0h24v24H0z" fill="#878787" fillOpacity=".01" />
+                <path stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+                      d="M8.036 10.93l3.93 4.07 4.068-3.93" />
+            </g>
+        </symbol>
     </svg>
 );
 

client/src/components/ui/Loading.css

@@ -13,8 +13,7 @@
     z-index: 100;
     width: 100%;
     min-height: 100vh;
-    background-color: rgba(255, 255, 255, 0.6);
-    opacity: 0.8;
+    background-color: rgba(255, 255, 255, 0.48);
 }
 
 .loading:after {

client/src/components/ui/Loading.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import './Loading.css';
 
-const Loading = ({ className }) => (
-    <div className={classNames('loading', className)} />
-);
+const Loading = ({ className, text }) => {
+    const { t } = useTranslation();
+    return <div className={classNames('loading', className)}>{t(text)}</div>;
+};
 
 Loading.propTypes = {
     className: PropTypes.string,
+    text: PropTypes.string,
 };
 
 export default Loading;

client/src/components/ui/ReactTable.css

@@ -13,18 +13,18 @@
     overflow: visible;
 }
 
-.rt-tr-group.red {
+.rt-tr-group.logs__row--red {
     background-color: rgba(223, 56, 18, 0.05);
 }
 
-.rt-tr-group.green {
+.rt-tr-group.logs__row--green {
     background-color: rgba(103, 178, 121, 0.1);
 }
 
-.rt-tr-group.blue {
+.rt-tr-group.logs__row--blue {
     background-color: #e5effd;
 }
 
-.rt-tr-group.yellow {
+.rt-tr-group.logs__row--yellow {
     background-color: var(--yellow-pale);
 }

client/src/components/ui/Tooltip.js

@@ -20,6 +20,7 @@ const Tooltip = ({
     trigger = 'hover',
     delayShow = SHOW_TOOLTIP_DELAY,
     delayHide = HIDE_TOOLTIP_DELAY,
+    onVisibilityChange,
 }) => {
     const { t } = useTranslation();
     const touchEventsAvailable = 'ontouchstart' in window;
@@ -34,33 +35,48 @@ const Tooltip = ({
         delayShowValue = 0;
     }
 
+    const renderTooltip = ({ tooltipRef, getTooltipProps }) => (
+            <div
+                    {...getTooltipProps({
+                        ref: tooltipRef,
+                        className,
+                    })}
+            >
+                {typeof content === 'string' ? t(content) : content}
+            </div>
+    );
+
+    const renderTrigger = ({ getTriggerProps, triggerRef }) => (
+            <span
+                    {...getTriggerProps({
+                        ref: triggerRef,
+                        className: triggerClass,
+                    })}
+            >
+                    {children}
+                </span>
+    );
+
+    renderTooltip.propTypes = {
+        tooltipRef: propTypes.object,
+        getTooltipProps: propTypes.func,
+    };
+
+    renderTrigger.propTypes = {
+        triggerRef: propTypes.object,
+        getTriggerProps: propTypes.func,
+    };
+
     return (
         <TooltipTrigger
             placement={placement}
             trigger={triggerValue}
             delayHide={delayHideValue}
             delayShow={delayShowValue}
-            tooltip={({ tooltipRef, getTooltipProps }) => (
-                <div
-                    {...getTooltipProps({
-                        ref: tooltipRef,
-                        className,
-                    })}
-                >
-                    {typeof content === 'string' ? t(content) : content}
-                </div>
-            )}
+            tooltip={renderTooltip}
+            onVisibilityChange={onVisibilityChange}
         >
-            {({ getTriggerProps, triggerRef }) => (
-                <span
-                    {...getTriggerProps({
-                        ref: triggerRef,
-                        className: triggerClass,
-                    })}
-                >
-                    {children}
-                </span>
-            )}
+            {renderTrigger}
         </TooltipTrigger>
     );
 };
@@ -76,10 +92,11 @@ Tooltip.propTypes = {
     ).isRequired,
     placement: propTypes.string,
     trigger: propTypes.string,
-    delayHide: propTypes.string,
-    delayShow: propTypes.string,
+    delayHide: propTypes.number,
+    delayShow: propTypes.number,
     className: propTypes.string,
     triggerClass: propTypes.string,
+    onVisibilityChange: propTypes.func,
 };
 
 export default Tooltip;

client/src/containers/Dashboard.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { toggleProtection, getClients } from '../actions';
 import { getStats, getStatsConfig, setStatsConfig } from '../actions/stats';
-import { toggleClientBlock, getAccessList } from '../actions/access';
+import { getAccessList } from '../actions/access';
 import Dashboard from '../components/Dashboard';
 
 const mapStateToProps = (state) => {
@@ -16,7 +16,6 @@ const mapDispatchToProps = {
     getStats,
     getStatsConfig,
     setStatsConfig,
-    toggleClientBlock,
     getAccessList,
 };
 

client/src/containers/Logs.js

@@ -1,36 +0,0 @@
-import { connect } from 'react-redux';
-import { getFilteringStatus, setRules } from '../actions/filtering';
-import {
-    getLogs, setLogsPagination, setLogsPage, toggleDetailedLogs,
-} from '../actions/queryLogs';
-import Logs from '../components/Logs';
-import { addSuccessToast } from '../actions/toasts';
-
-const mapStateToProps = (state) => {
-    const {
-        queryLogs, dashboard, filtering, dnsConfig,
-    } = state;
-
-    const props = {
-        queryLogs,
-        dashboard,
-        filtering,
-        dnsConfig,
-    };
-    return props;
-};
-
-const mapDispatchToProps = {
-    getLogs,
-    getFilteringStatus,
-    setRules,
-    addSuccessToast,
-    setLogsPagination,
-    setLogsPage,
-    toggleDetailedLogs,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(Logs);

client/src/helpers/constants.js

@@ -21,6 +21,12 @@ export const R_UNIX_ABSOLUTE_PATH = /^(\/[^/\x00]+)+$/;
 // eslint-disable-next-line no-control-regex
 export const R_WIN_ABSOLUTE_PATH = /^([a-zA-Z]:)?(\\|\/)(?:[^\\/:*?"<>|\x00]+\\)*[^\\/:*?"<>|\x00]*$/;
 
+export const HTML_PAGES = {
+    INSTALL: '/install.html',
+    LOGIN: '/login.html',
+    MAIN: '/',
+};
+
 export const STATS_NAMES = {
     avg_processing_time: 'average_processing_time',
     blocked_filtering: 'Blocked by filters',
@@ -47,8 +53,9 @@ export const REPOSITORY = {
 export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html';
 export const PORT_53_FAQ_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/FAQ#bindinuse';
 
+export const GETTING_STARTED_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/Getting-Started#update';
+
 export const ADDRESS_IN_USE_TEXT = 'address already in use';
-export const UBUNTU_SYSTEM_PORT = 53;
 
 export const INSTALL_FIRST_STEP = 1;
 export const INSTALL_TOTAL_STEPS = 5;
@@ -63,14 +70,14 @@ export const SETTINGS_NAMES = {
 export const STANDARD_DNS_PORT = 53;
 export const STANDARD_WEB_PORT = 80;
 export const STANDARD_HTTPS_PORT = 443;
+export const DNS_OVER_TLS_PORT = 853;
+export const MAX_PORT = 65535;
 
 export const EMPTY_DATE = '0001-01-01T00:00:00Z';
 
 export const DEBOUNCE_TIMEOUT = 300;
 export const DEBOUNCE_FILTER_TIMEOUT = 500;
 export const CHECK_TIMEOUT = 1000;
-export const SUCCESS_TOAST_TIMEOUT = 5000;
-export const FAILURE_TOAST_TIMEOUT = 30000;
 export const HIDE_TOOLTIP_DELAY = 300;
 export const SHOW_TOOLTIP_DELAY = 200;
 export const MODAL_OPEN_TIMEOUT = 150;
@@ -144,7 +151,7 @@ export const UNSAFE_PORTS = [
 
 export const ALL_INTERFACES_IP = '0.0.0.0';
 
-export const DHCP_STATUS_RESPONSE = {
+export const STATUS_RESPONSE = {
     YES: 'yes',
     NO: 'no',
     ERROR: 'error',
@@ -306,9 +313,7 @@ export const DEFAULT_LOGS_FILTER = {
 
 export const DEFAULT_LANGUAGE = 'en';
 
-export const TABLE_DEFAULT_PAGE_SIZE = 25;
-
-export const TABLE_FIRST_PAGE = 0;
+export const QUERY_LOGS_PAGE_LIMIT = 20;
 
 export const LEASES_TABLE_DEFAULT_PAGE_SIZE = 20;
 
@@ -326,85 +331,93 @@ export const FILTERED_STATUS = {
 
 export const RESPONSE_FILTER = {
     ALL: {
-        query: 'all',
-        label: 'all_queries',
+        QUERY: 'all',
+        LABEL: 'all_queries',
     },
     FILTERED: {
-        query: 'filtered',
-        label: 'filtered',
+        QUERY: 'filtered',
+        LABEL: 'filtered',
     },
     PROCESSED: {
-        query: 'processed',
-        label: 'show_processed_responses',
+        QUERY: 'processed',
+        LABEL: 'show_processed_responses',
     },
     BLOCKED: {
-        query: 'blocked',
-        label: 'show_blocked_responses',
+        QUERY: 'blocked',
+        LABEL: 'show_blocked_responses',
     },
     BLOCKED_THREATS: {
-        query: 'blocked_safebrowsing',
-        label: 'blocked_threats',
+        QUERY: 'blocked_safebrowsing',
+        LABEL: 'blocked_threats',
     },
     BLOCKED_ADULT_WEBSITES: {
-        query: 'blocked_parental',
-        label: 'blocked_adult_websites',
+        QUERY: 'blocked_parental',
+        LABEL: 'blocked_adult_websites',
     },
     ALLOWED: {
-        query: 'whitelisted',
-        label: 'allowed',
+        QUERY: 'whitelisted',
+        LABEL: 'allowed',
     },
     REWRITTEN: {
-        query: 'rewritten',
-        label: 'rewritten',
+        QUERY: 'rewritten',
+        LABEL: 'rewritten',
     },
     SAFE_SEARCH: {
-        query: 'safe_search',
-        label: 'safe_search',
+        QUERY: 'safe_search',
+        LABEL: 'safe_search',
     },
 };
 
 export const RESPONSE_FILTER_QUERIES = Object.values(RESPONSE_FILTER)
-    .reduce((acc, { query }) => {
-        acc[query] = query;
+    .reduce((acc, { QUERY }) => {
+        acc[QUERY] = QUERY;
         return acc;
     }, {});
 
+export const QUERY_STATUS_COLORS = {
+    BLUE: 'blue',
+    GREEN: 'green',
+    RED: 'red',
+    WHITE: 'white',
+    YELLOW: 'yellow',
+};
+
 export const FILTERED_STATUS_TO_META_MAP = {
     [FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
-        label: RESPONSE_FILTER.ALLOWED.label,
-        color: 'green',
+        LABEL: RESPONSE_FILTER.ALLOWED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.GREEN,
     },
     [FILTERED_STATUS.NOT_FILTERED_NOT_FOUND]: {
-        label: RESPONSE_FILTER.PROCESSED.label,
-        color: 'white',
+        LABEL: RESPONSE_FILTER.PROCESSED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.WHITE,
     },
     [FILTERED_STATUS.FILTERED_BLOCKED_SERVICE]: {
-        label: RESPONSE_FILTER.BLOCKED.label,
-        color: 'red',
+        LABEL: RESPONSE_FILTER.BLOCKED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.RED,
     },
     [FILTERED_STATUS.FILTERED_SAFE_SEARCH]: {
-        label: RESPONSE_FILTER.SAFE_SEARCH.label,
-        color: 'yellow',
+        LABEL: RESPONSE_FILTER.SAFE_SEARCH.LABEL,
+        COLOR: QUERY_STATUS_COLORS.YELLOW,
     },
     [FILTERED_STATUS.FILTERED_BLACK_LIST]: {
-        label: RESPONSE_FILTER.BLOCKED.label,
-        color: 'red',
+        LABEL: RESPONSE_FILTER.BLOCKED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.RED,
     },
     [FILTERED_STATUS.REWRITE]: {
-        label: RESPONSE_FILTER.REWRITTEN.label,
-        color: 'blue',
+        LABEL: RESPONSE_FILTER.REWRITTEN.LABEL,
+        COLOR: QUERY_STATUS_COLORS.BLUE,
     },
     [FILTERED_STATUS.REWRITE_HOSTS]: {
-        label: RESPONSE_FILTER.REWRITTEN.label,
-        color: 'blue',
+        LABEL: RESPONSE_FILTER.REWRITTEN.LABEL,
+        COLOR: QUERY_STATUS_COLORS.BLUE,
     },
     [FILTERED_STATUS.FILTERED_SAFE_BROWSING]: {
-        label: RESPONSE_FILTER.BLOCKED_THREATS.label,
-        color: 'yellow',
+        LABEL: RESPONSE_FILTER.BLOCKED_THREATS.LABEL,
+        COLOR: QUERY_STATUS_COLORS.YELLOW,
     },
     [FILTERED_STATUS.FILTERED_PARENTAL]: {
-        label: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.label,
-        color: 'yellow',
+        LABEL: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.LABEL,
+        COLOR: QUERY_STATUS_COLORS.YELLOW,
     },
 };
 
@@ -458,6 +471,12 @@ export const IP_MATCH_LIST_STATUS = {
     CIDR: 'CIDR', // the ip is in the specified CIDR range
 };
 
+export const DHCP_FORM_NAMES = {
+    DHCPv4: 'dhcpv4',
+    DHCPv6: 'dhcpv6',
+    DHCP_INTERFACES: 'dhcpInterfaces',
+};
+
 export const FORM_NAME = {
     UPSTREAM: 'upstream',
     DOMAIN_CHECK: 'domainCheck',
@@ -465,7 +484,6 @@ export const FORM_NAME = {
     REWRITES: 'rewrites',
     LOGS_FILTER: 'logsFilter',
     CLIENT: 'client',
-    DHCP: 'dhcp',
     LEASE: 'lease',
     ACCESS: 'access',
     BLOCKING_MODE: 'blockingMode',
@@ -477,9 +495,56 @@ export const FORM_NAME = {
     INSTALL: 'install',
     LOGIN: 'login',
     CACHE: 'cache',
+    ...DHCP_FORM_NAMES,
 };
 
 export const SMALL_SCREEN_SIZE = 767;
 export const MEDIUM_SCREEN_SIZE = 1023;
 
 export const SECONDS_IN_HOUR = 60 * 60;
+
+export const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+
+export const DHCP_VALUES_PLACEHOLDERS = {
+    ipv4: {
+        subnet_mask: '255.255.255.0',
+        lease_duration: SECONDS_IN_DAY.toString(),
+    },
+    ipv6: {
+        range_start: '2001::1',
+        range_end: 'ff',
+        lease_duration: SECONDS_IN_DAY.toString(),
+    },
+};
+
+export const DHCP_DESCRIPTION_PLACEHOLDERS = {
+    ipv4: {
+        gateway_ip: 'dhcp_form_gateway_input',
+        subnet_mask: 'dhcp_form_subnet_input',
+        range_start: 'dhcp_form_range_start',
+        range_end: 'dhcp_form_range_end',
+        lease_duration: 'dhcp_form_lease_input',
+    },
+    ipv6: {
+        range_start: 'dhcp_form_range_start',
+        range_end: 'dhcp_form_range_end',
+        lease_duration: 'dhcp_form_lease_input',
+    },
+};
+
+export const TOAST_TRANSITION_TIMEOUT = 500;
+
+export const TOAST_TYPES = {
+    SUCCESS: 'success',
+    ERROR: 'error',
+    NOTICE: 'notice',
+};
+
+export const SUCCESS_TOAST_TIMEOUT = 5000;
+export const FAILURE_TOAST_TIMEOUT = 30000;
+
+export const TOAST_TIMEOUTS = {
+    [TOAST_TYPES.SUCCESS]: SUCCESS_TOAST_TIMEOUT,
+    [TOAST_TYPES.ERROR]: FAILURE_TOAST_TIMEOUT,
+    [TOAST_TYPES.NOTICE]: FAILURE_TOAST_TIMEOUT,
+};

client/src/helpers/filters/filters.json

@@ -25,10 +25,10 @@
             "source": "https://adguardteam.github.io/AdGuardSDNSFilter/Filters/filter.txt"
         },
         "adaway-default-blocklist": {
-            "name": "AdAway default blocklist",
+            "name": "AdAway Default Blocklist",
             "categoryId": "general",
             "homepage": "https://github.com/AdAway/adaway.github.io/",
-            "source": "https://raw.githubusercontent.com/AdAway/adaway.github.io/master/hosts.txt"
+            "source": "https://adaway.org/hosts.txt"
         },
         "peter-lowe-list": {
             "name": "Peter Lowe's List",
@@ -70,7 +70,7 @@
             "name": "NoCoin Filter List",
             "categoryId": "security",
             "homepage": "https://github.com/hoshsadiq/adblock-nocoin-list/",
-            "source": "https://raw.githubusercontent.com/hoshsadiq/adblock-nocoin-list/master/nocoin.txt"
+            "source": "https://raw.githubusercontent.com/hoshsadiq/adblock-nocoin-list/master/hosts.txt"
         },
         "the-big-list-of-hacked-malware-web-sites": {
             "name": "The Big List of Hacked Malware Web Sites",
@@ -153,8 +153,8 @@
         "BarbBlock": {
             "name": "BarbBlock",
             "categoryId": "other",
-            "homepage": "https://ssl.bblck.me/",
-            "source": "https://ssl.bblck.me/blacklists/ublock-origin.txt"
+            "homepage": "https://github.com/paulgb/BarbBlock/",
+            "source": "https://paulgb.github.io/BarbBlock/blacklists/hosts-file.txt"
         }
     }
 }

client/src/helpers/form.js

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
+import classNames from 'classnames';
 import { createOnBlurHandler } from './helpers';
 import { R_UNIX_ABSOLUTE_PATH, R_WIN_ABSOLUTE_PATH } from './constants';
 
@@ -24,11 +26,12 @@ export const renderField = (props, elementType) => {
         step,
         onBlur,
     });
+
     return (
         <>
             {element}
             {!disabled && touched && error
-            && <span className="form__message form__message--error">{error}</span>}
+            && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
         </>
     );
 };
@@ -47,7 +50,7 @@ renderField.propTypes = {
     step: PropTypes.number,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
 };
 
@@ -71,7 +74,7 @@ export const renderGroupField = ({
     const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
 
     return (
-        <Fragment>
+        <>
             <div className="input-group">
                 <input
                     {...input}
@@ -98,8 +101,8 @@ export const renderGroupField = ({
                 }
             </div>
             {!disabled && touched && error
-            && <span className="form__message form__message--error">{error}</span>}
-        </Fragment>
+            && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
+        </>
     );
 };
 
@@ -115,7 +118,7 @@ renderGroupField.propTypes = {
     removeField: PropTypes.func,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
     normalizeOnBlur: PropTypes.func,
 };
@@ -137,7 +140,8 @@ export const renderRadioField = ({
     </label>
     {!disabled
     && touched
-    && (error && <span className="form__message form__message--error">{error}</span>)}
+    && error
+    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </Fragment>;
 
 renderRadioField.propTypes = {
@@ -147,11 +151,11 @@ renderRadioField.propTypes = {
     disabled: PropTypes.bool,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
 };
 
-export const renderSelectField = ({
+export const renderCheckboxField = ({
     input,
     placeholder,
     subtitle,
@@ -163,7 +167,8 @@ export const renderSelectField = ({
 }) => <>
     <label className={`checkbox ${modifier}`} onClick={onClick}>
         <span className="checkbox__marker" />
-        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} checked={input.checked || checked}/>
+        <input {...input} type="checkbox" className="checkbox__input" disabled={disabled}
+               checked={input.checked || checked} />
         <span className="checkbox__label">
                         <span className="checkbox__label-text checkbox__label-text--long">
                             <span className="checkbox__label-title">{placeholder}</span>
@@ -178,10 +183,11 @@ export const renderSelectField = ({
     </label>
     {!disabled
     && touched
-    && error && <span className="form__message form__message--error">{error}</span>}
+    && error
+    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </>;
 
-renderSelectField.propTypes = {
+renderCheckboxField.propTypes = {
     input: PropTypes.object.isRequired,
     placeholder: PropTypes.string,
     subtitle: PropTypes.string,
@@ -191,7 +197,37 @@ renderSelectField.propTypes = {
     checked: PropTypes.bool,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
+    }).isRequired,
+};
+
+export const renderSelectField = ({
+    input,
+    meta: { touched, error },
+    children,
+    label,
+}) => {
+    const showWarning = touched && error;
+    const selectClass = classNames('form-control custom-select', {
+        'select--no-warning': !showWarning,
+    });
+
+    return <>
+        {label && <label><Trans>{label}</Trans></label>}
+        <select {...input} className={selectClass}>{children}</select>
+        {showWarning
+        && <span className="form__message form__message--error form__message--left-pad"><Trans>{error}</Trans></span>}
+    </>;
+};
+
+renderSelectField.propTypes = {
+    input: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
+    label: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]).isRequired,
+    meta: PropTypes.shape({
+        touched: PropTypes.bool,
+        error: PropTypes.string,
     }).isRequired,
 };
 
@@ -218,7 +254,7 @@ export const renderServiceField = ({
         </svg>
     </label>
     {!disabled && touched && error
-    && <span className="form__message form__message--error">{error}</span>}
+    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
 </Fragment>;
 
 renderServiceField.propTypes = {
@@ -229,10 +265,12 @@ renderServiceField.propTypes = {
     icon: PropTypes.string,
     meta: PropTypes.shape({
         touched: PropTypes.bool,
-        error: PropTypes.object,
+        error: PropTypes.string,
     }).isRequired,
 };
 
+export const getLastIpv4Octet = (ipv4) => parseInt(ipv4.slice(ipv4.lastIndexOf('.') + 1), 10);
+
 /**
  * @param value {string}
  * @returns {*|number}

client/src/helpers/formatClientCell.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import { normalizeWhois } from './helpers';
-import { WHOIS_ICONS } from './constants';
-
-const getFormattedWhois = (whois) => {
-    const whoisInfo = normalizeWhois(whois);
-    return (
-        Object.keys(whoisInfo)
-            .map((key) => {
-                const icon = WHOIS_ICONS[key];
-                return (
-                    <span className="logs__whois text-muted " key={key} title={whoisInfo[key]}>
-                    {icon && (
-                        <>
-                            <svg className="logs__whois-icon icons">
-                                <use xlinkHref={`#${icon}`} />
-                            </svg>
-                            &nbsp;
-                        </>
-                    )}{whoisInfo[key]}
-                </span>
-                );
-            })
-    );
-};
-
-export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
-    const { value, original: { info } } = row;
-    let whoisContainer = '';
-    let nameContainer = value;
-
-    if (info) {
-        const { name, whois_info } = info;
-        const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
-
-        if (name) {
-            if (isLogs) {
-                nameContainer = !whoisAvailable && isDetailed
-                    ? (
-                        <small title={value}>{value}</small>
-                    ) : (
-                        <div className="logs__text logs__text--nowrap" title={`${name} (${value})`}>
-                            {name}&nbsp;<small>{`(${value})`}</small>
-                        </div>
-                    );
-            } else {
-                nameContainer = (
-                    <div
-                        className="logs__text logs__text--nowrap"
-                        title={`${name} (${value})`}
-                    >
-                        {name}&nbsp;<small>{`(${value})`}</small>
-                    </div>
-                );
-            }
-        }
-
-        if (whoisAvailable && isDetailed) {
-            whoisContainer = (
-                <div className="logs__text logs__text--wrap logs__text--whois">
-                    {getFormattedWhois(whois_info)}
-                </div>
-            );
-        }
-    }
-
-    return (
-        <div className="logs__text mw-100" title={value}>
-            <>
-                {nameContainer}
-                {whoisContainer}
-            </>
-        </div>
-    );
-};