* : merge with master

client/src/helpers/constants.js

@@ -54,6 +54,8 @@ 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 UPSTREAM_CONFIGURATION_WIKI_LINK = 'https://github.com/AdguardTeam/AdGuardHome/wiki/Configuration#upstreams';
 
+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 INSTALL_FIRST_STEP = 1;
@@ -70,6 +72,7 @@ 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 DNS_OVER_QUIC_PORT = 784;
 export const MAX_PORT = 65535;
 
 export const EMPTY_DATE = '0001-01-01T00:00:00Z';
@@ -77,8 +80,6 @@ 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;
@@ -541,8 +542,17 @@ export const TOAST_TYPES = {
     NOTICE: 'notice',
 };
 
+export const SUCCESS_TOAST_TIMEOUT = 5000;
+export const FAILURE_TOAST_TIMEOUT = 30000;
+
 export const TOAST_TIMEOUTS = {
-    [TOAST_TYPES.SUCCESS]: 5000,
-    [TOAST_TYPES.ERROR]: 30000,
-    [TOAST_TYPES.NOTICE]: 30000,
+    [TOAST_TYPES.SUCCESS]: SUCCESS_TOAST_TIMEOUT,
+    [TOAST_TYPES.ERROR]: FAILURE_TOAST_TIMEOUT,
+    [TOAST_TYPES.NOTICE]: FAILURE_TOAST_TIMEOUT,
+};
+
+export const ADDRESS_TYPES = {
+    IP: 'IP',
+    CIDR: 'CIDR',
+    UNKNOWN: 'UNKNOWN',
 };

client/src/helpers/helpers.js

@@ -14,6 +14,7 @@ import queryString from 'query-string';
 import { getTrackerData } from './trackers/trackers';
 
 import {
+    ADDRESS_TYPES,
     CHECK_TIMEOUT,
     CUSTOM_FILTERING_RULES_ID,
     DEFAULT_DATE_FORMAT_OPTIONS,
@@ -509,6 +510,18 @@ const isIpMatchCidr = (parsedIp, parsedCidr) => {
     }
 };
 
+export const isIpInCidr = (ip, cidr) => {
+    try {
+        const parsedIp = ipaddr.parse(ip);
+        const parsedCidr = ipaddr.parseCIDR(cidr);
+
+        return isIpMatchCidr(parsedIp, parsedCidr);
+    } catch (e) {
+        console.error(e);
+        return false;
+    }
+};
+
 /**
  * The purpose of this method is to quickly check
  * if this IP can possibly be in the specified CIDR range.
@@ -578,6 +591,29 @@ const isIpQuickMatchCIDR = (ip, listItem) => {
     return false;
 };
 
+/**
+ *
+ * @param ipOrCidr
+ * @returns {'IP' | 'CIDR' | 'UNKNOWN'}
+ *
+ */
+export const findAddressType = (address) => {
+    try {
+        const cidrMaybe = address.includes('/');
+
+        if (!cidrMaybe && ipaddr.isValid(address)) {
+            return ADDRESS_TYPES.IP;
+        }
+        if (cidrMaybe && ipaddr.parseCIDR(address)) {
+            return ADDRESS_TYPES.CIDR;
+        }
+
+        return ADDRESS_TYPES.UNKNOWN;
+    } catch (e) {
+        return ADDRESS_TYPES.UNKNOWN;
+    }
+};
+
 /**
  * @param ip {string}
  * @param list {string}
@@ -622,6 +658,42 @@ export const getIpMatchListStatus = (ip, list) => {
     }
 };
 
+/**
+ * @param ids {string[]}
+ * @returns {Object}
+ */
+export const separateIpsAndCidrs = (ids) => ids.reduce((acc, curr) => {
+    const addressType = findAddressType(curr);
+
+    if (addressType === ADDRESS_TYPES.IP) {
+        acc.ips.push(curr);
+    }
+    if (addressType === ADDRESS_TYPES.CIDR) {
+        acc.cidrs.push(curr);
+    }
+    return acc;
+}, { ips: [], cidrs: [] });
+
+export const countClientsStatistics = (ids, autoClients) => {
+    const { ips, cidrs } = separateIpsAndCidrs(ids);
+
+    const ipsCount = ips.reduce((acc, curr) => {
+        const count = autoClients[curr] || 0;
+        return acc + count;
+    }, 0);
+
+    const cidrsCount = Object.entries(autoClients)
+        .reduce((acc, curr) => {
+            const [id, count] = curr;
+            if (cidrs.some((cidr) => isIpInCidr(id, cidr))) {
+            // eslint-disable-next-line no-param-reassign
+                acc += count;
+            }
+            return acc;
+        }, 0);
+
+    return ipsCount + cidrsCount;
+};
 
 /**
  * @param {string} elapsedMs

client/src/helpers/renderFormattedClientCell.js

@@ -9,7 +9,7 @@ const getFormattedWhois = (whois) => {
             .map((key) => {
                 const icon = WHOIS_ICONS[key];
                 return (
-                    <span className="logs__whois text-muted " key={key} title={whoisInfo[key]}>
+                    <span className="logs__whois text-muted" key={key} title={whoisInfo[key]}>
                     {icon && (
                         <>
                             <svg className="logs__whois-icon icons icon--18">

client/src/helpers/validators.js

@@ -180,6 +180,12 @@ export const validatePortTLS = (value) => {
     return undefined;
 };
 
+/**
+ * @param value {number}
+ * @returns {undefined|string}
+ */
+export const validatePortQuic = validatePortTLS;
+
 /**
  * @param value {number}
  * @returns {undefined|string}