- client: Add default mode in the DNS settings

client/src/__locales/en.json

@@ -3,6 +3,8 @@
     "example_upstream_reserved": "You can specify DNS upstream <0>for the specific domain(s)</0>",
     "upstream_parallel": "Use parallel requests to speed up resolving by simultaneously querying all upstream servers",
     "parallel_requests": "Parallel requests",
+    "load_balancing": "Load-balancing",
+    "load_balancing_desc": "Query one server at a time. AdGuard Home will use the weighted random algorithm to pick the server so that the fastest server will be used more often.",
     "bootstrap_dns": "Bootstrap DNS servers",
     "bootstrap_dns_desc": "Bootstrap DNS servers are used to resolve IP addresses of the DoH/DoT resolvers you specify as upstreams.",
     "check_dhcp_servers": "Check for DHCP servers",

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

@@ -21,6 +21,14 @@ const getInputFields = () => [{
     className: 'form-control form-control--textarea font-monospace',
     placeholder: 'upstream_dns',
 },
+{
+    name: 'dnsRequestOption',
+    type: 'radio',
+    value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
+    component: renderRadioField,
+    subtitle: 'load_balancing_desc',
+    placeholder: 'load_balancing',
+},
 {
     name: 'dnsRequestOption',
     type: 'radio',

client/src/components/Settings/Dns/Upstream/index.js

@@ -1,83 +1,112 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import cn from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 import Form from './Form';
 import Card from '../../../ui/Card';
 import { DNS_REQUEST_OPTIONS } from '../../../../helpers/constants';
 
+const getInitialDnsRequestOption = ({
+    parallel_requests,
+    fastest_addr,
+}) => {
+    if (parallel_requests) {
+        return DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS;
+    }
+    if (fastest_addr) {
+        return DNS_REQUEST_OPTIONS.FASTEST_ADDR;
+    }
+    return DNS_REQUEST_OPTIONS.LOAD_BALANCING;
+};
+
+const Upstream = (props) => {
+    const [t] = useTranslation();
 
-class Upstream extends Component {
-    handleSubmit = ({ bootstrap_dns, upstream_dns, dnsRequestOption }) => {
-        const disabledOption = dnsRequestOption === DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS
-            ? DNS_REQUEST_OPTIONS.FASTEST_ADDR
-            : DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS;
+    const handleSubmit = ({ bootstrap_dns, upstream_dns, dnsRequestOption }) => {
+        let options;
+
+        switch (dnsRequestOption) {
+            case DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS:
+                options = {
+                    [DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS]: true,
+                    [DNS_REQUEST_OPTIONS.FASTEST_ADDR]: false,
+                };
+                break;
+            case DNS_REQUEST_OPTIONS.FASTEST_ADDR:
+                options = {
+                    [DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS]: false,
+                    [DNS_REQUEST_OPTIONS.FASTEST_ADDR]: true,
+                };
+                break;
+            case DNS_REQUEST_OPTIONS.LOAD_BALANCING:
+                options = {
+                    [DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS]: false,
+                    [DNS_REQUEST_OPTIONS.FASTEST_ADDR]: false,
+                };
+                break;
+            default:
+                break;
+        }
 
         const formattedValues = {
             bootstrap_dns,
             upstream_dns,
-            [dnsRequestOption]: true,
-            [disabledOption]: false,
+            ...options,
         };
 
-        this.props.setDnsConfig(formattedValues);
+        props.setDnsConfig(formattedValues);
     };
 
-    handleTest = (values) => {
-        this.props.testUpstream(values);
+    const handleTest = (values) => {
+        props.testUpstream(values);
     };
 
-    render() {
-        const {
-            t,
-            processingTestUpstream,
-            dnsConfig: {
-                upstream_dns,
-                bootstrap_dns,
-                fastest_addr,
-                parallel_requests,
-                processingSetConfig,
-            },
-        } = this.props;
-
-        const dnsRequestOption = cn({
-            parallel_requests,
+    const {
+        processingTestUpstream,
+        dnsConfig: {
+            upstream_dns,
+            bootstrap_dns,
             fastest_addr,
-        });
+            parallel_requests,
+            processingSetConfig,
+        },
+    } = props;
 
-        return (
-            <Card
-                title={t('upstream_dns')}
-                subtitle={t('upstream_dns_hint')}
-                bodyType="card-body box-body--settings"
-            >
-                <div className="row">
-                    <div className="col">
-                        <Form
-                            initialValues={{
-                                upstream_dns,
-                                bootstrap_dns,
-                                dnsRequestOption,
-                            }}
-                            testUpstream={this.handleTest}
-                            onSubmit={this.handleSubmit}
-                            processingTestUpstream={processingTestUpstream}
-                            processingSetConfig={processingSetConfig}
-                        />
-                    </div>
+    const dnsRequestOption = getInitialDnsRequestOption({
+        parallel_requests,
+        fastest_addr,
+    });
+
+    return (
+        <Card
+            title={t('upstream_dns')}
+            subtitle={t('upstream_dns_hint')}
+            bodyType="card-body box-body--settings"
+        >
+            <div className="row">
+                <div className="col">
+                    <Form
+                        initialValues={{
+                            upstream_dns,
+                            bootstrap_dns,
+                            dnsRequestOption,
+                        }}
+                        testUpstream={handleTest}
+                        onSubmit={handleSubmit}
+                        processingTestUpstream={processingTestUpstream}
+                        processingSetConfig={processingSetConfig}
+                    />
                 </div>
-            </Card>
-        );
-    }
-}
+            </div>
+        </Card>
+    );
+};
 
 Upstream.propTypes = {
     testUpstream: PropTypes.func.isRequired,
     processingTestUpstream: PropTypes.bool.isRequired,
-    t: PropTypes.func.isRequired,
     dnsConfig: PropTypes.object.isRequired,
     setDnsConfig: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Upstream);
+export default Upstream;

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

@@ -1,54 +1,53 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Upstream from './Upstream';
 import Access from './Access';
 import Config from './Config';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
 
-class Dns extends Component {
-    componentDidMount() {
-        this.props.getAccessList();
-        this.props.getDnsConfig();
-    }
+const Dns = (props) => {
+    const [t] = useTranslation();
 
-    render() {
-        const {
-            t,
-            settings,
-            access,
-            setAccessList,
-            testUpstream,
-            dnsConfig,
-            setDnsConfig,
-        } = this.props;
+    useEffect(() => {
+        props.getAccessList();
+        props.getDnsConfig();
+    }, []);
 
-        const isDataLoading = access.processing || dnsConfig.processingGetConfig;
+    const {
+        settings,
+        access,
+        setAccessList,
+        testUpstream,
+        dnsConfig,
+        setDnsConfig,
+    } = props;
 
-        return (
-            <Fragment>
-                <PageTitle title={t('dns_settings')} />
-                {isDataLoading
-                    ? <Loading />
-                    : <Fragment>
-                        <Upstream
-                            processingTestUpstream={settings.processingTestUpstream}
-                            testUpstream={testUpstream}
-                            dnsConfig={dnsConfig}
-                            setDnsConfig={setDnsConfig}
-                        />
-                        <Config
-                            dnsConfig={dnsConfig}
-                            setDnsConfig={setDnsConfig}
-                        />
-                        <Access access={access} setAccessList={setAccessList} />
-                    </Fragment>}
-            </Fragment>
-        );
-    }
-}
+    const isDataLoading = access.processing || dnsConfig.processingGetConfig;
+
+    return (
+        <>
+            <PageTitle title={t('dns_settings')} />
+            {isDataLoading
+                ? <Loading />
+                : <>
+                    <Upstream
+                        processingTestUpstream={settings.processingTestUpstream}
+                        testUpstream={testUpstream}
+                        dnsConfig={dnsConfig}
+                        setDnsConfig={setDnsConfig}
+                    />
+                    <Config
+                        dnsConfig={dnsConfig}
+                        setDnsConfig={setDnsConfig}
+                    />
+                    <Access access={access} setAccessList={setAccessList} />
+                </>}
+        </>
+    );
+};
 
 Dns.propTypes = {
     settings: PropTypes.object.isRequired,
@@ -59,7 +58,6 @@ Dns.propTypes = {
     dnsConfig: PropTypes.object.isRequired,
     setDnsConfig: PropTypes.func.isRequired,
     getDnsConfig: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
 };
 
-export default withTranslation()(Dns);
+export default Dns;

client/src/helpers/constants.js

@@ -378,10 +378,11 @@ export const ACTION = {
 export const DNS_REQUEST_OPTIONS = {
     PARALLEL_REQUESTS: 'parallel_requests',
     FASTEST_ADDR: 'fastest_addr',
+    LOAD_BALANCING: 'load_balancing',
 };
 
 export const IP_MATCH_LIST_STATUS = {
     NOT_FOUND: 'NOT_FOUND', // not found in the list
-    EXACT: 'EXACT', // found exact match (ip === ip)
+    EXACT: 'EXACT', // found exact match (including the match of short and long forms)
     CIDR: 'CIDR', // the ip is in the specified CIDR range
 };